diff options
Diffstat (limited to 'themes/luci-theme-openwrt')
5 files changed, 1159 insertions, 557 deletions
diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css index c5ee58fff7..29e7827aa4 100644 --- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css +++ b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css @@ -18,15 +18,54 @@ body { background-color: #4a6b7c; background-position: bottom center; background-repeat: repeat-x; - font-family: Verdana, Arial, sans-serif; - font-size: 11pt; - line-height: 100%; + font-family: Arial, Verdana, sans-serif; + font-size: 10pt; padding-bottom: 1.5em; } * { margin: 0; padding: 0; + box-sizing: border-box; +} + +.table { display: table; width: 100%; position: relative; } +.tr { display: table-row; } +.thead { display: table-header-group; } +.tbody { display: table-row-group; } +.tfoot { display: table-footer-group; } +.td, .th { display: table-cell; } +.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 { @@ -34,81 +73,95 @@ a img { text-decoration: none; } -ul.tabmenu { - margin: 0; - clear: both; - display: block; - vertical-align: bottom; - font-size: 10pt; - padding: 5px 0 0 5px; +#maincontainer { + display: flex; } -div.tabmenu2 { - background-color: #AAAAAA; - background-image: url(tabbg.png); - background-repeat: repeat-x; - margin-top: -1px; - border: 1px solid #444444; - border-bottom: none; +#maincontent { + flex-basis: 100%; } -div.tabmenu3, -div.tabmenu4, -div.tabmenu5 { - background-color: #AAAAAA; - background-image: url(tabbg.png); - background-repeat: repeat-x; - border: none; +#mainmenu { + max-width: 200px; + background: #f5f5f5; + border: 1px solid #444; + border-width: 0 0 1px 1px; + font-size: 11pt; + padding-bottom: 1em; } -ul.tabmenu li { - float: left; +#mainmenu ul { display: block; - overflow: hidden; + margin: 0; + padding: 0; } -.lang_he ul.tabmenu li { - float: right; +#mainmenu ul li { + display: block; + white-space: nowrap; } -ul.tabmenu li a { - text-decoration: none; - color: #444444; +#mainmenu ul li > a { display: block; - padding: 3px 8px; - margin: 0 2px; - line-height: 1.3em; - border: 1px solid transparent; - border-bottom: none; + 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; } -ul.tabmenu li.active a { - font-weight: bold; - color: #000000; - background: #f5f5f5; - border: 1px solid #AAAAAA; - border-bottom: none; +#mainmenu ul li > ul { + flex-basis: 100%; + max-height: 0; + visibility: hidden; + transition: max-height .15s; } -ul.tabmenu li a:hover { - color: #444444; - border-color: #444444; +#mainmenu ul:not(.active) li.selected > ul, +#mainmenu ul li.active > ul { + max-height: 1000px; + visibility: visible; + transition: max-height .25s; } -ul.l1 li a { - background-color: #AAAAAA; - background-image: url(tabbg.png); - background-repeat: repeat-x; - border-color: #444444; +#mainmenu ul li.mainmenu-item-logout { + margin-top: 15%; } -ul.l1 li.tabmenu-item-logout a { - margin-left: 30px; +#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; } -.lang_he ul.l1 li.tabmenu-item-logout a { - margin-right: 30px; +#tabmenu ul li { + border-color: #444; +} + +#tabmenu ul li.cbi-tab { + background: #f5f5f5; } abbr, @@ -135,6 +188,13 @@ code { white-space: pre; } +hr { + margin: .5em 0; + padding: 0; + border: 1px solid #444; + border-width: 0 0 1px 0; +} + #maincontent ul { margin-left: 2em; } @@ -166,12 +226,33 @@ code { background-color: white; } +.alert-message { + font-weight: normal; + padding: .5em; + border-radius: 3px; + border: 1px solid #a22; + color: #a22; + background: #fee; + margin: 0 0 .5em 0; +} + +.alert-message.notice { + border-color: #15a; + background: #e6f6ff; + color: #15a; +} + +.alert-message.warning { + border-color: #ed5; + background: #fe9; + color: #650; +} + div.hostinfo { float: left; margin: 0; padding: 0; width: auto; - font-size: 80%; padding: 0.5em; } @@ -213,8 +294,6 @@ html #menubar a:visited { background: #000000; color: #ffffff; text-decoration: none; - font-size: 80%; - font-weight: normal; } @@ -295,7 +374,6 @@ textarea#syslog { padding: 0.5em; background: #f5f5f5; color: #000000; - font-size: 80%; border-width: 0 1px 1px 1px; border-style: solid; border-color: #444444; @@ -305,56 +383,40 @@ textarea#syslog { direction: rtl; } -#maincontent h2 { +h2, h3, h4, legend { font-size: 150%; font-family: Trebuchet MS, Verdana, sans-serif; font-weight: bold; - margin: 0.25em 0 0.7em 0; + margin: .25em 0 .5em 0; border-bottom: 1px solid; - padding-top: 10px; padding-bottom: 4px; + display: block; + width: 100%; } -#maincontent h3 { - margin: 0.5em 0 1.1em 0; +h3, legend { font-size: 125%; - font-weight: bold; - font-style: italic; - font-family: Trebuchet MS, Verdana, sans-serif; - color: #27408B; } -#maincontent p { - margin-bottom: 1em; +h4 { + font-size: 112%; } -.cbi-section { - margin-bottom: 0.5em; - padding: 0.5em 1em; - border: 1px dotted #555555; - background-color: #ffffff; - color: #000000; -} +fieldset { border: none; } +fieldset > legend { float: left; } +fieldset > legend + * { clear: both; } -.cbi-section legend { - font-size: 110%; - font-weight: bold; - height: 1em; - padding: 0 0.25em; - background-color: transparent; - color: #555555; +p { + margin-bottom: .5em; } -.cbi-section h2 { - margin: 0em 0 0.5em -0.5em !important; +.cbi-section { + margin: 0 0 .5em 0; } -.cbi-section h3 { - text-decoration: none !important; - font-weight: bold !important; - color: #555555 !important; - margin: 0.25em !important; - font-size: 100% !important; +.cbi-section > h3, +.cbi-section > legend { + margin-top: .5em; } .cbi-section-descr { @@ -362,6 +424,10 @@ textarea#syslog { font-size: 95%; } +.cbi-section-descr:empty { + display: none; +} + .cbi-title-ref { color: inherit; text-decoration: none; @@ -407,182 +473,139 @@ input[type=image] { } input:focus, -input:hover, +input:not(.btn):not(.cbi-button):hover, select:focus, select:hover { background-color: #ffffff; color: #000000; } +input[type=text], +input[type=password] { + padding: 0 3px; +} + select, input[type=text], input[type=password] { width: 20em; + font-size: inherit; + line-height: 13pt; + height: 14pt; } -td select, -td input[type=text], -td input[type=password] { - width: 99%; +select[multiple] { + height: auto; } -img.cbi-image-button { - cursor: pointer; - margin: 0 2px; +input[type=radio], +input[type=checkbox], +[data-dynlist] > input + img, +input.cbi-input-password + img { vertical-align: middle; } -input.cbi-button { - background-color: #EEEEEE; - background-repeat: no-repeat; - background-position: 1px center; - border: 1px solid #CCCCCC; - border-radius: 3px; -} - -input.cbi-button:hover { - border-color: #4A6B7C; - background-color: #FFFFFF; -} - -input.cbi-button[disabled] { - color: #CCCCCC; - border-color: #CCCCCC; - background-color: #EEEEEE; - cursor: default; -} - -input.cbi-input-user { - background-image: url('../resources/cbi/user.gif'); - background-repeat: no-repeat; - background-position: 1px center; - color: #000000; - text-indent: 17px; -} - -input.cbi-input-password { - background-image: url('../resources/cbi/key.gif'); - background-repeat: no-repeat; - background-position: 1px center; - color: #000000; - text-indent: 17px; -} - -input.cbi-input-find, -input.cbi-button-find { - background-image: url('../resources/cbi/find.gif'); - color: #000000; - padding-left: 17px; -} - -input.cbi-input-reload { - background-image: url('../resources/cbi/reload.gif'); - color: #000000; - padding-left: 17px; -} - -input.cbi-input-add, -input.cbi-button-add { - background-image: url('../resources/cbi/add.gif'); - color: #000000; - padding-left: 17px; - padding-right: 1px; +.td select, +.td .cbi-dropdown, +.td input[type=text] { + width: 100%; } -input.cbi-input-fieldadd, -input.cbi-button-fieldadd { - background-image: url(../resources/cbi/fieldadd.gif); - color: #000000; - padding-left: 17px; - padding-right: 1px; +.td [data-dynlist] > input, +.td input.cbi-input-password { + width: calc(100% - 20px); } -input.cbi-input-reset, -input.cbi-button-reset { - background-image: url('../resources/cbi/reset.gif'); - color: #000000; - padding-left: 17px; - padding-right: 1px; +img.cbi-image-button { + cursor: pointer; + margin: 0 2px; + vertical-align: middle; } -input.cbi-input-save, -input.cbi-button-save { - background-image: url('../resources/cbi/save.gif'); - color: #000000; - padding-left: 17px; - padding-right: 1px; +.btn, .cbi-button { + 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: 13pt; + height: 16pt; } -input.cbi-input-apply, -input.cbi-button-apply { - background-image: url('../resources/cbi/apply.gif'); - color: #000000; - padding-left: 17px; - padding-right: 1px; +.btn:hover, .cbi-button:hover { + box-shadow: 0 0 3px #37c; } -input.cbi-input-link, -input.cbi-button-link { - background-image: url('../resources/cbi/link.gif'); - color: #000000; - padding-left: 17px; - padding-right: 1px; +.btn[disabled], +.btn[disabled]:hover, +.cbi-button[disabled], +.cbi-button[disabled]:hover { + opacity: .6; + cursor: default; + pointer-events: none; } -input.cbi-input-download, -input.cbi-button-download { - background-image: url('../resources/cbi/download.gif'); - color: #000000; - padding-left: 17px; - padding-right: 1px; +.cbi-button-positive, +.cbi-button-fieldadd, +.cbi-button-add, +.cbi-button-save { + border-color: #595; + color: #595; } -input.cbi-input-remove, -div.cbi-section-remove input { - background-image: url('../resources/cbi/remove.gif'); - color: #000000; - padding-left: 17px; - padding-right: 1px; +.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; } -input.cbi-button-up { - background-image: url('../resources/cbi/up.gif'); - padding-left: 11px; - padding-right: 1px; +.cbi-button-action, +.cbi-button-apply, +.cbi-button-reload, +.cbi-button-edit { + border-color: #37c; + color: #37c; } -input.cbi-button-down { - background-image: url('../resources/cbi/down.gif'); - padding-left: 11px; - padding-right: 1px; +.cbi-button-negative, +.cbi-section-remove .cbi-button, +.cbi-button-remove { + border-color: #a22; + color: #a22; } -input.cbi-button-edit { - background-image: url('../resources/cbi/edit.gif'); - color: #000000; - padding-left: 17px; - padding-right: 1px; +.cbi-button-action.important, +.cbi-page-actions .cbi-button-apply, +.cbi-section-actions .cbi-button-edit { + color: #fff; + background: #37c; } -input.cbi-button-reload { - background-image: url('../resources/cbi/reload.gif'); - color: #000000; - padding-left: 17px; - padding-right: 1px; +.cbi-button-positive.important, +.cbi-page-actions .cbi-button-save { + color: #fff; + background: #595; } -input.cbi-button-reset { - background-image: url('../resources/cbi/reset.gif'); - color: #000000; - padding-left: 17px; - padding-right: 1px; +.cbi-button-negative.important { + color: #fff; + background: #a22; } -input.cbi-button-remove { - background-image: url('../resources/cbi/remove.gif'); - color: #000000; - padding-left: 17px; - padding-right: 1px; +.cbi-page-actions .cbi-button-apply + .cbi-button-save { + background: #fff; + color: #595; } .cbi-input-invalid { @@ -593,27 +616,16 @@ input.cbi-button-remove { border-color: #FF0000; } -div.cbi-section-remove input { - border-bottom: none; -} - -textarea { - margin-left: -1px; - margin-bottom: 0.5em; -} - -form > div > input[type=submit], -form > div > input[type=reset] { - float: right; - margin-left: 0.5em; +table td, table th { + color: #000000; } -table td, -table th { +.table .td, .table .th { color: #000000; + padding: .25em; } -table.smalltext { +.table.smalltext { background: #f5f5f5; color: #000000; border-top: 1px solid #666666; @@ -626,56 +638,40 @@ table.smalltext { border-collapse: collapse; } -table.smalltext tr:hover td { +.table.smalltext .tr:hover .td { background-color: #bbddee; color: #000000; } -table.smalltext tr th { +.table.smalltext .tr .th { padding: 0 0.25em; border-left: 1px solid #666666; text-align: left; } -table.smalltext tr td { +.table.smalltext .tr .td { padding: 0 0.25em; border-top: 1px solid #666666; border-left: 1px solid #666666; } -table.cbi-section-table .cbi-rowstyle-1 { +.cbi-rowstyle-1 { background-color: #eeeeff; color: #000000; } -table.cbi-section-table .cbi-rowstyle-1:hover, -table.cbi-section-table .cbi-rowstyle-2:hover { - background-color: #b2c8d4; - color: #000000; -} - -table.cbi-section-table .cbi-section-table-cell { - padding: 3px; - white-space: nowrap; -} - -.cbi-section .cbi-rowstyle-1 h3 { - background-color: #eeeeff; - color: #555555; -} - .cbi-rowstyle-2 { color: #000000; } -div.cbi-value { +.cbi-value { clear: left; vertical-align: middle; padding: 0.25em 0.6em; border-bottom: 1px dotted #bbbbbb; } -div.cbi-value:hover { +.cbi-value:hover { background: #f8f8f8; color: #000000; } @@ -686,29 +682,50 @@ div.cbi-value:hover { line-height: 1.8em; } -div.cbi-value-field { +.cbi-value-field { width: 58%; margin-left: 40%; padding: 0.25em 0; } -div.cbi-value-description { - font-size: 90%; - display: inline; +.td.cbi-value-field { + width: auto; + margin-left: 0; + align-self: center; + vertical-align: middle; } -div.cbi-section-create { - clear: left; - white-space: nowrap; - vertical-align: top; +.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; } -div.cbi-section-create .cbi-button { - margin: 0.25em; +.cbi-section-create { + padding: 0 0 .25em 0; + margin: -3px; + display: inline-flex; + align-items: center; } -input.cbi-section-create-name { - margin-right: -0.25em; +.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 { @@ -720,68 +737,160 @@ div.cbi-optionals { border-bottom: 1px dotted #bbbbbb; } -div.cbi-section-remove { - float: right; -} - .cbi-section-node { clear: both; - border: 1px solid #BBBBBB; - border-radius: 3px; padding-bottom: 0; position: relative; + border: 1px dotted #555; + background: #fff; + margin-bottom: .5em; } .cbi-section-node-tabbed { - border-top-left-radius: 0; + border-top: none; + margin-top: -.5em; } -.cbi-section-node .cbi-value-last { +.cbi-section-node .cbi-value:last-child, +.cbi-section-node .cbi-optionals:last-child { border-bottom: none; } -.cbi-section-node table div { - padding-bottom: 0; - 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 div.cbi-section-table-row { - margin: 0.25em; +.cbi-section-node > .table.cbi-section-table { + border: none; + margin: 0; } -table.cbi-section-table { - width: 100%; - font-size: 95%; +@keyframes flash { + 0% { opacity: 1; } + 50% { opacity: .5; } + 100% { opacity: 1; } } -table.cbi-section-table th, -table.cbi-section-table td { - text-align: center; +.tr.cbi-section-table-row.flash { + animation: flash .35s; } -tr.cbi-section-table-descr th { +.tr.cbi-section-table-descr .th { font-weight: normal; font-size: 90%; vertical-align: top; } -td.cbi-section-table-optionals { +.td.cbi-section-table-optionals { text-align: left !important; padding-top: 1em; } -.cbi-value-helpicon img { - vertical-align: bottom; +.th.cbi-section-actions, +.td.cbi-section-actions { + overflow: visible; + align-self: center; + vertical-align: middle; } -div.cbi-error { - font-size: 95%; +.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-link, +.cbi-page-actions > form[method="get"]:first-child { + margin-right: auto; +} + +*::-ms-backdrop, +.cbi-page-actions > .cbi-button-link, +.cbi-page-actions > form[method="get"]:first-child { + margin-right: 50%; +} + +.th[data-type="button"], .td[data-type="button"], +.th[data-type="fvalue"], .td[data-type="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; - color: #ff0000; - background-color: #ffffff; + text-align: left; + display: none; + padding: 1px; + white-space: nowrap; +} + +.tr.placeholder .td[data-title]::before { + display: none; } -td.cbi-value-error { +.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; } @@ -805,71 +914,288 @@ td.cbi-value-error { } ul.cbi-tabmenu { - padding: 3px 0; - margin-left: 0 !important; list-style-type: none; + display: flex; + margin: 0 0 .5em 0 !important; + padding: 0 0 0 5px; + border-bottom: 1px solid #bbb; +} + +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%; +} + +ul.cbi-tabmenu li.cbi-tab-highlighted { + color: #000; + background: #fea; +} + +ul.cbi-tabmenu li.cbi-tab { + color: #000; + 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; +} + + +.cbi-dropdown { + border: 1px inset #000; + display: inline-flex; + cursor: pointer; + background: #eee; position: relative; - z-index: 10; - top: 4px; - line-height: 20px; + padding: 0; + color: #000; + min-width: 20em; + max-width: 100%; } -ul.cbi-tabmenu li.cbi-tab, -ul.cbi-tabmenu li.cbi-tab-disabled { - display: inline; +.cbi-dropdown:hover { + background: #fff; +} + +.cbi-dropdown: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; + line-height: 2em; + padding: 0 .25em; +} + +.cbi-dropdown > .more, +.cbi-dropdown > ul > li[placeholder] { + color: #777; + font-weight: bold; + text-shadow: 1px 1px 0px #fff; + display: none; +} + +.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: 20px; +} + +.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; } -ul.cbi-tabmenu li.cbi-tab a, -ul.cbi-tabmenu li.cbi-tab-disabled a { - text-decoration: none; - padding: 3px 7px; - margin-right: 3px; - border: 1px solid #BBBBBB; +.cbi-dropdown > ul > li img { + vertical-align: middle; + margin-right: .25em; +} + +.cbi-dropdown > ul > li > form > input[type="checkbox"] { + margin: 0; +} + +.cbi-dropdown > ul > li input[type="text"] { + height: 20px; +} + +.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: 1000; + max-width: none; + min-width: 100%; + width: 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; + align-items: center; +} + +.cbi-dropdown[empty] > ul > li, +.cbi-dropdown[optional][open] > ul.dropdown > li[placeholder], +.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:last-child { + margin-bottom: 0; border-bottom: none; - border-radius: 3px 3px 0 0; - background-color: #EEEEEE; - color: #BBBBBB; } -ul.cbi-tabmenu li.cbi-tab-highlighted a { - color: #000000; - background-color: #FFEEAA; +.cbi-dropdown[disabled] { + pointer-events: none; + opacity: .6; } -ul.cbi-tabmenu li a:hover { - color: #000000; + +.cbi-tooltip-container { + cursor: help; } -ul.cbi-tabmenu li.cbi-tab a { - padding-top: 4px; - color: #000000; - background-color: #FFFFFF; +.cbi-tooltip { + position: absolute; + z-index: 1000; + left: -1000px; + opacity: 0; + transition: opacity .25s ease-out; + pointer-events: none; + box-shadow: 0 0 2px #444; } -div.cbi-tab-descr { - background-image: url(/luci-static/resources/cbi/help.gif); - background-position: 0.25em 50%; - background-repeat: no-repeat; - border-bottom: 1px solid #CCCCCC; - margin: 0.25em 0.25em 2em; - padding: 0.5em 0.5em 0.5em 2em; +.cbi-tooltip-container:hover .cbi-tooltip { + left: auto; + opacity: 1; + transition: opacity .25s ease-in; } -.left { - text-align: left !important; +.zonebadge .cbi-tooltip { + padding: 1px; + background: inherit; + margin: -1.6em 0 0 -5px; +} + + +.zone-forwards { + display: flex; + flex-wrap: wrap; } -.right { - text-align: right !important; +.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 { text-align: left !important; } +.right, .right::before { text-align: right !important; } +.center, .center::before { text-align: center !important; } + +.top, .top::before { vertical-align: top !important; } +.middle, .middle::before { vertical-align: middle !important; } +.bottom, .bottom::before { 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, @@ -892,57 +1218,101 @@ div.cbi-tab-descr { padding: 0.5em; } -.errorbox { - border: 1px solid #FF0000; - background-color: #FFCCCC; - padding: 5px; - margin-bottom: 5px; + +.ifacebadge, .ifacebox { + display: inline-flex; + align-content: center; + border: 1px solid #ccc; + border-radius: 3px; + padding: 2px; + background: #fff; +} + +.ifacebox-head { + background: #eee; } -.errorbox a { - color: #000000 !important; +.ifacebox-head.active { + background: #90c0e0; } +.ifacebadge, .zonebadge { + align-items: center; +} + +.ifacebadge > * { + align-self: flex-start; +} + +.ifacebadge > img, +.ifacebadge > em { + margin-right: 5px; + display: inline-block; + height: 16px; +} + +.ifacebadge-active { + border-color: #000000; + font-weight: bold; +} .ifacebox { - background-color: #FFFFFF; - border: 1px solid #CCCCCC; - margin: 0 10px; + flex-direction: column; + margin: 0; + padding: 0; + min-width: 100px; text-align: center; - white-space: nowrap; } -.ifacebox .ifacebox-head { - border-bottom: 1px solid #CCCCCC; +.ifacebox > * { padding: 2px; } -.ifacebox .ifacebox-body { - padding: 2px; +.td > .ifacebadge, +.td > .zonebadge { + margin: 0; + vertical-align: top; } +.network-status-table { + display: flex; + flex-wrap: wrap; + margin: -.25em -.25em .25em -.25em; +} -.ifacebadge { - background-color: #FFFFFF; - border: 1px solid #CCCCCC; - padding: 1px 2px; - margin-left: 2px; - display: inline-block; - cursor: default; - white-space: nowrap; - font-size: 11px; - border-radius: 3px; +.network-status-table .ifacebox { + margin: .25em; + font-size: 90%; + flex-grow: 1; } -.ifacebadge img { - width: 16px; - height: 16px; - vertical-align: middle; +.network-status-table .ifacebox-body { + display: flex; + flex-direction: column; + flex: 1 0 auto; + padding: .5em; } -.ifacebadge-active { - border-color: #000000; - font-weight: bold; +.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; } @@ -950,13 +1320,12 @@ div.cbi-tab-descr { padding: 2px; display: inline-block; white-space: nowrap; - cursor: pointer; + border-radius: 3px; } -.zonebadge em, -.zonebadge strong { +.zonebadge > em, +.zonebadge > strong { margin: 3px; - display: inline-block; } .zonebadge input { @@ -964,6 +1333,18 @@ div.cbi-tab-descr { 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; @@ -1042,3 +1423,300 @@ div.cbi-tab-descr { } + +@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 select { + word-wrap: normal; + } + + .td[data-type="button"], + .td[data-type="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 { + display: block; + } + + .td[data-title] ~ .td.cbi-section-actions { + align-self: flex-end; + } + + .hide-sm, + .hide-xs { + display: none; + } +} + +@media screen and (max-width: 480px) { + body { + font-size: 12pt; + } + + input, textarea, select { + font-size: 12pt !important; + line-height: 1.4em; + } + + select, input[type="text"], input[type="password"] { + width: 100%; + height: 1.4em; + } + + [data-dynlist] > input, + input.cbi-input-password { + width: calc(100% - 20px); + } + + .cbi-dropdown { + min-width: 100%; + } + + .btn, .cbi-button { + font-size: 9pt !important; + line-height: 13pt; + } + + #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-type="dvalue"] { + flex-basis: 50%; + } + + .td.cbi-value-field[data-type="button"], + .td.cbi-value-field[data-type="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; + } + + ul.cbi-tabmenu li { + font-size: 90%; + margin: 0 1px -1px 0; + } + + .hide-xs { + display: none; + } + + #cbi-network .td[id] > strong { + display: block; + } + + #cbi-network-switch_vlan .td.cbi-section-actions { + flex-basis: 100%; + } +} diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/ie6.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/ie6.css deleted file mode 100644 index 14db3f86e5..0000000000 --- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/ie6.css +++ /dev/null @@ -1,77 +0,0 @@ -/* obligatory IE6 Voodoo Code */ - -* html body { - padding-left: 5% !important; -} - -* html div#header { - margin-left: 100% !important; -} - -* html div#menubar { - margin-left: -5% !important; - width: 105% !important; -} - -* html ul.dropdowns li ul { - width: 10em; -} - -* html ul.dropdowns li li { - clear: both; - float: left; -} - -* html ul.dropdowns li li { - width: 100%; -} - -* html ul.dropdowns li li a { - height: 10%; -} - -* html div#maincontent { - margin-left: 0% !important; - width: 100% !important; -} - -* html div.cbi-value-description { - width: auto !important; -} - -* html div.cbi-value-field { - margin-left: 0 !important; - width: 100% !important; -} - -* html .cbi-input-text, -* html .cbi-input-user, -* html .cbi-input-select, -* html .cbi-input-password { - width: 50% !important; -} - -* html .cbi-input-user, -* html .cbi-input-password { - text-indent: 0 !important; - padding-left: 1.5em !important; -} - -* html .cbi-section legend { - background-color: #ffffff; - color: #555555; -} - -* html table.cbi-section-table td .cbi-input-text, -* html table.cbi-section-table td .cbi-input-select { - width: 100% !important; -} - -* html div.cbi-page-actions { - text-align: right !important; -} - -* html div.cbi-value-field input, -* html div.cbi-value-field select { - font-size: 90% !important; -} diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/ie7.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/ie7.css deleted file mode 100644 index 9e569b28bd..0000000000 --- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/ie7.css +++ /dev/null @@ -1,59 +0,0 @@ -#tabmenu { - line-height: 0; -} - -ul.tabmenu { - zoom: 1; -} - -ul.l1 { - position: relative; -} - - -table.cbi-section-table td .cbi-input-text, -table.cbi-section-table td .cbi-input-select { - width: 95% !important; -} - - -.cbi-input-user, -.cbi-input-password { - text-indent: 0 !important; - padding-left: 1.5em !important; - width: 18.5em !important; -} - - -fieldset.cbi-section { - position: relative; - margin-top: 1em; - padding-top: 0.75em; - border: 1px solid #CCCCCC; - zoom: 1; -} - -fieldset.cbi-section legend { - position: absolute; - top: -0.75em; - left: 0.5em; -} - - -ul.cbi-tabmenu { - margin-bottom: 0; -} - -ul.cbi-tabmenu li.cbi-tab a { - position: static; /* fixes misplaced tab after page load */ - border-bottom: 1px solid white; -} - - -div.cbi-value { - zoom: 1; /* fixes hanging float */ -} - -div.cbi-value-field { - margin-left: 0 !important; -} diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/ie8.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/ie8.css deleted file mode 100644 index 890988c417..0000000000 --- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/ie8.css +++ /dev/null @@ -1,12 +0,0 @@ -fieldset.cbi-section { - position: relative; - margin-top: 1em; - padding-top: 0.75em; - border: 1px solid #CCCCCC; -} - -fieldset.cbi-section legend { - position: absolute; - top: -0.75em; - left: 0.5em; -} diff --git a/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm b/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm index 505e64b958..e77f9a4bfe 100644 --- a/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm +++ b/themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm @@ -56,9 +56,42 @@ local childs = disp.node_childs(node) if #childs > 0 then - write('<div class="tabmenu%d"><ul class="tabmenu l%d">' %{ - level, level - }) + write('<ul class="mainmenu l%d">' % level) + + local i, v + for i, v in ipairs(childs) do + local nnode = node.nodes[v] + + write('<li class="mainmenu-item-%s %s"><a href="%s">%s</a>' %{ + v, (nnode._menu_selected or (node.leaf and v == leaf)) and 'selected' or '', + nodeurl(prefix, v, nnode.query), + striptags(translate(nnode.title)) + }) + + if level < 2 then + render_menu(prefix .. "/" .. v, nnode, level + 1) + end + + write('</li>') + end + + write('</ul>') + end + end + + local function render_tabmenu(prefix, node, level) + if not level then + level = 1 + end + + local childs = disp.node_childs(node) + if #childs > 0 then + if level > 2 then + if level == 3 then + write('<div id="tabmenu">') + end + write('<ul class="cbi-tabmenu">') + end local selected_node local selected_name @@ -71,20 +104,25 @@ selected_name = v end - write('<li class="tabmenu-item-%s %s"><a href="%s">%s</a></li>' %{ - v, (nnode._menu_selected or (node.leaf and v == leaf)) and 'active' or '', - nodeurl(prefix, v, nnode.query), - striptags(translate(nnode.title)) - }) + if level > 2 then + write('<li class="tabmenu-item-%s %s"><a href="%s">%s</a></li>' %{ + v, (nnode._menu_selected or (node.leaf and v == leaf)) and 'cbi-tab' or '', + nodeurl(prefix, v, nnode.query), + striptags(translate(nnode.title)) + }) + end end - write('</ul><br style="clear:both" />') + if level > 2 then + write('</ul>') + if level == 3 then + write('</div>') + end + end if selected_node then - render_menu(prefix .. "/" .. selected_name, selected_node, level + 1) + render_tabmenu(prefix .. "/" .. selected_name, selected_node, level + 1) end - - write('</div>') end end @@ -99,22 +137,14 @@ end end - write('<div id="savemenu">') - if ucic > 0 then - write('<a class="warning" href="%s?redir=%s">%s: %d</a>' %{ + write('<div id="savemenu" class="uci_change_indicator"><a class="warning" href="%s?redir=%s">%s: %d</a></div>' %{ url(category, 'uci/changes'), - http.urlencode(http.formvalue('redir') or REQUEST_URI), + http.urlencode(http.formvalue('redir') or table.concat(disp.context.request, "/")), translate('Unsaved Changes'), ucic }) - else - write('<a href="#">%s: 0</a>' %{ - translate('Unsaved Changes') - }) end - - write('</div>') end end -%> @@ -124,18 +154,58 @@ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%=luci.i18n.context.lang%>" lang="<%=luci.i18n.context.lang%>"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" type="text/css" media="screen" href="<%=media%>/cascade.css" /> -<!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="<%=media%>/ie6.css" /><![endif]--> -<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="<%=media%>/ie7.css" /><![endif]--> -<!--[if IE 8]><link rel="stylesheet" type="text/css" media="screen" href="<%=media%>/ie8.css" /><![endif]--> <% if node and node.css then %><link rel="stylesheet" type="text/css" media="screen" href="<%=resource%>/<%=node.css%>" /> <% end -%> <% if css then %><style title="text/css"> <%= css %> </style> <% end -%> +<script type="text/javascript" src="<%=resource%>/cbi.js"></script> <script type="text/javascript" src="<%=resource%>/xhr.js"></script> +<script type="text/javascript">//<![CDATA[ + document.addEventListener('DOMContentLoaded', function() { + var event = ('ontouchstart' in window) ? 'touchstart' : 'click'; + + document.querySelectorAll('ul.mainmenu.l1 > li > a').forEach(function(a) { + a.addEventListener(event, 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(); + }); + }); + + document.addEventListener(event, function(ev) { + var t = ev.target; + + while (t && t.id != 'mainmenu') + t = t.parentNode; + + if (!t) + document.querySelectorAll('ul.mainmenu > li.active').forEach(function(li) { + li.classList.remove('active'); + }); + }); + }); +//]]></script> <title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title> </head> <body class="lang_<%=luci.i18n.context.lang%>"> @@ -172,22 +242,24 @@ </div> <div id="maincontainer"> - <div id="tabmenu"> + <div id="mainmenu"> <% if category then render_menu(category, cattree) end %> </div> <div id="maincontent"> + <% if category then render_tabmenu(category, cattree) end %> + <noscript> - <div class="errorbox"> - <strong><%:Java Script required!%></strong><br /> - <%:You must enable Java Script in your browser or LuCI will not work properly.%> + <div class="alert-message warning"> + <h4><%:JavaScript required!%></h4> + <p><%:You must enable JavaScript in your browser or LuCI will not work properly.%></p> </div> </noscript> <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") and category ~= "failsafe" then -%> - <div class="errorbox"> - <strong><%:No password set!%></strong><br /> - <%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%><br /> - <a href="<%=pcdata(luci.dispatcher.build_url("admin/system/admin"))%>"><%:Go to password configuration...%></a> + <div class="alert-message warning"> + <h4><%:No password set!%></h4> + <p><%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%></p> + <div class="right"><a class="btn" href="<%=url("admin/system/admin")%>"><%:Go to password configuration...%></a></div> </div> <%- end -%> |