projects / project / luci.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
luci-theme-bootstrap: light/dark mode releated CSS fixes
[project/luci.git] / themes / luci-theme-bootstrap / htdocs / luci-static / bootstrap / cascade.css
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 336aabd21f2dc807bf2333853cd276b1dcdbd9bd..9bbdf88c1bdea42d69adcf221a623c2bd586ddcb 100644 (file)
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
@@ -31,19 +31,24 @@
        --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-highest-h: 0;
+       --text-color-highest-s: 0%;
+       --text-color-highest-l: 0%;
+       --text-color-highest: hsl(var(--text-color-highest-h), var(--text-color-highest-s), var(--text-color-highest-l));
+       --text-color-high-h: var(--text-color-highest-h);
+       --text-color-high-s: var(--text-color-highest-s);
+       --text-color-high-delta-l: calc(64 / 255 * 100%);
+       --text-color-high-l: calc(var(--text-color-highest-l) + var(--text-color-delta-l-sign) * var(--text-color-high-delta-l));
        --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-h: var(--text-color-highest-h);
+       --text-color-medium-s: var(--text-color-highest-s);
+       --text-color-medium-delta-l: calc(128 / 255 * 100%);
+       --text-color-medium-l: calc(var(--text-color-highest-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-h: var(--text-color-highest-h);
+       --text-color-low-s: var(--text-color-highest-s);
+       --text-color-low-delta-l: calc(191 / 255 * 100%);
+       --text-color-low-l: calc(var(--text-color-highest-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);
@@ -61,22 +66,20 @@
        --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;
 }
 
-@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;
-       }
+:root[data-darkmode="true"] {
+       --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-highest-h: 0;
+       --text-color-highest-s: 0%;
+       --text-color-highest-l: 100%;
+       --border-color-delta-l-sign: 1;
+       color-scheme: dark;
 }
 
 /* Reset.less
@@ -119,13 +122,6 @@ a:hover, a:active {
        outline: 0;
 }
 
-footer,
-header,
-nav,
-section {
-       display: block;
-}
-
 sub, sup {
        font-size: 75%;
        line-height: 0;
@@ -154,7 +150,7 @@ textarea {
        margin: 0;
        box-sizing: border-box;
        vertical-align: baseline;
-       line-height: normal;
+       line-height: 2em;
 }
 
 button::-moz-focus-inner, input::-moz-focus-inner {
@@ -203,8 +199,7 @@ body {
        font-weight: normal;
        line-height: 18px;
        color: var(--text-color-high);
-       padding: 18px 5px 5px 5px;
-       margin-top: 40px;
+       padding: 5px;
 }
 
 .container {
@@ -215,16 +210,6 @@ body {
        zoom: 1;
 }
 
-.container:before, .container:after {
-       display: table;
-       content: "";
-       zoom: 1;
-}
-
-.container:after {
-       clear: both;
-}
-
 a {
        color: #0069d6;
        text-decoration: none;
@@ -834,13 +819,13 @@ textarea[readonly] {
  * Repeatable UI elements outside the base styles provided from the scaffolding
  * ---------------------------------------------------------------------------- */
 header {
-       position: fixed;
+       position: sticky;
        top: 0;
-       left: 0;
-       right: 0;
        z-index: 800;
        overflow: visible;
        color: #BFBFBF;
+       margin: -5px -5px 15px -5px;
+       display: flex;
 }
 
 header a {
@@ -848,18 +833,14 @@ header a {
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 }
 
-header h3 a:hover, header .brand:hover, header ul .active > a {
+header .brand:hover, header ul .active > a {
        background-color: #333;
        background-color: rgba(255, 255, 255, 0.05);
        color: #fff;
        text-decoration: none;
 }
 
-header h3 {
-       position: relative;
-}
-
-header h3 a, header .brand {
+header .brand {
        float: left;
        display: block;
        padding: 8px 20px 12px;
@@ -875,15 +856,18 @@ header p {
        line-height: 40px;
 }
 
-header .fill {
+header {
        background-color: #222;
        background-repeat: repeat-x;
        background-image: linear-gradient(to bottom, #333333, #222222);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-       padding: 0 5px;
+       padding: 0;
+       /* the redundant properties below work around a csstidy bug */
+       padding-left: calc((100% - 940px) / 2 + 5px);
+       padding-right: calc((100% - 940px) / 2 + 5px);
 }
 
-header div > ul, .nav {
+.nav {
        display: block;
        float: left;
        margin: 0 10px 0 0;
@@ -891,12 +875,12 @@ header div > ul, .nav {
        left: 0;
 }
 
-header div > ul > li, .nav > li {
+.nav > li {
        display: block;
        float: left;
 }
 
-header div > ul a, .nav a {
+.nav a {
        display: block;
        float: none;
        padding: 10px 10px 11px;
@@ -904,83 +888,34 @@ header div > ul a, .nav a {
        text-decoration: none;
 }
 
-header div > ul a:hover, .nav a:hover {
+.nav a:hover {
        color: #fff;
        text-decoration: none;
 }
 
-header div > ul .active > a, .nav .active > a {
+.nav .active > a {
        background-color: #222;
        background-color: rgba(0, 0, 0, 0.5);
 }
 
-header div > ul.secondary-nav, .nav.secondary-nav {
-       float: right;
-       margin-left: 10px;
-       margin-right: 0;
-}
-
-header div > ul.secondary-nav .menu-dropdown,
-.nav.secondary-nav .menu-dropdown,
-header div > ul.secondary-nav .dropdown-menu,
-.nav.secondary-nav .dropdown-menu {
-       right: 0;
-       border: 0;
-}
-
-header div > ul a.menu:hover,
-.nav a.menu:hover,
-header div > ul li.open .menu,
-.nav li.open .menu,
-header div > ul .dropdown-toggle:hover,
-.nav .dropdown-toggle:hover,
-header div > ul .dropdown.open .dropdown-toggle,
-.nav .dropdown.open .dropdown-toggle {
+.nav a.menu:hover {
        background: #444;
        background: rgba(255, 255, 255, 0.05);
 }
 
-header div > ul .menu-dropdown,
-.nav .menu-dropdown,
-header div > ul .dropdown-menu,
 .nav .dropdown-menu {
        background-color: #333;
 }
 
-header div > ul .menu-dropdown a.menu,
-.nav .menu-dropdown a.menu,
-header div > ul .dropdown-menu a.menu,
-.nav .dropdown-menu a.menu,
-header div > ul .menu-dropdown .dropdown-toggle,
-.nav .menu-dropdown .dropdown-toggle,
-header div > ul .dropdown-menu .dropdown-toggle,
-.nav .dropdown-menu .dropdown-toggle {
+.nav .dropdown-menu a.menu {
        color: #fff;
 }
 
-header div > ul .menu-dropdown a.menu.open,
-.nav .menu-dropdown a.menu.open,
-header div > ul .dropdown-menu a.menu.open,
-.nav .dropdown-menu a.menu.open,
-header div > ul .menu-dropdown .dropdown-toggle.open,
-.nav .menu-dropdown .dropdown-toggle.open,
-header div > ul .dropdown-menu .dropdown-toggle.open,
-.nav .dropdown-menu .dropdown-toggle.open {
-       background: #444;
-       background: rgba(255, 255, 255, 0.05);
-}
-
-header div > ul .menu-dropdown li a,
-.nav .menu-dropdown li a,
-header div > ul .dropdown-menu li a,
 .nav .dropdown-menu li a {
        color: #999;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
 }
 
-header div > ul .menu-dropdown li a:hover,
-.nav .menu-dropdown li a:hover,
-header div > ul .dropdown-menu li a:hover,
 .nav .dropdown-menu li a:hover {
        background-color: #191919;
        background-repeat: repeat-x;
@@ -988,22 +923,11 @@ header div > ul .dropdown-menu li a:hover,
        color: #fff;
 }
 
-header div > ul .menu-dropdown .active a,
-.nav .menu-dropdown .active a,
-header div > ul .dropdown-menu .active a,
 .nav .dropdown-menu .active a {
        color: #fff;
 }
 
-header div > ul .menu-dropdown .divider,
-.nav .menu-dropdown .divider,
-header div > ul .dropdown-menu .divider,
-.nav .dropdown-menu .divider {
-       background-color: #222;
-       border-color: #444;
-}
-
-header ul .menu-dropdown li a, header ul .dropdown-menu li a {
+.nav .dropdown-menu li a {
        padding: 4px 15px;
 }
 
@@ -1011,7 +935,7 @@ li.menu, .dropdown {
        position: relative;
 }
 
-a.menu:after, .dropdown-toggle:after {
+a.menu:after {
        width: 0;
        height: 0;
        display: inline-block;
@@ -1026,7 +950,7 @@ a.menu:after, .dropdown-toggle:after {
        opacity: 0.5;
 }
 
-.menu-dropdown, .dropdown-menu {
+.dropdown-menu {
        background-color: #fff;
        float: left;
        position: absolute;
@@ -1049,21 +973,13 @@ a.menu:after, .dropdown-toggle:after {
        background-clip: padding-box;
 }
 
-.menu-dropdown li, .dropdown-menu li {
+.dropdown-menu li {
        float: none;
        display: block;
        background-color: transparent;
 }
 
-.menu-dropdown .divider, .dropdown-menu .divider {
-       height: 1px;
-       margin: 5px 0;
-       overflow: hidden;
-       background-color: #eee;
-       border-bottom: 1px solid #fff;
-}
-
-header .dropdown-menu a, .dropdown-menu a {
+.dropdown-menu a {
        display: block;
        padding: 4px 15px;
        clear: both;
@@ -1073,10 +989,7 @@ header .dropdown-menu a, .dropdown-menu a {
        text-shadow: 0 1px 0 #fff;
 }
 
-header .dropdown-menu a:hover,
-.dropdown-menu a:hover,
-header .dropdown-menu a.hover,
-.dropdown-menu a.hover {
+.dropdown-menu a:hover {
        background-color: #ddd;
        background-repeat: repeat-x;
        background-image: linear-gradient(to bottom, #eee, #ddd);
@@ -1085,22 +998,6 @@ header .dropdown-menu a.hover,
        box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
 }
 
-.open .menu,
-.dropdown.open .menu,
-.open .dropdown-toggle,
-.dropdown.open .dropdown-toggle {
-       color: #fff;
-       background: #ccc;
-       background: rgba(0, 0, 0, 0.3);
-}
-
-.open .menu-dropdown,
-.dropdown.open .menu-dropdown,
-.open .dropdown-menu,
-.dropdown.open .dropdown-menu {
-       left: 0;
-}
-
 .dropdown:hover ul.dropdown-menu {
        left: 0;
 }
@@ -1231,44 +1128,43 @@ header .dropdown-menu a.hover,
 .breadcrumb {
        padding: 7px 14px;
        margin: 0 0 18px;
-       background-color: #f5f5f5;
-       background-repeat: repeat-x;
-       background-image: linear-gradient(to bottom, #fff, #f5f5f5);
-       border: 1px solid #ddd;
+       background: linear-gradient(to bottom, var(--background-color-high), var(--background-color-low));
+       border: 1px solid var(--border-color-medium);
        border-radius: 3px;
-       box-shadow: inset 0 1px 0 #fff;
+       display: flex;
+       flex: 0;
 }
 
 .breadcrumb li {
-       display: inline;
-       text-shadow: 0 1px 0 #fff;
+       list-style: none;
 }
 
-.breadcrumb .divider {
+.breadcrumb li:not(:last-child)::after {
+       content: "|";
        padding: 0 5px;
-       color: #bfbfbf;
 }
 
 .breadcrumb .active a {
-       color: #404040;
+       color: var(--text-color-medium);
 }
 
 footer {
-       margin-top: 17px;
        padding-top: 17px;
+       margin-top: 17px;
        border-top: 1px solid var(--border-color-low);
+       display: flex;
+       flex-wrap: wrap;
+       align-items: baseline;
+       justify-content: space-between;
 }
 
 #modal_overlay {
        position: fixed;
        top: 0;
        bottom: 0;
-       left: -10000px;
-       right: 10000px;
        background: rgba(0, 0, 0, 0.7);
        z-index: 900;
-       overflow-y: scroll;
-       -webkit-overflow-scrolling: touch;
+       overflow: scroll;
        transition: opacity .125s ease-in;
        opacity: 0;
        visibility: hidden;
@@ -1277,11 +1173,9 @@ footer {
 .modal {
        width: 90%;
        margin: 5em auto;
-       display: flex;
-       flex-wrap: wrap;
+       display: table;
        min-height: 32px;
        max-width: 600px;
-       align-items: center;
        border-radius: 3px;
        background: var(--background-color-high);
        box-shadow: 0 0 3px #444;
@@ -1290,7 +1184,6 @@ footer {
 }
 
 .modal > * {
-       flex-basis: 100%;
        line-height: normal;
        margin-bottom: .5em;
        max-width: 100%;
@@ -1377,11 +1270,11 @@ body.modal-overlay-active #modal_overlay {
        cursor: pointer;
        display: inline-block;
        background: linear-gradient(var(--background-color-high), var(--background-color-high) 25%, var(--border-color-low)) no-repeat;
-       padding: 5px 14px 6px;
+       padding: 0 14px;
        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;
+       line-height: 2em;
        border: 1px solid var(--border-color-high);
        border-radius: 4px;
        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);
@@ -1758,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 {
@@ -1935,11 +1827,14 @@ header [data-indicator][data-style="active"] {
 
 form.inline { display: inline; margin-bottom: 0; }
 
-header .pull-right { padding-top: 8px; }
+header .pull-right { padding-top: 8px; margin-left: auto; }
 
 #modemenu li:last-child span.divider { display: none }
 
-#syslog {  width: 100%; }
+#syslog {
+       width: 100%;
+       color: var(--text-color-highest);
+}
 
 .cbi-section-table .tr:hover .td,
 .cbi-section-table .tr:hover .th,
@@ -2061,7 +1956,7 @@ table table td,
        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);
+       box-shadow: inset 0 1px 0 hsla(var(--text-color-low-h), var(--text-color-low-s), var(--text-color-low-l), 0.2), 0 1px 2px hsla(var(--text-color-highest-h), var(--text-color-highest-s), var(--text-color-highest-l), 0.05);
        display: inline-flex;
        flex-direction: column;
        line-height: 1.2em;
@@ -2070,6 +1965,7 @@ table table td,
 
 .ifacebox .ifacebox-head {
        border-bottom: 1px solid var(--border-color-high);
+       border-radius: 4px 4px 0 0;
        padding: 2px;
        background: #eee;
        color: #404040;
@@ -2231,6 +2127,28 @@ div.cbi-value var.cbi-tooltip-container,
        white-space: pre;
 }
 
+.uci-change-list > del,
+.uci-change-list > ins,
+.uci-change-list > var,
+.uci-change-legend-label > del,
+.uci-change-legend-label > ins,
+.uci-change-legend-label > var {
+       margin-bottom: 2px;
+       border: 1px solid #ccc;
+       background: #eee;
+       line-height: 15px;
+       overflow: hidden;
+       text-overflow: ellipsis;
+       padding: 2px;
+}
+
+.uci-change-list > * > del,
+.uci-change-list > * > ins,
+.uci-change-list > * > var {
+       overflow: hidden;
+       text-overflow: ellipsis;
+}
+
 .uci-change-list del,
 .uci-change-list ins,
 .uci-change-list var,
@@ -2240,13 +2158,8 @@ div.cbi-value var.cbi-tooltip-container,
        text-decoration: none;
        font-family: monospace;
        font-style: normal;
-       border: 1px solid #ccc;
-       background: #eee;
        color: #404040;
-       padding: 2px;
        display: block;
-       line-height: 15px;
-       margin-bottom: 1px;
 }
 
 .uci-change-list ins,
@@ -2267,94 +2180,29 @@ div.cbi-value var.cbi-tooltip-container,
        background: #eee;
 }
 
-.uci-change-list var ins,
-.uci-change-list var del {
-       display: inline-block;
-       border: none;
-       width: 100%;
-       padding: 0;
-}
-
 .uci-change-legend {
-       padding: 5px;
+       display: flex;
+       flex-wrap: wrap;
 }
 
 .uci-change-legend-label {
-       width: 150px;
-       float: left;
+       flex-basis: 150px;
+       margin: 2px;
+       display: flex;
+       align-items: center;
 }
 
 .uci-change-legend-label > ins,
 .uci-change-legend-label > del,
 .uci-change-legend-label > var {
-       float: left;
        margin-right: 4px;
        width: 16px;
        height: 16px;
-       display: block;
-       position: relative;
-}
-
-.uci-change-legend-label var ins,
-.uci-change-legend-label var del {
-       border: none;
-       position: absolute;
-       top: 2px;
-       left: 2px;
-       right: 2px;
-       bottom: 2px;
-}
-
-#modal_overlay {
-       position: fixed;
-       top: 0;
-       bottom: 0;
-       left: -10000px;
-       right: 10000px;
-       background: rgba(0, 0, 0, 0.7);
-       z-index: 900;
-       overflow-y: scroll;
-       -webkit-overflow-scrolling: touch;
-       transition: opacity .125s ease-in;
-       opacity: 0;
-}
-
-#modal_overlay > .modal {
-       width: 90%;
-       margin: 5em auto;
        display: flex;
-       flex-wrap: wrap;
-       min-height: 32px;
-       max-width: 600px;
-       align-items: center;
-       border-radius: 3px;
-       background: var(--background-color-high);
-       box-shadow: 0 0 3px #444;
-       padding: 1em 1em .5em 1em;
-       min-width: 270px;
 }
 
-#modal_overlay .modal > * {
+.uci-change-legend-label > var > * {
        flex-basis: 100%;
-       line-height: normal;
-       margin-bottom: .5em;
-}
-
-#modal_overlay .modal > pre,
-#modal_overlay .modal > textarea {
-       white-space: pre-wrap;
-       overflow: auto;
-}
-
-body.modal-overlay-active {
-       overflow: hidden;
-       height: 100vh;
-}
-
-body.modal-overlay-active #modal_overlay {
-       left: 0;
-       right: 0;
-       opacity: 1;
 }
 
 html body.apply-overlay-active {
Lua Configuration Interface (mirror)