From ae968dc4a231f71248dbd16ad833a414324b25ca Mon Sep 17 00:00:00 2001 From: suyuan <175338101@qq.com> Date: Fri, 23 Jun 2023 07:36:24 +0800 Subject: [PATCH] fixx --- luci-theme-bootstrap/Makefile | 26 + .../htdocs/luci-static/bootstrap-dark | 1 + .../htdocs/luci-static/bootstrap-light | 1 + .../htdocs/luci-static/bootstrap/cascade.css | 2556 +++++++++++++++++ .../htdocs/luci-static/bootstrap/favicon.png | Bin 0 -> 592 bytes .../htdocs/luci-static/bootstrap/mobile.css | 428 +++ .../luci-static/resources/menu-bootstrap.js | 101 + .../resources/view/bootstrap/sysauth.js | 34 + .../etc/uci-defaults/30_luci-theme-bootstrap | 28 + .../ucode/template/themes/bootstrap-dark | 1 + .../ucode/template/themes/bootstrap-light | 1 + .../ucode/template/themes/bootstrap/footer.ut | 20 + .../ucode/template/themes/bootstrap/header.ut | 83 + .../template/themes/bootstrap/sysauth.ut | 48 + luci-theme-openwrt/Makefile | 22 + .../luci-static/openwrt.org/cascade.css | 2092 ++++++++++++++ .../htdocs/luci-static/openwrt.org/tabbg.png | Bin 0 -> 80 bytes .../luci-static/resources/menu-openwrt.js | 133 + .../luasrc/view/themes/openwrt.org/footer.htm | 19 + .../luasrc/view/themes/openwrt.org/header.htm | 95 + .../etc/uci-defaults/30_luci-theme-openwrt | 12 + 21 files changed, 5701 insertions(+) create mode 100644 luci-theme-bootstrap/Makefile create mode 120000 luci-theme-bootstrap/htdocs/luci-static/bootstrap-dark create mode 120000 luci-theme-bootstrap/htdocs/luci-static/bootstrap-light create mode 100644 luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css create mode 100644 luci-theme-bootstrap/htdocs/luci-static/bootstrap/favicon.png create mode 100644 luci-theme-bootstrap/htdocs/luci-static/bootstrap/mobile.css create mode 100644 luci-theme-bootstrap/htdocs/luci-static/resources/menu-bootstrap.js create mode 100644 luci-theme-bootstrap/htdocs/luci-static/resources/view/bootstrap/sysauth.js create mode 100755 luci-theme-bootstrap/root/etc/uci-defaults/30_luci-theme-bootstrap create mode 120000 luci-theme-bootstrap/ucode/template/themes/bootstrap-dark create mode 120000 luci-theme-bootstrap/ucode/template/themes/bootstrap-light create mode 100644 luci-theme-bootstrap/ucode/template/themes/bootstrap/footer.ut create mode 100644 luci-theme-bootstrap/ucode/template/themes/bootstrap/header.ut create mode 100644 luci-theme-bootstrap/ucode/template/themes/bootstrap/sysauth.ut create mode 100644 luci-theme-openwrt/Makefile create mode 100644 luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css create mode 100644 luci-theme-openwrt/htdocs/luci-static/openwrt.org/tabbg.png create mode 100644 luci-theme-openwrt/htdocs/luci-static/resources/menu-openwrt.js create mode 100644 luci-theme-openwrt/luasrc/view/themes/openwrt.org/footer.htm create mode 100644 luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm create mode 100755 luci-theme-openwrt/root/etc/uci-defaults/30_luci-theme-openwrt diff --git a/luci-theme-bootstrap/Makefile b/luci-theme-bootstrap/Makefile new file mode 100644 index 000000000..1e7f49a12 --- /dev/null +++ b/luci-theme-bootstrap/Makefile @@ -0,0 +1,26 @@ +# +# Copyright (C) 2008-2014 The LuCI Team +# +# This is free software, licensed under the Apache License, Version 2.0 . +# + +include $(TOPDIR)/rules.mk + +LUCI_TITLE:=Bootstrap Theme (default) +LUCI_DEPENDS:= + +PKG_LICENSE:=Apache-2.0 + +define Package/luci-theme-bootstrap/postrm +#!/bin/sh +[ -n "$${IPKG_INSTROOT}" ] || { + uci -q delete luci.themes.Bootstrap + uci -q delete luci.themes.BootstrapDark + uci -q delete luci.themes.BootstrapLight + uci commit luci +} +endef + +include ../../luci.mk + +# call BuildPackage - OpenWrt buildroot signature diff --git a/luci-theme-bootstrap/htdocs/luci-static/bootstrap-dark b/luci-theme-bootstrap/htdocs/luci-static/bootstrap-dark new file mode 120000 index 000000000..ac7bcbbf3 --- /dev/null +++ b/luci-theme-bootstrap/htdocs/luci-static/bootstrap-dark @@ -0,0 +1 @@ +bootstrap \ No newline at end of file diff --git a/luci-theme-bootstrap/htdocs/luci-static/bootstrap-light b/luci-theme-bootstrap/htdocs/luci-static/bootstrap-light new file mode 120000 index 000000000..ac7bcbbf3 --- /dev/null +++ b/luci-theme-bootstrap/htdocs/luci-static/bootstrap-light @@ -0,0 +1 @@ +bootstrap \ No newline at end of file diff --git a/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css new file mode 100644 index 000000000..6b51189ff --- /dev/null +++ b/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css @@ -0,0 +1,2556 @@ +/*! + * LuCI Bootstrap Theme + * Copyright 2012 Nut & Bolt + * By David Menting + * Based on Bootstrap v1.4.0 + * + * Copyright 2011 Twitter, Inc + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Designed and built with all the love in the world @twitter by @mdo and @fat. + */ + +/* Variables + * --------- */ + +:root { + --background-color-delta-l-sign: -1; + --background-color-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-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-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 + * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). + * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ + +*, *::before, *::after { + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; +} + +abbr[title], acronym[title] { + border-bottom: 1px dotted; + font-weight: inherit; + cursor: help; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +ol, ul { + list-style: none; +} + +html { + font-size: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + height: 100%; +} + +a:focus { + outline: thin dotted; +} + +a:hover, a:active { + outline: 0; +} + +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +img { + -ms-interpolation-mode: bicubic; +} + +button, +input, +select, +option, +textarea { + font-size: 100%; + margin: 0; + box-sizing: border-box; + vertical-align: baseline; + line-height: 2em; +} + +button::-moz-focus-inner, input::-moz-focus-inner { + border: 0; + padding: 0; +} + +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; + word-break: break-all; +} + +button[disabled], +input[type="button"][disabled], +input[type="reset"][disabled], +input[type="submit"][disabled] { + opacity: var(--disabled-opacity); +} + +input[type="search"] { + -webkit-appearance: textfield; + box-sizing: content-box; +} + +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +textarea { + overflow: auto; + 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 + * ------------------------------------------------------------------------------------------- */ +body { + background-color: var(--background-color-high); + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 13px; + font-weight: normal; + line-height: 18px; + color: var(--text-color-high); + padding: 5px; + min-height: 100%; + display: flex; + flex-direction: column; +} + +.container { + width: 100%; + max-width: 940px; + margin-left: auto; + margin-right: auto; + zoom: 1; +} + +a { + color: var(--primary-color-high); + text-decoration: none; + line-height: inherit; + font-weight: inherit; +} + +a:hover { + color: var(--primary-color-low); + text-decoration: underline; +} + +.pull-right { + float: right; +} + +.pull-left { + float: left; +} + +.nowrap { + white-space: nowrap; +} + +/* Typography.less + * Headings, body text, lists, code, and more for a versatile and durable typography system + * ---------------------------------------------------------------------------------------- */ +p, +.cbi-map-descr, +.cbi-section-descr, +.table .tr.cbi-section-table-descr .th { + font-size: 13px; + font-weight: normal; + line-height: 18px; + margin-bottom: 9px; +} + +p small { + font-size: 11px; + color: var(--text-color-low); +} + +h1, +h2, +h3, legend, +h4, +h5, +h6 { + font-weight: bold; + color: var(--text-color-high); +} + +h1 small, +h2 small, +h3 small, +h4 small, +h5 small, +h6 small { + color: var(--text-color-low); +} + +h1 { + margin-bottom: 18px; + font-size: 30px; + line-height: 36px; +} + +h1 small { + font-size: 18px; +} + +h2 { + font-size: 24px; + line-height: 36px; +} + +h2 small { + font-size: 14px; +} + +h3, legend, +h4, +h5, +h6 { + line-height: 36px; +} + +h3, legend { + font-size: 18px; +} + +h3 small { + font-size: 14px; +} + +h4 { + font-size: 16px; +} + +h4 small { + font-size: 12px; +} + +h5 { + font-size: 14px; +} + +h6 { + font-size: 13px; + color: var(--text-color-low); + text-transform: uppercase; +} + +ul, ol { + margin: 0 0 18px 25px; +} + +ul ul, +ul ol, +ol ol, +ol ul { + margin-bottom: 0; +} + +ul { + list-style: disc; +} + +ol { + list-style: decimal; +} + +li { + line-height: 18px; + color: var(--text-color-medium); +} + +ul.unstyled { + list-style: none; + margin-left: 0; +} + +dl { + margin-bottom: 18px; +} + +dl dt, dl dd { + line-height: 18px; +} + +dl dt { + font-weight: bold; +} + +dl dd { + margin-left: 9px; +} + +hr { + margin: 20px 0 19px; + border: 0; + border-bottom: 1px solid var(--border-color-low); +} + +strong { + font-style: inherit; + font-weight: bold; +} + +em { + font-style: italic; + font-weight: inherit; + line-height: inherit; +} + +small { font-size: 0.9em } + +address { + display: block; + line-height: 18px; + margin-bottom: 18px; +} + +code, pre { + padding: 0 3px 2px; + font-family: Monaco, Andale Mono, Courier New, monospace; + font-size: 12px; + border-radius: 3px; +} + +code { + background-color: var(--border-color-low); + color: var(--text-color-high); + padding: 1px 3px; +} + +pre { + --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-l) + var(--background-color-delta-l-sign) * var(--border-color-delta-l)); + --border-color-a: 0.15; + --border-color: hsla(var(--border-color-hsl), var(--border-color-a)); + + background-color: var(--background-color-low); + display: block; + padding: 8.5px; + margin: 0 0 18px; + line-height: 18px; + font-size: 12px; + border: 1px solid var(--border-color); + border-radius: 3px; + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +/* Forms.less + * Base styles for various input types, form layouts, and states + * ------------------------------------------------------------- */ +fieldset { + margin-bottom: 9px; + padding-top: 9px; +} + +fieldset legend { + display: block; + font-size: 19.5px; + line-height: 1; + color: var(--text-color-high); + padding-top: 20px; +} + +label, +input, +button, +select, +textarea { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 13px; + font-weight: normal; + line-height: normal; +} + +.cbi-value { + display: flex; + flex-wrap: wrap; + margin-bottom: 18px; +} + +.cbi-value-field { + margin-left: 20px; + flex: 1; +} + +.cbi-value label.cbi-value-title { + padding-top: 6px; + font-size: 13px; + line-height: 18px; + flex: 0 0 180px; + text-align: right; + color: var(--text-color-high); +} + +.cbi-value > .cbi-section, +.cbi-value > .cbi-tblsection { + width: 100%; +} + +label > input[type="checkbox"], +label > input[type="radio"] { + vertical-align: text-top; + margin: 0; +} + +label[for] { + cursor: pointer; +} + +input, +textarea, +select, +.cbi-select, +.cbi-dropdown:not(.btn):not(.cbi-button) { + display: inline-block; + width: 210px; + padding: 4px; + background: var(--background-color-high); + color: var(--text-color-high); + font-size: 13px; + line-height: 18px; + border: 1px solid var(--border-color-high); + border-radius: 3px; +} + +input, +select, +.cbi-select, +.cbi-dropdown:not(.btn):not(.cbi-button) { + height: 30px; +} + +.cbi-dropdown:not(.btn):not(.cbi-button), +.cbi-dynlist { + min-width: 210px; + max-width: 400px; + width: auto; +} + +.cbi-dynlist { + height: auto; + min-height: 30px; + display: inline-flex; + flex-direction: column; +} + +.cbi-dynlist > .item { + margin-bottom: 4px; + box-shadow: 0 0 2px var(--border-color-high); + background: var(--background-color-high); + padding: 6px 2em 6px 4px; + border: 1px solid var(--border-color-high); + border-radius: 3px; + color: var(--text-color-high); + position: relative; + pointer-events: none; + overflow: hidden; + word-break: break-all; +} + +.cbi-dynlist > .item::after { + content: "×"; + position: absolute; + display: inline-flex; + align-items: center; + top: -1px; + right: -1px; + bottom: -1px; + padding: 0 6px; + border: 1px solid var(--border-color-high); + border-radius: 0 3px 3px 0; + font-weight: bold; + color: #c44; + pointer-events: auto; +} + +.cbi-dynlist > .add-item { + display: flex; +} + +.cbi-dynlist > .add-item > input, +.cbi-dynlist > .add-item > button { + flex: 1 1 auto; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.cbi-value-field > .cbi-checkbox, +.cbi-value-field > div > .cbi-radio { + height: 30px; + display: inline-flex; + align-items: center; +} + +.cbi-radio { + cursor: pointer; + gap: .125em; +} + +.cbi-select { + padding: 0; + position: relative; + background: linear-gradient(var(--background-color-high), var(--border-color-low)); +} + +.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] { + padding: initial; + border: initial; + line-height: initial; + box-shadow: none; + width: auto !important; +} + +input[type=button], input[type=reset], input[type=submit] { + width: auto; + height: auto; +} + +select[multiple] { + height: inherit; + background-color: #fff; +} + +input[type="checkbox"], +input[type="radio"] { + --bd-color: var(--border-color-high); + --fg-color: var(--text-color-high); + + appearance: none; + -webkit-appearance: none; + width: 14px; + height: 14px; + color: var(--fg-color); + position: relative; + display: inline-block; + cursor: pointer; + background: none; + border: none; +} + +input[type="checkbox"]::before, +input[type="checkbox"]::after, +input[type="radio"]::before, +input[type="radio"]::after { + position: absolute; + content: ""; +} + +input[type="checkbox"]::before, +input[type="radio"]::before { + top: 0; + left: 0; + width: 14px; + height: 14px; + background: linear-gradient(var(--background-color-high), var(--background-color-low)); + border: 1px solid var(--bd-color); + border-radius: 2px; +} + +input[type="radio"], +input[type="radio"]::before { + border-radius: 50%; +} + +input[type="checkbox"]::after, +input[type="radio"]::after { + top: 2px; + left: 2px; + width: 10px; + height: 10px; +} + +input[type="checkbox"]:checked::after, +input[type="radio"]:checked::after { + --checkmark-icon: url("data:image/svg+xml,"); + -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,"); +} + +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, +.td > .cbi-dropdown:not(.btn):not(.cbi-button), +.cbi-dynlist > .add-item > .cbi-dropdown { + width: 100%; +} + +::placeholder { + color: var(--text-color-medium); +} + +.item::after, +.btn, +.cbi-button, +.cbi-select, +.cbi-dropdown, +.cbi-dynlist > .item, +input[type="checkbox"]::before, +input[type="radio"]::before, +input, button, textarea, select { + transition: border linear 0.2s, box-shadow linear 0.2s; + box-shadow: inset 0 1px 3px hsla(var(--border-color-low-hsl), .01); +} + +.item:hover::after, +.btn:hover, .btn:focus, +.cbi-button:hover, .cbi-button:focus, +.cbi-select.focus, +.cbi-dropdown:focus, .cbi-dropdown[open], +.cbi-dynlist > .item:focus, +input[type="checkbox"]:focus::before, +input[type="radio"]:focus::before, +input:focus, button:hover, textarea:focus, select:focus { + --focus-color-rgb: 82, 168, 236; + + outline: 0; + border-color: rgba(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; +} + +.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], +.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; +} + +.cbi-optionals, +.cbi-section-create { + padding: 0 0 10px 10px; +} + +.cbi-section-create { + margin: -3px; + display: inline-flex; + align-items: center; +} + +.cbi-section-create > * { + margin: 3px; + flex: 1 1 auto; +} + +.cbi-section-create > * > input { + width: 100%; +} + +.actions, +.cbi-page-actions { + background: var(--background-color-low); + margin-bottom: 18px; + padding: 17px 20px 18px 17px; + border-top: 1px solid var(--border-color-medium); + border-radius: 0 0 3px 3px; + text-align: right; +} + +.actions .secondary-action, +.cbi-page-actions .secondary-action{ + float: right; +} + +.actions .secondary-action a, +.cbi-page-actions .secondary-action a { + line-height: 30px; +} + +.actions .secondary-action a:hover, +.cbi-page-actions .secondary-action a:hover { + text-decoration: underline; +} + +.cbi-page-actions > form { + display: inline; + margin: 0; +} + +/* + * Tables.less + * Tables for, you guessed it, tabular data + * ---------------------------------------- */ +.tr { display: table-row; } +.table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; } +.table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; } + +.table { + display: table; + width: 100%; + margin-bottom: 18px; + padding: 0; + font-size: 13px; + border-collapse: collapse; + position: relative; +} + +.table .th, .table .td { + display: table-cell; + vertical-align: middle; /* Fixme */ + padding: 10px 10px 9px; + line-height: 18px; + text-align: left; +} + +.table .tr:first-child .th { + padding-top: 9px; + font-weight: bold; + vertical-align: top; +} + +.table .td, .table .th { + border-top: 1px solid var(--border-color-medium); +} + +.tr.placeholder { + height: calc(3em + 20px); +} + +.tr.placeholder > .td { + position: absolute; + left: 0; + right: 0; + bottom: 0; + text-align: center; + line-height: 3em; +} + +.tr.drag-over-above, +.tr.drag-over-below { + border: 2px solid #0069d6; + border-width: 2px 0 0 0; +} + +.tr.drag-over-below { + border-width: 0 0 2px 0; +} + +/* Patterns.less + * Repeatable UI elements outside the base styles provided from the scaffolding + * ---------------------------------------------------------------------------- */ +header { + position: sticky; + top: 0; + z-index: 800; + overflow: visible; + color: #BFBFBF; + margin: -5px -5px 15px -5px; + display: flex; +} + +header a { + color: #bfbfbf; + text-shadow: 0 -1px 0 hsla(var(--border-color-low-hsl), .25); +} + +header .brand:hover, header ul .active > a { + background-color: #333; + background-color: rgba(255, 255, 255, 0.05); + color: #fff; + text-decoration: none; +} + +header .brand { + float: left; + display: block; + padding: 8px 20px 12px; + margin-left: -15px; + color: #fff; + font-size: 20px; + font-weight: 200; + line-height: 1; +} + +header .pull-right { + margin-left: auto; + margin-right: 5px; + align-self: center; +} + +header p { + margin: 0; + line-height: 40px; +} + +header { + background: 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); +} + +.nav { + display: block; + float: left; + margin: 0 10px 0 0; + position: relative; + left: 0; +} + +.nav > li { + display: block; + float: left; +} + +.nav a { + display: block; + float: none; + padding: 10px 10px 11px; + line-height: 19px; + text-decoration: none; +} + +.nav a:hover { + color: #fff; + text-decoration: none; +} + +.nav .active > a { + background-color: #222; + background-color: rgba(0, 0, 0, 0.5); +} + +.nav a.menu:hover { + background: #444; + background: rgba(255, 255, 255, 0.05); +} + +.nav .dropdown-menu { + background-color: #333; +} + +.nav .dropdown-menu a.menu { + color: #fff; +} + +.nav .dropdown-menu li a { + color: #999; + text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); +} + +.nav .dropdown-menu li a:hover { + background-color: #191919; + background-repeat: repeat-x; + background-image: linear-gradient(to bottom, #292929, #191919); + color: #fff; +} + +.nav .dropdown-menu .active a { + color: #fff; +} + +.nav .dropdown-menu li a { + padding: 4px 15px; +} + +li.menu, .dropdown { + position: relative; +} + +a.menu:after { + width: 0; + height: 0; + display: inline-block; + content: "↓"; + text-indent: -99999px; + vertical-align: top; + margin-top: 8px; + margin-left: 4px; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid #fff; + opacity: 0.5; +} + +.dropdown-menu { + background-color: #fff; + float: left; + position: absolute; + top: 40px; + left: -9999px; + z-index: 900; + min-width: 160px; + max-width: 220px; + margin-left: 0; + margin-right: 0; + padding: 6px 0; + zoom: 1; + border-color: #999; + border-color: rgba(0, 0, 0, 0.2); + border-style: solid; + border-width: 0 1px 1px; + border-radius: 0 0 6px 6px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + background-clip: padding-box; +} + +.dropdown-menu li { + float: none; + display: block; + background-color: transparent; +} + +.dropdown-menu a { + display: block; + padding: 4px 15px; + clear: both; + font-weight: normal; + line-height: 18px; + color: #808080; + text-shadow: 0 1px 0 #fff; +} + +.dropdown-menu a:hover { + background-color: #ddd; + background-repeat: repeat-x; + background-image: linear-gradient(to bottom, #eee, #ddd); + color: #404040; + text-decoration: none; + box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025); +} + +.dropdown:hover ul.dropdown-menu { + left: 0; +} + +.dropdown-menu .dropdown-menu { + position: absolute; + left: 159px; +} + +.dropdown-menu li { + position: relative; +} + +.tabs, .cbi-tabmenu { + --tab-bar-background-color: var(--background-color-high); + --tab-inactive-background-color-h: var(--border-color-low-h); + --tab-inactive-background-color-s: var(--border-color-low-s); + --tab-inactive-background-color-l: var(--border-color-low-l); + --tab-inactive-background-color: var(--border-color-low); + --tab-inactive-border-color: var(--border-color-medium); + --tab-inactive-text-color-delta-l: calc(85 / 255 * 100%); + --tab-inactive-text-color-l: calc(var(--tab-inactive-background-color-l) + var(--background-color-delta-l-sign) * var(--tab-inactive-text-color-delta-l)); + --tab-inactive-text-color: hsl(var(--tab-inactive-background-color-hsl)); + --tab-inactive-hover-background-color: var(--background-color-high); + --tab-active-background-color: var(--background-color-high); + --tab-active-text-color: #0069d6; + --tab-active-border-color: var(--border-color-medium); + + margin: 0 -5px 18px; + padding: 0 2px; + list-style: none; + display: flex; + flex-wrap: wrap; + background: linear-gradient(var(--tab-bar-background-color) 28px, var(--tab-inactive-border-color) 28px); + background-size: 1px 29px; + background-position: left bottom; +} + +.tabs > li, .cbi-tabmenu > li { + flex: 0 1 auto; + display: flex; + align-items: center; + height: 25px; + max-width: 48%; + margin: 4px 2px 0 2px; + background: var(--tab-active-background-color); + border: 1px solid var(--tab-active-border-color); + border-bottom: none; + border-radius: 4px 4px 0 0; + color: var(--primary-color-high); +} + +.tabs > li > a, .cbi-tabmenu > li > a { + padding: 4px 6px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: inherit; + text-decoration: none; + border-radius: 4px 4px 0 0; + line-height: 25px; + outline: none; +} + +.tabs > li > a:focus-visible, .cbi-tabmenu > li > a:focus-visible { + text-decoration: underline; +} + +.tabs > li:not(.active):hover, .cbi-tabmenu > .cbi-tab-disabled:hover { + background: linear-gradient(var(--tab-inactive-hover-background-color) 90%, var(--tab-inactive-border-color) 100%); +} + +.tabs > li:not(.active), .cbi-tabmenu > .cbi-tab-disabled { + color: var(--tab-inactive-text-color); + background: linear-gradient(var(--tab-inactive-background-color) 90%, var(--tab-inactive-border-color) 100%); +} + +.cbi-tab-disabled[data-errors]::after { + content: attr(data-errors); + background: #c43c35; + color: #fff; + height: 16px; + min-width: 16px; + border-radius: 8px; + text-align: center; + margin: 0 5px 0 0; + padding: 3px 2px 1px 2px; + display: inline-flex; + flex-direction: column; + justify-content: center; + font-size: 12px; +} + +.cbi-tabmenu.map { + margin: 0; +} + +.cbi-tabmenu.map > li { + font-size: 16.5px; + font-weight: bold; +} + +.cbi-tab-descr { + margin: -9px 0 18px 0; +} + +.tabs .menu-dropdown, .tabs .dropdown-menu { + top: 35px; + border-width: 1px; + border-radius: 0 6px 6px 6px; +} + +.tabs a.menu:after, .tabs .dropdown-toggle:after { + border-top-color: #999; + margin-top: 15px; + margin-left: 5px; +} + +.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle { + border-color: #999; +} + +.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after { + border-top-color: #555; +} + +.tab-content > .tab-pane, +.tab-content > div { + display: none; +} + +.tab-content > .active { + display: block; +} + +.breadcrumb { + padding: 7px 14px; + margin: 0 0 18px; + background: linear-gradient(to bottom, var(--background-color-high), var(--background-color-low)); + border: 1px solid var(--border-color-medium); + border-radius: 3px; + display: flex; + flex: 0; +} + +.breadcrumb li { + list-style: none; +} + +.breadcrumb li:not(:last-child)::after { + content: "|"; + padding: 0 5px; +} + +.breadcrumb .active a { + color: var(--text-color-medium); +} + +footer { + 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; + background: rgba(0, 0, 0, 0.7); + z-index: 900; + overflow: auto; + transition: opacity .125s ease-in; + opacity: 0; + visibility: hidden; +} + +.modal { + width: 90%; + margin: 5em auto; + min-height: 32px; + max-width: 600px; + border-radius: 3px; + background: var(--background-color-high); + 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 > * { + line-height: normal; + margin-bottom: .5em; + max-width: 100%; +} + +.modal > pre, +.modal > textarea { + white-space: pre-wrap; + overflow: auto; + width: 100%; +} + +body.modal-overlay-active { + overflow: hidden; + height: 100vh; +} + +body.modal-overlay-active #modal_overlay { + left: 0; + right: 0; + opacity: 1; + visibility: visible; +} + +.btn .close, .alert-message .close { + font-family: Arial, sans-serif; + line-height: 18px; +} + +.btn.danger, +.alert-message.danger, +.btn.error, +.alert-message.error, +.cbi-tooltip.error { + 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(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(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(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 { + color: var(--text-color-high); +} + +.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: var(--default-btn-background); + padding: 0 14px; + color: var(--on-color); + font-size: 13px; + line-height: 2em; + border: 1px solid var(--border-color-high); + border-radius: 4px; + white-space: pre; +} + +.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: var(--error-color-high); + border-color: var(--error-color-medium); +} + +.cbi-button-positive, +.cbi-button-fieldadd, +.cbi-button-add, +.cbi-button-save { + --on-color: var(--success-color-high); + border-color: var(--on-color); +} + +.cbi-button-neutral, +.cbi-button-download, +.cbi-button-find, +.cbi-button-link, +.cbi-button-up, +.cbi-button-down { + color: var(--text-color-high); +} + +.btn.primary, +.cbi-button-action, +.cbi-button-apply, +.cbi-button-reload, +.cbi-button-edit { + --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 { + --on-color: var(--error-color-high); + border-color: var(--on-color); +} + +.cbi-page-actions::after { + display: table; + content: ""; + clear: both; +} + +.cbi-page-actions > * { + vertical-align: middle; +} + +.cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-negative):not(.cbi-button-save):not(.cbi-button-reset) { + float: left; + margin-right: .4em; +} + +.btn.primary, +.cbi-button-action.important, +.cbi-page-actions .cbi-button-apply, +.cbi-section-actions .cbi-button-edit { + --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 { + --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 { + --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 { + --on-color: var(--success-color-high); + border-color: var(--on-color); + background: var(--default-btn-background); +} + +.cbi-dropdown { + display: inline-flex !important; + cursor: pointer; + height: auto; + position: relative; + padding: 0 !important; +} + +.cbi-dropdown:not(.btn):not(.cbi-button) { + background: linear-gradient(var(--background-color-high) 0%, var(--border-color-low) 100%); + border: 1px solid var(--border-color-high); + border-radius: 3px; + color: var(--text-color-high); +} + +.cbi-dropdown > ul { + margin: 0 !important; + padding: 0; + list-style: none; + overflow-x: hidden; + overflow-y: hidden; + display: flex; + width: 100%; +} + +.cbi-dropdown.btn > ul:not(.dropdown), +.cbi-dropdown.cbi-button > ul:not(.dropdown) { + margin: 0 0 0 13px !important; +} + +.cbi-dropdown.btn.spinning > ul:not(.dropdown), +.cbi-dropdown.cbi-button.spinning > ul:not(.dropdown) { + margin: 0 !important; +} + +.cbi-dropdown > ul.preview { + display: none; +} + +.cbi-dropdown > .open, +.cbi-dropdown > .more { + flex-grow: 0; + flex-shrink: 0; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + line-height: 2em; + padding: 0 .3em; +} + +.cbi-dropdown.btn > .open, +.cbi-dropdown.cbi-button > .open { + padding: 0 .5em; + margin-left: .5em; + border-left: 1px solid; +} + +.cbi-dropdown > .more, +.cbi-dropdown:not(.btn):not(.cbi-button) > ul > li[placeholder] { + color: var(--text-color-medium); + display: none; +} + +.cbi-dropdown > ul > li { + display: none; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex-shrink: 1; + flex-grow: 1; + align-items: center; + align-self: center; + color: inherit; +} + +.cbi-dropdown > ul.dropdown > li, +.cbi-dropdown:not(.btn):not(.cbi-button) > ul > li { + min-height: 20px; + padding: .25em; + color: var(--text-color-high); +} + +.cbi-dropdown > ul > li .hide-open { display: block; display: initial; } +.cbi-dropdown > ul > li .hide-close { display: none; } + +.cbi-dropdown > ul > li[display]:not([display="0"]) { + border-left: 1px solid var(--border-color-high); +} + +.cbi-dropdown[empty] > ul { + max-width: 1px; +} + +.cbi-dropdown > ul > li > form { + display: none; + margin: 0; + padding: 0; + pointer-events: none; +} + +.cbi-dropdown > ul > li img { + vertical-align: middle; + margin-right: .25em; +} + +.cbi-dropdown > ul > li > form > input[type="checkbox"] { + margin: 0 .25em 0 0; +} + +.cbi-dropdown > ul > li input[type="text"] { + height: 20px; +} + +.cbi-dropdown[open] { + position: relative; +} + +.cbi-dropdown[open] > ul.dropdown { + display: block; + background: var(--background-color-low); + border: 1px solid #918e8c; + box-shadow: 0 0 4px #918e8c; + position: absolute; + z-index: 1100; + max-width: none; + min-width: 100%; + width: auto; + transition: max-height .125s ease-in; + overflow-y: auto; +} + +.cbi-dropdown > ul > li[display], +.cbi-dropdown[open] > ul.preview, +.cbi-dropdown[open] > ul.dropdown > li, +.cbi-dropdown[multiple] > ul > li > label, +.cbi-dropdown[multiple][open] > ul.dropdown > li, +.cbi-dropdown[multiple][more] > .more, +.cbi-dropdown[multiple][empty] > .more { + flex-grow: 1; + display: flex !important; +} + +.cbi-dropdown[empty] > ul > li, +.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; } + +.cbi-dropdown[open] > ul.dropdown > li { + border-bottom: 1px solid var(--border-color-high); +} + +.cbi-dropdown[open] > ul.dropdown > li[selected] { + background: var(--primary-color-medium); + color: var(--on-primary-color); +} + +.cbi-dropdown[open] > ul.dropdown > li.focus { + background: var(--primary-color-low); + color: var(--on-primary-color); +} + +.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 { + margin-bottom: 0; + border-bottom: none; +} + +.cbi-dropdown[open] > ul.dropdown > li[unselectable] { + opacity: 0.7; +} + +.cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child { + width: 100%; +} + +.cbi-title-ref { + color: #37c; +} + +.cbi-title-ref::after { + content: "➙"; +} + +.cbi-tooltip-container { + cursor: help; +} + +.cbi-tooltip { + position: absolute; + z-index: 1000; + left: -10000px; + box-shadow: 0 0 2px var(--border-color-high); + border-radius: 3px; + background: var(--background-color-high); + white-space: pre; + padding: 2px 5px; + opacity: 0; + transition: opacity .25s ease-in; +} + +.cbi-tooltip-container:hover .cbi-tooltip:not(:empty) { + left: auto; + opacity: 1; + transition: opacity .25s ease-in; +} + +.cbi-progressbar { + border: 1px solid var(--border-color-high); + border-radius: 3px; + position: relative; + min-width: 170px; + height: 8px; + margin: 1.4em 0 4px 0; + background: var(--background-color-medium); +} + +.cbi-progressbar > div { + background: var(--primary-color-medium); + height: 100%; + transition: width .25s ease-in; + width: 0%; + border-radius: 2px; +} + +.cbi-progressbar::before { + position: absolute; + top: -1.4em; + left: 0; + content: attr(title); + white-space: pre; + overflow: hidden; + text-overflow: ellipsis; +} + +.zonebadge .cbi-tooltip { + padding: 1px; + background: inherit; + margin: -1.6em 0 0 -5px; + border-radius: 3px; + pointer-events: none; + box-shadow: 0 0 3px #444; +} + +.zonebadge .cbi-tooltip > * { + margin: 1px; + z-index: 2; + position: relative; +} + +.zone-forwards { + display: flex; + flex-wrap: wrap; +} + +.zone-forwards > * { + flex: 1 1 40%; + padding: 1px; +} + +.zone-forwards > span { + flex-basis: 10%; + text-align: center; +} + +.zone-forwards .zone-src, +.zone-forwards .zone-dest { + display: flex; + flex-direction: column; +} + +.btn.active, .btn:active { + 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: var(--disabled-opacity); + box-shadow: none; +} + +.btn.large { + font-size: 15px; + line-height: normal; + padding: 9px 14px 9px; + border-radius: 6px; +} + +.btn.small { + padding: 7px 9px 7px; + font-size: 11px; +} + +button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { + padding: 0; + border: 0; +} + +.close { + float: right; + color: #000; + font-size: 20px; + font-weight: bold; + line-height: 13.5px; + text-shadow: 0 1px 0 #fff; + opacity: 0.25; +} + +.close:hover { + color: #000; + text-decoration: none; + opacity: 0.4; +} + +.alert-message { + position: relative; + padding: .5em .5em .25em .5em; + margin-bottom: .5em; + 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: 1px 1px 1px var(--border-color-low); + white-space: unset; +} + +.alert-message .close { + margin-top: 1px; +} + +.alert-message h4, +.alert-message h5, +.alert-message pre, +.alert-message ul, +.alert-message li, +.alert-message p { + color: inherit; + border: none; + line-height: inherit; + background: transparent; + padding: 0; + margin: .25em 0; +} + +.alert-message button { + margin: .25em 0; +} + +.label, +header [data-indicator] { + padding: 3px 3px 2px; + font-size: 9.75px; + font-weight: bold; + color: var(--text-color-high); + text-transform: uppercase; + white-space: nowrap; + background-color: var(--background-color-low); + border-radius: 3px; + text-shadow: none; + margin: .125em 0 .125em .4em; +} + +header [data-indicator][data-clickable] { + cursor: pointer; +} + +a.label:link, +a.label:visited { + color: #fff; +} + +a.label:hover { + text-decoration: none; +} + +.label.important { + background-color: var(--primary-color-high); + color: var(--on-primary-color); +} + +.label.warning { + background-color: var(--warn-color-high); + color: var(--on-warn-color); +} + +.label.success { + background-color: var(--success-color-high); + color: var(--on-success-color); +} + +.label.notice, +header [data-indicator][data-style="active"] { + color: var(--on-primary-color); + background-color: var(--primary-color-high); +} + +/* LuCI specific items */ +.hidden { display: none } + +form.inline { display: inline; margin-bottom: 0; } + +#modemenu li:last-child span.divider { display: none } + +#syslog { + width: 100%; + color: var(--text-color-highest); + margin-bottom: 18px; +} + +.cbi-section-table .tr:hover .td, +.cbi-section-table .tr:hover .th, +.cbi-section-table .tr:hover::before { + background-color: var(--background-color-low); +} + +.cbi-section-table .tr.cbi-section-table-descr .th { + font-weight: normal; +} + +.cbi-section-table-titles.named::before, +.cbi-section-table-descr.named::before, +.cbi-section-table-row[data-title]::before { + content: attr(data-title) " "; + display: table-cell; + padding: 10px 10px 9px; + line-height: 18px; + font-weight: bold; + vertical-align: middle; +} + +.cbi-section-table-titles.named::before, +.cbi-section-table-descr.named::before, +.cbi-section-table-row[data-title]::before { + border-top: 1px solid var(--border-color-medium); +} + +.left { text-align: left !important; } +.right { text-align: right !important; } +.center { text-align: center !important; } +.top { vertical-align: top !important; } +.middle { vertical-align: middle !important; } +.bottom { vertical-align: bottom !important; } + +table table td, +.cbi-value-field table td { + border: none; +} + +.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 .cbi-select { + width: 100%; + min-width: auto; +} + +.table.cbi-section-table .td.cbi-section-table-cell { + white-space: nowrap; + text-align: right; +} + +.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 > :not(.cbi-dropdown) > *, +.td.cbi-section-actions > * > form > * { + flex: 1 1 4em; + margin: 0 1px; +} + +.td.cbi-section-actions > * > form { + display: inline-flex; + margin: 0; +} + +.table.valign-middle .td { + vertical-align: middle; +} + +.cbi-rowstyle-2, +.tr.table-titles, +.tr.cbi-section-table-titles { + 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 { + margin: .25em 0 0 1.25em; + position: relative; +} + +.cbi-value-description:not(:empty)::before { + --help-icon: url("data:image/svg+xml,"); + + 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 { + border: 1px solid #f00; + border-radius: 3px; + background-color: #fce6e6; + padding: 5px; + margin-bottom: 18px; +} + +.cbi-section-error ul { margin: 0 0 0 20px; } + +.cbi-section-error ul li { + color: #f00; + font-weight: bold; +} + +.ifacebox { + border: 1px solid var(--border-color-high); + margin: 0 10px; + text-align: center; + white-space: nowrap; + background: linear-gradient(var(--background-color-high), var(--background-color-medium)); + border-radius: 4px; + box-shadow: inset 0 1px 0 hsla(var(--text-color-low-hsl), 0.05); + display: inline-flex; + flex-direction: column; + line-height: 1.2em; + min-width: 100px; +} + +.ifacebox .ifacebox-head { + border-bottom: 1px solid var(--border-color-high); + border-radius: 3px 3px 0 0; + padding: 2px; + background: #eee; + 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: 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 { + padding: .25em; +} + +.ifacebadge { + display: inline-block; + flex-direction: row; + white-space: nowrap; + border: 1px solid var(--border-color-high); + 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-hsl), 0.75); + border-radius: 4px; + box-shadow: inset 0 1px 0 hsla(var(--background-color-high-hsl), 0.05); + cursor: default; + line-height: 1.2em; +} + +.ifacebadge img { + width: 16px; + height: 16px; + vertical-align: middle; +} + +.ifacebadge-active { + border-color: #000; + font-weight: bold; +} + +.network-status-table { + display: flex; + flex-wrap: wrap; +} + +.network-status-table .ifacebox { + margin: .5em; + flex-grow: 1; +} + +.network-status-table .ifacebox-body { + display: flex; + flex-direction: column; + height: 100%; + text-align: left; +} + +.network-status-table .ifacebox-body > * { + margin: .25em; +} + +.network-status-table .ifacebox-body > span { + flex: 10 10 auto; + height: 100%; +} + +.network-status-table .ifacebox-body > div { + margin: -.125em; + display: flex; + flex-wrap: wrap; +} + +#dsl_status_table .ifacebox-body span > strong { + display: inline-block; + min-width: 35%; +} + +.ifacebadge.large, +.network-status-table .ifacebox-body .ifacebadge { + display: flex; + flex: 1; + padding: .25em; + min-width: 220px; + margin: .125em; +} + +.ifacebadge.large { + display: inline-flex; +} + +.network-status-table .ifacebox-body .ifacebadge > span { + overflow: hidden; + text-overflow: ellipsis; +} + +.ifacebadge > *, +.ifacebadge.large > * { + margin: 0 .125em; +} + +.zonebadge { + padding: 2px; + border-radius: 4px; + display: inline-block; + white-space: nowrap; + color: var(--text-color-high); + text-shadow: 0 1px 1px hsla(var(--background-color-high-hsl), 0.75); +} + +.zonebadge > em, +.zonebadge > strong { + margin: 0 2px; + display: inline-block; +} + +.zonebadge input { + width: 6em; +} + +.zonebadge > .ifacebadge { + margin-left: 2px; +} + +.zonebadge-empty { + border: 1px dashed #aaa; + color: #aaa; + font-style: italic; + font-size: smaller; +} + +div.cbi-value var, +.td.cbi-value-field var { + font-style: italic; + color: #0069d6; +} + +div.cbi-value var[data-tooltip], +.td.cbi-value-field var[data-tooltip], +div.cbi-value var.cbi-tooltip-container, +.td.cbi-value-field var.cbi-tooltip-container { + cursor: help; + border-bottom: 1px dotted #0069d6; +} + +div.cbi-value var.cbi-tooltip-container, +.td.cbi-value-field var.cbi-tooltip-container .cbi-tooltip { + font-style: normal; + white-space: normal; + color: var(--text-color-high); +} + +#modal_overlay > .modal.uci-dialog, +#modal_overlay > .modal.cbi-modal { + 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-dialog div > del, +.uci-dialog div > ins, +.uci-dialog div > var { + margin-bottom: 2px; + 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-dialog div > ins { + background-color: rgba(var(--success-color-high-rgb), .3); + border-color: rgba(var(--success-color-high-rgb), .6); +} + +.uci-dialog div > del { + background-color: rgba(var(--error-color-high-rgb), .3); + border-color: rgba(var(--error-color-high-rgb), .6); +} + +.uci-dialog var > ins { + background-color: rgba(var(--success-color-high-rgb), .3); +} + +.uci-dialog var > del { + background-color: rgba(var(--error-color-high-rgb), .3); +} + +.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 { + display: flex; + flex-wrap: wrap; +} + +.uci-change-legend-label { + flex-basis: 150px; + margin: 2px; + display: flex; + align-items: center; +} + +.uci-change-legend-label > ins, +.uci-change-legend-label > del, +.uci-change-legend-label > var { + margin-right: 4px; + width: 16px; + height: 16px; + display: flex; +} + +.uci-change-legend-label > * > * { + flex-basis: 100%; + padding: 1px; +} + +#applyreboot-section { + line-height: 300%; +} + +@keyframes flash { + 0% { opacity: 1; } + 50% { opacity: .5; } + 100% { opacity: 1; } +} + +.flash { + 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,"); + + position: absolute; + top: calc(50% - 10px); + left: 6px; + width: 20px; + height: 20px; + content: " "; + 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] { + height: 0; + opacity: 0; + overflow: hidden; +} + +[data-tab-active="true"] { + opacity: 1; + height: auto; + overflow: visible; + transition: opacity .25s ease-in; +} + +.cbi-filebrowser { + min-width: 210px; + max-width: 100%; + border: 1px solid #ccc; + border-radius: 3px; + display: flex; + flex-direction: column; + opacity: 0; + height: 0; + overflow: hidden; +} + +.cbi-filebrowser.open { + opacity: 1; + height: auto; + overflow: visible; + transition: opacity .25s ease-in; +} + +.cbi-filebrowser > * { + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + padding: 0 0 .25em 0; + margin: .25em .25em 0px .25em; + white-space: nowrap; + border-bottom: 1px solid #ccc; +} + +.cbi-filebrowser .cbi-button-positive { + margin-right: .25em; +} + +.cbi-filebrowser > div { + border-bottom: none; +} + +.cbi-filebrowser > ul > li { + display: flex; + flex-direction: row; +} + +.cbi-filebrowser > ul > li:hover { + background: #f5f5f5; +} + +.cbi-filebrowser > ul > li > div:first-child { + flex: 10; + overflow: hidden; + text-overflow: ellipsis; +} + +.cbi-filebrowser > ul > li > div:last-child { + flex: 3; + text-align: right; +} + +.cbi-filebrowser > ul > li > div:last-child > button { + padding: .125em .25em; + margin: 1px 0 1px .25em; +} + +.cbi-filebrowser .upload { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: 0 -.125em .25em -.125em; + padding: 0 0 .125em 0px; + border-bottom: 1px solid #ccc; +} + +.cbi-filebrowser .upload > * { + margin: .125em; + flex: 1; +} + +.cbi-filebrowser .upload > .btn { + flex-basis: 60px; +} + +.cbi-filebrowser .upload > div { + flex: 10; + min-width: 150px; +} + +.cbi-filebrowser .upload > div > input { + width: 100%; +} + +@keyframes fade-in { + 0% { opacity: 0; } + 100% { opacity: 1; } +} + +@keyframes fade-out { + 0% { opacity: 1; } + 100% { opacity: 0; } +} + +.fade-in { + animation: fade-in .4s ease; +} + +.fade-out { + animation: fade-out .4s ease; +} + +.assoclist .ifacebadge { + display: flex; + flex-direction: column; + align-items: center; + white-space: normal; + text-align: center; +} + +.assoclist .ifacebadge > img { + margin: .2em; +} + +.assoclist .td:nth-of-type(3), +.assoclist .td:nth-of-type(5) { + width: 25%; +} + +.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/luci-theme-bootstrap/htdocs/luci-static/bootstrap/favicon.png b/luci-theme-bootstrap/htdocs/luci-static/bootstrap/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..90adf2f94f5551c42f373ce68e583734674bb5c0 GIT binary patch literal 592 zcmV-W0sx-8_0H705DDyb8#cVN;Glw$k z+G8+nC!myy0N~(pI3i;?Zs3-Ijs3#_k*ZP*Fo^L8D`Amc+daHCV!K|1$c!#+z-N98 zVt;aV3mgGNM-%Lym^xoLozqKr6<o-c0x6&HixcW#uZ^&-w@%LEO;QQ=jt%5?4B<;!g%k`k8#@@}+@&tT<*oQ%)F@6Q zDlTL{Bn4?<= li, .cbi-tabmenu > li { + height: 30px; + } + + .tabs > li > a, .cbi-tabmenu > li > a { + padding: 0 8px; + line-height: 30px; + } + + .table { + display: flex; + flex-direction: column; + width: 100%; + } + + .tr { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: flex-end; + border-top: 1px solid var(--border-color-medium); + padding: 5px 0; + margin: 0 -3px; + } + + .table .th, + .table .td, + .table .tr::before { + flex: 1 1 50%; + align-self: flex-start; + overflow: hidden; + text-overflow: ellipsis; + word-wrap: break-word; + display: inline-block; + border-top: none; + padding: 3px; + box-sizing: border-box; + } + + .table .td.cbi-dropdown-open { + overflow: visible; + } + + .col-1 { flex: 1 1 30px !important; -webkit-flex: 1 1 30px !important; } + .col-2 { flex: 2 2 60px !important; -webkit-flex: 2 2 60px !important; } + .col-3 { flex: 3 3 90px !important; -webkit-flex: 3 3 90px !important; } + .col-4 { flex: 4 4 120px !important; -webkit-flex: 4 4 120px !important; } + .col-5 { flex: 5 5 150px !important; -webkit-flex: 5 5 150px !important; } + .col-6 { flex: 6 6 180px !important; -webkit-flex: 6 6 180px !important; } + .col-7 { flex: 7 7 210px !important; -webkit-flex: 7 7 210px !important; } + .col-8 { flex: 8 8 240px !important; -webkit-flex: 8 8 240px !important; } + .col-9 { flex: 9 9 270px !important; -webkit-flex: 9 9 270px !important; } + .col-10 { flex: 10 10 300px !important; -webkit-flex: 10 10 300px !important; } + + .td select { + word-wrap: normal; + } + + .td[data-widget="button"], + .td[data-widget="fvalue"] { + flex: 1 1 17%; + text-align: left; + } + + .td.cbi-value-field { + align-self: flex-start; + flex-basis: 100%; + margin-bottom: .3em; + } + + .td.cbi-value-field .cbi-button { + width: 100%; + } + + .table.cbi-section-table { + border: none; + background: none; + margin: 0; + } + + .tr.table-titles, + .cbi-section-table-titles, + .cbi-section-table-descr { + display: none; + } + + .cbi-section-table-row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: 0 0 .5em 0; + } + + .cbi-section-table + .cbi-section-create { + padding-top: 0; + } + + .tr[data-title]::before { + display: block; + flex: 1 1 100%; + background: var(--background-color-low) !important; + font-size: 16px; + border-bottom: 1px solid var(--border-color-medium); + } + + .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; + } + + .td[data-title] ~ .td.cbi-section-actions { + align-self: flex-start; + } + + .td.cbi-section-actions { + overflow: initial; + max-width: 100%; + padding: 3px 2px; + flex-basis: 100%; + } + + .hide-sm, + .hide-xs { + display: none !important; + } + + .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: 50%; + text-align: left; + } + + .cbi-section-table .tr:hover .td, + .cbi-section-table .tr:hover .th, + .cbi-section-table .tr:hover::before { + background-color: transparent; + } + + .cbi-tab-descr { + margin: 0 0 .5em 0; + } + + .cbi-value { + padding-bottom: .5em; + border-bottom: 1px solid var(--border-color-high); + margin-bottom: .5em; + display: block; + } + + .cbi-value.hidden { + display: none; + } + + .cbi-value .cbi-value:last-child { + border-bottom: none; + padding-bottom: inherit; + margin-bottom: inherit; + } + + .cbi-value label.cbi-value-title { + font-weight: bold; + } + + .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 { + font-size: 16px !important; + height: auto; + } + + .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; + } + + input.cbi-input-password { + width: calc(100% - 25px); + } + + input[type="text"] + .cbi-button, + input[type="password"] + .cbi-button, + select + .cbi-button { + overflow: hidden; + text-overflow: ellipsis; + } + + .cbi-value-field input[type="checkbox"], + .cbi-value-field input[type="radio"] { + margin: 0; + } + + button, .btn, .cbi-button { + font-size: 14px !important; + padding: 0 8px; + } + + .actions, + .cbi-page-actions { + border-top: none; + margin-top: -.5em; + padding: 8px; + } + + [data-page="admin-status-overview"] .td[width="33%"] { + flex-basis: 33%; + } + + header .pull-right .label { + white-space: normal; + display: inline-block; + text-align: center; + line-height: 12px; + margin: 1px 0; + } + + header > .fill { + padding: 1px; + } + + header > .fill > .container { + display: flex; + flex-direction: row; + } + + header .nav { + flex: 3 3 80%; + margin: 2px 5px 2px 0; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + } + + header .nav a { + padding: 2px 6px; + } + + header .pull-right { + 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; + } + + .cbi-optionals, + .cbi-section-create { + padding: 0 0 14px 0; + } + + #cbi-network-switch_vlan .th, + #cbi-network-switch_vlan .td { + flex-basis: 12%; + } + + #cbi-network-switch_vlan .td.cbi-section-actions > * { + width: auto; + display: block; + } + + #wifi_assoclist_table .td, + [data-page="admin-status-processes"] .td { + flex-basis: 50% !important; + } + + [data-page="admin-status-processes"] .td[data-widget="button"] { + flex-basis: 33% !important; + } + + [data-page="admin-status-processes"] .td[data-name="PID"], + [data-page="admin-status-processes"] .td[data-name="USER"] { + flex-basis: 25% !important; + } + + [data-page="admin-system-fstab"] .td[data-widget="button"]::before, + [data-page="admin-system-startup"] .td[data-widget="button"]::before, + [data-page="admin-status-processes"] .td[data-widget="button"]::before { + display: none; + } + + [data-name="bridge-vlan"] > div { + overflow: visible !important; + } + + [data-name="bridge-vlan"] .td[data-title] { + flex-basis: 33%; + } + + [data-name="bridge-vlan"] .td[data-title]::before { + content: attr(data-title); + } + + [data-page="admin-network-network"] .td[data-name="_ifacebox"] { + flex-basis: 40%; + } + + [data-page="admin-network-network"] .td[data-name="_ifacestat"] { + flex-basis: 60%; + } +} + +@media screen and (max-device-width: 375px) { + .cbi-page-actions { + display: flex; + justify-content: space-between; + margin: 0 -1px; + padding: 0; + } + + .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: 3; + } + + .cbi-section-actions .cbi-button { + overflow: hidden; + text-overflow: ellipsis; + margin: 1px !important; + } + + body[data-page="admin-network-wireless"] .td[data-name="_badge"] { + max-width: 50px; + align-self: center; + } + + body[data-page="admin-network-wireless"] .td[data-name="_badge"] .ifacebadge { + display: flex; + align-items: center; + flex-direction: column; + } + + body[data-page="admin-network-wireless"] .td[data-name="_stat"] { + flex-basis: 60%; + } + + body[data-page="admin-network-network"] .td.cbi-section-actions::before, + body[data-page="admin-network-wireless"] .td.cbi-section-actions::before { + content: none !important; + } + + [data-page="admin-network-network"] .td[data-name="_ifacebox"], + [data-page="admin-network-network"] .td[data-name="_ifacestat"] { + flex-basis: 100%; + } + + .td .ifacebox { + width: 100%; + margin: 0 !important; + flex-direction: row; + } + + .td .ifacebox .ifacebox-head { + min-width: 25%; + justify-content: space-around; + border-radius: 4px 0 0 4px; + } + + .td .ifacebox .ifacebox-head, + .td .ifacebox .ifacebox-body { + display: flex; + border-bottom: none; + align-items: center; + } + + .td .ifacebox .ifacebox-head > *, + .ifacebox .ifacebox-body > * { + margin: .125em; + } +} diff --git a/luci-theme-bootstrap/htdocs/luci-static/resources/menu-bootstrap.js b/luci-theme-bootstrap/htdocs/luci-static/resources/menu-bootstrap.js new file mode 100644 index 000000000..32922f384 --- /dev/null +++ b/luci-theme-bootstrap/htdocs/luci-static/resources/menu-bootstrap.js @@ -0,0 +1,101 @@ +'use strict'; +'require baseclass'; +'require ui'; + +return baseclass.extend({ + __init__: function() { + ui.menu.load().then(L.bind(this.render, this)); + }, + + render: function(tree) { + var node = tree, + url = ''; + + this.renderModeMenu(tree); + + if (L.env.dispatchpath.length >= 3) { + for (var i = 0; i < 3 && node; i++) { + node = node.children[L.env.dispatchpath[i]]; + url = url + (url ? '/' : '') + L.env.dispatchpath[i]; + } + + if (node) + this.renderTabMenu(node, url); + } + }, + + renderTabMenu: function(tree, url, level) { + var container = document.querySelector('#tabmenu'), + ul = E('ul', { 'class': 'tabs' }), + children = ui.menu.getChildren(tree), + activeNode = null; + + for (var i = 0; i < children.length; i++) { + var isActive = (L.env.dispatchpath[3 + (level || 0)] == children[i].name), + activeClass = isActive ? ' active' : '', + className = 'tabmenu-item-%s %s'.format(children[i].name, activeClass); + + ul.appendChild(E('li', { 'class': className }, [ + E('a', { 'href': L.url(url, children[i].name) }, [ _(children[i].title) ] )])); + + if (isActive) + activeNode = children[i]; + } + + if (ul.children.length == 0) + return E([]); + + container.appendChild(ul); + container.style.display = ''; + + if (activeNode) + this.renderTabMenu(activeNode, url + '/' + activeNode.name, (level || 0) + 1); + + return ul; + }, + + renderMainMenu: function(tree, url, level) { + var ul = level ? E('ul', { 'class': 'dropdown-menu' }) : document.querySelector('#topmenu'), + children = ui.menu.getChildren(tree); + + if (children.length == 0 || level > 1) + return E([]); + + for (var i = 0; i < children.length; i++) { + var submenu = this.renderMainMenu(children[i], url + '/' + children[i].name, (level || 0) + 1), + subclass = (!level && submenu.firstElementChild) ? 'dropdown' : null, + linkclass = (!level && submenu.firstElementChild) ? 'menu' : null, + linkurl = submenu.firstElementChild ? '#' : L.url(url, children[i].name); + + var li = E('li', { 'class': subclass }, [ + E('a', { 'class': linkclass, 'href': linkurl }, [ _(children[i].title) ]), + submenu + ]); + + ul.appendChild(li); + } + + ul.style.display = ''; + + return ul; + }, + + renderModeMenu: function(tree) { + var ul = document.querySelector('#modemenu'), + children = ui.menu.getChildren(tree); + + for (var i = 0; i < children.length; i++) { + 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) ]) + ])); + + if (isActive) + this.renderMainMenu(children[i], children[i].name); + } + + if (ul.children.length > 1) + ul.style.display = ''; + } +}); diff --git a/luci-theme-bootstrap/htdocs/luci-static/resources/view/bootstrap/sysauth.js b/luci-theme-bootstrap/htdocs/luci-static/resources/view/bootstrap/sysauth.js new file mode 100644 index 000000000..fd936c9b1 --- /dev/null +++ b/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/luci-theme-bootstrap/root/etc/uci-defaults/30_luci-theme-bootstrap b/luci-theme-bootstrap/root/etc/uci-defaults/30_luci-theme-bootstrap new file mode 100755 index 000000000..f83d84702 --- /dev/null +++ b/luci-theme-bootstrap/root/etc/uci-defaults/30_luci-theme-bootstrap @@ -0,0 +1,28 @@ +#!/bin/sh + +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/luci-theme-bootstrap/ucode/template/themes/bootstrap-dark b/luci-theme-bootstrap/ucode/template/themes/bootstrap-dark new file mode 120000 index 000000000..ac7bcbbf3 --- /dev/null +++ b/luci-theme-bootstrap/ucode/template/themes/bootstrap-dark @@ -0,0 +1 @@ +bootstrap \ No newline at end of file diff --git a/luci-theme-bootstrap/ucode/template/themes/bootstrap-light b/luci-theme-bootstrap/ucode/template/themes/bootstrap-light new file mode 120000 index 000000000..ac7bcbbf3 --- /dev/null +++ b/luci-theme-bootstrap/ucode/template/themes/bootstrap-light @@ -0,0 +1 @@ +bootstrap \ No newline at end of file diff --git a/luci-theme-bootstrap/ucode/template/themes/bootstrap/footer.ut b/luci-theme-bootstrap/ucode/template/themes/bootstrap/footer.ut new file mode 100644 index 000000000..603172405 --- /dev/null +++ b/luci-theme-bootstrap/ucode/template/themes/bootstrap/footer.ut @@ -0,0 +1,20 @@ + {% if (!blank_page): %} + + + + {% endif %} + + diff --git a/luci-theme-bootstrap/ucode/template/themes/bootstrap/header.ut b/luci-theme-bootstrap/ucode/template/themes/bootstrap/header.ut new file mode 100644 index 000000000..b7bc770b4 --- /dev/null +++ b/luci-theme-bootstrap/ucode/template/themes/bootstrap/header.ut @@ -0,0 +1,83 @@ +{# + Copyright 2008 Steven Barth + Copyright 2012 David Menting + Copyright 2008-2022 Jo-Philipp Wich + 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'); +-%} + + + + + + {{ striptags(`${boardinfo.hostname ?? '?'}${node ? ` - ${node.title}` : ''}`) }} - LuCI + {% if (!darkpref): %} + + {% endif %} + + + + + {% if (node?.css): %} + + {% endif %} + {% if (css): %} + + {% endif %} + + + + + + {% if (!blank_page): %} +
+ {{ striptags(boardinfo.hostname ?? '?') }} + +
+
+ +
+ {% if (getuid() == 0 && getspnam('root')?.pwdp === ''): %} +
+

