background-position: bottom center;
background-repeat: repeat-x;
font-family: Arial, Verdana, sans-serif;
- font-size: 10pt;
+ font-size: 13px;
padding-bottom: 1.5em;
}
background: #f5f5f5;
border: 1px solid #444;
border-width: 0 0 1px 1px;
- font-size: 11pt;
+ font-size: 15px;
padding-bottom: 1em;
}
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;
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;
direction: rtl;
}
-h2, h3, h4, legend {
+h2, h3, h4, h5, legend {
font-size: 150%;
font-family: Trebuchet MS, Verdana, sans-serif;
font-weight: bold;
font-size: 112%;
}
+h5 {
+ font-size: 105%;
+}
+
fieldset { border: none; }
fieldset > legend { float: left; }
fieldset > legend + * { clear: both; }
input[type=password],
.cbi-dropdown {
width: 20em;
- font-size: 10pt;
+ font-size: 12px;
height: 22px;
}
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],
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;
}
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%;
.th.cbi-section-actions,
.td.cbi-section-actions {
- overflow: visible;
align-self: center;
vertical-align: middle;
}
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;
}
transition: opacity .25s ease-out;
pointer-events: none;
box-shadow: 0 0 2px #444;
+ color: #444;
}
.cbi-tooltip-container:hover .cbi-tooltip {
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;
}
.ifacebadge > * {
- align-self: flex-start;
+ align-self: center;
}
.ifacebadge > img,
}
+@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) {
@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,
}
.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 {
padding: 0 3px;
}
- ul.cbi-tabmenu li {
- font-size: 90%;
- margin: 0 1px -1px 0;
- }
-
.hide-xs {
display: none;
}
width: 100%;
margin-top: .5em;
}
+
+ #cbi-firewall-rule .td[data-type="fvalue"],
+ #cbi-firewall-redirect .td[data-type="fvalue"] {
+ display: none;
+ }
}