luci-theme-openwrt: modal/progressbar rules, mobile improvements
- Add rules for modal dialogs and progress bar widgets - Increase button and input size on mobile devices - Convert pt to px units - Add label and h5 styles - Add common flash and spin utility classes Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
Jo-Philipp Wich
parent
6469b65354
commit
cbd0d7c5de
1 changed files with 168 additions and 35 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue