84 lines
1.4 KiB
CSS
84 lines
1.4 KiB
CSS
/* ========== THEME ========== */
|
|
body {
|
|
--text-color: #262626;
|
|
--text-color2: #3d3d3d;
|
|
--text-good: green;
|
|
--text-bad: red;
|
|
|
|
--brand-bg: #EDF3FE;
|
|
--brand-text: #5488F7;
|
|
|
|
--bg-color: #FEFEFE;
|
|
--bg-selected: #F1F1F1;
|
|
--bg-element: #a7a7a7;
|
|
--bg-action: #5181fe;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
/* defaults to dark theme */
|
|
body {
|
|
--text-color: #eee;
|
|
--text-color2: #bbb;
|
|
--text-good: greenyellow;
|
|
--text-bad: orangered;
|
|
|
|
--brand-bg: #393E50;
|
|
--brand-text: #5F93F3;
|
|
|
|
--bg-color: #2d2c33;
|
|
--bg-selected: #424248;
|
|
--bg-element: #626268;
|
|
--bg-action: #4a70d5;
|
|
}
|
|
}
|
|
|
|
* {
|
|
background: transparent;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
background: var(--bg-color);
|
|
margin: 0; /* браузеры зачем-то ставят свое значение */
|
|
}
|
|
|
|
#content {
|
|
margin: 0.5em;
|
|
}
|
|
|
|
/* ========== MAIN STYLES ========== */
|
|
|
|
header > h1 {
|
|
text-align: center;
|
|
background-color: var(--brand-bg);
|
|
padding: 0.5em;
|
|
margin: 0;
|
|
}
|
|
|
|
header * {
|
|
color: var(--brand-text);
|
|
}
|
|
|
|
header > nav {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
header > nav > a {
|
|
margin: 0.5em;
|
|
}
|
|
|
|
.value-good {
|
|
color: var(--text-good);
|
|
}
|
|
|
|
.value-bad {
|
|
color: var(--text-bad);
|
|
} |