{{ _('No password set!') }}

+

{{ _('There is no password set on this router. Please configure a root password to protect the web interface.') }}

+ {% if (dispatcher.lookup("admin/system/admin")): %} +
{{ _('Go to password configuration...') }}
+ {% endif %} +
+ {% endif %} + + {% if (boardinfo.rootfs_type == "initramfs"): %} +
+

{{ _('System running in recovery (initramfs) mode.') }}

+

{{ _('No changes to settings will be stored and are lost after rebooting. This mode should only be used to install a firmware upgrade') }}

+ {% if (dispatcher.lookup("admin/system/flash")): %} +
{{ _('Go to firmware upgrade...') }}
+ {% endif %} +
+ {% endif %} + + + + + {% endif %} diff --git a/luci-theme-bootstrap/ucode/template/themes/bootstrap/sysauth.ut b/luci-theme-bootstrap/ucode/template/themes/bootstrap/sysauth.ut new file mode 100644 index 000000000..a172d95d7 --- /dev/null +++ b/luci-theme-bootstrap/ucode/template/themes/bootstrap/sysauth.ut @@ -0,0 +1,48 @@ +{# + Copyright 2022 Jo-Philipp Wich + Licensed to the public under the Apache License 2.0. +-#} + +{% include('header', { blank_page: true }) %} + + + +
+
{{ _('Loading view…') }}
+ +
+ +{% include('footer', { blank_page: true }) %} diff --git a/luci-theme-openwrt/Makefile b/luci-theme-openwrt/Makefile new file mode 100644 index 000000000..41f479157 --- /dev/null +++ b/luci-theme-openwrt/Makefile @@ -0,0 +1,22 @@ +# +# Copyright (C) 2008-2014 The LuCI Team +# +# This is free software, licensed under the Apache License, Version 2.0 . +# + +include $(TOPDIR)/rules.mk + +LUCI_TITLE:=LuCI OpenWrt.org theme +LUCI_DEPENDS:= + +define Package/luci-theme-openwrt/postrm +#!/bin/sh +[ -n "$${IPKG_INSTROOT}" ] || { + uci -q delete luci.themes.OpenWrt + uci commit luci +} +endef + +include ../../luci.mk + +# call BuildPackage - OpenWrt buildroot signature diff --git a/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css b/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css new file mode 100644 index 000000000..186ce88e1 --- /dev/null +++ b/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css @@ -0,0 +1,2092 @@ +@charset "utf-8"; + +.lang_he { + direction: RTL; + unicode-bidi: embed; +} + +@media all { + +html { + min-height: 100%; + height: auto; + position:relative; +} + +body { + color: #ffffff; + background-color: #4a6b7c; + background-position: bottom center; + background-repeat: repeat-x; + font-family: Arial, Verdana, sans-serif; + font-size: 13px; + padding-bottom: 1.5em; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.table { display: table; width: 100%; position: relative; border-collapse: collapse; } +.tr { display: table-row; } +.thead { display: table-header-group; } +.tbody { display: table-row-group; } +.tfoot { display: table-footer-group; } +.td, .th { display: table-cell; vertical-align: middle; } +.th { font-weight: bold; } + +.table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; } +.table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; } + +.col-1 { flex: 1 1 30px !important; -webkit-flex: 1 1 30px !important; } +.col-2 { flex: 2 2 60px !important; -webkit-flex: 2 2 60px !important; } +.col-3 { flex: 3 3 90px !important; -webkit-flex: 3 3 90px !important; } +.col-4 { flex: 4 4 120px !important; -webkit-flex: 4 4 120px !important; } +.col-5 { flex: 5 5 150px !important; -webkit-flex: 5 5 150px !important; } +.col-6 { flex: 6 6 180px !important; -webkit-flex: 6 6 180px !important; } +.col-7 { flex: 7 7 210px !important; -webkit-flex: 7 7 210px !important; } +.col-8 { flex: 8 8 240px !important; -webkit-flex: 8 8 240px !important; } +.col-9 { flex: 9 9 270px !important; -webkit-flex: 9 9 270px !important; } +.col-10 { flex: 10 10 300px !important; -webkit-flex: 10 10 300px !important; } + +.tr.placeholder { + height: 3.5em; +} + +.tr.placeholder > .td { + position: absolute; + left: 0; + right: 0; + bottom: 0; + text-align: center; + line-height: 3em; +} + +.nowrap { + white-space: nowrap; +} + +a img { + border: none; + text-decoration: none; +} + +#maincontainer { + display: flex; +} + +#maincontent { + flex-basis: 100%; +} + +#mainmenu { + max-width: 200px; + background: #f5f5f5; + border: 1px solid #444; + border-width: 0 0 1px 1px; + font-size: 15px; + padding-bottom: 1em; +} + +#mainmenu ul { + display: block; + margin: 0; + padding: 0; +} + +#mainmenu ul li { + display: block; + white-space: nowrap; +} + +#mainmenu ul li > a { + display: block; + color: #444; + padding: .4em .5em; + text-decoration: none; +} + +#mainmenu ul li.selected > a { + background: #fff; + color: #37c; + border: 1px dotted #444; + border-width: 1px 0; +} + +#mainmenu ul li.selected:first-child > a { + border-top: none; +} + +#mainmenu ul li li > a { + font-size: 85%; + padding-left: 1.5em; +} + +#mainmenu ul li > ul { + flex-basis: 100%; + max-height: 0; + visibility: hidden; + transition: max-height .15s; +} + +#mainmenu ul:not(.active) li.selected > ul, +#mainmenu ul li.active > ul { + max-height: 1000px; + visibility: visible; + transition: max-height .25s; +} + +#mainmenu ul li.mainmenu-item-logout { + margin-top: 15%; +} + +#tabmenu { + padding: 0; + margin: -.5em -.5em .5em -.5em; + background: #bbb; +} + +#tabmenu ul { + border-color: #444; + padding-top: .5em; + flex-wrap: wrap; + background: repeating-linear-gradient(#f5f5f5, #bbb 2.4em, #f5f5f5 2.4em, #bbb); + line-height: 1em; +} + +#tabmenu ul li { + border-color: #444; +} + +#tabmenu ul li.cbi-tab { + background: #f5f5f5; +} + +abbr, +acronym { + font-style: normal; + font-variant: normal; +} + +abbr[title], +acronym[title] { + border-bottom: 1px dotted; + cursor: help; +} + +a:link abbr[title], +a:visited abbr[title], +a:link acronym[title], +a:visited acronym[title] { + cursor: pointer; +} + +code { + font-family: monospace; + white-space: pre; +} + +hr { + margin: .5em 0; + padding: 0; + border: 1px solid #444; + border-width: 0 0 1px 0; +} + +#maincontent ul { + margin-left: 2em; +} + +#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; + visibility: hidden; +} + +.modal { + width: 90%; + margin: 5em auto !important; + display: flex; + flex-wrap: wrap; + min-height: 32px; + max-width: 600px; + align-items: center; + border-radius: 3px; + background: #f5f5f5; + border: 1px solid #000; + padding: .5em .5em .25em .5em !important; + min-width: 270px; + color: #444; +} + +.modal > * { + flex-basis: 100%; + line-height: normal; + margin-bottom: .5em; +} + +.modal > pre, +.modal > textarea { + white-space: pre-wrap; + overflow: auto; +} + +body.modal-overlay-active { + overflow: hidden; +} + +body.modal-overlay-active #modal_overlay { + left: 0; + right: 0; + opacity: 1; + visibility: visible; +} + +.warning { + color: red; + background-color: white; + font-weight: bold; +} + +.clear { + clear: both; +} + +.skiplink, +.navigation, +.hidden { + position: absolute; + left: -1000px; + top: -1000px; + width: 0px; + height: 0px; + overflow: hidden; + display: inline; +} + +.error { + color: #ff0000; + background-color: white; +} + +.alert-message { + font-weight: normal; + padding: .5em; + border-radius: 3px; + border: 1px solid #a22; + margin: 0 0 .5em 0; +} + +.label { + padding: 1px 2px; + font-size: 10px; + color: #fff; + text-transform: uppercase; + white-space: nowrap; + background-color: #aaa; + border-radius: 3px; +} + +.alert-message, .cbi-tooltip.error, .label.error { + border-color: #a22; + background: #fee; + color: #a22; +} + +.alert-message.notice, .cbi-tooltip.notice, .label.notice { + border-color: #15a; + background: #e6f6ff; + color: #15a; +} + +.alert-message.warning, .cbi-tooltip.warning, .label.warning { + border-color: #ed5; + background: #fe9; + color: #650; +} + +.alert-message.success, .cbi-tooltip.success, .label.success { + border-color: #161; + background: #efe; + color: #161; +} + +div.hostinfo { + float: left; + margin: 0; + padding: 0; + width: auto; + padding: 0.5em; +} + +.lang_he div.hostinfo { + float: right; +} + +#menubar { + position: relative; + width: 100%; + background: #000000; + color: #ffffff; + display: flex; + flex-wrap: wrap; +} + +#menubar .hostinfo, +#indicators, +#modemenu { + flex: 1 1 450px; + display: flex; + align-items: center; +} + +#indicators { + justify-content: flex-end; + flex-wrap: wrap; + margin-right: 1em; +} + +#indicators > *, +#indicators > #xhr_poll_status > * { + flex: 0 0 auto; + display: inline-flex; +} + +#modemenu { + flex: 1 1 auto; + padding: 0; + margin: 0; +} + +#modemenu > * { + padding: .5em; +} + +#menubar .warning { + color: red; + background-color: #557788; +} + +#indicators > #xhr_poll_status, +#indicators > [data-clickable="true"] { + cursor: pointer; +} + +#indicators > :not([id="xhr_poll_status"]), +#indicators > #xhr_poll_status > * { + text-transform: uppercase; + background: #90c0e0 !important; + color: #000 !important; + font-size: 11px; + padding: .125em .5em; + margin: .125em; + border-radius: .6em; +} + +#indicators > [data-style="inactive"], +#indicators > * > #xhr_poll_status_off { + border: 1px solid #90c0e0; + background: #000 !important; + color: #90c0e0 !important; + padding: calc(.125em-1px) calc(.5em-1px); +} + +html #menubar a:link, +html #menubar a:visited { + background: #000000; + color: #ffffff; + text-decoration: none; +} + +html #menubar a:link:hover, +html #menubar a:visited:hover, +html #menubar a:link:active, +html #menubar a:visited:active, +#menubar a:link:focus, +#menubar a:visited:focus { + background: #000000; + color: #ffff00; + font-weight: bold; +} + +html #menubar a:link.active, +html #menubar a:visited.active, +html #menubar a:link.preactive, +html #menubar a:visited.preactive { + background: #000000; + color: #ffff00; + font-weight: bold; +} + +html #menubar a:link.warning, +html #menubar a:visited.warning { + background: #000000; + color: red; + font-weight: bold; +} + +#modemenu { + width: auto; + background: #000000; + color: #ffffff; + list-style: none; + margin-right: 1px; + margin-left: 2em; + float: right; +} + +#modemenu li { + float: right; + list-style: none; +} + +#savemenu { + float: right; +} + +.lang_he #savemenu { + float: left; +} + +.lang_de #submenu_admin_uci { + width: 12em; +} + +.lang_ru #submenu_admin_uci { + width: 11.5em; +} + +textarea#syslog { + width: 98%; + min-height: 500px; + border: 3px solid #cccccc; + padding: 5px; + font-family: monospace; + overflow-y: hidden; +} + +#maincontainer { + clear: both; + width: 96%; + margin: 0 auto; + height:100%; +} + +#maincontent { + padding: 0.5em; + background: #f5f5f5; + color: #000000; + border-width: 0 1px 1px 1px; + border-style: solid; + border-color: #444444; +} + +#applyreboot-section { + margin: 2rem; + line-height: 300%; +} + +.lang_he #maincontent { + direction: rtl; +} + +h2, h3, h4, h5, legend { + font-size: 150%; + font-family: Trebuchet MS, Verdana, sans-serif; + font-weight: bold; + margin: .25em 0 .5em 0; + border-bottom: 1px solid; + padding-bottom: 4px; + display: block; + width: 100%; +} + +h3, legend { + font-size: 125%; +} + +h4 { + font-size: 112%; +} + +h5 { + font-size: 105%; +} + +fieldset { border: none; } +fieldset > legend { float: left; } +fieldset > legend + * { clear: both; } + +p { + margin-bottom: .5em; +} + +.cbi-section { + margin: 0 0 .5em 0; +} + +.cbi-section > h3, +.cbi-section > legend { + margin-top: .5em; +} + +.cbi-section-descr { + margin-bottom: 0.5em; + font-size: 95%; +} + +.cbi-section-descr:empty { + display: none; +} + +.cbi-title-ref { + color: #37c; +} + +.cbi-title-ref::after { + content: "➙"; +} + +ul.cbi-apply { + font-size: 90%; +} + +input:-webkit-input-placeholder { + color: #AAAAAA; +} + +input:-moz-placeholder { + color: #AAAAAA; +} + +input:-ms-input-placeholder { + color: #AAAAAA; +} + +input[type=submit], +input[type=reset], +input[type=image], +input[type=button] { + cursor: pointer; +} + +select, +input, +textarea { + background: #eeeeee; + color: #000000; + border-width: 1px; + border-color: #000000; +} + +input[type=image] { + border: none; +} + +input:focus, +input:not(.btn):not(.cbi-button):hover, +select:focus, +select:hover { + background-color: #ffffff; + color: #000000; +} + +input[type=text], +input[type=password] { + padding: .25em; +} + +select, +input[type=text], +input[type=password], +.cbi-dropdown:not(.btn):not(.cbi-button) { + width: 20em; + height: 22px; + font-family: inherit; + font-size: inherit; +} + +select[multiple] { + height: auto; +} + +input[type=radio], +input[type=checkbox], +[data-dynlist] > input + img, +input.cbi-input-password + img { + vertical-align: middle; +} + +label > input[type="checkbox"], +label > input[type="radio"] { + vertical-align: bottom; + margin: 0; +} + +.td select, +.td .cbi-dropdown, +.td input[type=text], +.cbi-dynlist > .add-item > .cbi-dropdown { + width: 100%; +} + +.td input.cbi-input-password { + width: calc(100% - 20px); +} + +img.cbi-image-button { + cursor: pointer; + margin: 0 2px; + vertical-align: middle; +} + +.btn, .cbi-button, .item::after { + padding: 0 .5em; + border-radius: 3px; + border: 1px solid #aaa; + text-decoration: none; + color: #000; + display: inline-block; + font-size: inherit; + -webkit-appearance: none; + background: #fff; + text-align: center; + font-weight: bold; + line-height: 12px; + min-height: 22px; + line-height: 20px; + box-sizing: border-box; + cursor: pointer; +} + +.btn:hover, .cbi-button:hover, .item:hover::after { + box-shadow: 0 0 3px #37c; +} + +.btn[disabled], +.btn[disabled]:hover, +.cbi-button[disabled], +.cbi-button[disabled]:hover { + opacity: .6; + cursor: default; + pointer-events: none; +} + +.cbi-button-positive, +.cbi-button-fieldadd, +.cbi-button-add, +.cbi-button-save { + border-color: #595; + color: #595; +} + +.cbi-button-neutral, +.cbi-button-reset, +.cbi-button-download, +.cbi-button-find, +.cbi-button-link, +.cbi-button-up, +.cbi-button-down { + border-color: #444; + color: #444; +} + +.cbi-button-action, +.cbi-button-apply, +.cbi-button-reload, +.cbi-button-edit { + border-color: #37c; + color: #37c; +} + +.cbi-button-negative, +.cbi-section-remove .cbi-button, +.cbi-button-remove { + border-color: #a22; + color: #a22; +} + +.cbi-button-action.important, +.cbi-page-actions .cbi-button-apply, +.cbi-section-actions .cbi-button-edit { + color: #fff; + background: #37c; +} + +.cbi-button-positive.important, +.cbi-page-actions .cbi-button-save { + color: #fff; + background: #595; +} + +.cbi-button-negative.important { + color: #fff; + background: #a22; +} + +.cbi-page-actions .cbi-button-apply + .cbi-button-save, +.cbi-page-actions .cbi-button-negative + .cbi-button-save { + background: #fff; + color: #595; +} + +.cbi-input-invalid:not([open]) { + color: #FF0000 !important; + border-color: #FF0000; +} + +table td, table th { + color: #000000; +} + +.table .td, .table .th { + color: #000000; + padding: .25em; +} + +.table.smalltext { + background: #f5f5f5; + color: #000000; + border-top: 1px solid #666666; + border-right: 1px solid #666666; + border-bottom: 1px solid #666666; + font-size: 90%; + width: 80%; + margin-left: auto; + margin-right: auto; + border-collapse: collapse; +} + +.table.smalltext .tr:hover .td { + background-color: #bbddee; + color: #000000; +} + +.table.smalltext .tr .th { + padding: 0 0.25em; + border-left: 1px solid #666666; + text-align: left; +} + +.table.smalltext .tr .td { + padding: 0 0.25em; + border-top: 1px solid #666666; + border-left: 1px solid #666666; +} + +.cbi-rowstyle-1 { + background-color: #eeeeff; + color: #000000; +} + +.cbi-rowstyle-2 { + color: #000000; +} + +.cbi-value { + clear: left; + vertical-align: middle; + padding: 0.25em 0.6em; + border-bottom: 1px dotted #bbbbbb; +} + +.cbi-value:hover { + background: #f8f8f8; + color: #000000; +} + +.cbi-value-title { + float: left; + width: 40%; + line-height: 1.8em; +} + +.cbi-value-field { + width: 58%; + margin-left: 40%; + padding: 0.25em 0; +} + +.td.cbi-value-field { + width: auto; + margin-left: 0; + align-self: center; + vertical-align: middle; +} + +.cbi-value-description { + background-image: url(/luci-static/resources/cbi/help.gif); + background-position: .25em .25em; + background-repeat: no-repeat; + margin: .25em 0 0 0; + padding: .25em .25em .25em 1.75em; +} + +.cbi-section-create { + padding: 0 0 .25em 0; + margin: -3px; + display: inline-flex; + align-items: center; +} + +.cbi-section-create > * { + margin: 3px; + flex: 1 1 auto; +} + +.cbi-section-create > * > input { + width: 100%; +} + +.cbi-section-remove > .cbi-button { + margin-bottom: -1px; + border-radius: 3px 3px 0 0; +} + +.cbi-section-node + .cbi-section-create { + padding-top: 0; +} + +div.cbi-map-descr { + margin-bottom: 1em; +} + +div.cbi-optionals { + padding: 0.25em; + border-bottom: 1px dotted #bbbbbb; +} + +.cbi-section-node { + clear: both; + padding-bottom: 0; + position: relative; + border: 1px dotted #555; + background: #fff; + margin-bottom: .5em; +} + +.cbi-section-node-tabbed { + border-top: none; + margin-top: -.5em; +} + +.cbi-section-node .cbi-value:last-child, +.cbi-section-node .cbi-optionals:last-child { + border-bottom: none; +} + +.table.cbi-section-table { + width: 100%; + font-size: 95%; + border: 1px dotted #444; + background: #fff; + margin: 0 0 .5em 0; +} + +.cbi-section-node > .table.cbi-section-table { + border: none; + margin: 0; +} + +.tr.cbi-section-table-descr .th { + font-weight: normal; + font-size: 90%; + vertical-align: top; +} + +.td.cbi-section-table-optionals { + text-align: left !important; + padding-top: 1em; +} + +.th.cbi-section-actions, +.td.cbi-section-actions { + align-self: center; + vertical-align: middle; +} + +.th.cbi-section-actions > *, +.td.cbi-section-actions > * { + display: flex; + justify-content: flex-end; + flex-direction: row; + flex: 1 1 150px; + margin: auto -1px auto auto; +} + +.td.cbi-section-actions > * > *, +.td.cbi-section-actions > * > form > * { + flex: 1 1 4em; + margin: 0 1px; +} + +.td.cbi-section-actions > * > form { + display: flex; + margin: 0; +} + +.cbi-page-actions { + display: flex; + justify-content: flex-end; + margin: -3px; +} + +.cbi-page-actions > form { + display: flex; +} + +.cbi-page-actions > * { + flex: 0 1 auto; + margin: 3px; +} + +.cbi-page-actions > form > * { + flex: 1; + margin: 0 3px 0 0; +} + +.cbi-page-actions > .cbi-button-save, +.cbi-page-actions > .cbi-button-apply, +.cbi-page-actions > form[method="post"] { + margin-left: auto; +} + +*::-ms-backdrop, +.cbi-page-actions > .cbi-button-save, +.cbi-page-actions > .cbi-button-apply, +.cbi-page-actions > form[method="post"] { + margin-left: 50%; +} + +.cbi-page-actions > .cbi-button-apply + .cbi-button-save, +.cbi-page-actions > .cbi-button-negative + .cbi-button-save, +.cbi-page-actions > .cbi-button-save + form[method="post"], +.cbi-page-actions > form[method="post"] + form[method="post"] { + margin-left: 3px; +} + +.th[data-widget="button"], .td[data-widget="button"], +.th[data-widget="fvalue"], .td[data-widget="fvalue"] { + flex: 1 1 2em; + text-align: center; +} + +#cbi-network-switch_vlan .th, +#cbi-network-switch_vlan .td { + flex-basis: 12%; +} + +.td[data-title]::before { + content: attr(data-title) ":\20"; + font-weight: bold; + text-align: left; + display: none; + padding: 1px 0; + white-space: nowrap; +} + +.td[data-description]::after { + content: attr(data-description); + font-size: 90%; + text-align: left; + display: none; + background: url(/luci-static/resources/cbi/help.gif) left top no-repeat; + padding: .125em 0 .125em 18px; + margin: .125em 0; +} + +.tr.placeholder .td[data-title]::before, +.tr.placeholder .td[data-description]::after { + display: none; +} + +.tr[data-title]::before, +.tr.cbi-section-table-titles.named::before { + content: attr(data-title) "\20"; + font-weight: bold; + text-align: left; + display: table-cell; + align-self: center; + flex: 1 1 5%; + padding: .25em; + white-space: normal; + word-wrap: break-word; + vertical-align: middle; +} + +.cbi-value-helpicon img { + vertical-align: bottom; +} + +.td.cbi-value-error { + border-color: red; +} + +.cbi-value-error input, +.cbi-value-error select { + color: red; + background-color: #ffcccc; +} + +.cbi-section-error { + color: red; + background-color: white; + font-size: 95%; + border: 1px dotted red; + margin: 3px; + padding: 3px; +} + +.cbi-value-field var { + color: #2222FF; +} + +ul.cbi-tabmenu { + list-style-type: none; + display: flex; + margin: 0 0 .5em 0 !important; + padding: 0 0 0 5px; + border-bottom: 1px solid #bbb; +} + +#tabmenu > ul.cbi-tabmenu { + margin: 0 !important; +} + +ul.cbi-tabmenu li { + display: inline-flex; + margin: 0 5px -1px 0; + flex: 0 1 auto; + border: 1px solid #bbb; + border-bottom: none; + border-radius: 3px 3px 0 0; + background: linear-gradient(#ddd 90%, #aaa 100%); + color: #888; + overflow: hidden; + text-overflow: ellipsis; + word-wrap: break-word; +} + +ul.cbi-tabmenu li a, +ul.cbi-tabmenu li a:hover { + text-decoration: none; + color: inherit; + padding: 5px; + flex: 1 1 auto; + width: 100%; + height: 100%; + outline: none; +} + +ul.cbi-tabmenu li.cbi-tab { + color: #000; + background: #f5f5f5; +} + +ul.cbi-tabmenu li.cbi-tab-disabled[data-errors]::after { + content: attr(data-errors); + background: #c43c35; + color: #fff; + min-width: 12px; + line-height: 14px; + border-radius: 8px; + text-align: center; + margin: 4px 5px 4px 0; + padding: 1px 2px; + word-wrap: normal; + flex: 1 0 auto; +} + +.cbi-section ul.cbi-tabmenu li.cbi-tab { + background: #fff; +} + +.cbi-tab-descr { + background-image: url(/luci-static/resources/cbi/help.gif); + background-position: .25em 50%; + background-repeat: no-repeat; + border-bottom: 1px solid #ccc; + margin: 0 .25em .25em .25em; + padding: .5em .5em .5em 2em; +} + +[data-tab-title] { + height: 0; + opacity: 0; + overflow: hidden; +} + +[data-tab-active="true"] { + opacity: 1; + height: auto; + overflow: visible; + transition: opacity .25s ease-in; +} + + +.cbi-dropdown { + border: 1px inset #000; + display: inline-flex; + cursor: pointer; + background: #eee; + position: relative; + padding: 0; + color: #000; + max-width: 100%; +} + +.cbi-dropdown:not(.btn):not(.cbi-button) { + min-width: 20em; +} + +.cbi-dropdown:not(.btn):not(.cbi-button):hover { + background: #fff; +} + +.cbi-dropdown:focus, +.cbi-dynlist > .item:focus { + outline: 2px solid #4b6e9b; +} + +.cbi-dropdown > ul { + margin: 0 !important; + padding: 0; + list-style: none; + overflow-x: hidden; + overflow-y: auto; + display: flex; + width: 100%; +} + +.cbi-dropdown > ul.preview { + display: none; +} + +.cbi-dropdown > .open { + border: 2px outset #eee; + flex-basis: 15px; +} + +.cbi-dropdown > .open, +.cbi-dropdown > .more { + flex-grow: 0; + flex-shrink: 0; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + padding: 0 .25em; +} + +.cbi-dropdown > .more, +.cbi-dropdown > ul > li[placeholder] { + color: #777; + font-weight: bold; + text-shadow: 1px 1px 0px #fff; + display: none; + min-height: 22px; +} + +.cbi-dropdown > ul > li { + display: none; + padding: .25em; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex-shrink: 1; + flex-grow: 1; + align-items: center; + align-self: center; + min-height: 22px; +} + +.cbi-dropdown > ul > li .hide-open { display: initial; } +.cbi-dropdown > ul > li .hide-close { display: none; } + +.cbi-dropdown > ul > li[display]:not([display="0"]) { + border-left: 1px solid #ccc; +} + +.cbi-dropdown[empty] > ul { + max-width: 1px; +} + +.cbi-dropdown > ul > li > form { + display: none; + margin: 0; + padding: 0; + pointer-events: none; +} + +.cbi-dropdown > ul > li img { + vertical-align: middle; + margin-right: .25em; +} + +.cbi-dropdown > ul > li > form > input[type="checkbox"] { + margin: 0; +} + +.cbi-dropdown[open] { + position: relative; +} + +.cbi-dropdown[open] > ul.dropdown { + display: block; + background: #f6f6f5; + border: 1px solid #918e8c; + box-shadow: 0 0 4px #918e8c; + position: absolute; + z-index: 1100; + max-width: none; + min-width: 100%; + width: auto; + transition: max-height .125s ease-in; +} + +.cbi-dropdown > ul > li[display], +.cbi-dropdown[open] > ul.preview, +.cbi-dropdown[open] > ul.dropdown > li, +.cbi-dropdown[multiple] > ul > li > label, +.cbi-dropdown[multiple][open] > ul.dropdown > li, +.cbi-dropdown[multiple][more] > .more, +.cbi-dropdown[multiple][empty] > .more { + flex-grow: 1; + display: flex; + align-items: center; +} + +.cbi-dropdown[empty] > ul > li, +.cbi-dropdown[multiple][open] > ul.dropdown > li > form { + display: block; +} + +.cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; } +.cbi-dropdown[open] > ul.dropdown > li .hide-close { display: initial; } + +.cbi-dropdown[open] > ul.dropdown > li { + border-bottom: 1px solid #ccc; +} + +.cbi-dropdown[open] > ul.dropdown > li[selected] { + background: #b0d0f0; +} + +.cbi-dropdown[open] > ul.dropdown > li.focus { + background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%); +} + +.cbi-dropdown[open] > ul.dropdown > li { + color: #444; +} + +.cbi-dropdown[open] > ul.dropdown > li:last-child { + margin-bottom: 0; + border-bottom: none; +} + +.cbi-dropdown[open] > ul.dropdown > li[unselectable] { + opacity: 0.7; +} + +.cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child { + width: 100%; +} + +.cbi-dropdown[disabled] { + pointer-events: none; + opacity: .6; +} + +.cbi-dynlist { + height: auto; + min-height: 30px; + min-width: 210px; + max-width: 100%; + width: auto; + display: inline-flex; + flex-direction: column; +} + +.cbi-dynlist > .item { + margin-bottom: 4px; + background: #eee; + padding: 2px 2em 2px 4px; + border: 1px outset #000; + border-radius: 3px; + position: relative; + pointer-events: none; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.cbi-dynlist > .item::after { + content: "×"; + position: absolute; + display: inline-flex; + align-items: center; + top: -1px; + right: -1px; + bottom: -1px; + padding: 0 6px; + border: 1px outset #000; + background: #fff; + border-radius: 0 3px 3px 0; + font-weight: bold; + color: #c44; + pointer-events: auto; + height: auto; +} + +.cbi-dynlist > .add-item { + display: flex; +} + +.cbi-dynlist > .add-item > input { + flex: 1 1 auto; +} + +input[type="text"] + .cbi-button, +input[type="password"] + .cbi-button, +select + .cbi-button { + border-radius: 0 3px 3px 0; + border: 1px outset #000; + margin: 0 0 0 -2px; + padding: 0 6px; + vertical-align: top; + display: inline-block; + height: 22px; + font-size: 12px; + line-height: 20px; +} + +.cbi-tooltip-container { + cursor: help; +} + +.cbi-tooltip { + position: absolute; + z-index: 1000; + left: -1000px; + border-radius: 3px; + background: #fff; + padding: 2px 5px; + white-space: pre; + opacity: 0; + transition: opacity .25s ease-out; + pointer-events: none; + box-shadow: 0 0 2px #444; + color: #444; +} + +.cbi-tooltip-container:hover .cbi-tooltip { + left: auto; + opacity: 1; + transition: opacity .25s ease-in; + white-space: normal; +} + +.cbi-progressbar { + background: #ddd; + border: 1px solid #bbb; + border-radius: 3px; + position: relative; + min-width: 170px; + height: 20px; + margin: 4px 0; + line-height: 20px; +} + +.cbi-progressbar > div { + background: #90c0e0; + height: 100%; + transition: width .25s ease-in; + width: 0%; +} + +.cbi-progressbar::after { + position: absolute; + bottom: 0; + top: 0; + right: 0; + left: 0; + text-align: center; + text-shadow: 0 0 2px #fff; + content: attr(title); + white-space: pre; + overflow: hidden; + text-overflow: ellipsis; +} + + +.zonebadge .cbi-tooltip { + padding: 1px; + background: inherit; + margin: -1.6em 0 0 -5px; +} + + +.zone-forwards { + display: flex; + flex-wrap: wrap; +} + +.zone-forwards > * { + flex: 1 1 45%; + padding: 1px; +} + +.zone-forwards > span { + flex-basis: 10%; + text-align: center; +} + +.zone-forwards .zone-src, +.zone-forwards .zone-dest { + display: flex; + flex-direction: column; +} + + +.left, .left::before, .left::after { text-align: left !important; } +.right, .right::before, .right::after { text-align: right !important; } +.center, .center::before, .center::after { text-align: center !important; } + +.top, .top::before, .top::after { vertical-align: top !important; } +.middle, .middle::before, .middle::after { vertical-align: middle !important; } +.bottom, .bottom::before, .bottom::after { vertical-align: bottom !important; } + +.td.top { align-self: flex-start; vertical-align: top; } +.td.middle { align-self: center; vertical-align: middle; } +.td.bottom { align-self: flex-end; vertical-align: bottom; } + +.luci { + position: absolute; + bottom: 0; + left: 1em; + height: 1.5em; + font-size: 80%; + margin-bottom: 0; +} + +.luci a:link, +.luci a:visited { + background-color: transparent; + color: #666666; + text-decoration: none; + font-size: 70%; +} + +.inline { + display: inline; +} + +.error500 { + white-space: normal; + border: 1px dotted #ff0000; + background-color: #ffffff; + color: #000000; + padding: 0.5em; +} + + +.ifacebadge, .ifacebox { + display: inline-flex; + align-content: center; + border: 1px solid #ccc; + border-radius: 3px; + padding: 2px; + background: #fff; +} + +.ifacebox-head { + background: #eee; +} + +.ifacebox-head.active { + background: #90c0e0; +} + +.ifacebadge, .zonebadge { + align-items: center; +} + +.ifacebadge > * { + align-self: center; +} + +.ifacebadge > img, +.ifacebadge > em { + margin-right: 5px; + display: inline-block; + height: 16px; +} + +.ifacebadge-active { + border-color: #000000; + font-weight: bold; +} + +.ifacebox { + flex-direction: column; + margin: 0; + padding: 0; + min-width: 100px; + text-align: center; +} + +.ifacebox > * { + padding: 2px; +} + +.td > .ifacebadge, +.td > .zonebadge { + margin: 0; + vertical-align: top; +} + +.network-status-table { + display: flex; + flex-wrap: wrap; + margin: -.25em -.25em .25em -.25em; +} + +.network-status-table .ifacebox { + margin: .25em; + font-size: 90%; + flex-grow: 1; +} + +.network-status-table .ifacebox-body { + display: flex; + flex-direction: column; + flex: 1 0 auto; + padding: .5em; +} + +.network-status-table .ifacebox-body > span { + flex: 10 10 auto; +} + +.network-status-table .ifacebox-body > div { + display: flex; + flex-wrap: wrap; +} + +.ifacebadge.large, +.network-status-table .ifacebox-body .ifacebadge { + flex: 1; + -webkit-flex: 1 1 auto; + padding: .5em; + min-width: 220px; + white-space: nowrap; +} + +.network-status-table .ifacebox-body .ifacebadge { + margin: .5em 0 0 0; +} + +#dsl_status_table .ifacebox-body span > strong { + display: inline-block; + min-width: 35%; +} + + +.zonebadge { + padding: 2px; + display: inline-block; + white-space: nowrap; + border-radius: 3px; +} + +.zonebadge > em, +.zonebadge > strong { + margin: 3px; +} + +.zonebadge input { + width: 6em; + height: 1.5em; +} + +.zonebadge .ifacebadge, +.cbi-dropdown .ifacebadge { + margin: 1px; +} + +.zonebadge .ifacebadge img, +.zonebadge .ifacebadge em, +.cbi-dropdown .ifacebadge img, +.cbi-dropdown .ifacebadge em { + margin: 0 1px; +} + +.zonebadge-empty { + border: 1px dashed #AAAAAA; + color: #AAAAAA; + font-style: italic; + font-size: smaller; +} + + +.uci-change-list { + font-family: monospace; + 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 { + text-decoration: none; + font-style: normal; + border: 1px solid #ccc; + background: #eee; + padding: 2px; + display: block; + line-height: 15px; + margin-bottom: 1px; +} + +.uci-change-list ins, +.uci-change-legend-label ins { + border-color: #0f0; + background: #cfc; +} + +.uci-change-list del, +.uci-change-legend-label del { + border-color: #f00; + background: #fcc; +} + +.uci-change-list var, +.uci-change-legend-label var { + border-color: #ccc; + background: #eee; +} + +.uci-change-list var ins, +.uci-change-list var del { + display: inline-block; + border: none; + width: 100%; + padding: 0; +} + +.uci-change-legend { + padding: 5px; +} + +.uci-change-legend-label { + width: 150px; + float: left; + font-size: 80%; +} + +.uci-change-legend-label>ins, +.uci-change-legend-label>del, +.uci-change-legend-label>var { + float: left; + margin-right: 4px; + width: 12px; + height: 12px; + display: block; + position: relative; +} + +.uci-change-legend-label var ins, +.uci-change-legend-label var del { + border: none; + position: absolute; + top: 1px; + left: 1px; + right: 1px; + bottom: 1px; +} + + +@keyframes flash { + 0% { opacity: 1; } + 50% { opacity: .5; } + 100% { opacity: 1; } +} + +.flash { + animation: flash .35s; +} + +.spinning { + position: relative; + padding-left: 32px !important; +} + +.spinning::before { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 32px; + content: " "; + background: url(../resources/icons/loading.gif) no-repeat center; + background-size: 16px; +} + +} + +@media screen and (max-width: 992px) { + body { + -webkit-text-size-adjust: 100%; + } + + #maincontainer { + flex-direction: column; + width: 100%; + } + + #maincontent { + width: 96%; + margin: auto; + flex-basis: auto; + } + + #mainmenu { + border: none; + border-radius: 0; + max-width: none; + background: #000; + box-shadow: 0 0 2px #444; + padding: 0; + border-top: 1px solid #444; + position: relative; + } + + #mainmenu ul > li.selected > a { + background: #444; + color: #fff; + border-top: none; + } + + #mainmenu ul > li.selected:not(.active) > ul { + max-height: 0; + visibility: hidden; + } + + #mainmenu ul > li > a { + flex: 1 1 auto; + color: #fff; + border: 1px solid #444; + border-width: 0 0 1px 1px; + } + + #mainmenu ul.l1 { + display: flex; + flex-direction: row; + flex-wrap: wrap; + position: relative; + margin-left: -1px; + width: 100%; + } + + #mainmenu ul.l1 > li { + display: inline-flex; + flex: 1 1 auto; + position: relative; + height: 2em; + } + + #mainmenu ul.l1 ul.l2 { + position: absolute; + top: 2em; + right: 0; + z-index: 1000; + background: #000; + box-shadow: 0 0 2px #444; + min-width: 120px; + display: block; + } + + #mainmenu ul.l1 ul.l2.align-left { + right: auto; + left: 0; + } + + #mainmenu ul.l2 > li { + display: block; + } + + #mainmenu ul.l2 > li > a { + padding: .5em; + } + + #mainmenu ul li.mainmenu-item-logout { + margin-top: 0; + margin-left: auto; + } + + #mainmenu ul li.mainmenu-item-logout::before { + content: "\0a"; + flex: 10; + border: 1px solid #444; + border-width: 0 0 1px 1px; + } + + .table { + display: flex; + flex-direction: column; + width: 100%; + } + + .tr { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: flex-end; + } + + .th, .td { + flex: 2 2 25%; + align-self: flex-start; + overflow: hidden; + text-overflow: ellipsis; + word-wrap: break-word; + display: inline-block; + } + + .td.cbi-dropdown-open { + overflow: visible; + } + + .td select { + word-wrap: normal; + } + + .td[data-widget="button"], + .td[data-widget="fvalue"] { + flex: 1 1 12.5%; + text-align: left; + } + + .td.cbi-value-field { + align-self: flex-start; + } + + .td.cbi-value-field .cbi-button { + width: 100%; + } + + .table.cbi-section-table { + border: none; + background: none; + margin: 0; + } + + .tr.table-titles, + .cbi-section-table-titles, + .cbi-section-table-descr { + display: none; + } + + .cbi-section-table-row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + border: 1px dotted #444; + margin: 0 0 .5em 0; + background: #fff; + } + + .cbi-section-table-row:hover { + border: 1px solid #4a6b7c; + } + + .cbi-section-table + .cbi-section-create { + padding-top: 0; + } + + .tr[data-title]::before { + display: block; + flex: 1 1 100%; + background: #eef; + } + + .td[data-title]::before, + .td[data-description]::after { + display: block; + } + + .td[data-title] ~ .td.cbi-section-actions { + align-self: flex-start; + } + + .td[data-title] ~ .td.cbi-section-actions::before { + display: block; + content: "\a0"; + } + + .hide-sm, + .hide-xs { + display: none; + } + + #dsl_status_table .ifacebox-body > span > strong { + min-width: 50%; + } +} + +@media screen and (max-width: 480px) { + body { + font-size: 16px; + } + + input, textarea, select, .cbi-button, .cbi-dropdown { + font-size: 16px !important; + line-height: 30px; + } + + select, input[type="text"], input[type="password"] { + width: 100%; + height: 30px; + border-radius: 3px; + } + + input[type="text"] + .cbi-button, + input[type="password"] + .cbi-button, + select + .cbi-button { + height: 30px; + line-height: 30px; + margin-left: -5px; + min-width: 30px; + } + + input.cbi-input-password, + [data-dynlist] > .add-item > input { + width: calc(100% - 25px); + } + + .label { + font-size: 14px; + } + + .cbi-dynlist, + .cbi-dropdown { + min-width: 100%; + height: auto; + display: flex; + } + + .cbi-dropdown > .more, + .cbi-dropdown > ul > li, + .cbi-dropdown > ul > li[placeholder] { + min-height: 30px; + } + + .btn, .cbi-button { + font-size: 16px !important; + line-height: 30px; + height: 30px; + overflow: hidden; + text-overflow: ellipsis; + } + + #maincontent { + padding: .25em; + } + + #tabmenu { + margin: -.25em -.25em 1em -.25em; + } + + .th, .td { + flex: 2 2 50%; + } + + .td.cbi-value-field { + flex-basis: 100%; + } + + .td.cbi-value-field[data-widget="dvalue"] { + flex-basis: 50%; + } + + .td.cbi-value-field[data-widget="button"], + .td.cbi-value-field[data-widget="fvalue"] { + flex-basis: 25%; + text-align: left; + } + + .cbi-value-title { + float: none; + font-weight: bold; + } + + .cbi-value-field { + width: 100%; + margin: 0; + } + + .cbi-value-description { + margin-top: 5px; + display: block; + } + + .cbi-section-create { + margin-bottom: 1em; + } + + .cbi-page-actions { + flex-wrap: wrap; + margin: -2px; + } + + .cbi-page-actions > .cbi-button-link { + flex-basis: 100%; + margin-right: 2px; + } + + .cbi-page-actions > * { + flex: 1 1 auto; + margin: 2px; + } + + ul.cbi-tabmenu { + padding: 0 3px; + } + + .hide-xs { + display: none; + } + + #cbi-network .td[id] > strong { + display: block; + } + + #cbi-network-switch_vlan .td.cbi-section-actions { + flex-basis: 100%; + } + + #dsl_status_table .ifacebox-body > span > strong { + display: block; + width: 100%; + margin-top: .5em; + } + + #cbi-firewall-rule .td[data-widget="fvalue"], + #cbi-firewall-redirect .td[data-widget="fvalue"] { + display: none; + } +} diff --git a/luci-theme-openwrt/htdocs/luci-static/openwrt.org/tabbg.png b/luci-theme-openwrt/htdocs/luci-static/openwrt.org/tabbg.png new file mode 100644 index 0000000000000000000000000000000000000000..5c9d03018882de9bb92f2d708bcd93b671beaa03 GIT binary patch literal 80 zcmeAS@N?(olHy`uVBq!ia0vp^j6f{O0VEi%{+3=0q{Ka4978H@CI2|}MV$T5;V=9L d*(U#Y&|%1xk+@qLpJ4-1>gnp|vd$@?2>=7W7QX-h literal 0 HcmV?d00001 diff --git a/luci-theme-openwrt/htdocs/luci-static/resources/menu-openwrt.js b/luci-theme-openwrt/htdocs/luci-static/resources/menu-openwrt.js new file mode 100644 index 000000000..ca97838d3 --- /dev/null +++ b/luci-theme-openwrt/htdocs/luci-static/resources/menu-openwrt.js @@ -0,0 +1,133 @@ +'use strict'; +'require baseclass'; +'require ui'; + +return baseclass.extend({ + __init__: function() { + ui.menu.load().then(L.bind(this.render, this)); + }, + + render: function(tree) { + var node = tree, + url = ''; + + this.renderModeMenu(tree); + + if (L.env.dispatchpath.length >= 3) { + for (var i = 0; i < 3 && node; i++) { + node = node.children[L.env.dispatchpath[i]]; + url = url + (url ? '/' : '') + L.env.dispatchpath[i]; + } + + if (node) + this.renderTabMenu(node, url); + } + }, + + handleMenuExpand: function(ev) { + var a = ev.target, ul1 = a.parentNode.parentNode, ul2 = a.nextElementSibling; + + document.querySelectorAll('ul.mainmenu.l1 > li.active').forEach(function(li) { + if (li !== a.parentNode) + li.classList.remove('active'); + }); + + if (!ul2) + return; + + if (ul2.parentNode.offsetLeft + ul2.offsetWidth <= ul1.offsetLeft + ul1.offsetWidth) + ul2.classList.add('align-left'); + + ul1.classList.add('active'); + a.parentNode.classList.add('active'); + a.blur(); + + ev.preventDefault(); + ev.stopPropagation(); + }, + + renderMainMenu: function(tree, url, level) { + var l = (level || 0) + 1, + ul = E('ul', { 'class': 'mainmenu l%d'.format(l) }), + children = ui.menu.getChildren(tree); + + if (children.length == 0 || l > 2) + return E([]); + + for (var i = 0; i < children.length; i++) { + var isActive = (L.env.dispatchpath[l] == children[i].name), + activeClass = 'mainmenu-item-%s%s'.format(children[i].name, isActive ? ' selected' : ''); + + ul.appendChild(E('li', { 'class': activeClass }, [ + E('a', { + 'href': L.url(url, children[i].name), + 'click': (l == 1) ? this.handleMenuExpand : null, + }, [ _(children[i].title) ]), + this.renderMainMenu(children[i], url + '/' + children[i].name, l) + ])); + } + + if (l == 1) { + var container = document.querySelector('#mainmenu'); + + container.appendChild(ul); + container.style.display = ''; + } + + return ul; + }, + + renderModeMenu: function(tree) { + var ul = document.querySelector('#modemenu'), + children = ui.menu.getChildren(tree); + + for (var i = 0; i < children.length; i++) { + var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0); + + ul.appendChild(E('li', {}, [ + E('a', { + 'href': L.url(children[i].name), + 'class': isActive ? 'active' : null + }, [ _(children[i].title) ]) + ])); + + if (isActive) + this.renderMainMenu(children[i], children[i].name); + } + + if (ul.children.length > 1) + ul.style.display = ''; + }, + + renderTabMenu: function(tree, url, level) { + var container = document.querySelector('#tabmenu'), + l = (level || 0) + 1, + ul = E('ul', { 'class': 'cbi-tabmenu' }), + children = ui.menu.getChildren(tree), + activeNode = null; + + if (children.length == 0) + return E([]); + + for (var i = 0; i < children.length; i++) { + var isActive = (L.env.dispatchpath[l + 2] == children[i].name), + activeClass = isActive ? ' cbi-tab' : '', + className = 'tabmenu-item-%s %s'.format(children[i].name, activeClass); + + ul.appendChild(E('li', { 'class': className }, [ + E('a', { 'href': L.url(url, children[i].name) }, [ _(children[i].title) ] ) + ])); + + if (isActive) + activeNode = children[i]; + } + + container.appendChild(ul); + container.style.display = ''; + + if (activeNode) + container.appendChild(this.renderTabMenu(activeNode, url + '/' + activeNode.name, l)); + + return ul; + } +}); diff --git a/luci-theme-openwrt/luasrc/view/themes/openwrt.org/footer.htm b/luci-theme-openwrt/luasrc/view/themes/openwrt.org/footer.htm new file mode 100644 index 000000000..356b6dac1 --- /dev/null +++ b/luci-theme-openwrt/luasrc/view/themes/openwrt.org/footer.htm @@ -0,0 +1,19 @@ +<%# + Copyright 2008 Steven Barth + Copyright 2008 Jo-Philipp Wich + Licensed to the public under the Apache License 2.0. +-%> + +
+
+ + +

+ <% local ver = require "luci.version" -%> + Powered by <%= ver.luciname %> (<%= ver.luciversion %>) +

+ + + + + diff --git a/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm b/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm new file mode 100644 index 000000000..1d95bae88 --- /dev/null +++ b/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm @@ -0,0 +1,95 @@ +<%# + Copyright 2008 Steven Barth + Copyright 2008-2010 Jo-Philipp Wich + 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 sysinfo = util.ubus("system", "info") or { } + local loadinfo = sysinfo.load or { 0, 0, 0 } + local boardinfo = util.ubus("system", "board") or { } + + local node = disp.context.dispatched + + http.prepare_content("application/xhtml+xml") +-%> + + + + + + + + + +<% if node and node.css then %> +<% end -%> +<% if css then %> +<% end -%> + + + +<%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI + +"> + +

+<%:Skip to navigation%> +<%:Skip to content%> +

+ + + +
+ + +
+ + + + + <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%> +
+

<%:No password set!%>

+

<%:There is no password set on this router. Please configure a root password to protect the web interface.%>

+ <% if disp.lookup("admin/system/admin") then %> +
"><%:Go to password configuration...%>
+ <% end %> +
+ <%- end -%> + + <%- if boardinfo.rootfs_type == "initramfs" then -%> +
+

<%:System running in recovery (initramfs) mode.%>

+

<%:No changes to settings will be stored and are lost after rebooting. This mode should only be used to install a firmware upgrade%>

+ <% if disp.lookup("admin/system/flash") then %> +
"><%:Go to firmware upgrade...%>
+ <% end %> +
+ <%- end -%> diff --git a/luci-theme-openwrt/root/etc/uci-defaults/30_luci-theme-openwrt b/luci-theme-openwrt/root/etc/uci-defaults/30_luci-theme-openwrt new file mode 100755 index 000000000..7ee8c193d --- /dev/null +++ b/luci-theme-openwrt/root/etc/uci-defaults/30_luci-theme-openwrt @@ -0,0 +1,12 @@ +#!/bin/sh + +if [ "$PKG_UPGRADE" != 1 ]; then + uci get luci.themes.OpenWrt >/dev/null 2>&1 || \ + uci batch <<-EOF + set luci.themes.OpenWrt=/luci-static/openwrt.org + set luci.main.mediaurlbase=/luci-static/openwrt.org + commit luci + EOF +fi + +exit 0