luci-theme-bootstrap: light/dark mode releated CSS fixes
authorJo-Philipp Wich <jo@mein.io>
Mon, 8 Nov 2021 08:56:33 +0000 (09:56 +0100)
committerJo-Philipp Wich <jo@mein.io>
Mon, 8 Nov 2021 08:58:36 +0000 (09:58 +0100)
 - 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>
themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css

index 615ce80ea954690b52437a409da1c65e0655ab2a..9bbdf88c1bdea42d69adcf221a623c2bd586ddcb 100644 (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 {