From 6dd71eaebeb44df321c8c39da916082a0cde3285 Mon Sep 17 00:00:00 2001 From: Teoh Han Hui Date: Thu, 16 Sep 2021 04:34:11 +0800 Subject: [PATCH] luci-theme-bootstrap: add dark theme variant Add a dark theme variant which is enabled by default when prefers-color-scheme is set to dark. Signed-off-by: Teoh Han Hui --- .../htdocs/luci-static/bootstrap/cascade.css | 268 ++++++++++++------ .../htdocs/luci-static/bootstrap/mobile.css | 10 +- 2 files changed, 194 insertions(+), 84 deletions(-) diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css index cc7e84d133..336aabd21f 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css @@ -10,6 +10,75 @@ * * Designed and built with all the love in the world @twitter by @mdo and @fat. */ + +/* Variables + * --------- */ + +:root { + --background-color-delta-l-sign: -1; + --background-color-high-h: 0; + --background-color-high-s: 0%; + --background-color-high-l: 100%; + --background-color-high: hsl(var(--background-color-high-h), var(--background-color-high-s), var(--background-color-high-l)); + --background-color-medium-h: var(--background-color-high-h); + --background-color-medium-s: var(--background-color-high-s); + --background-color-medium-delta-l: calc(6 / 255 * 100%); + --background-color-medium-l: calc(var(--background-color-high-l) + var(--background-color-delta-l-sign) * var(--background-color-medium-delta-l)); + --background-color-medium: hsl(var(--background-color-medium-h), var(--background-color-medium-s), var(--background-color-medium-l)); + --background-color-low-h: var(--background-color-high-h); + --background-color-low-s: var(--background-color-high-s); + --background-color-low-delta-l: calc(10 / 255 * 100%); + --background-color-low-l: calc(var(--background-color-high-l) + var(--background-color-delta-l-sign) * var(--background-color-low-delta-l)); + --background-color-low: hsl(var(--background-color-low-h), var(--background-color-low-s), var(--background-color-low-l)); + --text-color-delta-l-sign: 1; + --text-color-high-h: 0; + --text-color-high-s: 0%; + --text-color-high-l: calc(64 / 255 * 100%); + --text-color-high: hsl(var(--text-color-high-h), var(--text-color-high-s), var(--text-color-high-l)); + --text-color-medium-h: var(--text-color-high-h); + --text-color-medium-s: var(--text-color-high-s); + --text-color-medium-delta-l: calc(64 / 255 * 100%); + --text-color-medium-l: calc(var(--text-color-high-l) + var(--text-color-delta-l-sign) * var(--text-color-medium-delta-l)); + --text-color-medium: hsl(var(--text-color-medium-h), var(--text-color-medium-s), var(--text-color-medium-l)); + --text-color-low-h: var(--text-color-high-h); + --text-color-low-s: var(--text-color-high-s); + --text-color-low-delta-l: calc(127 / 255 * 100%); + --text-color-low-l: calc(var(--text-color-high-l) + var(--text-color-delta-l-sign) * var(--text-color-low-delta-l)); + --text-color-low: hsl(var(--text-color-low-h), var(--text-color-low-s), var(--text-color-low-l)); + --border-color-delta-l-sign: -1; + --border-color-high-h: var(--background-color-high-h); + --border-color-high-s: var(--background-color-high-s); + --border-color-high-delta-l: calc(51 / 255 * 100%); + --border-color-high-l: calc(var(--background-color-high-l) + var(--border-color-delta-l-sign) * var(--border-color-high-delta-l)); + --border-color-high: hsl(var(--border-color-high-h), var(--border-color-high-s), var(--border-color-high-l)); + --border-color-medium-h: var(--border-color-high-h); + --border-color-medium-s: var(--border-color-high-s); + --border-color-medium-delta-l: calc(34 / 255 * 100%); + --border-color-medium-l: calc(var(--background-color-high-l) + var(--border-color-delta-l-sign) * var(--border-color-medium-delta-l)); + --border-color-medium: hsl(var(--border-color-medium-h), var(--border-color-medium-s), var(--border-color-medium-l)); + --border-color-low-h: var(--border-color-high-h); + --border-color-low-s: var(--border-color-high-s); + --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; +} + +@media (prefers-color-scheme: dark) { + :root { + --background-color-delta-l-sign: 1; + --background-color-high-h: 0; + --background-color-high-s: 0%; + --background-color-high-l: calc(34 / 255 * 100%); + --text-color-delta-l-sign: -1; + --text-color-high-h: 0; + --text-color-high-s: 0%; + --text-color-high-l: 100%; + --border-color-delta-l-sign: 1; + } +} + /* Reset.less * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @@ -128,12 +197,12 @@ textarea { * Basic and global styles for generating a grid system, structural layout, and page templates * ------------------------------------------------------------------------------------------- */ body { - background-color: #fff; + background-color: var(--background-color-high); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 18px; - color: #404040; + color: var(--text-color-high); padding: 18px 5px 5px 5px; margin-top: 40px; } @@ -195,7 +264,7 @@ p, p small { font-size: 11px; - color: #bfbfbf; + color: var(--text-color-low); } h1, @@ -205,7 +274,7 @@ h4, h5, h6 { font-weight: bold; - color: #404040; + color: var(--text-color-high); } h1 small, @@ -214,7 +283,7 @@ h3 small, h4 small, h5 small, h6 small { - color: #bfbfbf; + color: var(--text-color-low); } h1 { @@ -265,7 +334,7 @@ h5 { h6 { font-size: 13px; - color: #bfbfbf; + color: var(--text-color-low); text-transform: uppercase; } @@ -290,7 +359,7 @@ ol { li { line-height: 18px; - color: #808080; + color: var(--text-color-medium); } ul.unstyled { @@ -317,7 +386,7 @@ dl dd { hr { margin: 20px 0 19px; border: 0; - border-bottom: 1px solid #eee; + border-bottom: 1px solid var(--border-color-low); } strong { @@ -353,14 +422,20 @@ code { } pre { - background-color: #f5f5f5; + --border-color-h: var(--background-color-high-h); + --border-color-s: var(--background-color-high-s); + --border-color-delta-l: 100%; + --border-color-l: calc(var(--background-color-high-l) + var(--background-color-delta-l-sign) * var(--border-color-delta-l)); + --border-color-a: 0.15; + --border-color: hsla(var(--border-color-h), var(--border-color-s), var(--border-color-l), var(--border-color-a)); + + background-color: var(--background-color-low); display: block; padding: 8.5px; margin: 0 0 18px; line-height: 18px; font-size: 12px; - border: 1px solid #ccc; - border: 1px solid rgba(0, 0, 0, 0.15); + border: 1px solid var(--border-color); border-radius: 3px; white-space: pre; white-space: pre-wrap; @@ -383,10 +458,10 @@ fieldset legend { display: block; font-size: 19.5px; line-height: 1; - color: #404040; + color: var(--text-color-high); padding-top: 20px; - } + form .cbi-tab-descr { line-height: 18px; margin-bottom: 18px; @@ -433,7 +508,7 @@ form .input, float: left; width: 180px; text-align: right; - color: #404040; + color: var(--text-color-high); } input[type=checkbox], input[type=radio] { @@ -454,9 +529,11 @@ select, display: inline-block; width: 210px; padding: 4px; + background: var(--background-color-high); + color: var(--text-color-high); font-size: 13px; line-height: 18px; - border: 1px solid #ccc; + border: 1px solid var(--border-color-high); border-radius: 3px; } @@ -487,11 +564,12 @@ select, .cbi-dynlist > .item { margin-bottom: 4px; - box-shadow: 0 0 2px #ccc; - background: #fff; + box-shadow: 0 0 2px var(--border-color-high); + background: var(--background-color-high); padding: 2px 2em 2px 4px; - border: 1px solid #ccc; + border: 1px solid var(--border-color-high); border-radius: 3px; + color: var(--text-color-high); position: relative; pointer-events: none; overflow: hidden; @@ -507,7 +585,7 @@ select, right: -1px; bottom: -1px; padding: 0 6px; - border: 1px solid #ccc; + border: 1px solid var(--border-color-high); border-radius: 0 3px 3px 0; font-weight: bold; color: #c44; @@ -528,7 +606,6 @@ select, select { padding: initial; - background: #fff; box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.1); } @@ -579,12 +656,8 @@ select[multiple] { cursor: not-allowed; } -::-moz-placeholder { - color: #bfbfbf; -} - -::-webkit-input-placeholder { - color: #bfbfbf; +::placeholder { + color: var(--text-color-low); } .item::after, .btn, .cbi-button, input, button, textarea { @@ -614,8 +687,9 @@ input[readonly], button[readonly], select[readonly], textarea[readonly] { - background-color: #f5f5f5; - border-color: #ddd; + background-color: var(--background-color-medium); + color: var(--text-color-medium); + border-color: var(--border-color-low); pointer-events: none; cursor: default; } @@ -648,10 +722,10 @@ textarea[readonly] { .actions, .cbi-page-actions { - background: #f5f5f5; + background: var(--background-color-low); margin-bottom: 18px; padding: 17px 20px 18px 17px; - border-top: 1px solid #ddd; + border-top: 1px solid var(--border-color-medium); border-radius: 0 0 3px 3px; text-align: right; } @@ -679,7 +753,7 @@ textarea[readonly] { .help-inline, .help-block { font-size: 13px; line-height: 18px; - color: #bfbfbf; + color: var(--text-color-low); } .help-inline { @@ -730,7 +804,7 @@ textarea[readonly] { } .table .td, .table .th { - border-top: 1px solid #ddd; + border-top: 1px solid var(--border-color-medium); } .tr.placeholder { @@ -1041,12 +1115,26 @@ header .dropdown-menu a.hover, } .tabs, .cbi-tabmenu { + --tab-bar-background-color: var(--background-color-high); + --tab-inactive-background-color-h: var(--border-color-low-h); + --tab-inactive-background-color-s: var(--border-color-low-s); + --tab-inactive-background-color-l: var(--border-color-low-l); + --tab-inactive-background-color: var(--border-color-low); + --tab-inactive-border-color: var(--border-color-medium); + --tab-inactive-text-color-delta-l: calc(85 / 255 * 100%); + --tab-inactive-text-color-l: calc(var(--tab-inactive-background-color-l) + var(--background-color-delta-l-sign) * var(--tab-inactive-text-color-delta-l)); + --tab-inactive-text-color: hsl(var(--tab-inactive-background-color-h), var(--tab-inactive-background-color-s), var(--tab-inactive-text-color-l)); + --tab-inactive-hover-background-color: var(--background-color-high); + --tab-active-background-color: var(--background-color-high); + --tab-active-text-color: #0069d6; + --tab-active-border-color: var(--border-color-medium); + margin: 0 -5px 18px; padding: 0 2px; list-style: none; display: flex; flex-wrap: wrap; - background: linear-gradient(#fff 28px, #ddd 28px); + background: linear-gradient(var(--tab-bar-background-color) 28px, var(--tab-inactive-border-color) 28px); background-size: 1px 29px; background-position: left bottom; } @@ -1058,11 +1146,11 @@ header .dropdown-menu a.hover, height: 25px; max-width: 48%; margin: 4px 2px 0 2px; - background: #fff; - border: 1px solid #ddd; + background: var(--tab-active-background-color); + border: 1px solid var(--tab-active-border-color); border-bottom: none; border-radius: 4px 4px 0 0; - color: #0069d6; + color: var(--tab-active-text-color); } .tabs > li > a, .cbi-tabmenu > li > a { @@ -1078,12 +1166,12 @@ header .dropdown-menu a.hover, } .tabs > li:not(.active):hover, .cbi-tabmenu > .cbi-tab-disabled:hover { - background: linear-gradient(#fff 90%, #ddd 100%); + background: linear-gradient(var(--tab-inactive-hover-background-color) 90%, var(--tab-inactive-border-color) 100%); } .tabs > li:not(.active), .cbi-tabmenu > .cbi-tab-disabled { - color: #999; - background: linear-gradient(#eee 90%, #ddd 100%); + color: var(--tab-inactive-text-color); + background: linear-gradient(var(--tab-inactive-background-color) 90%, var(--tab-inactive-border-color) 100%); } .cbi-tab-disabled[data-errors]::after { @@ -1168,7 +1256,7 @@ header .dropdown-menu a.hover, footer { margin-top: 17px; padding-top: 17px; - border-top: 1px solid #eee; + border-top: 1px solid var(--border-color-low); } #modal_overlay { @@ -1195,7 +1283,7 @@ footer { max-width: 600px; align-items: center; border-radius: 3px; - background: #fff; + background: var(--background-color-high); box-shadow: 0 0 3px #444; padding: 1em 1em .5em 1em; min-width: 270px; @@ -1279,21 +1367,24 @@ body.modal-overlay-active #modal_overlay { border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } +.modal.alert-message { + color: var(--text-color-high); +} + .item::after, .btn, .cbi-button { cursor: pointer; display: inline-block; - background: linear-gradient(#fff, #fff 25%, #e6e6e6) no-repeat; + background: linear-gradient(var(--background-color-high), var(--background-color-high) 25%, var(--border-color-low)) no-repeat; padding: 5px 14px 6px; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - color: #333; + text-shadow: 0 1px 1px hsla(var(--background-color-high-h), var(--background-color-high-s), var(--background-color-high-l), 0.75); + color: var(--text-color-high); font-size: 13px; line-height: normal; - border: 1px solid #ccc; - border-bottom-color: #bbb; + border: 1px solid var(--border-color-high); border-radius: 4px; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 hsla(var(--background-color-high-h), var(--background-color-high-s), var(--background-color-high-l), 0.2), 0 1px 2px hsla(var(--text-color-high-h), var(--text-color-high-s), var(--text-color-high-l), 0.05); white-space: pre; } @@ -1324,7 +1415,7 @@ body.modal-overlay-active #modal_overlay { .cbi-button-link, .cbi-button-up, .cbi-button-down { - color: #444; + color: var(--text-color-high); } .btn.primary, @@ -1383,8 +1474,8 @@ body.modal-overlay-active #modal_overlay { .cbi-page-actions .cbi-button-apply + .cbi-button-save, .cbi-page-actions .cbi-button-negative + .cbi-button-save { - background: linear-gradient(#fff, #fff 25%, #e6e6e6); - text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.75); + background: linear-gradient(var(--background-color-high), var(--background-color-high) 25%, var(--border-color-low)); + text-shadow: 0 -1px 0 hsla(var(--background-color-high-h), var(--background-color-high-s), var(--background-color-high-l), 0.75); color: #4a4; } @@ -1397,10 +1488,10 @@ body.modal-overlay-active #modal_overlay { } .cbi-dropdown:not(.btn):not(.cbi-button) { - background: linear-gradient(#fff 0%, #e9e8e6 100%); - border: 1px solid #ccc; + background: linear-gradient(var(--background-color-high) 0%, var(--border-color-low) 100%); + border: 1px solid var(--border-color-high); border-radius: 3px; - color: #404040; + color: var(--text-color-high); } .cbi-dynlist > .item:focus, @@ -1455,7 +1546,7 @@ body.modal-overlay-active #modal_overlay { .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li[placeholder] { color: #777; font-weight: bold; - text-shadow: 1px 1px 0px #fff; + text-shadow: 1px 1px 0px var(--background-color-high); display: none; justify-content: center; } @@ -1476,14 +1567,14 @@ body.modal-overlay-active #modal_overlay { .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li { min-height: 20px; padding: .25em; - color: #404040; + color: var(--text-color-high); } .cbi-dropdown > ul > li .hide-open { display: block; display: initial; } .cbi-dropdown > ul > li .hide-close { display: none; } .cbi-dropdown > ul > li[display]:not([display="0"]) { - border-left: 1px solid #ccc; + border-left: 1px solid var(--border-color-high); } .cbi-dropdown[empty] > ul { @@ -1516,7 +1607,7 @@ body.modal-overlay-active #modal_overlay { .cbi-dropdown[open] > ul.dropdown { display: block; - background: #f6f6f5; + background: var(--background-color-low); border: 1px solid #918e8c; box-shadow: 0 0 4px #918e8c; position: absolute; @@ -1548,15 +1639,27 @@ body.modal-overlay-active #modal_overlay { .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block; display: initial; } .cbi-dropdown[open] > ul.dropdown > li { - border-bottom: 1px solid #ccc; + border-bottom: 1px solid var(--border-color-high); } .cbi-dropdown[open] > ul.dropdown > li[selected] { background: #b0d0f0; + color: #404040; +} + +.cbi-dropdown[open]:not(.btn):not(.cbi-button) > ul > li[selected][placeholder] { + color: #777; + text-shadow: 1px 1px 0px #fff; } .cbi-dropdown[open] > ul.dropdown > li.focus { background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%); + color: #404040; +} + +.cbi-dropdown[open]:not(.btn):not(.cbi-button) > ul > li.focus[placeholder] { + color: #777; + text-shadow: 1px 1px 0px #fff; } .cbi-dropdown[open] > ul.dropdown > li:last-child { @@ -1581,7 +1684,7 @@ input[type="text"] + .cbi-button, input[type="password"] + .cbi-button, select + .cbi-button { border-radius: 0 3px 3px 0; - border-color: #ccc; + border-color: var(--border-color-high); margin-left: -2px; padding: 0 6px; vertical-align: top; @@ -1610,9 +1713,9 @@ select + .cbi-button { position: absolute; z-index: 1000; left: -10000px; - box-shadow: 0 0 2px #ccc; + box-shadow: 0 0 2px var(--border-color-high); border-radius: 3px; - background: #fff; + background: var(--background-color-high); white-space: pre; padding: 2px 5px; opacity: 0; @@ -1626,13 +1729,13 @@ select + .cbi-button { } .cbi-progressbar { - border: 1px solid #ccc; + border: 1px solid var(--border-color-high); border-radius: 3px; position: relative; min-width: 170px; height: 20px; margin: 4px 0; - background: #f9f9f9; + background: var(--background-color-medium); } .cbi-progressbar > div { @@ -1649,12 +1752,17 @@ select + .cbi-button { right: 0; left: 0; text-align: center; - text-shadow: 0 0 2px #fff; + text-shadow: 0 0 2px var(--background-color-high); content: attr(title); white-space: pre; overflow: hidden; text-overflow: ellipsis; } +@media (prefers-color-scheme: dark) { + .cbi-progressbar::after { + mix-blend-mode: difference; + } +} .zonebadge .cbi-tooltip { padding: 1px; @@ -1836,7 +1944,7 @@ header .pull-right { padding-top: 8px; } .cbi-section-table .tr:hover .td, .cbi-section-table .tr:hover .th, .cbi-section-table .tr:hover::before { - background-color: #f5f5f5; + background-color: var(--background-color-low); } .cbi-section-table .tr.cbi-section-table-descr .th { @@ -1857,7 +1965,7 @@ header .pull-right { padding-top: 8px; } .cbi-section-table-titles.named::before, .cbi-section-table-descr.named::before, .cbi-section-table-row[data-title]::before { - border-top: 1px solid #ddd; + border-top: 1px solid var(--border-color-medium); } .left { text-align: left !important; } @@ -1921,7 +2029,7 @@ table table td, .cbi-rowstyle-2, .tr.table-titles, .tr.cbi-section-table-titles { - background: #f9f9f9; + background: var(--background-color-medium); } .cbi-value-description { @@ -1946,13 +2054,12 @@ table table td, } .ifacebox { - background-color: #fff; - border: 1px solid #ccc; + border: 1px solid var(--border-color-high); margin: 0 10px; text-align: center; white-space: nowrap; - background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + background: linear-gradient(var(--background-color-high), var(--background-color-high) 25%, var(--background-color-medium)); + text-shadow: 0 1px 1px hsla(var(--background-color-high-h), var(--background-color-high-s), var(--background-color-high-l), 0.75); border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); display: inline-flex; @@ -1962,9 +2069,11 @@ table table td, } .ifacebox .ifacebox-head { - border-bottom: 1px solid #ccc; + border-bottom: 1px solid var(--border-color-high); padding: 2px; background: #eee; + color: #404040; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); } .ifacebox .ifacebox-head.active { @@ -1979,13 +2088,13 @@ table table td, display: inline-block; flex-direction: row; white-space: nowrap; - background-color: #fff; - border: 1px solid #ccc; + border: 1px solid var(--border-color-high); padding: 2px; - background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + background: linear-gradient(var(--background-color-high), var(--background-color-high) 25%, var(--background-color-medium)); + color: var(--text-color-high); + text-shadow: 0 1px 1px hsla(var(--background-color-high-h), var(--background-color-high-s), var(--background-color-high-l), 0.75); border-radius: 4px; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + box-shadow: inset 0 1px 0 hsla(var(--background-color-high-h), var(--background-color-high-s), var(--background-color-high-l), 0.2), 0 1px 2px hsla(var(--text-color-high-h), var(--text-color-high-s), var(--text-color-high-l), 0.05); cursor: default; line-height: 1.2em; } @@ -2109,7 +2218,7 @@ div.cbi-value var.cbi-tooltip-container, .td.cbi-value-field var.cbi-tooltip-container .cbi-tooltip { font-style: normal; white-space: normal; - color: #444; + color: var(--text-color-high); } #modal_overlay > .modal.uci-dialog, @@ -2133,6 +2242,7 @@ div.cbi-value var.cbi-tooltip-container, font-style: normal; border: 1px solid #ccc; background: #eee; + color: #404040; padding: 2px; display: block; line-height: 15px; @@ -2218,7 +2328,7 @@ div.cbi-value var.cbi-tooltip-container, max-width: 600px; align-items: center; border-radius: 3px; - background: #fff; + background: var(--background-color-high); box-shadow: 0 0 3px #444; padding: 1em 1em .5em 1em; min-width: 270px; diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css index 384a1a22ad..3730080189 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css @@ -8,7 +8,7 @@ header h3 a, header .brand { } .tabs, .cbi-tabmenu { - background: linear-gradient(#fff 20%, #ddd 100%); + background: linear-gradient(var(--background-color-high) 20%, var(--border-color-medium) 100%); background-size: 1px 34px; margin-bottom: 10px; } @@ -33,7 +33,7 @@ header h3 a, header .brand { flex-direction: row; flex-wrap: wrap; align-items: flex-end; - border-top: 1px solid #ddd; + border-top: 1px solid var(--border-color-medium); padding: 5px 0; margin: 0 -3px; } @@ -111,9 +111,9 @@ header h3 a, header .brand { .tr[data-title]::before { display: block; flex: 1 1 100%; - background: #f5f5f5 !important; + background: var(--background-color-low) !important; font-size: 16px; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid var(--border-color-medium); } .td[data-title]::before, @@ -163,7 +163,7 @@ header h3 a, header .brand { .cbi-value { padding-bottom: .5em; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid var(--border-color-medium); margin-bottom: .5em; } -- 2.30.2