From 1c848262426c3f106649bac44f7ac7d0541ba293 Mon Sep 17 00:00:00 2001 From: Jo-Philipp Wich Date: Tue, 13 Nov 2018 16:19:23 +0100 Subject: [PATCH] luci-theme-bootstrap: add modal/progressbar rules, cleanup - Add rules for modal dialogs and progress bar widgets - Drop redundant, unused or obsolete rules - Add spin utility class Signed-off-by: Jo-Philipp Wich --- .../htdocs/luci-static/bootstrap/cascade.css | 218 +++++++++++++----- 1 file changed, 164 insertions(+), 54 deletions(-) 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 e64744994..35ea81500 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css @@ -13,28 +13,12 @@ /* Reset.less * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ -html { - margin: 0; - padding: 0; -} - -body { - margin: 0; - padding: 5px; -} -h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, code, del, em, img, ins, 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, -.table, .tbody, .tfoot, .thead, .tr, .th, .td { +* { margin: 0; padding: 0; border: 0; - font-weight: normal; - font-style: normal; - font-size: 100%; - line-height: 1; - font-family: inherit; + box-sizing: border-box; } abbr[title], acronym[title] { @@ -52,13 +36,6 @@ ol, ul { list-style: none; } -q:before, -q:after, -blockquote:before, -blockquote:after { - content: ""; -} - html { font-size: 100%; -webkit-text-size-adjust: 100%; @@ -73,14 +50,8 @@ a:hover, a:active { outline: 0; } -article, -aside, -details, -figcaption, -figure, footer, header, -hgroup, nav, section { display: block; @@ -102,7 +73,6 @@ sub { } img { - border: 0; -ms-interpolation-mode: bicubic; } @@ -115,12 +85,7 @@ textarea { margin: 0; box-sizing: border-box; vertical-align: baseline; - *vertical-align: middle; -} - -button, input { line-height: normal; - *overflow: visible; } button::-moz-focus-inner, input::-moz-focus-inner { @@ -163,13 +128,12 @@ textarea { * ------------------------------------------------------------------------------------------- */ body { background-color: #fff; - margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 18px; color: #404040; - padding-top: 58px; + padding: 58px 5px 5px 5px; } .container { @@ -415,11 +379,6 @@ fieldset legend { line-height: 1; color: #404040; padding-top: 20px; - *padding: 0 0 5px 0px; - /* IE6-7 */ - - *line-height: 1.5; - /* IE6-7 */ } form .cbi-tab-descr { @@ -474,6 +433,12 @@ input[type=checkbox], input[type=radio] { cursor: pointer; } +label > input[type="checkbox"], +label > input[type="radio"] { + vertical-align: bottom; + margin: 0; +} + input, textarea, select, @@ -488,7 +453,6 @@ select, color: #808080; border: 1px solid #ccc; border-radius: 3px; - box-sizing: border-box; } .cbi-dropdown, @@ -564,12 +528,6 @@ input[type=button], input[type=reset], input[type=submit] { height: auto; } -select, input[type=file] { - *height: auto; - *margin-top: 4px; - /* For IE7, add top margin to align select with labels */ -} - select[multiple] { height: inherit; background-color: #fff; @@ -1189,6 +1147,59 @@ footer { border-top: 1px solid #eee; } +#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: #fff; + box-shadow: 0 0 3px #444; + padding: 1em 1em .5em 1em; + max-height: 2400px; + min-width: 270px; +} + +.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; + height: 100vh; +} + +body.modal-overlay-active #modal_overlay { + left: 0; + right: 0; + opacity: 1; +} + .btn.danger, .alert-message.danger, .btn.danger:hover, @@ -1514,12 +1525,11 @@ input[type="password"] + .cbi-button, select + .cbi-button { border-radius: 0 3px 3px 0; border-color: #ccc; - margin: 0 0 1px -2px; + margin-left: -2px; padding: 0 6px; vertical-align: top; - height: 28px; + height: 30px; font-size: 14px; - font-weight: bold; line-height: 28px; } @@ -1558,6 +1568,37 @@ select + .cbi-button { transition: opacity .25s ease-in; } +.cbi-progressbar { + border: 1px solid #ccc; + border-radius: 3px; + position: relative; + min-width: 170px; + height: 20px; + margin: 4px 0; + background: #f9f9f9; +} + +.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; @@ -2090,6 +2131,59 @@ div.cbi-value var, bottom: 2px; } +#modal_overlay { + position: fixed; + top: 0; + bottom: 0; + left: -10000px; + right: 10000px; + background: rgba(0, 0, 0, 0.7); + z-index: 900; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; + transition: opacity .125s ease-in; + opacity: 0; +} + +#modal_overlay > .modal { + width: 90%; + margin: 5em auto; + display: flex; + flex-wrap: wrap; + min-height: 32px; + max-width: 600px; + align-items: center; + border-radius: 3px; + background: #fff; + box-shadow: 0 0 3px #444; + padding: 1em 1em .5em 1em; + max-height: 2400px; + min-width: 270px; +} + +#modal_overlay .modal > * { + flex-basis: 100%; + line-height: normal; + margin-bottom: .5em; +} + +#modal_overlay .modal > pre, +#modal_overlay .modal > textarea { + white-space: pre-wrap; + overflow: auto; +} + +body.modal-overlay-active { + overflow: hidden; + height: 100vh; +} + +body.modal-overlay-active #modal_overlay { + left: 0; + right: 0; + opacity: 1; +} + html body.apply-overlay-active { height: calc(100vh - 63px); } @@ -2111,3 +2205,19 @@ html body.apply-overlay-active { .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; +} -- 2.25.1