diff options
Diffstat (limited to 'themes')
28 files changed, 1114 insertions, 1014 deletions
diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap-dark b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap-dark new file mode 120000 index 0000000000..ac7bcbbf37 --- /dev/null +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap-dark @@ -0,0 +1 @@ +bootstrap
\ No newline at end of file diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap-light b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap-light new file mode 120000 index 0000000000..ac7bcbbf37 --- /dev/null +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap-light @@ -0,0 +1 @@ +bootstrap
\ No newline at end of file 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 4c3e25f52c..a2099f39d4 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css @@ -16,67 +16,138 @@ :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-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)); + --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)); - - 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; - } + --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-h: 0; + --background-color-s: 0%; + --background-color-l: calc(34 / 255 * 100%); + --text-color-delta-l-sign: -1; + --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; } /* Reset.less @@ -109,6 +180,7 @@ html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; + height: 100%; } a:focus { @@ -119,13 +191,6 @@ a:hover, a:active { outline: 0; } -footer, -header, -nav, -section { - display: block; -} - sub, sup { font-size: 75%; line-height: 0; @@ -154,7 +219,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 { @@ -175,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"] { @@ -192,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 @@ -203,8 +280,10 @@ body { font-weight: normal; line-height: 18px; color: var(--text-color-high); - padding: 18px 5px 5px 5px; - margin-top: 40px; + padding: 5px; + min-height: 100%; + display: flex; + flex-direction: column; } .container { @@ -215,25 +294,15 @@ body { zoom: 1; } -.container:before, .container:after { - display: table; - content: ""; - zoom: 1; -} - -.container:after { - clear: both; -} - 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; } @@ -416,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; @@ -445,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; @@ -462,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, @@ -496,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; @@ -539,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; @@ -566,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); @@ -604,21 +652,60 @@ select, white-space: nowrap; } -select { - padding: initial; - box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.1); +.cbi-value-field > .cbi-checkbox { + height: 30px; + display: flex; + align-items: center; } -input[type=checkbox], input[type=radio] { - width: auto; - height: auto; +.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] { @@ -640,6 +727,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: -1px; + left: -1px; + 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='8'/></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, @@ -648,54 +802,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 { 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 { + --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; } @@ -750,27 +916,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 @@ -834,56 +979,59 @@ 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 { 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 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; - 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 .fill { - 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; +header { + 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); + padding-right: calc((100% - 940px) / 2); } -header div > ul, .nav { +.nav { display: block; float: left; margin: 0 10px 0 0; @@ -891,12 +1039,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 +1052,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 +1087,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 +1099,7 @@ li.menu, .dropdown { position: relative; } -a.menu:after, .dropdown-toggle:after { +a.menu:after { width: 0; height: 0; display: inline-block; @@ -1026,7 +1114,7 @@ a.menu:after, .dropdown-toggle:after { opacity: 0.5; } -.menu-dropdown, .dropdown-menu { +.dropdown-menu { background-color: #fff; float: left; position: absolute; @@ -1035,7 +1123,6 @@ a.menu:after, .dropdown-toggle:after { z-index: 900; min-width: 160px; max-width: 220px; - _width: 160px; margin-left: 0; margin-right: 0; padding: 6px 0; @@ -1049,21 +1136,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 +1152,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,33 +1161,17 @@ 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; } .dropdown-menu .dropdown-menu { - position: absolute; - left: 159px; + position: absolute; + left: 159px; } .dropdown-menu li { - position: relative; + position: relative; } .tabs, .cbi-tabmenu { @@ -1123,7 +1183,7 @@ header .dropdown-menu a.hover, --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; @@ -1150,7 +1210,7 @@ header .dropdown-menu a.hover, 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 { @@ -1195,8 +1255,8 @@ header .dropdown-menu a.hover, 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 { @@ -1231,44 +1291,60 @@ 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: 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 { 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: auto; transition: opacity .125s ease-in; opacity: 0; visibility: hidden; @@ -1277,20 +1353,17 @@ footer { .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; + border: 1px solid var(--border-color-low); + box-shadow: 0 0 3px var(--background-color-low); padding: 1em 1em .5em 1em; min-width: 270px; } .modal > * { - flex-basis: 100%; line-height: normal; margin-bottom: .5em; max-width: 100%; @@ -1300,6 +1373,7 @@ footer { .modal > textarea { white-space: pre-wrap; overflow: auto; + width: 100%; } body.modal-overlay-active { @@ -1314,26 +1388,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; @@ -1344,27 +1398,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 { @@ -1374,39 +1434,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; - padding: 5px 14px 6px; - 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); + background: var(--default-btn-background); + padding: 0 14px; + color: var(--on-color); 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); 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, @@ -1423,16 +1479,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 { @@ -1454,29 +1510,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 { @@ -1494,17 +1550,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%; } @@ -1532,7 +1583,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, @@ -1544,11 +1595,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 { @@ -1594,7 +1642,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"] { @@ -1616,6 +1664,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], @@ -1630,11 +1679,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; } @@ -1643,23 +1695,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 { @@ -1675,28 +1721,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; } @@ -1733,36 +1757,28 @@ 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; } -@media (prefers-color-scheme: dark) { - .cbi-progressbar::after { - mix-blend-mode: difference; - } -} .zonebadge .cbi-tooltip { padding: 1px; @@ -1775,6 +1791,8 @@ select + .cbi-button { .zonebadge .cbi-tooltip > * { margin: 1px; + z-index: 2; + position: relative; } .zone-forwards { @@ -1799,18 +1817,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; } @@ -1851,21 +1864,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, @@ -1888,16 +1897,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] { @@ -1914,20 +1923,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 */ @@ -1935,11 +1948,13 @@ header [data-indicator][data-style="active"] { form.inline { display: inline; margin-bottom: 0; } -header .pull-right { padding-top: 8px; } - #modemenu li:last-child span.divider { display: none } -#syslog { width: 100%; } +#syslog { + width: 100%; + color: var(--text-color-highest); + margin-bottom: 18px; +} .cbi-section-table .tr:hover .td, .cbi-section-table .tr:hover .th, @@ -1975,12 +1990,6 @@ header .pull-right { padding-top: 8px; } .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; @@ -1989,8 +1998,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 { @@ -1998,20 +2009,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; @@ -2032,10 +2045,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 { @@ -2058,10 +2091,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 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-hsl), 0.05); display: inline-flex; flex-direction: column; line-height: 1.2em; @@ -2070,14 +2102,24 @@ table table td, .ifacebox .ifacebox-head { border-bottom: 1px solid var(--border-color-high); + 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 { @@ -2092,9 +2134,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; } @@ -2175,8 +2217,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, @@ -2226,62 +2268,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 { @@ -2305,74 +2346,15 @@ div.cbi-value var.cbi-tooltip-container, display: flex; } -.uci-change-legend-label > var > * { +.uci-change-legend-label > * > * { flex-basis: 100%; -} - -#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 > * { - 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 { - 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; } @@ -2383,20 +2365,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] { @@ -2539,3 +2533,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 3730080189..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,8 +3,8 @@ header h3 a, header .brand { } @media screen and (max-device-width: 600px) { - #maincontent.container { - margin-top: 30px; + .modal { + margin: 1.5em auto; } .tabs, .cbi-tabmenu { @@ -41,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; @@ -79,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 { @@ -116,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; } @@ -125,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, @@ -141,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; } @@ -161,30 +163,55 @@ 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-medium); + border-bottom: 1px solid var(--border-color-high); margin-bottom: .5em; + display: block; + } + + .cbi-value.hidden { + display: none; + } + + .cbi-value .cbi-value:last-child { + border-bottom: none; + padding-bottom: inherit; + margin-bottom: inherit; } .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; } @@ -193,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; } @@ -221,9 +232,9 @@ header h3 a, header .brand { margin: 0; } - .btn, .cbi-button { + button, .btn, .cbi-button { font-size: 14px !important; - padding: 4px 8px; + padding: 0 8px; } .actions, @@ -233,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 { @@ -268,21 +278,18 @@ 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 { top: 23px; } - body { - padding-top: 30px; - } - .cbi-optionals, .cbi-section-create { padding: 0 0 14px 0; @@ -293,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; @@ -337,37 +336,45 @@ header h3 a, header .brand { [data-name="bridge-vlan"] .td[data-title]::before { content: attr(data-title); } -} -@media screen and (max-device-width: 375px) { - #maincontent.container { - margin-top: 55px; + [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) { .cbi-page-actions { display: flex; - flex-wrap: wrap; justify-content: space-between; margin: 0 -1px; padding: 0; } - .cbi-page-actions .cbi-button:not(.cbi-dropdown) { - flex: 1 1 calc(50% - 2px); - margin: 1px !important; + .cbi-page-actions button { overflow: hidden; text-overflow: ellipsis; } + .cbi-page-actions .cbi-button { + flex: 1; + margin: 1px !important; + line-height: 2em; + } + .cbi-page-actions .cbi-button-negative, .cbi-page-actions .cbi-button-primary, .cbi-page-actions .cbi-button-apply { - flex-basis: calc(100% - -2px); + flex: 3; } .cbi-section-actions .cbi-button { overflow: hidden; text-overflow: ellipsis; + margin: 1px !important; } body[data-page="admin-network-wireless"] .td[data-name="_badge"] { @@ -389,15 +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-device-width: 200px) { - #maincontent.container { - margin-top: 230px; + [data-page="admin-network-network"] .td[data-name="_ifacebox"], + [data-page="admin-network-network"] .td[data-name="_ifacestat"] { + flex-basis: 100%; } -} -@media screen and (max-width: 375px) { .td .ifacebox { width: 100%; margin: 0 !important; @@ -407,6 +411,7 @@ header h3 a, header .brand { .td .ifacebox .ifacebox-head { min-width: 25%; justify-content: space-around; + border-radius: 4px 0 0 4px; } .td .ifacebox .ifacebox-head, diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/resources/menu-bootstrap.js b/themes/luci-theme-bootstrap/htdocs/luci-static/resources/menu-bootstrap.js index 5400276b08..32922f3842 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/resources/menu-bootstrap.js +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/resources/menu-bootstrap.js @@ -22,14 +22,6 @@ return baseclass.extend({ if (node) this.renderTabMenu(node, url); } - - document.addEventListener('poll-start', this.handleBodyMargin); - document.addEventListener('poll-stop', this.handleBodyMargin); - document.addEventListener('uci-new-changes', this.handleBodyMargin); - document.addEventListener('uci-clear-changes', this.handleBodyMargin); - window.addEventListener('resize', this.handleBodyMargin); - - this.handleBodyMargin(); }, renderTabMenu: function(tree, url, level) { @@ -96,9 +88,7 @@ return baseclass.extend({ var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0); ul.appendChild(E('li', { 'class': isActive ? 'active' : null }, [ - E('a', { 'href': L.url(children[i].name) }, [ _(children[i].title) ]), - ' ', - E('span', { 'class': 'divider' }, [ '|' ]) + E('a', { 'href': L.url(children[i].name) }, [ _(children[i].title) ]) ])); if (isActive) @@ -107,12 +97,5 @@ return baseclass.extend({ if (ul.children.length > 1) ul.style.display = ''; - }, - - handleBodyMargin: function(ev) { - var body = document.querySelector('body'), - head = document.querySelector('header'); - - body.style.marginTop = head.offsetHeight + 'px'; } }); 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() {} +}); diff --git a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/footer.htm b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/footer.htm deleted file mode 100644 index d0c395bf31..0000000000 --- a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/footer.htm +++ /dev/null @@ -1,18 +0,0 @@ -<%# - Copyright 2008 Steven Barth <steven@midlink.org> - Copyright 2008 Jo-Philipp Wich <jow@openwrt.org> - Copyright 2012 David Menting <david@nut-bolt.nl> - Licensed to the public under the Apache License 2.0. --%> - -<% local ver = require "luci.version" %> - - <footer> - <a href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> / <%= ver.distversion %> - <ul class="breadcrumb pull-right" id="modemenu" style="display:none"></ul> - </footer> - </div> - <script type="text/javascript">L.require('menu-bootstrap')</script> - </body> -</html> - diff --git a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm deleted file mode 100644 index d762637d8a..0000000000 --- a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm +++ /dev/null @@ -1,79 +0,0 @@ -<%# - Copyright 2008 Steven Barth <steven@midlink.org> - Copyright 2008-2016 Jo-Philipp Wich <jow@openwrt.org> - Copyright 2012 David Menting <david@nut-bolt.nl> - Licensed to the public under the Apache License 2.0. --%> - -<% - local sys = require "luci.sys" - local util = require "luci.util" - local http = require "luci.http" - local disp = require "luci.dispatcher" - - local boardinfo = util.ubus("system", "board") - - local node = disp.context.dispatched - - -- send as HTML5 - http.prepare_content("text/html") --%> -<!DOCTYPE html> -<html lang="<%=luci.i18n.context.lang%>"> - <head> - <meta charset="utf-8"> - <title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title> - <meta name="viewport" content="initial-scale=1.0"> - <link rel="stylesheet" href="<%=media%>/cascade.css"> - <link rel="stylesheet" media="only screen and (max-device-width: 854px)" href="<%=media%>/mobile.css" type="text/css" /> - <link rel="shortcut icon" href="<%=media%>/favicon.png"> - <% if node and node.css then %> - <link rel="stylesheet" href="<%=resource%>/<%=node.css%>"> - <% end -%> - <% if css then %> - <style title="text/css"><%= css %></style> - <% end -%> - <script src="<%=url('admin/translations', luci.i18n.context.lang)%><%# ?v=PKG_VERSION %>"></script> - <script src="<%=resource%>/cbi.js"></script> - </head> - - <body class="lang_<%=luci.i18n.context.lang%> <% if node then %><%= striptags( node.title ) %><%- end %>" data-page="<%= pcdata(table.concat(disp.context.requestpath, "-")) %>"> - <header> - <div class="fill"> - <div class="container"> - <a class="brand" href="/"><%=striptags(boardinfo.hostname or "?")%></a> - <ul class="nav" id="topmenu" style="display:none"></ul> - <div id="indicators" class="pull-right"></div> - </div> - </div> - </header> - - <div id="maincontent" class="container"> - <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%> - <div class="alert-message warning"> - <h4><%:No password set!%></h4> - <p><%:There is no password set on this router. Please configure a root password to protect the web interface.%></p> - <% if disp.lookup("admin/system/admin") then %> - <div class="right"><a class="btn" href="<%=url("admin/system/admin")%>"><%:Go to password configuration...%></a></div> - <% 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 -%> - - <noscript> - <div class="alert-message warning"> - <h4><%:JavaScript required!%></h4> - <p><%:You must enable JavaScript in your browser or LuCI will not work properly.%></p> - </div> - </noscript> - - <div id="tabmenu" style="display:none"></div> diff --git a/themes/luci-theme-bootstrap/root/etc/uci-defaults/30_luci-theme-bootstrap b/themes/luci-theme-bootstrap/root/etc/uci-defaults/30_luci-theme-bootstrap index 4381a15c2e..f83d84702a 100755 --- a/themes/luci-theme-bootstrap/root/etc/uci-defaults/30_luci-theme-bootstrap +++ b/themes/luci-theme-bootstrap/root/etc/uci-defaults/30_luci-theme-bootstrap @@ -1,12 +1,28 @@ #!/bin/sh -if [ "$PKG_UPGRADE" != 1 ]; then - uci get luci.themes.Bootstrap >/dev/null 2>&1 || \ - uci batch <<-EOF - set luci.themes.Bootstrap=/luci-static/bootstrap - set luci.main.mediaurlbase=/luci-static/bootstrap - commit luci - EOF +changed=0 + +set_opt() { + local key=$1 + local val=$2 + + if ! uci -q get "luci.$key" 2>/dev/null; then + uci set "luci.$key=$val" + changed=1 + fi +} + +set_opt themes.Bootstrap /luci-static/bootstrap + +if [ "$PKG_UPGRADE" != 1 ] && [ $changed = 1 ]; then + set_opt main.mediaurlbase /luci-static/bootstrap +fi + +set_opt themes.BootstrapDark /luci-static/bootstrap-dark +set_opt themes.BootstrapLight /luci-static/bootstrap-light + +if [ $changed = 1 ]; then + uci commit luci fi exit 0 diff --git a/themes/luci-theme-bootstrap/ucode/template/themes/bootstrap-dark b/themes/luci-theme-bootstrap/ucode/template/themes/bootstrap-dark new file mode 120000 index 0000000000..ac7bcbbf37 --- /dev/null +++ b/themes/luci-theme-bootstrap/ucode/template/themes/bootstrap-dark @@ -0,0 +1 @@ +bootstrap
\ No newline at end of file diff --git a/themes/luci-theme-bootstrap/ucode/template/themes/bootstrap-light b/themes/luci-theme-bootstrap/ucode/template/themes/bootstrap-light new file mode 120000 index 0000000000..ac7bcbbf37 --- /dev/null +++ b/themes/luci-theme-bootstrap/ucode/template/themes/bootstrap-light @@ -0,0 +1 @@ +bootstrap
\ No newline at end of file diff --git a/themes/luci-theme-bootstrap/ucode/template/themes/bootstrap/footer.ut b/themes/luci-theme-bootstrap/ucode/template/themes/bootstrap/footer.ut new file mode 100644 index 0000000000..6031724053 --- /dev/null +++ b/themes/luci-theme-bootstrap/ucode/template/themes/bootstrap/footer.ut @@ -0,0 +1,20 @@ + {% if (!blank_page): %} + </div> + <footer> + <span> + Powered by + <a href="https://github.com/openwrt/luci"> + {{ version.luciname }} ({{ version.luciversion }})</a> + / + <a href="{{ entityencode(version.disturl ?? '#', true) }}"> + {{ version.distname }} {{ version.distversion }} ({{ version.distrevision }})</a> + {% if (lua_active): %} + / {{ _('Lua compatibility mode active') }} + {% endif %} + </span> + <ul class="breadcrumb pull-right" id="modemenu" style="display:none"></ul> + </footer> + <script type="text/javascript">L.require('menu-bootstrap')</script> + {% endif %} + </body> +</html> diff --git a/themes/luci-theme-bootstrap/ucode/template/themes/bootstrap/header.ut b/themes/luci-theme-bootstrap/ucode/template/themes/bootstrap/header.ut new file mode 100644 index 0000000000..b7bc770b4b --- /dev/null +++ b/themes/luci-theme-bootstrap/ucode/template/themes/bootstrap/header.ut @@ -0,0 +1,83 @@ +{# + Copyright 2008 Steven Barth <steven@midlink.org> + Copyright 2012 David Menting <david@nut-bolt.nl> + Copyright 2008-2022 Jo-Philipp Wich <jo@mein.io> + Licensed to the public under the Apache License 2.0. +-#} + +{% + import { getuid, getspnam } from 'luci.core'; + + const boardinfo = ubus.call('system', 'board'); + const darkpref = (theme == 'bootstrap-dark' ? 'true' : (theme == 'bootstrap-light' ? 'false' : null)); + + http.prepare_content('text/html; charset=UTF-8'); +-%} + +<!DOCTYPE html> +<html lang="{{ dispatcher.lang }}" {{ darkpref ? `data-darkmode="${darkpref}"` : '' }}> + <head> + <meta charset="utf-8"> + <title>{{ striptags(`${boardinfo.hostname ?? '?'}${node ? ` - ${node.title}` : ''}`) }} - LuCI</title> + {% if (!darkpref): %} + <script type="text/javascript"> + var mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'), + rootElement = document.querySelector(':root'), + setDarkMode = function(match) { rootElement.setAttribute('data-darkmode', match.matches) }; + + mediaQuery.addEventListener('change', setDarkMode); + setDarkMode(mediaQuery); + </script> + {% endif %} + <meta name="viewport" content="initial-scale=1.0"> + <link rel="stylesheet" href="{{ media }}/cascade.css"> + <link rel="stylesheet" media="only screen and (max-device-width: 854px)" href="{{ media }}/mobile.css" type="text/css" /> + <link rel="shortcut icon" href="{{ media }}/favicon.png"> + {% if (node?.css): %} + <link rel="stylesheet" href="{{ resource }}/{{ node.css }}"> + {% endif %} + {% if (css): %} + <style title="text/css">{{ css }}</style> + {% endif %} + <script src="{{ dispatcher.build_url('admin/translations', dispatcher.lang) }}"></script> + <script src="{{ resource }}/cbi.js"></script> + </head> + + <body class="lang_{{ dispatcher.lang }} {{ entityencode(striptags(node?.title ?? ''), true) }}" data-page="{{ entityencode(join('-', ctx.request_path), true) }}"> + {% if (!blank_page): %} + <header> + <a class="brand" href="/">{{ striptags(boardinfo.hostname ?? '?') }}</a> + <ul class="nav" id="topmenu" style="display:none"></ul> + <div id="indicators" class="pull-right"></div> + </header> + + <div id="maincontent" class="container"> + {% if (getuid() == 0 && getspnam('root')?.pwdp === ''): %} + <div class="alert-message warning"> + <h4>{{ _('No password set!') }}</h4> + <p>{{ _('There is no password set on this router. Please configure a root password to protect the web interface.') }}</p> + {% if (dispatcher.lookup("admin/system/admin")): %} + <div class="right"><a class="btn" href="{{ dispatcher.build_url("admin/system/admin") }}">{{ _('Go to password configuration...') }}</a></div> + {% endif %} + </div> + {% endif %} + + {% if (boardinfo.rootfs_type == "initramfs"): %} + <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 (dispatcher.lookup("admin/system/flash")): %} + <div class="right"><a class="btn" href="{{ dispatcher.build_url("admin/system/flash") }}">{{ _('Go to firmware upgrade...') }}</a></div> + {% endif %} + </div> + {% endif %} + + <noscript> + <div class="alert-message warning"> + <h4>{{ _('JavaScript required!') }}</h4> + <p>{{ _('You must enable JavaScript in your browser or LuCI will not work properly.') }}</p> + </div> + </noscript> + + <div id="tabmenu" style="display:none"></div> + {% endif %} diff --git a/themes/luci-theme-bootstrap/ucode/template/themes/bootstrap/sysauth.ut b/themes/luci-theme-bootstrap/ucode/template/themes/bootstrap/sysauth.ut new file mode 100644 index 0000000000..a172d95d76 --- /dev/null +++ b/themes/luci-theme-bootstrap/ucode/template/themes/bootstrap/sysauth.ut @@ -0,0 +1,48 @@ +{# + Copyright 2022 Jo-Philipp Wich <jo@mein.io> + Licensed to the public under the Apache License 2.0. +-#} + +{% include('header', { blank_page: true }) %} + +<section hidden> + <form method="post" class="cbi-map"> + <div class="cbi-section"> + <div class="cbi-section-node"> + <div class="cbi-value"> + <label class="cbi-value-title" for="luci_username">{{ _('Username') }}</label> + <div class="cbi-value-field"> + <input name="luci_username" id="luci_username" type="text" autocomplete="username" value="{{ entityencode(duser, true) }}"> + </div> + </div> + <div class="cbi-value"> + <label class="cbi-value-title" for="luci_password">{{ _('Password') }}</label> + <div class="cbi-value-field"> + <input name="luci_password" id="luci_password" type="password" autocomplete="current-password"> + </div> + </div> + </div> + </div> + </form> + + <hr> + + {% if (fuser): %} + <div class="alert-message error"> + {{ _('Invalid username and/or password! Please try again.') }} + </div> + {% endif %} + + <button class="btn cbi-button-positive important">{{ _('Login') }}</button> +</section> + +<div id="view"> + <div class="spinning">{{ _('Loading view…') }}</div> + <script type="text/javascript"> + L.require('ui').then(function(ui) { + ui.instantiateView('bootstrap.sysauth'); + }); + </script> +</div> + +{% include('footer', { blank_page: true }) %} diff --git a/themes/luci-theme-material/htdocs/luci-static/material/brand.png b/themes/luci-theme-material/htdocs/luci-static/material/brand.png Binary files differindex 1e903c5f96..749f8191b6 100644 --- a/themes/luci-theme-material/htdocs/luci-static/material/brand.png +++ b/themes/luci-theme-material/htdocs/luci-static/material/brand.png diff --git a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css index 18ae319d7e..fa2f60ebf1 100644 --- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css +++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css @@ -76,7 +76,8 @@ background: inherit; } -.td[width="33%"] { +.td[width="33%"], +.td[width="33%"]~.td { padding: 1.1em; } @@ -199,6 +200,7 @@ input, background-color: transparent; background-image: none; box-shadow: none; + align-items: center; } select, @@ -402,7 +404,7 @@ header > .fill > .container > #logo { header > .fill > .container > #logo > img { width: calc(0% + 10rem); - margin-top: -.1rem; + margin-top: -.5rem; } header > .fill > .container > .brand { @@ -464,7 +466,7 @@ header > .fill > .container > .status > * { } #modemenu > li > a.active { - background-color: #5bc0de !important; + background-color: #002B49 !important; } #modemenu > li.divider { @@ -494,7 +496,7 @@ header > .fill > .container > .status > * { .notice, [data-indicator]:not([data-style="inactive"]) { - background-color: #5bc0de !important; + background-color: #002B49 !important; } .error { @@ -582,8 +584,7 @@ header > .fill > .container > .status > * { } .main > .main-left > .nav > .slide > .menu, -.main > .main-left > .nav > li > [data-title="Logout"], -.main > .main-left > .nav > li > [data-title="Dashboard"] { +.main > .main-left > .nav > li > [data-title] { font-size: 1.15rem; font-weight: 500; display: flex; @@ -1650,7 +1651,6 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child { .cbi-progressbar::after { font-family: monospace; - font-size: 1.3em; font-weight: bold; font-size-adjust: .38; line-height: normal; @@ -1735,6 +1735,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child { .modal p { padding-left: .25rem; word-break: break-word; + color: #fff; } .modal label.btn { @@ -1836,6 +1837,7 @@ body.modal-overlay-active #modal_overlay { .ifacebadge { display: inline-flex; + gap: .2rem; padding: .5rem .8rem; border-bottom: thin solid #ccc; background: #eee; @@ -1852,11 +1854,6 @@ td > .ifacebadge, .ifacebadge > img { display: inline-block; align-self: flex-start; - margin: 0 .2rem; -} - -.ifacebadge > img + img { - margin: 0 .2rem 0 0; } .network-status-table { @@ -2341,6 +2338,12 @@ input[name="nslookup"] { margin-bottom: .2rem; } +.control-group { + display: flex; + flex-wrap: wrap; + gap: 2px; +} + [data-page="admin-system-opkg"] div.btn { line-height: 3; display: inline; @@ -2650,7 +2653,7 @@ input[name="nslookup"] { .main > .main-left > .nav > li, .main > .main-left > .nav > li a, .main > .main-left > .nav > .slide > .menu, - .main > .main-left > .nav > li > [data-title="Logout"] { + .main > .main-left > .nav > li > [data-title] { font-size: .9rem; } @@ -2929,7 +2932,7 @@ input[name="nslookup"] { } .main > .main-left > .nav > .slide > .menu, - .main > .main-left > .nav > li > [data-title="Logout"] { + .main > .main-left > .nav > li > [data-title] { font-size: 1.2rem; } diff --git a/themes/luci-theme-material/htdocs/luci-static/material/custom.css b/themes/luci-theme-material/htdocs/luci-static/material/custom.css index 7a5bbb93e8..b2515fb5aa 100644 --- a/themes/luci-theme-material/htdocs/luci-static/material/custom.css +++ b/themes/luci-theme-material/htdocs/luci-static/material/custom.css @@ -1,6 +1,6 @@ :root { - --main-color: #09c; - --header-bg: #09c; + --main-color: #00B5E2; + --header-bg: #00B5E2; --header-color: #fff; --bar-bg: #5bc0de; --menu-bg-color: #fff; @@ -8,6 +8,6 @@ --menu-color-hover: #202124; --main-menu-color: #202124; --submenu-bg-hover: #d4d4d4; - --submenu-bg-hover-active: #09c; + --submenu-bg-hover-active: #00B5E2; --font-body: "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB"; } diff --git a/themes/luci-theme-material/luasrc/view/themes/material/header.htm b/themes/luci-theme-material/luasrc/view/themes/material/header.htm deleted file mode 100644 index a81991d0a0..0000000000 --- a/themes/luci-theme-material/luasrc/view/themes/material/header.htm +++ /dev/null @@ -1,101 +0,0 @@ -<%# - Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI - - luci-theme-material - Copyright 2015-2017 Lutty Yang <lutty@wcan.in> - - Have a bug? Please create an issue here on GitHub! - https://github.com/LuttyYang/luci-theme-material/issues - - luci-theme-bootstrap: - Copyright 2008 Steven Barth <steven@midlink.org> - Copyright 2008-2016 Jo-Philipp Wich <jow@openwrt.org> - Copyright 2012 David Menting <david@nut-bolt.nl> - - MUI: - https://github.com/muicss/mui - - Licensed to the public under the Apache License 2.0 --%> - -<% - local sys = require "luci.sys" - local util = require "luci.util" - local http = require "luci.http" - local disp = require "luci.dispatcher" - local ver = require "luci.version" - - local boardinfo = util.ubus("system", "board") or { } - - local node = disp.context.dispatched - local path = table.concat(disp.context.path, "-") - - http.prepare_content("text/html; charset=UTF-8") --%> -<!DOCTYPE html> -<html lang="<%=luci.i18n.context.lang%>"> -<head> -<meta charset="utf-8"> -<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/> -<meta name="apple-mobile-web-app-capable" content="yes"> -<meta name="mobile-web-app-capable" content="yes"> -<meta name="theme-color" content="#09c"> -<meta name="msapplication-tap-highlight" content="no"> -<meta name="msapplication-TileColor" content="#09c"> -<meta name="application-name" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI"> -<meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI"> -<link rel="stylesheet" href="<%=media%>/cascade.css"> -<link rel="shortcut icon" href="<%=media%>/favicon.ico"> -<% if node and node.css then %> -<link rel="stylesheet" href="<%=resource%>/<%=node.css%>"> -<% end -%> -<script src="<%=url('admin/translations', luci.i18n.context.lang)%><%# ?v=PKG_VERSION %>"></script> -<script src="<%=resource%>/cbi.js"></script> -<title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title> -<% if css then %><style title="text/css"> -<%= css %> -</style> -<% end -%> -</head> -<body class="lang_<%=luci.i18n.context.lang%> <% if luci.dispatcher.context.authsession then %>logged-in<% end %> <% if not (path == "") then %>node-<%= path %><% else %>node-main-login<% end %>" data-page="<%= pcdata(path) %>"> -<header> - <div class="fill"> - <div class="container"> - <span class="showSide"></span> - <a id="logo" href="<% if luci.dispatcher.context.authsession then %><%=url('admin/status/overview')%><% else %>#<% end %>"><img src="<%=media%>/brand.png" alt="OpenWrt"></a> - <a class="brand" href="#"><%=striptags(boardinfo.hostname or "?")%></a> - <span class="status" id="indicators"></span> - </div> - </div> -</header> -<div class="main"> - <div style="" class="loading"><span><div class="loading-img"></div><%:Collecting data...%></span></div> - <div class="main-left" id="mainmenu" style="display:none"></div> - <div class="main-right"> - <div class="modemenu-buttons" style="display:none"> - <ul id="modemenu"></ul> - </div> - <div class="darkMask"></div> - <div id="maincontent"> - <div class="container"> - <%- 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> - <p><%:You must enable JavaScript in your browser or LuCI will not work properly.%></p> - </div> - </noscript> - - <div id="tabmenu" style="display:none"></div> diff --git a/themes/luci-theme-material/luasrc/view/themes/material/footer.htm b/themes/luci-theme-material/ucode/template/themes/material/footer.ut index f572504f4b..9249427a43 100644 --- a/themes/luci-theme-material/luasrc/view/themes/material/footer.htm +++ b/themes/luci-theme-material/ucode/template/themes/material/footer.ut @@ -1,4 +1,4 @@ -<%# +{# Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI luci-theme-material @@ -16,17 +16,17 @@ https://github.com/muicss/mui Licensed to the public under the Apache License 2.0 --%> - -<% local ver = require "luci.version" %> - </div> - <footer class="mobile-hide"> - <a href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> / <%= ver.distversion %> - </footer> +-#} + + </div> + <footer class="mobile-hide"> + <a href="https://github.com/openwrt/luci">Powered by {{ version.luciname }} ({{ version.luciversion }})</a> / + {{ version.distname }} {{ version.distversion }} ({{ version.distrevision }}) + </footer> + </div> </div> -</div> -<script type="text/javascript">L.require('menu-material')</script> + <script type="text/javascript">L.require('menu-material')</script> </body> </html> diff --git a/themes/luci-theme-material/ucode/template/themes/material/header.ut b/themes/luci-theme-material/ucode/template/themes/material/header.ut new file mode 100644 index 0000000000..24b2c73517 --- /dev/null +++ b/themes/luci-theme-material/ucode/template/themes/material/header.ut @@ -0,0 +1,96 @@ +{# + Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI + + luci-theme-material + Copyright 2015-2017 Lutty Yang <lutty@wcan.in> + + Have a bug? Please create an issue here on GitHub! + https://github.com/LuttyYang/luci-theme-material/issues + + luci-theme-bootstrap: + Copyright 2008 Steven Barth <steven@midlink.org> + Copyright 2008-2016 Jo-Philipp Wich <jow@openwrt.org> + Copyright 2012 David Menting <david@nut-bolt.nl> + + MUI: + https://github.com/muicss/mui + + Licensed to the public under the Apache License 2.0 +-#} + +{% + import { getuid, getspnam } from 'luci.core'; + + const boardinfo = ubus.call('system', 'board'); + const hostname = striptags(boardinfo?.hostname ?? '?'); + + http.prepare_content('text/html; charset=UTF-8'); +-%} + +<!DOCTYPE html> +<html lang="{{ dispatcher.lang }}"> +<head> +<meta charset="utf-8"> +<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/> +<meta name="apple-mobile-web-app-capable" content="yes"> +<meta name="mobile-web-app-capable" content="yes"> +<meta name="theme-color" content="#09c"> +<meta name="msapplication-tap-highlight" content="no"> +<meta name="msapplication-TileColor" content="#09c"> +<meta name="application-name" content="{{ hostname }} - LuCI"> +<meta name="apple-mobile-web-app-title" content="{{ hostname }} - LuCI"> +<link rel="stylesheet" href="{{ media }}/cascade.css"> +<link rel="shortcut icon" href="{{ media }}/favicon.ico"> +{% if (node?.css): %} +<link rel="stylesheet" href="{{ resource }}/{{ node.css }}"> +{% endif %} +<script src="{{ dispatcher.build_url('admin/translations', dispatcher.lang) }}"></script> +<script src="{{ resource }}/cbi.js"></script> +<title>{{ hostname }}{{ node?.title ? ` - ${striptags(node.title)}` : '' }} - LuCI</title> +{% if (css): %} +<style title="text/css">{{ css }}</style> +{% endif %} +</head> +<body class="lang_{{ dispatcher.lang }} {{ ctx.authsession ? 'logged-in' : '' }} {{ length(ctx.path) ? `node-${join('-', ctx.path)}` : 'node-main-login' }}" data-page="{{ entityencode(join('-', ctx.path), true) }}"> +<header> + <div class="fill"> + <div class="container"> + <span class="showSide"></span> + <a id="logo" href="{{ ctx.authsession ? dispatcher.build_url('admin/status/overview') : '#' }}"><img src="{{ media }}/brand.png" alt="OpenWrt"></a> + <a class="brand" href="#">{{ hostname }}</a> + <span class="status" id="indicators"></span> + </div> + </div> +</header> +<div class="main"> + <div style="" class="loading"><span><div class="loading-img"></div>{{ _('Collecting data...') }}</span></div> + <div class="main-left" id="mainmenu" style="display:none"></div> + <div class="main-right"> + <div class="modemenu-buttons" style="display:none"> + <ul id="modemenu"></ul> + </div> + <div class="darkMask"></div> + <div id="maincontent"> + <div class="container"> + {% if (getuid() == 0 && getspnam('root')?.pwdp === ''): %} + <!-- no password set --> + {% endif %} + + {% if (boardinfo?.rootfs_type == "initramfs"): %} + <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 (dispatcher.lookup("admin/system/flash")): %} + <div class="right"><a class="btn" href="{{ dispatcher.build_url("admin/system/flash") }}">{{ _('Go to firmware upgrade...') }}</a></div> + {% endif %} + </div> + {% endif %} + + <noscript> + <div class="alert-message warning"> + <h4>{{ _('JavaScript required!') }}</h4> + <p>{{ _('You must enable JavaScript in your browser or LuCI will not work properly.') }}</p> + </div> + </noscript> + + <div id="tabmenu" style="display:none"></div> 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 cf320e4aed..a8b33c022f 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 @@ -15,6 +15,10 @@ src: url("GalanoGrotesqueW00-Regular.woff2") format("woff2"); } +:root[lang="bg"], :root[lang="ru"], :root[lang="uk"], :root[lang="el"], :root[lang="he"] { + --regular-font: "Helvetica"; +} + /* * resets and base style */ diff --git a/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/logo.png b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/logo.png Binary files differnew file mode 100644 index 0000000000..182d7e35c5 --- /dev/null +++ b/themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/logo.png 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 deleted file mode 100644 index 34c52f4b12..0000000000 --- a/themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/header.htm +++ /dev/null @@ -1,77 +0,0 @@ -<%# - Copyright 2020 Jo-Philipp Wich <jo@mein.io> - Licensed to the public under the Apache License 2.0. --%> - -<% - local sys = require "luci.sys" - local util = require "luci.util" - local http = require "luci.http" - local disp = require "luci.dispatcher" - local ver = require "luci.version" - - local boardinfo = util.ubus("system", "board") or { } - - local node = disp.context.dispatched - local path = table.concat(disp.context.path, "-") - - http.prepare_content("text/html; charset=UTF-8") --%> -<!DOCTYPE html> -<html lang="<%=luci.i18n.context.lang%>"> -<head> -<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> -<meta http-equiv="Content-Script-Type" content="text/javascript" /> -<meta name="viewport" content="width=device-width, initial-scale=1" /> -<link rel="stylesheet" type="text/css" media="screen" href="<%=media%>/cascade.css" /> -<link rel="icon" href="<%=media%>/logo.svg" type="image/svg+xml" /> -<script type="text/javascript" src="<%=url('admin/translations', luci.i18n.context.lang)%><%# ?v=PKG_VERSION %>"></script> -<script type="text/javascript" src="<%=resource%>/cbi.js"></script> -<title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title> -<% if css then %><style title="text/css"> -<%= css %> -</style> -<% end -%> -</head> -<body class="lang_<%=luci.i18n.context.lang%>" data-page="<%= pcdata(path) %>"> - -<p class="skiplink"> -<span id="skiplink1"><a href="#navigation"><%:Skip to navigation%></a></span> -<span id="skiplink2"><a href="#content"><%:Skip to content%></a></span> -</p> - -<div id="menubar"> - <h2 class="navigation"><a id="navigation" name="navigation"><%:Navigation%></a></h2> - - <span class="hostname"><a href="/"><%=striptags(boardinfo.hostname or "?")%></a></span> - <span class="distversion"><%=ver.distversion%></span> - <span id="indicators"></span> -</div> - -<div id="modemenu" style="display:none"></div> - -<div id="maincontainer"> - <div id="mainmenu"></div> - - <div id="maincontent"> - <%- 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 -%> - <div class="alert-message warning"> - <h4><%:No password set!%></h4> - <p><%:There is no password set on this router. Please configure a root password to protect the web interface.%></p> - <% if disp.lookup("admin/system/admin") then %> - <div class="right"><a class="btn" href="<%=url("admin/system/admin")%>"><%:Go to password configuration...%></a></div> - <% 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 -%> - - <div id="tabmenu" style="display:none"></div> diff --git a/themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/footer.htm b/themes/luci-theme-openwrt-2020/ucode/template/themes/openwrt2020/footer.ut index e9122f0b5c..5899f2a9dd 100644 --- a/themes/luci-theme-openwrt-2020/luasrc/view/themes/openwrt2020/footer.htm +++ b/themes/luci-theme-openwrt-2020/ucode/template/themes/openwrt2020/footer.ut @@ -1,14 +1,13 @@ -<%# +{# Copyright 2020 Jo-Philipp Wich <jo@mein.io> Licensed to the public under the Apache License 2.0. --%> +-#} </div> </div> <p class="luci"> - <% local ver = require "luci.version" -%> - Powered by <%= ver.luciname %> (<%= ver.luciversion %>) + Powered by {{ version.luciname }} ({{ version.luciversion }}) </p> <script type="text/javascript">L.require('menu-openwrt2020')</script> diff --git a/themes/luci-theme-openwrt-2020/ucode/template/themes/openwrt2020/header.ut b/themes/luci-theme-openwrt-2020/ucode/template/themes/openwrt2020/header.ut new file mode 100644 index 0000000000..2b7c581387 --- /dev/null +++ b/themes/luci-theme-openwrt-2020/ucode/template/themes/openwrt2020/header.ut @@ -0,0 +1,72 @@ +{# + Copyright 2020 Jo-Philipp Wich <jo@mein.io> + Licensed to the public under the Apache License 2.0. +-#} + +{% + import { getuid, getspnam } from 'luci.core'; + + const boardinfo = ubus.call('system', 'board'); + + http.prepare_content('text/html; charset=UTF-8'); +-%} + +<!DOCTYPE html> +<html lang="{{ dispatcher.lang }}"> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<meta http-equiv="Content-Script-Type" content="text/javascript" /> +<meta name="viewport" content="width=device-width, initial-scale=1" /> +<meta name="apple-mobile-web-app-capable" content="yes" /> +<link rel="stylesheet" type="text/css" media="screen" href="{{ media }}/cascade.css" /> +<link rel="icon" href="{{ media }}/logo.svg" type="image/svg+xml" /> +<link rel="apple-touch-icon" href="{{ media }}/logo.png" /> +<script type="text/javascript" src="{{ dispatcher.build_url('admin/translations', dispatcher.lang) }}"></script> +<script type="text/javascript" src="{{ resource }}/cbi.js"></script> +<title>{{ striptags(`${boardinfo.hostname ?? '?'}${node ? ` - ${node.title}` : ''}`) }} - LuCI</title> +{% if (css): %} +<style title="text/css">{{ css }}</style> +{% endif %} +</head> +<body class="lang_{{ dispatcher.lang }}" data-page="{{ entityencode(join('-', ctx.request_path), true) }}"> + +<p class="skiplink"> +<span id="skiplink1"><a href="#navigation">{{ _('Skip to navigation') }}</a></span> +<span id="skiplink2"><a href="#content">{{ _('Skip to content') }}</a></span> +</p> + +<div id="menubar"> + <h2 class="navigation"><a id="navigation" name="navigation">{{ _('Navigation') }}</a></h2> + + <span class="hostname"><a href="/">{{ striptags(boardinfo.hostname ?? '?') }}</a></span> + <span class="distversion">{{ version.distversion }} {{ version.distrevision }}</span> + <span id="indicators"></span> +</div> + +<div id="modemenu" style="display:none"></div> + +<div id="maincontainer"> + <div id="mainmenu"></div> + + <div id="maincontent"> + {% if (getuid() == 0 && getspnam('root')?.pwdp === '' && join('-', ctx.request_path) != 'admin-system-admin'): %} + <div class="alert-message warning"> + <h4>{{ _('No password set!') }}</h4> + <p>{{ _('There is no password set on this router. Please configure a root password to protect the web interface.') }}</p> + {% if (dispatcher.lookup("admin/system/admin")): %} + <div class="right"><a class="btn" href="{{ dispatcher.build_url("admin/system/admin") }}">{{ _('Go to password configuration...') }}</a></div> + {% endif %} + </div> + {% endif %} + + {% if (boardinfo.rootfs_type == "initramfs"): %} + <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 (dispatcher.lookup("admin/system/flash")): %} + <div class="right"><a class="btn" href="{{ dispatcher.build_url("admin/system/flash") }}">{{ _('Go to firmware upgrade...') }}</a></div> + {% endif %} + </div> + {% endif %} + + <div id="tabmenu" style="display:none"></div> diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css index a3a9165d5b..186ce88e10 100644 --- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css +++ b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css @@ -316,6 +316,12 @@ body.modal-overlay-active #modal_overlay { color: #650; } +.alert-message.success, .cbi-tooltip.success, .label.success { + border-color: #161; + background: #efe; + color: #161; +} + div.hostinfo { float: left; margin: 0; diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/tabbg.png b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/tabbg.png Binary files differindex c84c437cda..5c9d030188 100644 --- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/tabbg.png +++ b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/tabbg.png |
