diff options
| -rw-r--r-- | themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css | 203 |
1 files changed, 168 insertions, 35 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 a88d678f6d..acd711a1ea 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 @@ -19,7 +19,7 @@ body { background-position: bottom center; background-repeat: repeat-x; font-family: Arial, Verdana, sans-serif; - font-size: 10pt; + font-size: 13px; padding-bottom: 1.5em; } @@ -86,7 +86,7 @@ a img { background: #f5f5f5; border: 1px solid #444; border-width: 0 0 1px 1px; - font-size: 11pt; + font-size: 15px; padding-bottom: 1em; } @@ -199,6 +199,59 @@ hr { margin-left: 2em; } +#modal_overlay { + position: fixed; + top: 0; + bottom: 0; + left: -10000px; + right: 10000px; + background: rgba(0, 0, 0, 0.7); + z-index: 900; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; + transition: opacity .125s ease-in; + opacity: 0; +} + +.modal { + width: 90%; + margin: 5em auto; + display: flex; + flex-wrap: wrap; + min-height: 32px; + max-width: 600px; + align-items: center; + border-radius: 3px; + background: #f5f5f5; + border: 1px solid #000; + padding: .5em .5em .25em .5em; + max-height: 2400px; + min-width: 270px; + color: #444; +} + +.modal > * { + flex-basis: 100%; + line-height: normal; + margin-bottom: .5em; +} + +.modal > pre, +.modal > textarea { + white-space: pre-wrap; + overflow: auto; +} + +body.modal-overlay-active { + overflow: hidden; +} + +body.modal-overlay-active #modal_overlay { + left: 0; + right: 0; + opacity: 1; +} + .warning { color: red; background-color: white; @@ -234,19 +287,29 @@ hr { margin: 0 0 .5em 0; } -.alert-message, .cbi-tooltip.error { +.label { + padding: 1px 2px; + font-size: 10px; + color: #fff; + text-transform: uppercase; + white-space: nowrap; + background-color: #aaa; + border-radius: 3px; +} + +.alert-message, .cbi-tooltip.error, .label.error { border-color: #a22; background: #fee; color: #a22; } -.alert-message.notice, .cbi-tooltip.notice { +.alert-message.notice, .cbi-tooltip.notice, .label.notice { border-color: #15a; background: #e6f6ff; color: #15a; } -.alert-message.warning, .cbi-tooltip.warning { +.alert-message.warning, .cbi-tooltip.warning, .label.warning { border-color: #ed5; background: #fe9; color: #650; @@ -392,7 +455,7 @@ textarea#syslog { direction: rtl; } -h2, h3, h4, legend { +h2, h3, h4, h5, legend { font-size: 150%; font-family: Trebuchet MS, Verdana, sans-serif; font-weight: bold; @@ -411,6 +474,10 @@ h4 { font-size: 112%; } +h5 { + font-size: 105%; +} + fieldset { border: none; } fieldset > legend { float: left; } fieldset > legend + * { clear: both; } @@ -499,7 +566,7 @@ input[type=text], input[type=password], .cbi-dropdown { width: 20em; - font-size: 10pt; + font-size: 12px; height: 22px; } @@ -514,6 +581,12 @@ input.cbi-input-password + img { vertical-align: middle; } +label > input[type="checkbox"], +label > input[type="radio"] { + vertical-align: bottom; + margin: 0; +} + .td select, .td .cbi-dropdown, .td input[type=text], @@ -543,8 +616,9 @@ img.cbi-image-button { background: #fff; text-align: center; font-weight: bold; - line-height: 13pt; - height: 16pt; + line-height: 12px; + height: 22px; + line-height: 20px; box-sizing: border-box; cursor: pointer; } @@ -777,16 +851,6 @@ div.cbi-optionals { margin: 0; } -@keyframes flash { - 0% { opacity: 1; } - 50% { opacity: .5; } - 100% { opacity: 1; } -} - -.tr.cbi-section-table-row.flash { - animation: flash .35s; -} - .tr.cbi-section-table-descr .th { font-weight: normal; font-size: 90%; @@ -800,7 +864,6 @@ div.cbi-optionals { .th.cbi-section-actions, .td.cbi-section-actions { - overflow: visible; align-self: center; vertical-align: middle; } @@ -1205,12 +1268,12 @@ input[type="password"] + .cbi-button, select + .cbi-button { border-radius: 0 3px 3px 0; border: 1px outset #000; - margin: 0 0 1px -2px; + margin: 0 0 0 -2px; padding: 0 6px; vertical-align: top; display: inline-block; height: 22px; - font-size: 10pt; + font-size: 12px; line-height: 20px; } @@ -1230,6 +1293,7 @@ select + .cbi-button { transition: opacity .25s ease-out; pointer-events: none; box-shadow: 0 0 2px #444; + color: #444; } .cbi-tooltip-container:hover .cbi-tooltip { @@ -1239,6 +1303,39 @@ select + .cbi-button { white-space: normal; } +.cbi-progressbar { + background: #ddd; + border: 1px solid #bbb; + border-radius: 3px; + position: relative; + min-width: 170px; + height: 20px; + margin: 4px 0; + line-height: 20px; +} + +.cbi-progressbar > div { + background: #90c0e0; + height: 100%; + transition: width .25s ease-in; + width: 0%; +} + +.cbi-progressbar::after { + position: absolute; + bottom: 0; + top: 0; + right: 0; + left: 0; + text-align: center; + text-shadow: 0 0 2px #fff; + content: attr(title); + white-space: pre; + overflow: hidden; + text-overflow: ellipsis; +} + + .zonebadge .cbi-tooltip { padding: 1px; background: inherit; @@ -1332,7 +1429,7 @@ select + .cbi-button { } .ifacebadge > * { - align-self: flex-start; + align-self: center; } .ifacebadge > img, @@ -1528,6 +1625,32 @@ select + .cbi-button { } +@keyframes flash { + 0% { opacity: 1; } + 50% { opacity: .5; } + 100% { opacity: 1; } +} + +.flash { + animation: flash .35s; +} + +.spinning { + position: relative; + padding-left: 32px !important; +} + +.spinning::before { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 32px; + content: " "; + background: url(../resources/icons/loading.gif) no-repeat center; + background-size: 16px; +} + } @media screen and (max-width: 992px) { @@ -1732,29 +1855,36 @@ select + .cbi-button { @media screen and (max-width: 480px) { body { - font-size: 12pt; + font-size: 16px; } - input, textarea, select, .cbi-button { - font-size: 12pt !important; + input, textarea, select, .cbi-button, .cbi-dropdown { + font-size: 16px !important; line-height: 30px; } select, input[type="text"], input[type="password"] { width: 100%; height: 30px; + border-radius: 3px; } input[type="text"] + .cbi-button, input[type="password"] + .cbi-button, select + .cbi-button { height: 30px; - line-height: 28px; + line-height: 30px; + margin-left: -5px; + min-width: 30px; } input.cbi-input-password, [data-dynlist] > .add-item > input { - width: calc(100% - 20px); + width: calc(100% - 25px); + } + + .label { + font-size: 14px; } .cbi-dynlist, @@ -1771,8 +1901,11 @@ select + .cbi-button { } .btn, .cbi-button { - font-size: 9pt !important; - line-height: 13pt; + font-size: 16px !important; + line-height: 30px; + height: 30px; + overflow: hidden; + text-overflow: ellipsis; } #maincontent { @@ -1839,11 +1972,6 @@ select + .cbi-button { padding: 0 3px; } - ul.cbi-tabmenu li { - font-size: 90%; - margin: 0 1px -1px 0; - } - .hide-xs { display: none; } @@ -1861,4 +1989,9 @@ select + .cbi-button { width: 100%; margin-top: .5em; } + + #cbi-firewall-rule .td[data-type="fvalue"], + #cbi-firewall-redirect .td[data-type="fvalue"] { + display: none; + } } |