174 lines
3.4 KiB
CSS
174 lines
3.4 KiB
CSS
{% set primary = '#C6C' %}
|
|
{% set secondary = '#68C' %}
|
|
{% set error = '#D44' %}
|
|
{% set background = '#202020' %}
|
|
{% set text = '#DDD' %}
|
|
|
|
/* variables */
|
|
:root {
|
|
--text: {{text}};
|
|
--bg-color: {{background}};
|
|
--bg-color-dark: {{desaturate(darken(primary, 0.85), 0.8)}};
|
|
--bg-color-lighter: {{lighten(background, 0.075)}};
|
|
--bg-dark: {{desaturate(darken(primary, 0.90), 0.5)}};
|
|
--primary: {{primary}};
|
|
--valid: {{desaturate(darken('green', 0.5), 0.5)}};
|
|
--shadow-color: {{rgba('black', 0.5)}};
|
|
|
|
--shadow: 0 4px 4px 0 var(--shadow-color), 0 6px 10px 0 var(--shadow-color);
|
|
--border-radius: 10px;
|
|
}
|
|
|
|
|
|
/* general */
|
|
*:not(#content), *:not(.section) {
|
|
transition-property: color, background-color, border, width, height;
|
|
transition-timing-function: ease-in-out;
|
|
transition-duration: 0.35s;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-dark);
|
|
color: var(--text);
|
|
}
|
|
|
|
a {
|
|
color: {{saturate(lighten(primary, 0.4), 0.2)}};
|
|
text-decoration: none;
|
|
}
|
|
|
|
select {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
}
|
|
|
|
input, textarea, select {
|
|
color: var(--text);
|
|
border: 1px solid transparent;
|
|
background-color: var(--bg-color);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
input:hover, textarea:hover, select:hover {
|
|
color: {{desaturate(primary, 0.6)}};
|
|
border-color: {{desaturate(primary, 0.6)}};
|
|
}
|
|
|
|
input:focus, textarea:focus, select:focus {
|
|
color: {{primary}};
|
|
background-color: var(--bg-dark);
|
|
border-color: {{primary}};
|
|
}
|
|
|
|
input:disabled, textarea:disabled, select:disabled {
|
|
color: {{desaturate(darken(primary, 0.2), 0.6)}}
|
|
}
|
|
|
|
a:hover {
|
|
color: {{saturate(primary, 0.8)}};
|
|
}
|
|
|
|
#content {
|
|
background-color: var(--bg-color);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.section {
|
|
background-color: var(--bg-color-lighter);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
tr {
|
|
border: 1px solid black;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
tr:nth-child(odd):not(.header) td {
|
|
background-color: {{desaturate(darken(primary, 0.80), 0.9)}};
|
|
}
|
|
|
|
tr:nth-child(even) td {
|
|
background-color: {{desaturate(darken(primary, 0.75), 1)}};
|
|
}
|
|
|
|
tr:not(.header):hover td {
|
|
color: var(--bg-color-dark);
|
|
background-color: {{desaturate(primary, 0.2)}};
|
|
}
|
|
|
|
tr:not(.header):hover td a {
|
|
color: var(--bg-color-dark);
|
|
}
|
|
|
|
.new td {
|
|
background-color: {{desaturate(darken(primary, 0.70), 0.5)}} !important;
|
|
}
|
|
|
|
.new:hover td {
|
|
background-color: {{desaturate(primary, 0.1)}} !important;
|
|
}
|
|
|
|
.fail td {
|
|
background-color: {{darken(error, 0.75)}} !important;
|
|
}
|
|
|
|
.fail:hover td {
|
|
background-color: {{darken(saturate(error, 0.3), 0.2)}} !important;
|
|
}
|
|
|
|
/* Dropdown menus */
|
|
.menu {
|
|
background-color: var(--bg-color-dark);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
/*.menu summary {
|
|
color: {{desaturate(primary, 0.6)}};
|
|
}*/
|
|
|
|
.submenu details[open] {
|
|
background-color: {{desaturate(darken(primary, 0.87), 0.8)}};
|
|
}
|
|
|
|
|
|
/* admin area */
|
|
#setmenu .selected{
|
|
background-color: {{lighten(background, 0.20)}};
|
|
}
|
|
|
|
.setmenu-item {
|
|
color: {{text}}
|
|
}
|
|
|
|
.setmenu-item:hover {
|
|
color: {{primary}};
|
|
}
|
|
|
|
.admin summary[open] {
|
|
border-bottom: 1px solid var(--primary);
|
|
}
|
|
|
|
.stats .grid-item, .info .grid-item {
|
|
background-color: {{desaturate(darken(primary, 0.75), 0.9)}};
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.stats .grid-item:hover, .info .grid-item:hover {
|
|
background-color: {{desaturate(darken(primary, 0.70), 0.2)}};
|
|
}
|
|
|
|
|
|
/* setup page */
|
|
.error {
|
|
color: {{error}};
|
|
background-color: {{desaturate(darken(error, 0.85), 0.50)}};
|
|
}
|
|
|
|
|
|
/* account page */
|
|
.tokens .active td {
|
|
background-color: var(--valid);
|
|
}
|
|
|
|
{% include 'layout.css' %}
|