(dark theme) |
(attempt to use css variables, this is probably way overcomplicated (and maybe it won't work)) |
||
Line 1: | Line 1: | ||
.b9s-table { | .b9s-table { | ||
text-align: center; | text-align: center; | ||
--loaded-l: #c8ffc8; | |||
--missing-l: #ffc8c8; | |||
--corrupt-l: #c8c8ff; | |||
--loaded-d: #4b804b; | |||
--missing-d: #804b4b; | |||
--corrupt-d: #4b4b80; | |||
--loaded: var(--loaded-l); | |||
--missing: var(--missing-l); | |||
--corrupt: var(--corrupt-l); | |||
} | } | ||
@media screen and (prefers-color-scheme: dark) { | @media screen and (prefers-color-scheme: dark) { | ||
/* only timeless has a dark theme skin right now */ | /* only timeless has a dark theme skin right now */ | ||
body.skin-timeless .b9s-table { | |||
body.skin-timeless .b9s-loaded | --loaded: var(--loaded-d); | ||
--missing: var(--missing-d); | |||
--corrupt: var(--corrupt-d); | |||
} | |||
} | |||
html.skin-citizen-dark .b9s-table { | |||
--loaded: var(--loaded-d); | |||
--missing: var(--missing-d); | |||
--corrupt: var(--corrupt-d); | |||
} | } | ||
.b9s-loaded { background-color: var(--loaded) } | |||
.b9s-missing { background-color: var(--missing) } | |||
.b9s-corrupt { background-color: var(--corrupt) } |
Revision as of 10:02, 6 October 2022
.b9s-table {
text-align: center;
--loaded-l: #c8ffc8;
--missing-l: #ffc8c8;
--corrupt-l: #c8c8ff;
--loaded-d: #4b804b;
--missing-d: #804b4b;
--corrupt-d: #4b4b80;
--loaded: var(--loaded-l);
--missing: var(--missing-l);
--corrupt: var(--corrupt-l);
}
@media screen and (prefers-color-scheme: dark) {
/* only timeless has a dark theme skin right now */
body.skin-timeless .b9s-table {
--loaded: var(--loaded-d);
--missing: var(--missing-d);
--corrupt: var(--corrupt-d);
}
}
html.skin-citizen-dark .b9s-table {
--loaded: var(--loaded-d);
--missing: var(--missing-d);
--corrupt: var(--corrupt-d);
}
.b9s-loaded { background-color: var(--loaded) }
.b9s-missing { background-color: var(--missing) }
.b9s-corrupt { background-color: var(--corrupt) }