diff options
Diffstat (limited to 'themes/luci-theme-bootstrap')
4 files changed, 539 insertions, 535 deletions
diff --git a/themes/luci-theme-bootstrap/Makefile b/themes/luci-theme-bootstrap/Makefile index c4e684ed18..1bb205ee05 100644 --- a/themes/luci-theme-bootstrap/Makefile +++ b/themes/luci-theme-bootstrap/Makefile @@ -9,6 +9,8 @@ include $(TOPDIR)/rules.mk LUCI_TITLE:=Bootstrap Theme (default) LUCI_DEPENDS:= +PKG_LICENSE:=Apache-2.0 + include ../../luci.mk # call BuildPackage - OpenWrt buildroot signature diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css index 8d0c434a98..4ca9e84f41 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css @@ -25,7 +25,8 @@ body { h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, code, del, em, img, q, s, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, -form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { +form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td, +.table, .tbody, .tfoot, .thead, .tr, .th, .td { margin: 0; padding: 0; border: 0; @@ -112,8 +113,6 @@ option, textarea { font-size: 100%; margin: 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; vertical-align: baseline; *vertical-align: middle; @@ -146,8 +145,6 @@ input[type="submit"][disabled] { input[type="search"] { -webkit-appearance: textfield; - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; box-sizing: content-box; } @@ -165,7 +162,7 @@ textarea { * Basic and global styles for generating a grid system, structural layout, and page templates * ------------------------------------------------------------------------------------------- */ body { - background-color: #ffffff; + background-color: #fff; margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; @@ -218,7 +215,8 @@ a:hover { * ---------------------------------------------------------------------------------------- */ p, .cbi-map-descr, -.cbi-section-descr { +.cbi-section-descr, +.table .tr.cbi-section-table-descr .th { font-size: 13px; font-weight: normal; line-height: 18px; @@ -232,7 +230,7 @@ p small { h1, h2, -h3, +h3, legend, h4, h5, h6 { @@ -268,14 +266,14 @@ h2 small { font-size: 14px; } -h3, +h3, legend, h4, h5, h6 { line-height: 36px; } -h3 { +h3, legend { font-size: 18px; } @@ -375,8 +373,6 @@ code, pre { padding: 0 3px 2px; font-family: Monaco, Andale Mono, Courier New, monospace; font-size: 12px; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; border-radius: 3px; } @@ -395,8 +391,6 @@ pre { font-size: 12px; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.15); - -webkit-border-radius: 3px; - -moz-border-radius: 3px; border-radius: 3px; white-space: pre; white-space: pre-wrap; @@ -437,7 +431,6 @@ form .clearfix, form .cbi-value { margin-bottom: 18px; zoom: 1; - overflow: hidden; } form .clearfix:before, form .clearfix:after, @@ -484,6 +477,7 @@ input[type=checkbox], input[type=radio] { input, textarea, select, +.cbi-dropdown, .uneditable-input { display: inline-block; width: 210px; @@ -493,9 +487,14 @@ select, line-height: 18px; color: #808080; border: 1px solid #ccc; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; border-radius: 3px; + box-sizing: border-box; +} + +.cbi-dropdown { + min-width: 210px; + max-width: 400px; + width: auto; } select { @@ -517,12 +516,10 @@ input[type=checkbox], input[type=radio] { } input[type=file] { - background-color: #ffffff; + background-color: #fff; padding: initial; border: initial; line-height: initial; - -webkit-box-shadow: none; - -moz-box-shadow: none; box-shadow: none; width: auto !important; } @@ -540,19 +537,24 @@ select, input[type=file] { select[multiple] { height: inherit; - background-color: #ffffff; + background-color: #fff; } textarea { height: auto; } +.td > input[type=text], +.td > input[type=password], +.td > select, +.td > .cbi-dropdown { + width: 100%; +} + .uneditable-input { - background-color: #ffffff; + background-color: #fff; display: block; border-color: #eee; - -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); - -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); cursor: not-allowed; } @@ -565,98 +567,24 @@ textarea { color: #bfbfbf; } -input, textarea { - -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; - -moz-transition: border linear 0.2s, box-shadow linear 0.2s; - -ms-transition: border linear 0.2s, box-shadow linear 0.2s; - -o-transition: border linear 0.2s, box-shadow linear 0.2s; +.btn, .cbi-button, input, textarea { transition: border linear 0.2s, box-shadow linear 0.2s; - -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); - -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); } +.btn:hover, .cbi-button:hover, input:focus, textarea:focus { outline: 0; - border-color: rgba(82, 168, 236, 0.8); - -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); - -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); + border-color: rgba(82, 168, 236, 0.8) !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); + text-decoration: none; } input[type=file]:focus, input[type=checkbox]:focus, select:focus { - -webkit-box-shadow: none; - -moz-box-shadow: none; box-shadow: none; outline: 1px dotted #666; } -form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline { - color: #b94a48; -} - -form .clearfix.error input, form .clearfix.error textarea { - color: #b94a48; - border-color: #ee5f5b; -} - -form .clearfix.error input:focus, form .clearfix.error textarea:focus { - border-color: #e9322d; - -webkit-box-shadow: 0 0 6px #f8b9b7; - -moz-box-shadow: 0 0 6px #f8b9b7; - box-shadow: 0 0 6px #f8b9b7; -} - -form .clearfix.error .input-prepend .add-on, form .clearfix.error .input-append .add-on { - color: #b94a48; - background-color: #fce6e6; - border-color: #b94a48; -} - -form .clearfix.warning > label, form .clearfix.warning .help-block, form .clearfix.warning .help-inline { - color: #c09853; -} - -form .clearfix.warning input, form .clearfix.warning textarea { - color: #c09853; - border-color: #ccae64; -} - -form .clearfix.warning input:focus, form .clearfix.warning textarea:focus { - border-color: #be9a3f; - -webkit-box-shadow: 0 0 6px #e5d6b1; - -moz-box-shadow: 0 0 6px #e5d6b1; - box-shadow: 0 0 6px #e5d6b1; -} - -form .clearfix.warning .input-prepend .add-on, form .clearfix.warning .input-append .add-on { - color: #c09853; - background-color: #d2b877; - border-color: #c09853; -} - -form .clearfix.success > label, form .clearfix.success .help-block, form .clearfix.success .help-inline { - color: #468847; -} - -form .clearfix.success input, form .clearfix.success textarea { - color: #468847; - border-color: #57a957; -} - -form .clearfix.success input:focus, form .clearfix.success textarea:focus { - border-color: #458845; - -webkit-box-shadow: 0 0 6px #9acc9a; - -moz-box-shadow: 0 0 6px #9acc9a; - box-shadow: 0 0 6px #9acc9a; -} - -form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-append .add-on { - color: #468847; - background-color: #bcddbc; - border-color: #468847; -} - input[disabled], select[disabled], textarea[disabled], @@ -665,16 +593,36 @@ select[readonly], textarea[readonly] { background-color: #f5f5f5; border-color: #ddd; + pointer-events: none; + cursor: default; +} + +.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: #f5f5f5; margin-bottom: 18px; - padding: 17px 20px 18px 150px; + padding: 17px 20px 18px 17px; border-top: 1px solid #ddd; - -webkit-border-radius: 0 0 3px 3px; - -moz-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; text-align: right; } @@ -694,6 +642,10 @@ textarea[readonly] { text-decoration: underline; } +.cbi-page-actions > form { + display: inline; +} + .help-inline, .help-block { font-size: 13px; line-height: 18px; @@ -719,34 +671,49 @@ textarea[readonly] { * Tables.less * Tables for, you guessed it, tabular data * ---------------------------------------- */ -table { +.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 { +.table .th, .table .td { + display: table-cell; + vertical-align: middle; /* Fixme */ padding: 10px 10px 9px; line-height: 18px; text-align: left; } -table th { +.table .th { padding-top: 9px; font-weight: bold; vertical-align: middle; } -table td { - vertical-align: top; +.table .td, .table .tbody .th { border-top: 1px solid #ddd; } -table tbody th { - border-top: 1px solid #ddd; - vertical-align: top; +.tr.placeholder { + height: calc(3em + 20px); +} + +.tr.placeholder > .td { + position: absolute; + left: 0; + right: 0; + bottom: 0; + text-align: center; + line-height: 3em; } /* Patterns.less @@ -771,7 +738,7 @@ header a { header h3 a:hover, header .brand:hover, header ul .active > a { background-color: #333; background-color: rgba(255, 255, 255, 0.05); - color: #ffffff; + color: #fff; text-decoration: none; } @@ -784,7 +751,7 @@ header h3 a, header .brand { display: block; padding: 8px 20px 12px; margin-left: -20px; - color: #ffffff; + color: #fff; font-size: 20px; font-weight: 200; line-height: 1; @@ -797,18 +764,8 @@ header p { header .fill { background-color: #222; - background-color: #222222; background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222)); - background-image: -moz-linear-gradient(top, #333333, #222222); - background-image: -ms-linear-gradient(top, #333333, #222222); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #222222)); - background-image: -webkit-linear-gradient(top, #333333, #222222); - background-image: -o-linear-gradient(top, #333333, #222222); background-image: linear-gradient(to bottom, #333333, #222222); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0); - -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); - -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1); padding: 0 5px; } @@ -835,7 +792,7 @@ header div > ul a, .nav a { } header div > ul a:hover, .nav a:hover { - color: #ffffff; + color: #fff; text-decoration: none; } @@ -885,7 +842,7 @@ header div > ul .menu-dropdown .dropdown-toggle, .nav .menu-dropdown .dropdown-toggle, header div > ul .dropdown-menu .dropdown-toggle, .nav .dropdown-menu .dropdown-toggle { - color: #ffffff; + color: #fff; } header div > ul .menu-dropdown a.menu.open, @@ -914,22 +871,15 @@ header div > ul .dropdown-menu li a:hover, .nav .dropdown-menu li a:hover { background-color: #191919; background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#292929), to(#191919)); - background-image: -moz-linear-gradient(top, #292929, #191919); - background-image: -ms-linear-gradient(top, #292929, #191919); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #191919)); - background-image: -webkit-linear-gradient(top, #292929, #191919); - background-image: -o-linear-gradient(top, #292929, #191919); background-image: linear-gradient(to bottom, #292929, #191919); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#191919', GradientType=0); - color: #ffffff; + color: #fff; } header div > ul .menu-dropdown .active a, .nav .menu-dropdown .active a, header div > ul .dropdown-menu .active a, .nav .dropdown-menu .active a { - color: #ffffff; + color: #fff; } header div > ul .menu-dropdown .divider, @@ -959,15 +909,12 @@ a.menu:after, .dropdown-toggle:after { margin-left: 4px; border-left: 4px solid transparent; border-right: 4px solid transparent; - border-top: 4px solid #ffffff; - filter: alpha(opacity=50); - -khtml-opacity: 0.5; - -moz-opacity: 0.5; + border-top: 4px solid #fff; opacity: 0.5; } .menu-dropdown, .dropdown-menu { - background-color: #ffffff; + background-color: #fff; float: left; position: absolute; top: 40px; @@ -984,14 +931,8 @@ a.menu:after, .dropdown-toggle:after { border-color: rgba(0, 0, 0, 0.2); border-style: solid; border-width: 0 1px 1px; - -webkit-border-radius: 0 0 6px 6px; - -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; - -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); - -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); - -webkit-background-clip: padding-box; - -moz-background-clip: padding-box; background-clip: padding-box; } @@ -1006,7 +947,7 @@ a.menu:after, .dropdown-toggle:after { margin: 5px 0; overflow: hidden; background-color: #eee; - border-bottom: 1px solid #ffffff; + border-bottom: 1px solid #fff; } header .dropdown-menu a, .dropdown-menu a { @@ -1016,27 +957,18 @@ header .dropdown-menu a, .dropdown-menu a { font-weight: normal; line-height: 18px; color: #808080; - text-shadow: 0 1px 0 #ffffff; + text-shadow: 0 1px 0 #fff; } header .dropdown-menu a:hover, .dropdown-menu a:hover, header .dropdown-menu a.hover, .dropdown-menu a.hover { - background-color: #dddddd; + background-color: #ddd; background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#eeeeee), to(#dddddd)); - background-image: -moz-linear-gradient(top, #eeeeee, #dddddd); - background-image: -ms-linear-gradient(top, #eeeeee, #dddddd); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #dddddd)); - background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd); - background-image: -o-linear-gradient(top, #eeeeee, #dddddd); - background-image: linear-gradient(to bottom, #eeeeee, #dddddd); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#dddddd', GradientType=0); + background-image: linear-gradient(to bottom, #eee, #ddd); color: #404040; text-decoration: none; - -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025); - -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025); } @@ -1044,7 +976,7 @@ header .dropdown-menu a.hover, .dropdown.open .menu, .open .dropdown-toggle, .dropdown.open .dropdown-toggle { - color: #ffffff; + color: #fff; background: #ccc; background: rgba(0, 0, 0, 0.3); } @@ -1129,8 +1061,6 @@ header .dropdown-menu a.hover, margin-right: 2px; line-height: 34px; border: 1px solid transparent; - -webkit-border-radius: 4px 4px 0 0; - -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } @@ -1145,7 +1075,7 @@ header .dropdown-menu a.hover, .cbi-tabmenu .active > a, .cbi-tabmenu .active > a:hover, .cbi-tab > a:link, .cbi-tab > a:hover { color: #808080; - background-color: #ffffff; + background-color: #fff; border: 1px solid #ddd; border-bottom-color: transparent; cursor: default; @@ -1155,8 +1085,6 @@ header .dropdown-menu a.hover, .cbi-tabmenu .menu-dropdown, .cbi-tabmenu .dropdown-menu { top: 35px; border-width: 1px; - -webkit-border-radius: 0 6px 6px 6px; - -moz-border-radius: 0 6px 6px 6px; border-radius: 0 6px 6px 6px; } @@ -1191,26 +1119,15 @@ header .dropdown-menu a.hover, margin: 0 0 18px; background-color: #f5f5f5; background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5)); - background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5); - background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5)); - background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5); - background-image: -o-linear-gradient(top, #ffffff, #f5f5f5); - background-image: linear-gradient(to bottom, #ffffff, #f5f5f5); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0); + background-image: linear-gradient(to bottom, #fff, #f5f5f5); border: 1px solid #ddd; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; border-radius: 3px; - -webkit-box-shadow: inset 0 1px 0 #ffffff; - -moz-box-shadow: inset 0 1px 0 #ffffff; - box-shadow: inset 0 1px 0 #ffffff; + box-shadow: inset 0 1px 0 #fff; } .breadcrumb li { display: inline; - text-shadow: 0 1px 0 #ffffff; + text-shadow: 0 1px 0 #fff; } .breadcrumb .divider { @@ -1244,7 +1161,7 @@ footer { .alert-message.info, .btn.info:hover, .alert-message.info:hover { - color: #ffffff; + color: #fff; } .btn .close, .alert-message .close { @@ -1256,50 +1173,26 @@ footer { .alert-message.danger, .btn.error, .alert-message.error { - background-color: #c43c35; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35)); - background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35); - background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35)); - background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35); - background-image: -o-linear-gradient(top, #ee5f5b, #c43c35); - background-image: linear-gradient(to bottom, #ee5f5b, #c43c35); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0); + background: linear-gradient(to bottom, #ee5f5b, #c43c35) repeat-x; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: #c43c35 #c43c35 #882a25; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } .btn.success, .alert-message.success { - background-color: #57a957; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957)); - background-image: -moz-linear-gradient(top, #62c462, #57a957); - background-image: -ms-linear-gradient(top, #62c462, #57a957); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957)); - background-image: -webkit-linear-gradient(top, #62c462, #57a957); - background-image: -o-linear-gradient(top, #62c462, #57a957); - background-image: linear-gradient(to bottom, #62c462, #57a957); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0); + background: linear-gradient(to bottom, #62c462, #57a957) repeat-x; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: #57a957 #57a957 #3d773d; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } .btn.info, .alert-message.info { - background-color: #339bb9; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9)); - background-image: -moz-linear-gradient(top, #5bc0de, #339bb9); - background-image: -ms-linear-gradient(top, #5bc0de, #339bb9); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9)); - background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9); - background-image: -o-linear-gradient(top, #5bc0de, #339bb9); - background-image: linear-gradient(to bottom, #5bc0de, #339bb9); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0); + background: linear-gradient(to bottom, #5bc0de, #339bb9) repeat-x; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: #339bb9 #339bb9 #22697d; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); +} + +.alert-message.notice { + background: linear-gradient(to bottom, #efefef, #fefefe) repeat-x; + text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25); border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } @@ -1307,15 +1200,7 @@ footer { .cbi-button { cursor: pointer; display: inline-block; - background-color: #e6e6e6; - background-repeat: no-repeat; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6)); - background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6); - background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); + background: linear-gradient(#fff, #fff 25%, #e6e6e6) no-repeat; padding: 5px 14px 6px; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); color: #333; @@ -1323,211 +1208,308 @@ footer { line-height: normal; border: 1px solid #ccc; border-bottom-color: #bbb; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; border-radius: 4px; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); } -.btn:hover, -.cbi-button:hover { - color: #333; - text-decoration: none; -} - .btn:focus, .cbi-button:focus { outline: 1px dotted #666; } +.cbi-input-invalid, +.cbi-value-error input { + color: #f00; + border-color: #f00; +} + +.cbi-button-positive, +.cbi-button-fieldadd, +.cbi-button-add, +.cbi-button-save { + border-color: #4a4; + color: #4a4; +} + +.cbi-button-neutral, +.cbi-button-download, +.cbi-button-find, +.cbi-button-link, +.cbi-button-up, +.cbi-button-down { + color: #444; +} + .btn.primary, +.cbi-button-action, +.cbi-button-apply, +.cbi-button-reload, +.cbi-button-edit { + border-color: #0069d6; + color: #0069d6; +} + +.cbi-button-negative, +.cbi-section-remove .cbi-button, +.cbi-button-reset, +.cbi-button-remove { + border-color: #c44; + color: #c44; +} + +.cbi-page-actions .cbi-button-link, +.cbi-page-actions form[method="get"]:first-child { + float: left; +} + +.btn.primary, +.cbi-button-action.important, .cbi-page-actions .cbi-button-apply, -.cbi-page-actions .cbi-button-save, -.cbi-page-actions .cbi-button-reset { - color: #ffffff; - padding: 5px 14px 6px; - background-color: #0064cd; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd)); - background-image: -moz-linear-gradient(top, #049cdb, #0064cd); - background-image: -ms-linear-gradient(top, #049cdb, #0064cd); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd)); - background-image: -webkit-linear-gradient(top, #049cdb, #0064cd); - background-image: -o-linear-gradient(top, #049cdb, #0064cd); - background-image: linear-gradient(to bottom, #049cdb, #0064cd); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0); +.cbi-section-actions .cbi-button-edit { + color: #fff; + background: linear-gradient(to bottom, #0069d6, #0049d6) no-repeat; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: #0064cd #0064cd #003f81; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); } -.cbi-input-invalid, -.cbi-value-error input { - color: #FF0000; - border-color: #FF0000; +.cbi-button-positive.important, +.cbi-page-actions .cbi-button-save { + color: #fff; + background: linear-gradient(to bottom, #4a4, #484) no-repeat; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } -.cbi-button-up, -.cbi-input-up { - background-position: center center; - background-image: url('../resources/cbi/up.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6)); - background-image: url('../resources/cbi/up.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/up.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/up.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/up.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/up.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); -} - -.cbi-button-down, -.cbi-input-down { - background-position: center center; - background-image: url('../resources/cbi/down.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6)); - background-image: url('../resources/cbi/down.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/down.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/down.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/down.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/down.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); +.cbi-button-negative.important { + color: #fff; + background: linear-gradient(to bottom, #c44, #c00) no-repeat; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } -.cbi-button-find, -.cbi-input-find { - background-position: 6px center, left top; - padding-left: 28px; - background-image: url('../resources/cbi/find.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6)); - background-image: url('../resources/cbi/find.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/find.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/find.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/find.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/find.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); +.cbi-page-actions .cbi-button-apply + .cbi-button-save { + background: linear-gradient(#fff, #fff 25%, #e6e6e6); + text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.75); + color: #4a4; } -.cbi-button-add, -.cbi-input-add { - background-position: 6px center, left top; - padding-left: 28px; - background-image: url('../resources/cbi/add.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6)); - background-image: url('../resources/cbi/add.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/add.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/add.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/add.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/add.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); +.cbi-dropdown { + border: 1px solid #ccc; + border-radius: 3px; + display: inline-flex; + padding: 0; + cursor: pointer; + height: auto; + background: linear-gradient(#fff 0%, #e9e8e6 100%); + position: relative; + color: #404040; } -.cbi-button-apply, -.cbi-input-apply { - background-position: 6px center, left top; - padding-left: 28px; - background-image: url('../resources/cbi/apply.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6)); - background-image: url('../resources/cbi/apply.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/apply.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/apply.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/apply.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/apply.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); +.cbi-dropdown:focus { + outline: 2px solid #4b6e9b; } -.cbi-button-reset, -.cbi-input-reset { - background-position: 6px center, left top; - padding-left: 28px; - background-image: url('../resources/cbi/reset.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6)); - background-image: url('../resources/cbi/reset.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/reset.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/reset.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/reset.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/reset.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); -} - -.cbi-button-edit, -.cbi-input-edit { - background-position: 6px center, left top; - padding-left: 28px; - background-image: url('../resources/cbi/edit.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6)); - background-image: url('../resources/cbi/edit.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/edit.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/edit.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/edit.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/edit.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); -} - -.cbi-button-remove, -.cbi-input-remove { - background-position: 6px center, left top; - padding-left: 28px; - background-image: url('../resources/cbi/remove.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6)); - background-image: url('../resources/cbi/remove.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/remove.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/remove.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/remove.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/remove.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); +.cbi-dropdown > ul { + margin: 0 !important; + padding: 0; + list-style: none; + overflow-x: hidden; + overflow-y: auto; + display: flex; + width: 100%; } -.cbi-button-reload, -.cbi-input-reload { - background-position: 6px center, left top; - padding-left: 28px; - background-image: url('../resources/cbi/reload.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6)); - background-image: url('../resources/cbi/reload.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/reload.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/reload.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/reload.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/reload.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); +.cbi-dropdown > ul.preview { + display: none; } -.cbi-button-link, -.cbi-input-link { - background-position: 6px center, left top; - padding-left: 28px; - background-image: url('../resources/cbi/link.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6)); - background-image: url('../resources/cbi/link.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/link.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/link.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/link.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/link.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); +.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-button-download, -.cbi-input-download { - background-position: 6px center, left top; - padding-left: 28px; - background-image: url('../resources/cbi/download.gif'), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6)); - background-image: url('../resources/cbi/download.gif'), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/download.gif'), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/download.gif'), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/download.gif'), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: url('../resources/cbi/download.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); +.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; + color: #404040; + min-height: 20px; +} + +.cbi-dropdown > ul > li .hide-open { display: block; display: initial; } +.cbi-dropdown > ul > li .hide-close { display: none; } + +.cbi-dropdown > ul > li[display]:not([display="0"]) { + border-left: 1px solid #ccc; +} + +.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 > 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; +} + +.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: block; 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; +} + +.cbi-dropdown[disabled] { + pointer-events: none; + opacity: .6; +} + +.cbi-tooltip-container { + cursor: help; +} + +.cbi-tooltip { + position: absolute; + z-index: 1000; + left: -1000px; + opacity: 0; + transition: opacity .25s ease-out; +} + +.cbi-tooltip-container:hover .cbi-tooltip:not(:empty) { + left: auto; + opacity: 1; + transition: opacity .25s ease-in; +} + +.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; +} + +.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 { - -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); } .btn.disabled { cursor: default; background-image: none; - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); - filter: alpha(opacity=65); - -khtml-opacity: 0.65; - -moz-opacity: 0.65; opacity: 0.65; - -webkit-box-shadow: none; - -moz-box-shadow: none; box-shadow: none; } .btn[disabled] { cursor: default; background-image: none; - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); - filter: alpha(opacity=65); - -khtml-opacity: 0.65; - -moz-opacity: 0.65; opacity: 0.65; - -webkit-box-shadow: none; - -moz-box-shadow: none; box-shadow: none; } @@ -1535,8 +1517,6 @@ footer { font-size: 15px; line-height: normal; padding: 9px 14px 9px; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; border-radius: 6px; } @@ -1545,50 +1525,6 @@ footer { font-size: 11px; } -/* Button icons for specific pages */ -.Startup .cbi-section-table input.cbi-input-apply, -.Startup .cbi-section-table input.cbi-button-apply { - background-image: url("../resources/cbi/apply.gif"); - background-position: 7px 4px; - padding: 3px 9px 3px 27px; -} - -.Processes .cbi-section-table input.cbi-input-reload, -.Startup .cbi-section-table input.cbi-input-reload { - background-image: url("../resources/cbi/reload.gif"); - background-position: 7px 4px; - padding: 3px 9px 3px 27px; -} - -.Processes .cbi-section-table input.cbi-input-remove, -.Processes .cbi-section-table div.cbi-section-remove input, -.Startup .cbi-section-table input.cbi-input-remove, -.Startup .cbi-section-table div.cbi-section-remove input { - background-image: url("../resources/cbi/remove.gif"); - background-position: 7px 4px; - padding: 3px 9px 3px 27px; -} - -.Processes .cbi-section-table input.cbi-input-reset, -.Processes .cbi-section-table input.cbi-button-reset, -.Startup .cbi-section-table input.cbi-input-reset, -.Startup .cbi-section-table input.cbi-button-reset { - background-image: url("../resources/cbi/reset.gif"); - background-position: 7px 4px; - padding: 3px 9px 3px 27px; -} - -.Startup .cbi-section-table input.cbi-input-save, -.Startup .cbi-section-table input.cbi-button-save { - background-image: url("../resources/cbi/save.gif"); - background-position: 7px 4px; - padding: 3px 9px 3px 27px; -} - -:root .alert-message, :root .btn { - border-radius: 0 0; -} - button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { padding: 0; border: 0; @@ -1596,52 +1532,32 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .close { float: right; - color: #000000; + color: #000; font-size: 20px; font-weight: bold; line-height: 13.5px; - text-shadow: 0 1px 0 #ffffff; - filter: alpha(opacity=25); - -khtml-opacity: 0.25; - -moz-opacity: 0.25; + text-shadow: 0 1px 0 #fff; opacity: 0.25; } .close:hover { - color: #000000; + color: #000; text-decoration: none; - filter: alpha(opacity=40); - -khtml-opacity: 0.4; - -moz-opacity: 0.4; opacity: 0.4; } -.alert-message, .errorbox { +.alert-message { position: relative; padding: 7px 15px; margin-bottom: 18px; color: #404040; - background-color: #eedc94; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94)); - background-image: -moz-linear-gradient(top, #fceec1, #eedc94); - background-image: -ms-linear-gradient(top, #fceec1, #eedc94); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94)); - background-image: -webkit-linear-gradient(top, #fceec1, #eedc94); - background-image: -o-linear-gradient(top, #fceec1, #eedc94); - background-image: linear-gradient(to bottom, #fceec1, #eedc94); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0); + background: linear-gradient(to bottom, #fceec1, #eedc94) repeat-x; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - border-color: #eedc94 #eedc94 #e4c652; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); border-width: 1px; border-style: solid; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; border-radius: 4px; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); } @@ -1659,7 +1575,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .alert-message.error p a, .alert-message.success p a, .alert-message.info p a { - color: #ffffff; + color: #fff; } .alert-message h5 { @@ -1676,29 +1592,21 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { line-height: 28px; } -.alert-message .btn { - -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); - -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); -} - .label { padding: 1px 3px 2px; font-size: 9.75px; font-weight: bold; - color: #ffffff !important; + color: #fff !important; text-transform: uppercase; white-space: nowrap; background-color: #bfbfbf; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; border-radius: 3px; text-shadow: none; } a.label:link, a.label:visited { - color: #ffffff; + color: #fff; } a.label:hover { @@ -1729,7 +1637,7 @@ a.label:hover { #memcache > div, #membuff > div, #conns > div { - border: 1px solid #CCCCCC; + border: 1px solid #ccc; border-radius: 3px 3px 3px 3px; color: #808080; display: inline-block; @@ -1761,9 +1669,27 @@ header .pull-right { padding-top: 8px; } font-weight: normal; } -.left { text-align: left !important; } +.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-row[data-title]::before { + border-top: 1px solid #ddd; +} +.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; } .cbi-value-field { line-height: 1.5em; } @@ -1778,96 +1704,116 @@ table table td, border: none; } -table.cbi-section-table input, -table.cbi-section-table textarea, -table.cbi-section-table select { - width: auto; +.table.cbi-section-table input[type="password"], +.table.cbi-section-table input[type="text"], +.table.cbi-section-table textarea, +.table.cbi-section-table select { + width: 100%; } -table.cbi-section-table td.cbi-section-table-cell { +.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 select { width: inherit; } -table.valign-middle td { +.td.cbi-section-actions { + text-align: right; vertical-align: middle; } -.cbi-value-description { display: inline; } +.td.cbi-section-actions > * { + display: flex; +} -.cbi-value-description img { vertical-align: middle; } +.td.cbi-section-actions > * > *, +.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 { + background: #f9f9f9; +} + +.cbi-value-description { + background-image: url(/luci-static/resources/cbi/help.gif); + background-position: .25em .2em; + background-repeat: no-repeat; + margin: .25em 0 0 0; + padding: 0 0 0 1.7em; +} .cbi-section-error { - border: 1px solid #FF0000; + border: 1px solid #f00; border-radius: 3px; - background-color: #FCE6E6; + background-color: #fce6e6; padding: 5px; + margin-bottom: 18px; } .cbi-section-error ul { margin: 0 0 0 20px; } .cbi-section-error ul li { - color: #FF0000; + color: #f00; font-weight: bold; } .ifacebox { - background-color: #FFFFFF; - border: 1px solid #CCCCCC; + background-color: #fff; + border: 1px solid #ccc; margin: 0 10px; text-align: center; white-space: nowrap; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6)); - background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6); - background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); + background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - -webkit-border-radius: 4px; - -moz-border-radius: 4px; border-radius: 4px; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + display: inline-flex; + flex-direction: column; + line-height: 1.2em; + min-width: 100px; } .ifacebox .ifacebox-head { - border-bottom: 1px solid #CCCCCC; + border-bottom: 1px solid #ccc; padding: 2px; + background: #eee; +} + +.ifacebox .ifacebox-head.active { + background: #90c0e0; } .ifacebox .ifacebox-body { - padding: 6px; + padding: .25em; } .ifacebadge { display: inline-block; + flex-direction: row; white-space: nowrap; - background-color: #FFFFFF; - border: 1px solid #CCCCCC; + background-color: #fff; + border: 1px solid #ccc; padding: 2px; - margin-left: 2px; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6)); - background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6); - background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); + background-image: linear-gradient(#fff, #fff 25%, #f9f9f9); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - -webkit-border-radius: 4px; - -moz-border-radius: 4px; border-radius: 4px; - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); cursor: default; + line-height: 1.2em; } .ifacebadge img { @@ -1877,23 +1823,67 @@ table.valign-middle td { } .ifacebadge-active { - border-color: #000000; + 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; +} + +.network-status-table .ifacebox-body > div { + display: flex; + flex-wrap: wrap; + margin: -.125em; +} + +.ifacebadge.large, +.network-status-table .ifacebox-body .ifacebadge { + display: inline-flex; + flex: 1; + padding: .25em; + min-width: 220px; + margin: .125em; +} + +.ifacebadge > *, +.ifacebadge.large > * { + margin: 0 .125em; +} + .zonebadge { padding: 2px; border-radius: 4px; display: inline-block; white-space: nowrap; - color: #666666; + color: #666; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - cursor: pointer; } .zonebadge > em, .zonebadge > strong { - margin: 5px; + margin: 0 2px; display: inline-block; } @@ -1901,17 +1891,21 @@ table.valign-middle td { width: 6em; } +.zonebadge > .ifacebadge { + margin-left: 2px; +} + .zonebadge-empty { - border: 1px dashed #AAAAAA; - color: #AAAAAA; + border: 1px dashed #aaa; + color: #aaa; font-style: italic; font-size: smaller; } div.cbi-value var, -td.cbi-value-field var { +.td.cbi-value-field var { font-style: italic; - color: #0069D6; + color: #0069d6; } .uci-change-list { @@ -1921,8 +1915,8 @@ td.cbi-value-field var { .uci-change-list ins, .uci-change-legend-label ins { text-decoration: none; - border: 1px solid #00FF00; - background-color: #CCFFCC; + border: 1px solid #0f0; + background-color: #cfc; display: block; padding: 2px; } @@ -1930,8 +1924,8 @@ td.cbi-value-field var { .uci-change-list del, .uci-change-legend-label del { text-decoration: none; - border: 1px solid #FF0000; - background-color: #FFCCCC; + border: 1px solid #f00; + background-color: #fcc; display: block; font-style: normal; padding: 2px; @@ -1940,17 +1934,19 @@ td.cbi-value-field var { .uci-change-list var, .uci-change-legend-label var { text-decoration: none; - border: 1px solid #CCCCCC; - background-color: #EEEEEE; + border: 1px solid #ccc; + background-color: #eee; display: block; font-style: normal; padding: 2px; + line-height: 19px; + white-space: pre; } .uci-change-list var ins, .uci-change-list var del { - /*display: inline;*/ - border: none; + display: inline; + /*border: none;*/ white-space: pre; font-style: normal; padding: 0px; @@ -1980,3 +1976,7 @@ td.cbi-value-field var { line-height: 6px; border: none; } + +html body.apply-overlay-active { + height: calc(100vh - 63px); +} diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/html5.js b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/html5.js deleted file mode 100644 index 1ec510f2a4..0000000000 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/html5.js +++ /dev/null @@ -1,3 +0,0 @@ -// HTML5 Shiv v3 | @jon_neal @afarkas @rem | MIT/GPL2 Licensed -// Uncompressed source: https://github.com/aFarkas/html5shiv -(function(a,b){function f(a){var c,d,e,f;b.documentMode>7?(c=b.createElement("font"),c.setAttribute("data-html5shiv",a.nodeName.toLowerCase())):c=b.createElement("shiv:"+a.nodeName);while(a.firstChild)c.appendChild(a.childNodes[0]);for(d=a.attributes,e=d.length,f=0;f<e;++f)d[f].specified&&c.setAttribute(d[f].nodeName,d[f].nodeValue);c.style.cssText=a.style.cssText,a.parentNode.replaceChild(c,a),c.originalElement=a}function g(a){var b=a.originalElement;while(a.childNodes.length)b.appendChild(a.childNodes[0]);a.parentNode.replaceChild(b,a)}function h(a,b){b=b||"all";var c=-1,d=[],e=a.length,f,g;while(++c<e){f=a[c],g=f.media||b;if(f.disabled||!/print|all/.test(g))continue;d.push(h(f.imports,g),f.cssText)}return d.join("")}function i(c){var d=new RegExp("(^|[\\s,{}])("+a.html5.elements.join("|")+")","gi"),e=c.split("{"),f=e.length,g=-1;while(++g<f)e[g]=e[g].split("}"),b.documentMode>7?e[g][e[g].length-1]=e[g][e[g].length-1].replace(d,'$1font[data-html5shiv="$2"]'):e[g][e[g].length-1]=e[g][e[g].length-1].replace(d,"$1shiv\\:$2"),e[g]=e[g].join("}");return e.join("{")}var c=function(a){return a.innerHTML="<x-element></x-element>",a.childNodes.length===1}(b.createElement("a")),d=function(a,b,c){return b.appendChild(a),(c=(c?c(a):a.currentStyle).display)&&b.removeChild(a)&&c==="block"}(b.createElement("nav"),b.documentElement,a.getComputedStyle),e={elements:"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video".split(" "),shivDocument:function(a){a=a||b;if(a.documentShived)return;a.documentShived=!0;var f=a.createElement,g=a.createDocumentFragment,h=a.getElementsByTagName("head")[0],i=function(a){f(a)};c||(e.elements.join(" ").replace(/\w+/g,i),a.createElement=function(a){var b=f(a);return b.canHaveChildren&&e.shivDocument(b.document),b},a.createDocumentFragment=function(){return e.shivDocument(g())});if(!d&&h){var j=f("div");j.innerHTML=["x<style>","article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}","audio{display:none}","canvas,video{display:inline-block;*display:inline;*zoom:1}","[hidden]{display:none}audio[controls]{display:inline-block;*display:inline;*zoom:1}","mark{background:#FF0;color:#000}","</style>"].join(""),h.insertBefore(j.lastChild,h.firstChild)}return a}};e.shivDocument(b),a.html5=e;if(c||!a.attachEvent)return;a.attachEvent("onbeforeprint",function(){if(a.html5.supportsXElement||!b.namespaces)return;b.namespaces.shiv||b.namespaces.add("shiv");var c=-1,d=new RegExp("^("+a.html5.elements.join("|")+")$","i"),e=b.getElementsByTagName("*"),g=e.length,j,k=i(h(function(a,b){var c=[],d=a.length;while(d)c.unshift(a[--d]);d=b.length;while(d)c.unshift(b[--d]);c.sort(function(a,b){return a.sourceIndex-b.sourceIndex}),d=c.length;while(d)c[--d]=c[d].styleSheet;return c}(b.getElementsByTagName("style"),b.getElementsByTagName("link"))));while(++c<g)j=e[c],d.test(j.nodeName)&&f(j);b.appendChild(b._shivedStyleSheet=b.createElement("style")).styleSheet.cssText=k}),a.attachEvent("onafterprint",function(){if(a.html5.supportsXElement||!b.namespaces)return;var c=-1,d=b.getElementsByTagName("*"),e=d.length,f;while(++c<e)f=d[c],f.originalElement&&g(f);b._shivedStyleSheet&&b._shivedStyleSheet.parentNode.removeChild(b._shivedStyleSheet)})})(this,document)
\ No newline at end of file diff --git a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm index 6f09bfcdfa..6ad32efb47 100644 --- a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm +++ b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm @@ -145,9 +145,9 @@ end if ucichanges > 0 then - write('<a class="label notice" href="%s?redir=%s">%s: %d</a>' %{ + write('<a class="uci_change_indicator label notice" href="%s?redir=%s">%s: %d</a>' %{ 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'), ucichanges }) @@ -160,7 +160,6 @@ <head> <meta charset="utf-8"> <title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title> - <!--[if lt IE 9]><script src="<%=media%>/html5.js"></script><![endif]--> <meta name="viewport" content="initial-scale=1.0"> <link rel="stylesheet" href="<%=media%>/cascade.css"> <link rel="stylesheet" media="only screen and (max-device-width: 854px)" href="<%=media%>/mobile.css" type="text/css" /> @@ -171,6 +170,7 @@ <% if css then %> <style title="text/css"><%= css %></style> <% end -%> + <script src="<%=resource%>/cbi.js"></script> <script src="<%=resource%>/xhr.js"></script> </head> @@ -191,15 +191,20 @@ </div> </header> - <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%> - <div class="container"> + <div id="maincontent" class="container"> + <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%> <div class="alert-message warning"> <h4><%:No password set!%></h4> - <%: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> + <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> - </div> - <%- end -%> + <%- end -%> + + <noscript> + <div class="alert-message warning"> + <h4><%:JavaScript required!%></h4> + <p><%:You must enable JavaScript in your browser or LuCI will not work properly.%></p> + </div> + </noscript> - <div id="maincontent" class="container"> <% if category then render_tabmenu(category, cattree) end %> |