luci-theme-bootstrap: light/dark mode releated CSS fixes

- Fix progress bar shadow in light mode
 - Fix color schema preference in light and dark modes

Fixes: #5498
Fixes: #5499
Fixes: ed86f03a9f ("luci-theme-bootstrap: add explicit dark/light mode selection")
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
(cherry picked from commit f16a2f3fba)
This commit is contained in:
Jo-Philipp Wich 2021-11-08 09:56:33 +01:00
parent c14cac4eb9
commit 6df9ae0234

View file

@ -66,8 +66,7 @@
--border-color-low-delta-l: calc(17 / 255 * 100%);
--border-color-low-l: calc(var(--background-color-high-l) + var(--border-color-delta-l-sign) * var(--border-color-low-delta-l));
--border-color-low: hsl(var(--border-color-low-h), var(--border-color-low-s), var(--border-color-low-l));
color-scheme: light dark;
color-scheme: light;
}
:root[data-darkmode="true"] {
@ -80,6 +79,7 @@
--text-color-highest-s: 0%;
--text-color-highest-l: 100%;
--border-color-delta-l-sign: 1;
color-scheme: dark;
}
/* Reset.less
@ -1651,10 +1651,9 @@ select + .cbi-button {
overflow: hidden;
text-overflow: ellipsis;
}
@media (prefers-color-scheme: dark) {
.cbi-progressbar::after {
mix-blend-mode: difference;
}
:root[data-darkmode="true"] .cbi-progressbar::after {
mix-blend-mode: difference;
}
.zonebadge .cbi-tooltip {