diff options
Diffstat (limited to 'themes')
7 files changed, 273 insertions, 111 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..4c3e25f52c 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, @@ -2122,6 +2231,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, @@ -2131,12 +2262,8 @@ div.cbi-value var.cbi-tooltip-container, text-decoration: none; font-family: monospace; font-style: normal; - border: 1px solid #ccc; - background: #eee; - padding: 2px; + color: #404040; display: block; - line-height: 15px; - margin-bottom: 1px; } .uci-change-list ins, @@ -2157,42 +2284,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; + display: flex; } -.uci-change-legend-label var ins, -.uci-change-legend-label var del { - border: none; - position: absolute; - top: 2px; - left: 2px; - right: 2px; - bottom: 2px; +.uci-change-legend-label > var > * { + flex-basis: 100%; } #modal_overlay { @@ -2218,7 +2332,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; } diff --git a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm index 81a23d63af..d762637d8a 100644 --- a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm +++ b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm @@ -59,6 +59,16 @@ </div> <%- end -%> + <%- if boardinfo.rootfs_type == "initramfs" then -%> + <div class="alert-message warning"> + <h4><%:System running in recovery (initramfs) mode.%></h4> + <p><%:No changes to settings will be stored and are lost after rebooting. This mode should only be used to install a firmware upgrade%></p> + <% if disp.lookup("admin/system/flash") then %> + <div class="right"><a class="btn" href="<%=url("admin/system/flash")%>"><%:Go to firmware upgrade...%></a></div> + <% end %> + </div> + <%- end -%> + <noscript> <div class="alert-message warning"> <h4><%:JavaScript required!%></h4> diff --git a/themes/luci-theme-material/luasrc/view/themes/material/header.htm b/themes/luci-theme-material/luasrc/view/themes/material/header.htm index 2b890da034..a81991d0a0 100644 --- a/themes/luci-theme-material/luasrc/view/themes/material/header.htm +++ b/themes/luci-theme-material/luasrc/view/themes/material/header.htm @@ -81,6 +81,16 @@ <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") and path ~= "admin-system-admin-password" then -%> <%- end -%> + <%- if boardinfo.rootfs_type == "initramfs" then -%> + <div class="alert-message warning"> + <h4><%:Sytem running in recovery (initramfs) mode.%></h4> + <p><%:No changes to settings will be stored and are lost after rebooting. This mode should only be used to install a firmware upgrade%></p> + <% if disp.lookup("admin/system/flash") then %> + <div class="right"><a class="btn" href="<%=url("admin/system/flash")%>"><%:Go to firmware upgrade...%></a></div> + <% end %> + </div> + <%- end -%> + <noscript> <div class="alert-message warning"> <h4><%:JavaScript required!%></h4> diff --git a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css index c6e5d77428..cf320e4aed 100644 --- a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css +++ b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css @@ -54,6 +54,10 @@ body { min-width: 100%; } +abbr[title], acronym[title] { + text-decoration: dotted underline; +} + /* * scaffholding */ @@ -628,6 +632,10 @@ ul > li { list-style: disc; } +p > a { + text-decoration: underline; +} + /* * widgets */ diff --git a/themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/header.htm b/themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/header.htm index 28589ff781..34c52f4b12 100644 --- a/themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/header.htm +++ b/themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/header.htm @@ -64,4 +64,14 @@ </div> <%- end -%> + <%- if boardinfo.rootfs_type == "initramfs" then -%> + <div class="alert-message warning"> + <h4><%:System running in recovery (initramfs) mode.%></h4> + <p><%:No changes to settings will be stored and are lost after rebooting. This mode should only be used to install a firmware upgrade%></p> + <% if disp.lookup("admin/system/flash") then %> + <div class="right"><a class="btn" href="<%=url("admin/system/flash")%>"><%:Go to firmware upgrade...%></a></div> + <% end %> + </div> + <%- end -%> + <div id="tabmenu" style="display:none"></div> diff --git a/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm b/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm index a17f350263..1d95bae886 100644 --- a/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm +++ b/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm @@ -83,3 +83,13 @@ <% end %> </div> <%- end -%> + + <%- if boardinfo.rootfs_type == "initramfs" then -%> + <div class="alert-message warning"> + <h4><%:System running in recovery (initramfs) mode.%></h4> + <p><%:No changes to settings will be stored and are lost after rebooting. This mode should only be used to install a firmware upgrade%></p> + <% if disp.lookup("admin/system/flash") then %> + <div class="right"><a class="btn" href="<%=url("admin/system/flash")%>"><%:Go to firmware upgrade...%></a></div> + <% end %> + </div> + <%- end -%> |