diff options
Diffstat (limited to 'themes/luci-theme-bootstrap/htdocs')
4 files changed, 680 insertions, 462 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 9bbdf88c1b..2ab22d18d0 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css @@ -16,69 +16,137 @@ :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)); + --background-color-h: 0; + --background-color-s: 0%; + --background-color-l: 100%; + + --background-color-high-hsl: + var(--background-color-h), + var(--background-color-s), + var(--background-color-l); + --background-color-high: hsl(var(--background-color-high-hsl)); + + --background-color-medium-hsl: + var(--background-color-h), + var(--background-color-s), + calc(var(--background-color-l) + var(--background-color-delta-l-sign) * calc(6 / 255 * 100%)); + --background-color-medium: hsl(var(--background-color-medium-hsl)); + + --background-color-low-hsl: + var(--background-color-h), + var(--background-color-s), + calc(var(--background-color-l) + var(--background-color-delta-l-sign) * calc(10 / 255 * 100%)); + --background-color-low: hsl(var(--background-color-low-hsl)); + --text-color-delta-l-sign: 1; - --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-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-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)); + --text-color-h: 0; + --text-color-s: 0%; + --text-color-l: 0%; + + --text-color-highest-hsl: + var(--text-color-h), + var(--text-color-s), + var(--text-color-l); + --text-color-highest: hsl(var(--text-color-highest-hsl)); + + --text-color-high-hsl: + var(--text-color-h), + var(--text-color-s), + calc(var(--text-color-l) + var(--text-color-delta-l-sign) * calc(64 / 255 * 100%)); + --text-color-high: hsl(var(--text-color-high-hsl)); + + --text-color-medium-hsl: + var(--text-color-h), + var(--text-color-s), + calc(var(--text-color-l) + var(--text-color-delta-l-sign) * calc(128 / 255 * 100%)); + --text-color-medium: hsl(var(--text-color-medium-hsl)); + + --text-color-low-hsl: + var(--text-color-h), + var(--text-color-s), + calc(var(--text-color-l) + var(--text-color-delta-l-sign) * calc(191 / 255 * 100%)); + --text-color-low: hsl(var(--text-color-low-hsl)); + --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)); + --border-color-h: var(--background-color-h); + --border-color-s: var(--background-color-s); + --border-color-l: var(--background-color-l); + + --border-color-high-hsl: + var(--border-color-h), + var(--border-color-s), + calc(var(--border-color-l) + var(--border-color-delta-l-sign) * calc(51 / 255 * 100%)); + --border-color-high: hsl(var(--border-color-high-hsl)); + + --border-color-medium-hsl: + var(--border-color-h), + var(--border-color-s), + calc(var(--border-color-l) + var(--border-color-delta-l-sign) * calc(34 / 255 * 100%)); + --border-color-medium: hsl(var(--border-color-medium-hsl)); + + --border-color-low-hsl: + var(--border-color-h), + var(--border-color-s), + calc(var(--border-color-l) + var(--border-color-delta-l-sign) * calc(17 / 255 * 100%)); + --border-color-low: hsl(var(--border-color-low-hsl)); + + --primary-color-high: #1976d2; + --primary-color-medium: #1564c0; + --primary-color-low: #0d46a1; + --on-primary-color: var(--background-color-high); + + --error-color-high-rgb: 246, 43, 18; + --error-color-high: rgb(var(--error-color-high-rgb)); + --error-color-medium: #e8210d; + --error-color-low: #d00000; + --on-error-color: var(--background-color-high); + + --success-color-high-rgb: 0, 172, 89; + --success-color-high: rgb(var(--success-color-high-rgb)); + --success-color-medium: #009a4c; + --success-color-low: #007936; + --on-success-color: var(--background-color-high); + + --warn-color-high: #efbd0b; + --warn-color-medium: #f0c629; + --warn-color-low: #f2d24f; + --on-warn-color: var(--text-color-highest); + + --disabled-opacity: .7; + color-scheme: light; } :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%); + --background-color-h: 0; + --background-color-s: 0%; + --background-color-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%; + --text-color-h: 0; + --text-color-s: 0%; + --text-color-l: 100%; --border-color-delta-l-sign: 1; + + --primary-color-high: #4da1c0; + --primary-color-medium: #448da6; + --primary-color-low: #3c7a8d; + + --error-color-high-rgb: 209, 86, 83; + --error-color-medium: #bf4e4c; + --error-color-low: #b14946; + + --success-color-high-rgb: 0, 166, 108; + --success-color-medium: #00945e; + --success-color-low: #008252; + + --warn-color-high: #a69461; + --warn-color-medium: #a68d45; + --warn-color-low: #a68732; + --on-warn-color: var(--background-color-high); + + --disabled-opacity: .4; + color-scheme: dark; } @@ -86,7 +154,7 @@ * 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). * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ -* { +*, *::before, *::after { margin: 0; padding: 0; border: 0; @@ -112,6 +180,7 @@ html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; + height: 100%; } a:focus { @@ -171,7 +240,7 @@ button[disabled], input[type="button"][disabled], input[type="reset"][disabled], input[type="submit"][disabled] { - opacity: 0.7; + opacity: var(--disabled-opacity); } input[type="search"] { @@ -188,6 +257,18 @@ textarea { vertical-align: top; } +.control-group { + display: inline-flex; + gap: .2em; +} + +.control-group > input + :not(input):not(select), +.control-group > select + :not(input):not(select) { + margin-left: calc(-.2em + -2px); + border-radius: 0 3px 3px 0; + padding: 0 6px; +} + /* * Scaffolding * Basic and global styles for generating a grid system, structural layout, and page templates @@ -200,6 +281,9 @@ body { line-height: 18px; color: var(--text-color-high); padding: 5px; + min-height: 100%; + display: flex; + flex-direction: column; } .container { @@ -211,14 +295,14 @@ body { } a { - color: #0069d6; + color: var(--primary-color-high); text-decoration: none; line-height: inherit; font-weight: inherit; } a:hover { - color: #00438a; + color: var(--primary-color-low); text-decoration: underline; } @@ -401,18 +485,18 @@ code, pre { } code { - background-color: #fee9cc; - color: rgba(0, 0, 0, 0.75); + background-color: var(--border-color-low); + color: var(--text-color-high); padding: 1px 3px; } pre { - --border-color-h: var(--background-color-high-h); - --border-color-s: var(--background-color-high-s); + --border-color-h: var(--background-color-h); + --border-color-s: var(--background-color-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-l: calc(var(--background-color-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)); + --border-color: hsla(var(--border-color-hsl), var(--border-color-a)); background-color: var(--background-color-low); display: block; @@ -430,10 +514,6 @@ pre { /* Forms.less * Base styles for various input types, form layouts, and states * ------------------------------------------------------------- */ -form { - margin-bottom: 18px; -} - fieldset { margin-bottom: 9px; padding-top: 9px; @@ -447,29 +527,6 @@ fieldset legend { padding-top: 20px; } -form .cbi-tab-descr { - line-height: 18px; - margin-bottom: 18px; -} - -form .clearfix, -.cbi-value { - margin-bottom: 18px; - zoom: 1; -} - -form .clearfix:before, form .clearfix:after, -.cbi-value:before, .cbi-value:after { - display: table; - content: ""; - zoom: 1; -} - -form .clearfix:after, -.cbi-value:after { - clear: both; -} - label, input, button, @@ -481,36 +538,46 @@ textarea { line-height: normal; } -form .input, +.cbi-value { + display: flex; + flex-wrap: wrap; + margin-bottom: 18px; +} + .cbi-value-field { - margin-left: 200px; + margin-left: 20px; + flex: 1; } .cbi-value label.cbi-value-title { padding-top: 6px; font-size: 13px; line-height: 18px; - float: left; - width: 180px; + flex: 0 0 180px; text-align: right; color: var(--text-color-high); } -input[type=checkbox], input[type=radio] { - cursor: pointer; +.cbi-value > .cbi-section, +.cbi-value > .cbi-tblsection { + width: 100%; } label > input[type="checkbox"], label > input[type="radio"] { - vertical-align: bottom; + vertical-align: text-top; margin: 0; } +label[for] { + cursor: pointer; +} + input, textarea, select, -.cbi-dropdown:not(.btn):not(.cbi-button), -.uneditable-input { +.cbi-select, +.cbi-dropdown:not(.btn):not(.cbi-button) { display: inline-block; width: 210px; padding: 4px; @@ -524,15 +591,11 @@ select, input, select, -.cbi-dropdown:not(.btn):not(.cbi-button), -.uneditable-input { +.cbi-select, +.cbi-dropdown:not(.btn):not(.cbi-button) { height: 30px; } -.uneditable-input { - color: #808080; -} - .cbi-dropdown:not(.btn):not(.cbi-button), .cbi-dynlist { min-width: 210px; @@ -551,7 +614,7 @@ select, margin-bottom: 4px; box-shadow: 0 0 2px var(--border-color-high); background: var(--background-color-high); - padding: 2px 2em 2px 4px; + padding: 6px 2em 6px 4px; border: 1px solid var(--border-color-high); border-radius: 3px; color: var(--text-color-high); @@ -589,25 +652,69 @@ select, white-space: nowrap; } -select { - padding: initial; - box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.1); +.cbi-value-field > .cbi-checkbox, +.cbi-value-field > div > .cbi-radio { + height: 30px; + display: inline-flex; + align-items: center; } -input[type=checkbox], input[type=radio] { - width: auto; - height: auto; +.cbi-radio { + cursor: pointer; + gap: .125em; +} + +.cbi-select { padding: 0; - margin: 3px 0; - *margin-top: 0; - /* IE6-7 */ + position: relative; + background: linear-gradient(var(--background-color-high), var(--border-color-low)); +} - line-height: normal; +.cbi-select select, +.cbi-select select:focus { + -webkit-appearance: none; + appearance: none; + outline: none; border: none; + background: transparent; + height: 100%; + width: 100%; + padding: 0 .3em; + cursor: pointer; + margin-right: .6em; +} + +.cbi-select::before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + content: "▾"; + padding: 0 .3em; + background: linear-gradient(var(--background-color-high), var(--border-color-low)); + pointer-events: none; + border-radius: 3px; + display: flex; + flex-direction: column; + justify-content: center; +} + +.cbi-select select option { + background: var(--background-color-low); + color: var(--text-color-high); +} + +.cbi-select select option:hover { + background: var(--primary-color-low); + color: var(--on-primary-color); +} + +.cbi-select select option:checked { + background: var(--primary-color-medium); + color: var(--on-primary-color); } input[type=file] { - background-color: #fff; padding: initial; border: initial; line-height: initial; @@ -625,6 +732,73 @@ select[multiple] { background-color: #fff; } +input[type="checkbox"], +input[type="radio"] { + --bd-color: var(--border-color-high); + --fg-color: var(--text-color-high); + + appearance: none; + -webkit-appearance: none; + width: 14px; + height: 14px; + color: var(--fg-color); + position: relative; + display: inline-block; + cursor: pointer; + background: none; + border: none; +} + +input[type="checkbox"]::before, +input[type="checkbox"]::after, +input[type="radio"]::before, +input[type="radio"]::after { + position: absolute; + content: ""; +} + +input[type="checkbox"]::before, +input[type="radio"]::before { + top: 0; + left: 0; + width: 14px; + height: 14px; + background: linear-gradient(var(--background-color-high), var(--background-color-low)); + border: 1px solid var(--bd-color); + border-radius: 2px; +} + +input[type="radio"], +input[type="radio"]::before { + border-radius: 50%; +} + +input[type="checkbox"]::after, +input[type="radio"]::after { + top: 2px; + left: 2px; + width: 10px; + height: 10px; +} + +input[type="checkbox"]:checked::after, +input[type="radio"]:checked::after { + --checkmark-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><path d='m2.5 7.4 7.5 7.5-2.5 2.4L0 10Zm15-5L20 4.9 7.5 17.3 5 15Z'/></svg>"); + -webkit-mask: var(--checkmark-icon) center/cover no-repeat; + mask: var(--checkmark-icon) center/cover no-repeat; + background: var(--fg-color); +} + +input[type="radio"]:checked:after { + --checkmark-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='10' cy='10' r='7'/></svg>"); +} + +input[type="checkbox"].cbi-input-invalid, +input[type="radio"].cbi-input-invalid { + --bd-color: var(--error-color-medium); + --fg-color: var(--error-color-high); +} + .td > input[type=text], .td > input[type=password], .td > select, @@ -633,54 +807,66 @@ select[multiple] { width: 100%; } -.uneditable-input { - background-color: #fff; - display: block; - border-color: #eee; - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); - cursor: not-allowed; -} - ::placeholder { - color: var(--text-color-low); + color: var(--text-color-medium); } -.item::after, .btn, .cbi-button, input, button, textarea { +.item::after, +.btn, +.cbi-button, +.cbi-select, +.cbi-dropdown, +.cbi-dynlist > .item, +input[type="checkbox"]::before, +input[type="radio"]::before, +input, button, textarea, select { transition: border linear 0.2s, box-shadow linear 0.2s; - box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 3px hsla(var(--border-color-low-hsl), .01); } .item:hover::after, -.btn:hover, .cbi-button:hover, button:hover, -input:focus, textarea:focus { +.btn:hover, .btn:focus, +.cbi-button:hover, .cbi-button:focus, +.cbi-select.focus, +.cbi-dropdown:focus, .cbi-dropdown[open], +.cbi-dynlist > .item:focus, +input[type="checkbox"]:focus::before, +input[type="radio"]:focus::before, +input:focus, button:hover, textarea:focus, select:focus { + --focus-color-rgb: 82, 168, 236; + outline: 0; - border-color: rgba(82, 168, 236, 0.8) !important; - box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); + border-color: rgba(var(--focus-color-rgb), 0.8) !important; + box-shadow: inset 0 1px 3px hsla(var(--border-color-low-hsl), .01), 0 0 8px rgba(var(--focus-color-rgb), 0.6); text-decoration: none; } -input[type=file]:focus, input[type=checkbox]:focus, select:focus { - box-shadow: none; - outline: 1px dotted #666; +.cbi-input-invalid:focus, +.cbi-select.cbi-input-invalid, +input[type="checkbox"].cbi-input-invalid:focus::before, +input[type="radio"].cbi-input-invalid:focus::before { + --focus-color-rgb: var(--error-color-high-rgb); } input[disabled], button[disabled], select[disabled], textarea[disabled], -input[readonly], -button[readonly], -select[readonly], -textarea[readonly] { - background-color: var(--background-color-medium); - color: var(--text-color-medium); - border-color: var(--border-color-low); +.cbi-select[disabled]::before, +.cbi-dropdown[disabled]:not(.btn):not(.cbi-button), +input[type="checkbox"][disabled]::before, +input[type="checkbox"][disabled]::after, +input[type="radio"][disabled]::before, +input[type="radio"][disabled]::after { + opacity: var(--disabled-opacity); pointer-events: none; cursor: default; } +input[readonly], select[readonly], textarea[readonly] { + border-color: hsla(var(--border-color-high-hsl), var(--disabled-opacity)); pointer-events: auto; cursor: auto; } @@ -735,27 +921,6 @@ textarea[readonly] { margin: 0; } -.help-inline, .help-block { - font-size: 13px; - line-height: 18px; - color: var(--text-color-low); -} - -.help-inline { - padding-left: 5px; - *position: relative; - /* IE6-7 */ - - *top: -5px; - /* IE6-7 */ - -} - -.help-block { - display: block; - max-width: 600px; -} - /* * Tables.less * Tables for, you guessed it, tabular data @@ -830,7 +995,7 @@ header { header a { color: #bfbfbf; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + text-shadow: 0 -1px 0 hsla(var(--border-color-low-hsl), .25); } header .brand:hover, header ul .active > a { @@ -844,27 +1009,31 @@ header .brand { float: left; display: block; padding: 8px 20px 12px; - margin-left: -20px; + margin-left: -15px; color: #fff; font-size: 20px; font-weight: 200; line-height: 1; } +header .pull-right { + margin-left: auto; + margin-right: 5px; + align-self: center; +} + header p { margin: 0; line-height: 40px; } 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); + background: linear-gradient(#333333, #222222); + box-shadow: 0 1px 3px hsla(var(--border-color-low-hsl), .25), inset 0 -1px 0 hsla(var(--border-color-low-hsl), .01); 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); + padding-left: calc((100% - 940px) / 2); + padding-right: calc((100% - 940px) / 2); } .nav { @@ -959,7 +1128,6 @@ a.menu:after { z-index: 900; min-width: 160px; max-width: 220px; - _width: 160px; margin-left: 0; margin-right: 0; padding: 6px 0; @@ -1003,12 +1171,12 @@ a.menu:after { } .dropdown-menu .dropdown-menu { - position: absolute; - left: 159px; + position: absolute; + left: 159px; } .dropdown-menu li { - position: relative; + position: relative; } .tabs, .cbi-tabmenu { @@ -1020,7 +1188,7 @@ a.menu:after { --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-text-color: hsl(var(--tab-inactive-background-color-hsl)); --tab-inactive-hover-background-color: var(--background-color-high); --tab-active-background-color: var(--background-color-high); --tab-active-text-color: #0069d6; @@ -1047,7 +1215,7 @@ a.menu:after { border: 1px solid var(--tab-active-border-color); border-bottom: none; border-radius: 4px 4px 0 0; - color: var(--tab-active-text-color); + color: var(--primary-color-high); } .tabs > li > a, .cbi-tabmenu > li > a { @@ -1062,6 +1230,10 @@ a.menu:after { outline: none; } +.tabs > li > a:focus-visible, .cbi-tabmenu > li > a:focus-visible { + text-decoration: underline; +} + .tabs > li:not(.active):hover, .cbi-tabmenu > .cbi-tab-disabled:hover { background: linear-gradient(var(--tab-inactive-hover-background-color) 90%, var(--tab-inactive-border-color) 100%); } @@ -1075,12 +1247,16 @@ a.menu:after { content: attr(data-errors); background: #c43c35; color: #fff; - min-width: 12px; - line-height: 14px; - border-radius: 7px; + height: 16px; + min-width: 16px; + border-radius: 8px; text-align: center; margin: 0 5px 0 0; - padding: 1px 2px; + padding: 3px 2px 1px 2px; + display: inline-flex; + flex-direction: column; + justify-content: center; + font-size: 12px; } .cbi-tabmenu.map { @@ -1092,8 +1268,8 @@ a.menu:after { font-weight: bold; } -.cbi-tabcontainer > fieldset.cbi-section[id] > legend { - display: none; +.cbi-tab-descr { + margin: -9px 0 18px 0; } .tabs .menu-dropdown, .tabs .dropdown-menu { @@ -1150,12 +1326,29 @@ a.menu:after { footer { padding-top: 17px; - margin-top: 17px; + margin-top: auto; border-top: 1px solid var(--border-color-low); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; + font-size: 12px; + color: var(--text-color-medium); + /* the redundant properties below work around a csstidy bug */ + padding-left: calc((100% - 940px) / 2); + padding-right: calc((100% - 940px) / 2); +} + +footer a { + color: var(--primary-color-low); +} + +footer span { + margin-bottom: 1em; +} + +footer ul.breadcrumb { + margin-left: auto; } #modal_overlay { @@ -1164,7 +1357,7 @@ footer { bottom: 0; background: rgba(0, 0, 0, 0.7); z-index: 900; - overflow: scroll; + overflow: auto; transition: opacity .125s ease-in; opacity: 0; visibility: hidden; @@ -1173,12 +1366,12 @@ footer { .modal { width: 90%; margin: 5em auto; - display: table; min-height: 32px; max-width: 600px; border-radius: 3px; background: var(--background-color-high); - box-shadow: 0 0 3px #444; + border: 1px solid var(--border-color-low); + box-shadow: 0 0 3px var(--background-color-low); padding: 1em 1em .5em 1em; min-width: 270px; } @@ -1193,6 +1386,7 @@ footer { .modal > textarea { white-space: pre-wrap; overflow: auto; + width: 100%; } body.modal-overlay-active { @@ -1207,26 +1401,6 @@ body.modal-overlay-active #modal_overlay { visibility: visible; } -.btn.danger, -.alert-message.danger, -.btn.danger:hover, -.alert-message.danger:hover, -.btn.error, -.alert-message.error, -.btn.error:hover, -.alert-message.error:hover, -.btn.success, -.alert-message.success, -.btn.success:hover, -.alert-message.success:hover, -.btn.info, -.alert-message.info, -.btn.info:hover, -.alert-message.info:hover, -.cbi-tooltip.error, .cbi-tooltip.success, .cbi-tooltip.info { - color: #fff; -} - .btn .close, .alert-message .close { font-family: Arial, sans-serif; line-height: 18px; @@ -1237,27 +1411,33 @@ body.modal-overlay-active #modal_overlay { .btn.error, .alert-message.error, .cbi-tooltip.error { - background: linear-gradient(to bottom, #ee5f5b, #c43c35) repeat-x; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + background: linear-gradient(var(--error-color-low), var(--error-color-medium)); + color: var(--on-error-color); + border-color: var(--error-color-high) var(--error-color-high) var(--error-color-low); } .btn.success, .alert-message.success, .cbi-tooltip.success { - background: linear-gradient(to bottom, #62c462, #57a957) repeat-x; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + background: linear-gradient(var(--success-color-low), var(--success-color-medium)); + color: var(--on-error-color); + border-color: var(--success-color-high) var(--success-color-high) var(--success-color-low); } .btn.info, .alert-message.info, .cbi-tooltip.info { - background: linear-gradient(to bottom, #5bc0de, #339bb9) repeat-x; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + background: linear-gradient(var(--primary-color-low), var(--primary-color-medium)); + color: var(--on-primary-color); + border-color: var(--primary-color-high) var(--primary-color-high) var(--primary-color-low); } .alert-message.notice, .cbi-tooltip.notice { - background: linear-gradient(to bottom, #efefef, #fefefe) repeat-x; - text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25); - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + background: linear-gradient(var(--background-color-low), var(--background-color-medium)); + border-color: var(--background-color-high) var(--background-color-high) var(--background-color-low); + color: var(--text-color-high); +} + +.alert-message.warning { + background: linear-gradient(var(--warn-color-low), var(--warn-color-medium)); + border-color: var(--warn-color-high) var(--warn-color-high) var(--warn-color-low); + color: var(--on-warn-color); } .modal.alert-message { @@ -1267,39 +1447,35 @@ body.modal-overlay-active #modal_overlay { .item::after, .btn, .cbi-button { + --default-btn-background: linear-gradient(var(--background-color-high), var(--background-color-high) 25%, var(--background-color-low)); + --on-color: var(--text-color-high); + cursor: pointer; display: inline-block; - background: linear-gradient(var(--background-color-high), var(--background-color-high) 25%, var(--border-color-low)) no-repeat; + background: var(--default-btn-background); 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); + color: var(--on-color); font-size: 13px; 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); white-space: pre; } -.btn:focus, -.cbi-button:focus { - outline: 1px dotted #666; -} - .cbi-input-invalid, .cbi-input-invalid.cbi-dropdown:not(.btn):not(.cbi-button), .cbi-input-invalid.cbi-dropdown:not([open]) > ul > li, .cbi-value-error input { - color: #f00; - border-color: #f00; + color: var(--error-color-high); + border-color: var(--error-color-medium); } .cbi-button-positive, .cbi-button-fieldadd, .cbi-button-add, .cbi-button-save { - border-color: #4a4; - color: #4a4; + --on-color: var(--success-color-high); + border-color: var(--on-color); } .cbi-button-neutral, @@ -1316,16 +1492,16 @@ body.modal-overlay-active #modal_overlay { .cbi-button-apply, .cbi-button-reload, .cbi-button-edit { - border-color: #0069d6; - color: #0069d6; + --on-color: var(--primary-color-high); + border-color: var(--on-color); } .cbi-button-negative, .cbi-section-remove .cbi-button, .cbi-button-reset, .cbi-button-remove { - border-color: #c44; - color: #c44; + --on-color: var(--error-color-high); + border-color: var(--on-color); } .cbi-page-actions::after { @@ -1347,29 +1523,29 @@ body.modal-overlay-active #modal_overlay { .cbi-button-action.important, .cbi-page-actions .cbi-button-apply, .cbi-section-actions .cbi-button-edit { - color: #fff; - background: linear-gradient(to bottom, #0069d6, #0049d6) no-repeat; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + --on-color: var(--on-primary-color); + background: linear-gradient(var(--primary-color-medium), var(--primary-color-low)); + border-color: var(--primary-color-high); } .cbi-button-positive.important, .cbi-page-actions .cbi-button-save { - color: #fff; - background: linear-gradient(to bottom, #4a4, #484) no-repeat; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + --on-color: var(--on-success-color); + background: linear-gradient(var(--success-color-medium), var(--success-color-low)); + border-color: var(--success-color-high); } .cbi-button-negative.important { - color: #fff; - background: linear-gradient(to bottom, #c44, #c00) no-repeat; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + --on-color: var(--on-error-color); + background: linear-gradient(var(--error-color-medium), var(--error-color-low)); + border-color: var(--error-color-high); } .cbi-page-actions .cbi-button-apply + .cbi-button-save, .cbi-page-actions .cbi-button-negative + .cbi-button-save { - 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; + --on-color: var(--success-color-high); + border-color: var(--on-color); + background: var(--default-btn-background); } .cbi-dropdown { @@ -1387,17 +1563,12 @@ body.modal-overlay-active #modal_overlay { color: var(--text-color-high); } -.cbi-dynlist > .item:focus, -.cbi-dropdown:focus { - outline: 2px solid #4b6e9b; -} - .cbi-dropdown > ul { margin: 0 !important; padding: 0; list-style: none; overflow-x: hidden; - overflow-y: auto; + overflow-y: hidden; display: flex; width: 100%; } @@ -1425,7 +1596,7 @@ body.modal-overlay-active #modal_overlay { justify-content: center; text-align: center; line-height: 2em; - padding: 0 .25em; + padding: 0 .3em; } .cbi-dropdown.btn > .open, @@ -1437,11 +1608,8 @@ body.modal-overlay-active #modal_overlay { .cbi-dropdown > .more, .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li[placeholder] { - color: #777; - font-weight: bold; - text-shadow: 1px 1px 0px var(--background-color-high); + color: var(--text-color-medium); display: none; - justify-content: center; } .cbi-dropdown > ul > li { @@ -1487,7 +1655,7 @@ body.modal-overlay-active #modal_overlay { } .cbi-dropdown > ul > li > form > input[type="checkbox"] { - margin: 0; + margin: 0 .25em 0 0; } .cbi-dropdown > ul > li input[type="text"] { @@ -1509,6 +1677,7 @@ body.modal-overlay-active #modal_overlay { min-width: 100%; width: auto; transition: max-height .125s ease-in; + overflow-y: auto; } .cbi-dropdown > ul > li[display], @@ -1523,11 +1692,14 @@ body.modal-overlay-active #modal_overlay { } .cbi-dropdown[empty] > ul > li, -.cbi-dropdown[optional][open] > ul.dropdown > li[placeholder], -.cbi-dropdown[multiple][open] > ul.dropdown > li > form { +.cbi-dropdown[optional][open] > ul.dropdown > li[placeholder] { display: block !important; } +.cbi-dropdown[multiple][open] > ul.dropdown > li > form { + display: flex !important; +} + .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; } .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block; display: initial; } @@ -1536,23 +1708,17 @@ body.modal-overlay-active #modal_overlay { } .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; + background: var(--primary-color-medium); + color: var(--on-primary-color); } .cbi-dropdown[open] > ul.dropdown > li.focus { - background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%); - color: #404040; + background: var(--primary-color-low); + color: var(--on-primary-color); } -.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[selected].focus { + background: linear-gradient(90deg, var(--primary-color-medium) 50%, var(--primary-color-low)); } .cbi-dropdown[open] > ul.dropdown > li:last-child { @@ -1568,28 +1734,6 @@ body.modal-overlay-active #modal_overlay { width: 100%; } -.cbi-dropdown[disabled] { - pointer-events: none; - opacity: .6; -} - -input[type="text"] + .cbi-button, -input[type="password"] + .cbi-button, -select + .cbi-button { - border-radius: 0 3px 3px 0; - border-color: var(--border-color-high); - margin-left: -2px; - padding: 0 6px; - vertical-align: top; - height: 30px; - font-size: 14px; - line-height: 28px; -} - -select + .cbi-button { - border-left-color: transparent; -} - .cbi-title-ref { color: #37c; } @@ -1626,36 +1770,29 @@ select + .cbi-button { border-radius: 3px; position: relative; min-width: 170px; - height: 20px; - margin: 4px 0; + height: 8px; + margin: 1.4em 0 4px 0; background: var(--background-color-medium); } .cbi-progressbar > div { - background: #90c0e0; + background: var(--primary-color-medium); height: 100%; transition: width .25s ease-in; width: 0%; + border-radius: 2px; } -.cbi-progressbar::after { +.cbi-progressbar::before { position: absolute; - bottom: 0; - top: 0; - right: 0; + top: -1.4em; left: 0; - text-align: center; - text-shadow: 0 0 2px var(--background-color-high); content: attr(title); white-space: pre; overflow: hidden; text-overflow: ellipsis; } -:root[data-darkmode="true"] .cbi-progressbar::after { - mix-blend-mode: difference; -} - .zonebadge .cbi-tooltip { padding: 1px; background: inherit; @@ -1667,6 +1804,8 @@ select + .cbi-button { .zonebadge .cbi-tooltip > * { margin: 1px; + z-index: 2; + position: relative; } .zone-forwards { @@ -1691,18 +1830,13 @@ select + .cbi-button { } .btn.active, .btn:active { - box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); -} - -.btn.disabled { - cursor: default; - opacity: 0.65; - box-shadow: none; + box-shadow: inset 0 2px 4px hsla(var(--border-color-low-hsl), .25), 0 1px 2px rgba(0, 0, 0, 0.05); } +.btn.disabled, .btn[disabled] { cursor: default; - opacity: 0.65; + opacity: var(--disabled-opacity); box-shadow: none; } @@ -1743,21 +1877,17 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { position: relative; padding: .5em .5em .25em .5em; margin-bottom: .5em; - color: #404040; - background: linear-gradient(to bottom, #fceec1, #eedc94) repeat-x; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); - border-width: 1px; - border-style: solid; + color: var(--on-warn-color); + background: linear-gradient(#fceec1, #eedc94); + border: 1px solid var(--border-color-low); + border-color: var(--border-color-high) var(--border-color-high) var(--border-color-low); border-radius: 4px; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); + box-shadow: 1px 1px 1px var(--border-color-low); white-space: unset; } .alert-message .close { margin-top: 1px; - *margin-top: 0; } .alert-message h4, @@ -1780,16 +1910,16 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .label, header [data-indicator] { - padding: 1px 3px 2px; + padding: 3px 3px 2px; font-size: 9.75px; font-weight: bold; - color: #fff !important; + color: var(--text-color-high); text-transform: uppercase; white-space: nowrap; - background-color: #bfbfbf; + background-color: var(--background-color-low); border-radius: 3px; text-shadow: none; - margin-left: .4em; + margin: .125em 0 .125em .4em; } header [data-indicator][data-clickable] { @@ -1806,20 +1936,24 @@ a.label:hover { } .label.important { - background-color: #c43c35; + background-color: var(--primary-color-high); + color: var(--on-primary-color); } .label.warning { - background-color: #f89406; + background-color: var(--warn-color-high); + color: var(--on-warn-color); } .label.success { - background-color: #46a546; + background-color: var(--success-color-high); + color: var(--on-success-color); } .label.notice, header [data-indicator][data-style="active"] { - background-color: #62cffc; + color: var(--on-primary-color); + background-color: var(--primary-color-high); } /* LuCI specific items */ @@ -1827,13 +1961,13 @@ header [data-indicator][data-style="active"] { form.inline { display: inline; margin-bottom: 0; } -header .pull-right { padding-top: 8px; margin-left: auto; } - #modemenu li:last-child span.divider { display: none } #syslog { width: 100%; color: var(--text-color-highest); + margin-bottom: 18px; + font-family: monospace; } .cbi-section-table .tr:hover .td, @@ -1870,12 +2004,6 @@ header .pull-right { padding-top: 8px; margin-left: auto; } .middle { vertical-align: middle !important; } .bottom { vertical-align: bottom !important; } -.cbi-value-field input[type=checkbox], -.cbi-value-field input[type=radio] { - margin-top: 8px; - margin-right: 6px; -} - table table td, .cbi-value-field table td { border: none; @@ -1884,8 +2012,10 @@ table table td, .table.cbi-section-table input[type="password"], .table.cbi-section-table input[type="text"], .table.cbi-section-table textarea, -.table.cbi-section-table select { +.table.cbi-section-table select, +.table.cbi-section-table .cbi-select { width: 100%; + min-width: auto; } .table.cbi-section-table .td.cbi-section-table-cell { @@ -1893,20 +2023,22 @@ table table td, text-align: right; } -.table.cbi-section-table .td.cbi-section-table-cell select { +.table.cbi-section-table .td.cbi-section-table-cell select, +.table.cbi-section-table .td.cbi-section-table-cell .cbi-select { width: inherit; } .td.cbi-section-actions { text-align: right; vertical-align: middle; + width: 15%; } .td.cbi-section-actions > * { display: flex; } -.td.cbi-section-actions > * > *, +.td.cbi-section-actions > :not(.cbi-dropdown) > *, .td.cbi-section-actions > * > form > * { flex: 1 1 4em; margin: 0 1px; @@ -1927,10 +2059,30 @@ table table td, background: var(--background-color-medium); } +th[data-sortable-row] { cursor: pointer; } +th[data-sort-direction="asc"]::after { content: "\a0\25b2"; } +th[data-sort-direction="desc"]::after { content: "\a0\25bc"; } + .cbi-value-description { - background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><path fill='%230069d6' d='M10 0A10 10 0 000 10a10 10 0 0010 10 10 10 0 0010-10A10 10 0 0010 0zm1 17H9v-2h2v2zm2.1-7.7l-.9.9c-.8.7-1.2 1.3-1.2 2.8H9v-.5c0-1.1.4-2.1 1.2-2.8l1.2-1.3c.4-.3.6-.8.6-1.4a2 2 0 00-2-2 2 2 0 00-2 2H6a4 4 0 014-4 4 4 0 014 4c0 .9-.4 1.7-.9 2.3z'/></svg>") 0 .05em/1em no-repeat; - margin: .25em 0 0; - padding: .1em 0 0 1.3em; + margin: .25em 0 0 1.25em; + position: relative; +} + +.cbi-value-description:not(:empty)::before { + --help-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><path d='M10 0A10 10 0 000 10a10 10 0 0010 10 10 10 0 0010-10A10 10 0 0010 0zm1 17H9v-2h2v2zm2.1-7.7l-.9.9c-.8.7-1.2 1.3-1.2 2.8H9v-.5c0-1.1.4-2.1 1.2-2.8l1.2-1.3c.4-.3.6-.8.6-1.4a2 2 0 00-2-2 2 2 0 00-2 2H6a4 4 0 014-4 4 4 0 014 4c0 .9-.4 1.7-.9 2.3z'/></svg>"); + + position: absolute; + left: -1.25em; + content: "\a0"; + display: inline-block; + width: 1em; + height: 1em; + margin-right: .25em; + background: var(--primary-color-high); + mask-image: var(--help-icon); + mask-size: cover; + -webkit-mask-image: var(--help-icon); + -webkit-mask-size: cover; } .cbi-section-error { @@ -1953,10 +2105,9 @@ table table td, margin: 0 10px; text-align: center; white-space: nowrap; - 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); + background: linear-gradient(var(--background-color-high), var(--background-color-medium)); border-radius: 4px; - 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); + box-shadow: inset 0 1px 0 hsla(var(--text-color-low-hsl), 0.05); display: inline-flex; flex-direction: column; line-height: 1.2em; @@ -1965,15 +2116,24 @@ table table td, .ifacebox .ifacebox-head { border-bottom: 1px solid var(--border-color-high); - border-radius: 4px 4px 0 0; + border-radius: 3px 3px 0 0; padding: 2px; background: #eee; - color: #404040; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + color: var(--text-color-high); +} + +.ifacebox .ifacebox-head[style] { + text-shadow: 0 1px 1px hsla(var(--background-color-high-hsl), 0.75); } .ifacebox .ifacebox-head.active { - background: #90c0e0; + background: var(--primary-color-high); + color: var(--on-primary-color); +} + +[data-darkmode="true"] .zonebadge[style], +[data-darkmode="true"] .ifacebox-head[style] { + background: linear-gradient(rgba(var(--zone-color-rgb), .4), rgba(var(--zone-color-rgb), .3)) !important; } .ifacebox .ifacebox-body { @@ -1988,9 +2148,9 @@ table table td, padding: 2px; 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); + text-shadow: 0 1px 1px hsla(var(--background-color-high-hsl), 0.75); 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); + box-shadow: inset 0 1px 0 hsla(var(--background-color-high-hsl), 0.05); cursor: default; line-height: 1.2em; } @@ -2071,8 +2231,8 @@ table table td, border-radius: 4px; display: inline-block; white-space: nowrap; - color: #666; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + color: var(--text-color-high); + text-shadow: 0 1px 1px hsla(var(--background-color-high-hsl), 0.75); } .zonebadge > em, @@ -2122,62 +2282,61 @@ div.cbi-value var.cbi-tooltip-container, max-width: 900px; } +#modal_overlay > .modal.login > button.important { + font-size: 120% !important; + margin-top: .5em; + width: 100%; +} + .uci-change-list { line-height: 170%; 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 { +.uci-dialog div > del, +.uci-dialog div > ins, +.uci-dialog div > var { margin-bottom: 2px; - border: 1px solid #ccc; - background: #eee; + border: 1px solid var(--border-color-high); line-height: 15px; overflow: hidden; text-overflow: ellipsis; padding: 2px; + position: relative; + background-color: var(--background-color-low); } -.uci-change-list > * > del, -.uci-change-list > * > ins, -.uci-change-list > * > var { - overflow: hidden; - text-overflow: ellipsis; +.uci-dialog div > ins { + background-color: rgba(var(--success-color-high-rgb), .3); + border-color: rgba(var(--success-color-high-rgb), .6); } -.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 { - text-decoration: none; - font-family: monospace; - font-style: normal; - color: #404040; - display: block; +.uci-dialog div > del { + background-color: rgba(var(--error-color-high-rgb), .3); + border-color: rgba(var(--error-color-high-rgb), .6); } -.uci-change-list ins, -.uci-change-legend-label ins { - border-color: #0f0; - background: #cfc; +.uci-dialog var > ins { + background-color: rgba(var(--success-color-high-rgb), .3); } -.uci-change-list del, -.uci-change-legend-label del { - border-color: #f00; - background: #fcc; +.uci-dialog var > del { + background-color: rgba(var(--error-color-high-rgb), .3); } -.uci-change-list var, -.uci-change-legend-label var { - border-color: #ccc; - background: #eee; +.uci-change-list > var > * { + overflow: hidden; + text-overflow: ellipsis; +} + +.uci-dialog del, +.uci-dialog ins, +.uci-dialog var { + text-decoration: none; + font-family: monospace; + font-style: normal; + color: var(--text-color-high); + display: block; } .uci-change-legend { @@ -2201,22 +2360,15 @@ div.cbi-value var.cbi-tooltip-container, display: flex; } -.uci-change-legend-label > var > * { +.uci-change-legend-label > * > * { flex-basis: 100%; -} - -html body.apply-overlay-active { - height: calc(100vh - 63px); + padding: 1px; } #applyreboot-section { line-height: 300%; } -[data-page="admin-network-dhcp"] [data-name="ip"] { - width: 15%; -} - @keyframes flash { 0% { opacity: 1; } 50% { opacity: .5; } @@ -2227,20 +2379,32 @@ html body.apply-overlay-active { animation: flash .35s; } +#view > div.spinning:first-child { + display: table; + margin: 15vh auto; +} + .spinning { position: relative; padding-left: 32px !important; } .spinning::before { + --spinner-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' stroke='%23000' stroke-width='3' fill='none'><circle cx='10' cy='10' r='8' stroke-opacity='.5'/><path d='M10 2c4 0 8 4 8 8'><animateTransform attributeName='transform' type='rotate' dur='1s' from='0 10 10' to='360 10 10' repeatCount='indefinite'/></path></svg>"); + position: absolute; - top: 0; - left: 0; - bottom: 0; - width: 32px; + top: calc(50% - 10px); + left: 6px; + width: 20px; + height: 20px; content: " "; - background: url(../resources/icons/loading.gif) no-repeat center; - background-size: 16px; + background: var(--on-color, #000); + mask: var(--spinner-icon) center/cover no-repeat; + -webkit-mask: var(--spinner-icon) center/cover no-repeat; +} + +[data-darkmode="true"] .spinning::before { + background: var(--on-color, #fff); } [data-tab-title] { @@ -2383,3 +2547,11 @@ html body.apply-overlay-active { .assoclist .td:nth-of-type(6) button { word-break: normal; } + +[data-darkmode="true"] [data-page="admin-statistics-graphs"] [data-plugin] img { + filter: invert(100%) hue-rotate(150deg); +} + +[data-page="admin-system-admin-sshkeys"] .cbi-dynlist { + max-width: none; +} diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/favicon.png b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/favicon.png Binary files differindex d6eaa4bc4d..90adf2f94f 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/favicon.png +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/favicon.png 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 9f46e94bd9..da1d7fe281 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css @@ -3,6 +3,10 @@ header h3 a, header .brand { } @media screen and (max-device-width: 600px) { + .modal { + margin: 1.5em auto; + } + .tabs, .cbi-tabmenu { background: linear-gradient(var(--background-color-high) 20%, var(--border-color-medium) 100%); background-size: 1px 34px; @@ -37,7 +41,7 @@ header h3 a, header .brand { .table .th, .table .td, .table .tr::before { - flex: 2 2 33%; + flex: 1 1 50%; align-self: flex-start; overflow: hidden; text-overflow: ellipsis; @@ -75,6 +79,8 @@ header h3 a, header .brand { .td.cbi-value-field { align-self: flex-start; + flex-basis: 100%; + margin-bottom: .3em; } .td.cbi-value-field .cbi-button { @@ -112,7 +118,15 @@ header h3 a, header .brand { border-bottom: 1px solid var(--border-color-medium); } - .td[data-title]::before, + .td[data-title]::before { + content: attr(data-title); + font-weight: bold; + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: pre-line; + } + .td[data-description]::after { display: block; } @@ -121,15 +135,11 @@ header h3 a, header .brand { align-self: flex-start; } - .td[data-title] ~ .td.cbi-section-actions::before { - display: block; - content: "\a0"; - } - .td.cbi-section-actions { overflow: initial; max-width: 100%; padding: 3px 2px; + flex-basis: 100%; } .hide-sm, @@ -137,17 +147,13 @@ header h3 a, header .brand { display: none !important; } - .td.cbi-value-field { - flex-basis: 100%; - } - - .td.cbi-value-field[data-widget="dvalue"] { - flex-basis: 50%; - } - + .td.cbi-value-field[data-widget="CBI.DummyValue"], + .td.cbi-value-field[data-widget="CBI.Button"], + .td.cbi-value-field[data-widget="CBI.FlagValue"], + .td.cbi-value-field[data-widget="dvalue"], .td.cbi-value-field[data-widget="button"], .td.cbi-value-field[data-widget="fvalue"] { - flex-basis: 25%; + flex-basis: 50%; text-align: left; } @@ -157,10 +163,19 @@ header h3 a, header .brand { background-color: transparent; } + .cbi-tab-descr { + margin: 0 0 .5em 0; + } + .cbi-value { padding-bottom: .5em; border-bottom: 1px solid var(--border-color-high); margin-bottom: .5em; + display: block; + } + + .cbi-value.hidden { + display: none; } .cbi-value .cbi-value:last-child { @@ -170,23 +185,33 @@ header h3 a, header .brand { } .cbi-value label.cbi-value-title { - float: none; font-weight: bold; } - .cbi-value-field, .cbi-dropdown { + .cbi-value-field, .cbi-select, .cbi-dynlist, .cbi-dropdown:not(.btn):not(.cbi-button) { width: 100%; margin: 0; } + .cbi-dynlist > .item { + min-height: 30px; + display: flex; + align-items: center; + } + input, textarea, select, - .cbi-dropdown > ul > li input[type="text"] { + .cbi-dropdown > ul > li { font-size: 16px !important; - line-height: 28px; height: auto; } - select, input[type="text"], input[type="password"] { + .cbi-dropdown > ul > li input[type="text"] { + line-height: 28px; + } + + select, input[type="text"], input[type="password"], + .cbi-dropdown > ul > li input[type="text"], + .cbi-value-field .control-group { width: 100%; height: 30px; } @@ -195,25 +220,9 @@ header h3 a, header .brand { width: calc(100% - 25px); } - [data-dynlist] { - display: block; - } - - [data-dynlist] > .add-item > input { - width: calc(100% - 21px); - } - - [data-dynlist] > .add-item > .cbi-button { - margin-right: -1px; - } - input[type="text"] + .cbi-button, input[type="password"] + .cbi-button, select + .cbi-button { - font-size: 14px !important; - line-height: 28px; - height: 30px; - box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; } @@ -235,9 +244,8 @@ header h3 a, header .brand { padding: 8px; } - [data-page="admin-status-overview"] .cbi-section:nth-of-type(1) .td:first-child, - [data-page="admin-status-overview"] .cbi-section:nth-of-type(2) .td:first-child { - flex-grow: 1; + [data-page="admin-status-overview"] .td[width="33%"] { + flex-basis: 33%; } header .pull-right .label { @@ -270,11 +278,12 @@ header h3 a, header .brand { } header .pull-right { - flex: 1 1 20%; + flex: 0 1 20%; display: flex; flex-direction: column; padding: 0; justify-content: space-around; + margin: .2em 5px .2em auto; } .menu-dropdown, .dropdown-menu { @@ -291,14 +300,6 @@ header h3 a, header .brand { flex-basis: 12%; } - #cbi-network-switch_vlan .td.cbi-section-actions { - flex-basis: 100%; - } - - #cbi-network-switch_vlan .td.cbi-section-actions::before { - display: none; - } - #cbi-network-switch_vlan .td.cbi-section-actions > * { width: auto; display: block; @@ -335,6 +336,14 @@ header h3 a, header .brand { [data-name="bridge-vlan"] .td[data-title]::before { content: attr(data-title); } + + [data-page="admin-network-network"] .td[data-name="_ifacebox"] { + flex-basis: 40%; + } + + [data-page="admin-network-network"] .td[data-name="_ifacestat"] { + flex-basis: 60%; + } } @media screen and (max-device-width: 375px) { @@ -387,9 +396,12 @@ header h3 a, header .brand { body[data-page="admin-network-wireless"] .td.cbi-section-actions::before { content: none !important; } -} -@media screen and (max-width: 375px) { + [data-page="admin-network-network"] .td[data-name="_ifacebox"], + [data-page="admin-network-network"] .td[data-name="_ifacestat"] { + flex-basis: 100%; + } + .td .ifacebox { width: 100%; margin: 0 !important; diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/resources/view/bootstrap/sysauth.js b/themes/luci-theme-bootstrap/htdocs/luci-static/resources/view/bootstrap/sysauth.js new file mode 100644 index 0000000000..fd936c9b10 --- /dev/null +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/resources/view/bootstrap/sysauth.js @@ -0,0 +1,34 @@ +'use strict'; +'require ui'; +'require view'; + +return view.extend({ + render: function() { + var form = document.querySelector('form'), + btn = document.querySelector('button'); + + var dlg = ui.showModal( + _('Authorization Required'), + [].slice.call(document.querySelectorAll('section > *')), + 'login' + ); + + form.addEventListener('keypress', function(ev) { + if (ev.key == 'Enter') + btn.click(); + }); + + btn.addEventListener('click', function() { + dlg.querySelectorAll('*').forEach(function(node) { node.style.display = 'none' }); + dlg.appendChild(E('div', { 'class': 'spinning' }, _('Logging in…'))); + + form.submit() + }); + + document.querySelector('input[type="password"]').focus(); + + return ''; + }, + + addFooter: function() {} +}); |
