background-position: bottom center;
background-repeat: repeat-x;
font-family: Arial, Verdana, sans-serif;
- font-size: 16px;
- line-height: 100%;
+ font-size: 10pt;
padding-bottom: 1.5em;
}
background: #f5f5f5;
border: 1px solid #444;
border-width: 0 0 1px 1px;
- font-size: 85%;
+ font-size: 11pt;
padding-bottom: 1em;
}
#mainmenu ul li.selected > a {
background: #fff;
- color: #59d;
+ color: #37c;
border: 1px dotted #444;
border-width: 1px 0;
}
#tabmenu {
padding: 0;
- margin: -.5em -.5em 1em -.5em;
+ margin: -.5em -.5em .5em -.5em;
background: #bbb;
}
font-weight: normal;
padding: .5em;
border-radius: 3px;
- color: #000;
+ border: 1px solid #a22;
+ color: #a22;
+ background: #fee;
+ margin: 0 0 .5em 0;
}
.alert-message.notice {
- background: linear-gradient(#ccc 0%, #eee 100%);
- color: #4a6b7c;
+ border-color: #15a;
+ background: #e6f6ff;
+ color: #15a;
}
.alert-message.warning {
- background: linear-gradient(#dda 0%, #dd8 100%);
- color: #c00;
-}
-
-.alert-message > * {
- margin: .5em;
-}
-
-.alert-message > h4 {
- font-weight: bold;
+ border-color: #ed5;
+ background: #fe9;
+ color: #650;
}
div.hostinfo {
margin: 0;
padding: 0;
width: auto;
- font-size: 80%;
padding: 0.5em;
}
background: #000000;
color: #ffffff;
text-decoration: none;
- font-size: 80%;
- font-weight: normal;
}
padding: 0.5em;
background: #f5f5f5;
color: #000000;
- font-size: 80%;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #444444;
}
+#applyreboot-section {
+ margin: 2rem;
+ line-height: 300%;
+}
+
.lang_he #maincontent {
direction: rtl;
}
fieldset > legend { float: left; }
fieldset > legend + * { clear: both; }
-#maincontent p {
- margin-bottom: 1em;
+p {
+ margin-bottom: .5em;
}
.cbi-section {
- padding: .5em 0;
+ margin: 0 0 .5em 0;
+}
+
+.cbi-section > h3,
+.cbi-section > legend {
margin-top: .5em;
}
}
.cbi-title-ref {
- color: inherit;
- text-decoration: none;
- padding-right: 18px;
- background: url('../resources/cbi/link.gif') no-repeat scroll right center;
- background-color: inherit;
+ color: #37c;
+}
+
+.cbi-title-ref::after {
+ content: "➙";
}
ul.cbi-apply {
}
input:focus,
-input:not(.cbi-button):hover,
+input:not(.btn):not(.cbi-button):hover,
select:focus,
select:hover {
background-color: #ffffff;
text-align: center;
font-weight: bold;
line-height: 13pt;
- height: 14pt;
+ height: 16pt;
}
.btn:hover, .cbi-button:hover {
- box-shadow: 0 0 3px #59d;
+ box-shadow: 0 0 3px #37c;
}
.btn[disabled],
.cbi-button-fieldadd,
.cbi-button-add,
.cbi-button-save {
- border-color: #7b7;
- color: #7b7;
+ border-color: #595;
+ color: #595;
}
.cbi-button-neutral,
.cbi-button-apply,
.cbi-button-reload,
.cbi-button-edit {
- border-color: #59d;
- color: #59d;
+ border-color: #37c;
+ color: #37c;
}
.cbi-button-negative,
.cbi-section-remove .cbi-button,
.cbi-button-remove {
- border-color: #b77;
- color: #b77;
+ border-color: #a22;
+ color: #a22;
}
.cbi-button-action.important,
.cbi-page-actions .cbi-button-apply,
.cbi-section-actions .cbi-button-edit {
color: #fff;
- background: #59d;
+ background: #37c;
}
.cbi-button-positive.important,
.cbi-page-actions .cbi-button-save {
color: #fff;
- background: #7b7;
+ background: #595;
+}
+
+.cbi-button-negative.important {
+ color: #fff;
+ background: #a22;
}
.cbi-page-actions .cbi-button-apply + .cbi-button-save {
background: #fff;
- color: #7b7;
+ color: #595;
}
.cbi-input-invalid {
width: auto;
margin-left: 0;
align-self: center;
+ vertical-align: middle;
}
.cbi-value-description {
position: relative;
border: 1px dotted #555;
background: #fff;
- margin-bottom: 5px;
+ margin-bottom: .5em;
}
.cbi-section-node-tabbed {
border-top: none;
+ margin-top: -.5em;
}
-.cbi-section-node .cbi-value:last-child {
+.cbi-section-node .cbi-value:last-child,
+.cbi-section-node .cbi-optionals:last-child {
border-bottom: none;
}
.th.cbi-section-actions,
.td.cbi-section-actions {
+ overflow: visible;
+ align-self: center;
+ vertical-align: middle;
+}
+
+.th.cbi-section-actions > *,
+.td.cbi-section-actions > * {
display: flex;
justify-content: flex-end;
flex-direction: row;
margin: auto -1px auto auto;
}
-.td.cbi-section-actions > form {
- display: flex;
+.td.cbi-section-actions > * > *,
+.td.cbi-section-actions > * > form > * {
+ flex: 1 1 4em;
+ margin: 0 1px;
}
-.td.cbi-section-actions > *,
-.td.cbi-section-actions > form > * {
- flex: 1 1 4em;
- margin: 1px;
+.td.cbi-section-actions > * > form {
+ display: flex;
+ margin: 0;
}
.cbi-page-actions {
display: flex;
justify-content: flex-end;
margin: -3px;
- padding: 0 .25em .25em .25em;
}
.cbi-page-actions > form {
margin: 0 3px 0 0;
}
-.cbi-page-actions > .cbi-button-link,
-.cbi-page-actions > form[method="get"]:first-child {
- margin-right: auto;
+.cbi-page-actions > .cbi-button-save,
+.cbi-page-actions > .cbi-button-apply,
+.cbi-page-actions > form[method="post"] {
+ margin-left: auto;
+}
+
+*::-ms-backdrop,
+.cbi-page-actions > .cbi-button-save,
+.cbi-page-actions > .cbi-button-apply,
+.cbi-page-actions > form[method="post"] {
+ margin-left: 50%;
}
+.cbi-page-actions > .cbi-button-apply + .cbi-button-save,
+.cbi-page-actions > .cbi-button-save + form[method="post"],
+.cbi-page-actions > form[method="post"] + form[method="post"] {
+ margin-left: 3px;
+}
.th[data-type="button"], .td[data-type="button"],
.th[data-type="fvalue"], .td[data-type="fvalue"] {
flex-basis: 12%;
}
-#cbi-wireless-overview .td:first-child {
- align-self: center;
-}
-
.td[data-title]::before {
content: attr(data-title) ":\20";
font-weight: bold;
white-space: nowrap;
}
-.tr.placeholder .td[data-title]::before {
+.td[data-description]::after {
+ content: attr(data-description);
+ font-size: 90%;
+ text-align: left;
+ display: none;
+ background: url(/luci-static/resources/cbi/help.gif) left top no-repeat;
+ padding: .125em 0 .125em 18px;
+ margin: .125em 0;
+}
+
+.tr.placeholder .td[data-title]::before,
+.tr.placeholder .td[data-description]::after {
display: none;
}
content: attr(data-title) "\20";
font-weight: bold;
text-align: left;
- display: inline-block;
+ display: table-cell;
align-self: center;
flex: 1 1 5%;
padding: .25em;
white-space: normal;
word-wrap: break-word;
+ vertical-align: middle;
}
.cbi-value-helpicon img {
ul.cbi-tabmenu {
list-style-type: none;
display: flex;
- margin: 0 !important;
+ margin: 0 0 .5em 0 !important;
padding: 0 0 0 5px;
border-bottom: 1px solid #bbb;
}
text-decoration: none;
color: inherit;
padding: 5px;
- flex: 1;
+ flex: 1 1 auto;
width: 100%;
height: 100%;
}
opacity: .6;
}
+input[type="text"] + .cbi-button,
+input[type="password"] + .cbi-button,
+select + .cbi-button {
+ border-radius: 0 3px 3px 0;
+ border: 1px outset #000;
+ margin: 0 0 1px -2px;
+ padding: 0 6px;
+ vertical-align: top;
+ display: inline-block;
+ height: 14pt;
+ font-size: 10pt;
+ line-height: 12pt;
+}
.cbi-tooltip-container {
cursor: help;
}
-.left, .left::before {
- text-align: left !important;
-}
-
-.right, .right::before {
- text-align: right !important;
-}
-
-.center, .center::before {
- text-align: center !important;
-}
-
-.td.bottom {
- align-self: flex-end;
-}
+.left, .left::before, .left::after { text-align: left !important; }
+.right, .right::before, .right::after { text-align: right !important; }
+.center, .center::before, .center::after { text-align: center !important; }
-.td.top {
- align-self: flex-start;
-}
+.top, .top::before, .top::after { vertical-align: top !important; }
+.middle, .middle::before, .middle::after { vertical-align: middle !important; }
+.bottom, .bottom::before, .bottom::after { vertical-align: bottom !important; }
-.td.middle {
- align-self: center;
-}
+.td.top { align-self: flex-start; vertical-align: top; }
+.td.middle { align-self: center; vertical-align: middle; }
+.td.bottom { align-self: flex-end; vertical-align: bottom; }
.luci {
position: absolute;
left: 1em;
height: 1.5em;
font-size: 80%;
+ margin-bottom: 0;
}
.luci a:link,
border-radius: 3px;
padding: 2px;
background: #fff;
- margin: .25em .5em;
}
.ifacebox-head {
.network-status-table {
display: flex;
flex-wrap: wrap;
- margin: -.25em;
+ margin: -.25em -.25em .25em -.25em;
}
.network-status-table .ifacebox {
.network-status-table .ifacebox-body {
display: flex;
flex-direction: column;
- flex: 1 0;
+ flex: 1 0 auto;
+ padding: .5em;
}
.network-status-table .ifacebox-body > span {
- flex: 10;
+ flex: 10 10 auto;
}
.network-status-table .ifacebox-body > div {
.ifacebadge.large,
.network-status-table .ifacebox-body .ifacebadge {
flex: 1;
- margin: .5em .25em .25em .25em;
+ -webkit-flex: 1 1 auto;
padding: .5em;
min-width: 220px;
white-space: nowrap;
}
+.network-status-table .ifacebox-body .ifacebadge {
+ margin: .5em 0 0 0;
+}
+
+#dsl_status_table .ifacebox-body > span > strong {
+ display: inline-block;
+ min-width: 35%;
+}
+
.zonebadge {
padding: 2px;
.uci-change-list {
font-family: monospace;
+ white-space: pre;
}
+.uci-change-list del,
.uci-change-list ins,
-.uci-change-legend-label ins {
+.uci-change-list var,
+.uci-change-legend-label del,
+.uci-change-legend-label ins,
+.uci-change-legend-label var {
text-decoration: none;
- border: 1px solid #00FF00;
- background-color: #CCFFCC;
- display: block;
+ font-style: normal;
+ border: 1px solid #ccc;
+ background: #eee;
padding: 2px;
+ display: block;
+ line-height: 15px;
+ margin-bottom: 1px;
+}
+
+.uci-change-list ins,
+.uci-change-legend-label ins {
+ border-color: #0f0;
+ background: #cfc;
}
.uci-change-list del,
.uci-change-legend-label del {
- text-decoration: none;
- border: 1px solid #FF0000;
- background-color: #FFCCCC;
- display: block;
- font-style: normal;
- padding: 2px;
+ border-color: #f00;
+ background: #fcc;
}
.uci-change-list var,
.uci-change-legend-label var {
- text-decoration: none;
- border: 1px solid #CCCCCC;
- background-color: #EEEEEE;
- display: block;
- font-style: normal;
- padding: 2px;
+ border-color: #ccc;
+ background: #eee;
}
.uci-change-list var ins,
.uci-change-list var del {
- /*display: inline;*/
+ display: inline-block;
border: none;
- white-space: pre;
- font-style: normal;
- padding: 0px;
+ width: 100%;
+ padding: 0;
}
.uci-change-legend {
.uci-change-legend-label>var {
float: left;
margin-right: 4px;
- width: 10px;
- height: 10px;
+ width: 12px;
+ height: 12px;
display: block;
+ position: relative;
}
.uci-change-legend-label var ins,
.uci-change-legend-label var del {
- line-height: 6px;
border: none;
+ position: absolute;
+ top: 1px;
+ left: 1px;
+ right: 1px;
+ bottom: 1px;
}
#maincontent {
width: 96%;
margin: auto;
+ flex-basis: auto;
}
#mainmenu {
}
#mainmenu ul > li > a {
- flex: 1;
+ flex: 1 1 auto;
color: #fff;
border: 1px solid #444;
border-width: 0 0 1px 1px;
background: #eef;
}
- .td[data-title]::before {
+ .td[data-title]::before,
+ .td[data-description]::after {
display: block;
}
- .td.cbi-section-actions {
- flex-basis: 100%;
- margin: auto -1px 0 auto;
+ .td[data-title] ~ .td.cbi-section-actions {
+ align-self: flex-start;
}
- .td.cbi-section-actions > *,
- .td.cbi-section-actions > form > * {
- flex: 0 1 100%;
- max-width: 150px;
+ .td[data-title] ~ .td.cbi-section-actions::before {
+ display: block;
+ content: "\a0";
}
.hide-sm,
.hide-xs {
display: none;
}
+
+ #dsl_status_table .ifacebox-body > span > strong {
+ min-width: 50%;
+ }
}
@media screen and (max-width: 480px) {
.btn, .cbi-button {
font-size: 9pt !important;
- line-height: 11pt;
+ line-height: 13pt;
}
#maincontent {
text-align: left;
}
- .cbi-section {
- padding: .25em;
- }
-
.cbi-value-title {
float: none;
font-weight: bold;
.cbi-page-actions {
flex-wrap: wrap;
+ margin: -2px;
}
.cbi-page-actions > .cbi-button-link {
flex-basis: 100%;
}
- .network-status-table .ifacebox {
- margin: 0 0 .5em 0;
+ #dsl_status_table .ifacebox-body > span > strong {
+ display: block;
+ width: 100%;
+ margin-top: .5em;
}
}