background-color: #4a6b7c;
background-position: bottom center;
background-repeat: repeat-x;
- font-family: Verdana, Arial, sans-serif;
- font-size: 11pt;
- line-height: 100%;
+ font-family: Arial, Verdana, sans-serif;
+ font-size: 10pt;
padding-bottom: 1.5em;
}
* {
margin: 0;
padding: 0;
+ box-sizing: border-box;
}
-.table { display: table; }
+.table { display: table; width: 100%; position: relative; }
.tr { display: table-row; }
.thead { display: table-header-group; }
.tbody { display: table-row-group; }
.table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
.table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
+.col-1 { flex: 1 1 30px !important; -webkit-flex: 1 1 30px !important; }
+.col-2 { flex: 2 2 60px !important; -webkit-flex: 2 2 60px !important; }
+.col-3 { flex: 3 3 90px !important; -webkit-flex: 3 3 90px !important; }
+.col-4 { flex: 4 4 120px !important; -webkit-flex: 4 4 120px !important; }
+.col-5 { flex: 5 5 150px !important; -webkit-flex: 5 5 150px !important; }
+.col-6 { flex: 6 6 180px !important; -webkit-flex: 6 6 180px !important; }
+.col-7 { flex: 7 7 210px !important; -webkit-flex: 7 7 210px !important; }
+.col-8 { flex: 8 8 240px !important; -webkit-flex: 8 8 240px !important; }
+.col-9 { flex: 9 9 270px !important; -webkit-flex: 9 9 270px !important; }
+.col-10 { flex: 10 10 300px !important; -webkit-flex: 10 10 300px !important; }
+
+.tr.placeholder {
+ height: 3.5em;
+}
+
+.tr.placeholder > .td {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ text-align: center;
+ line-height: 3em;
+}
+
.nowrap {
white-space: nowrap;
}
text-decoration: none;
}
-ul.tabmenu {
- margin: 0;
- clear: both;
- display: block;
- vertical-align: bottom;
- font-size: 10pt;
- padding: 5px 0 0 5px;
+#maincontainer {
+ display: flex;
}
-div.tabmenu2 {
- background-color: #AAAAAA;
- background-image: url(tabbg.png);
- background-repeat: repeat-x;
- margin-top: -1px;
- border: 1px solid #444444;
- border-bottom: none;
+#maincontent {
+ flex-basis: 100%;
}
-div.tabmenu3,
-div.tabmenu4,
-div.tabmenu5 {
- background-color: #AAAAAA;
- background-image: url(tabbg.png);
- background-repeat: repeat-x;
- border: none;
+#mainmenu {
+ max-width: 200px;
+ background: #f5f5f5;
+ border: 1px solid #444;
+ border-width: 0 0 1px 1px;
+ font-size: 11pt;
+ padding-bottom: 1em;
}
-ul.tabmenu li {
- float: left;
+#mainmenu ul {
display: block;
- overflow: hidden;
+ margin: 0;
+ padding: 0;
}
-.lang_he ul.tabmenu li {
- float: right;
+#mainmenu ul li {
+ display: block;
+ white-space: nowrap;
}
-ul.tabmenu li a {
- text-decoration: none;
- color: #444444;
+#mainmenu ul li > a {
display: block;
- padding: 3px 8px;
- margin: 0 2px;
- line-height: 1.3em;
- border: 1px solid transparent;
- border-bottom: none;
+ color: #444;
+ padding: .4em .5em;
+ text-decoration: none;
+}
+
+#mainmenu ul li.selected > a {
+ background: #fff;
+ color: #37c;
+ border: 1px dotted #444;
+ border-width: 1px 0;
+}
+
+#mainmenu ul li.selected:first-child > a {
+ border-top: none;
+}
+
+#mainmenu ul li li > a {
font-size: 85%;
+ padding-left: 1.5em;
}
-ul.tabmenu li.active a {
- font-weight: bold;
- color: #000000;
- background: #f5f5f5;
- border: 1px solid #AAAAAA;
- border-bottom: none;
+#mainmenu ul li > ul {
+ flex-basis: 100%;
+ max-height: 0;
+ visibility: hidden;
+ transition: max-height .15s;
}
-ul.tabmenu li a:hover {
- color: #444444;
- border-color: #444444;
+#mainmenu ul:not(.active) li.selected > ul,
+#mainmenu ul li.active > ul {
+ max-height: 1000px;
+ visibility: visible;
+ transition: max-height .25s;
}
-ul.l1 li a {
- background-color: #AAAAAA;
- background-image: url(tabbg.png);
- background-repeat: repeat-x;
- border-color: #444444;
+#mainmenu ul li.mainmenu-item-logout {
+ margin-top: 15%;
+}
+
+#tabmenu {
+ padding: 0;
+ margin: -.5em -.5em .5em -.5em;
+ background: #bbb;
}
-ul.l1 li.tabmenu-item-logout a {
- margin-left: 30px;
+#tabmenu ul {
+ border-color: #444;
+ padding-top: .5em;
+ flex-wrap: wrap;
+ background: repeating-linear-gradient(#f5f5f5, #bbb 2.4em, #f5f5f5 2.4em, #bbb);
+ line-height: 1em;
}
-.lang_he ul.l1 li.tabmenu-item-logout a {
- margin-right: 30px;
+#tabmenu ul li {
+ border-color: #444;
+}
+
+#tabmenu ul li.cbi-tab {
+ background: #f5f5f5;
}
abbr,
white-space: pre;
}
+hr {
+ margin: .5em 0;
+ padding: 0;
+ border: 1px solid #444;
+ border-width: 0 0 1px 0;
+}
+
#maincontent ul {
margin-left: 2em;
}
background-color: white;
}
+.alert-message {
+ font-weight: normal;
+ padding: .5em;
+ border-radius: 3px;
+ border: 1px solid #a22;
+ color: #a22;
+ background: #fee;
+ margin: 0 0 .5em 0;
+}
+
+.alert-message.notice {
+ border-color: #15a;
+ background: #e6f6ff;
+ color: #15a;
+}
+
+.alert-message.warning {
+ border-color: #ed5;
+ background: #fe9;
+ color: #650;
+}
+
div.hostinfo {
float: left;
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;
}
-#maincontent h2 {
+h2, h3, h4, legend {
font-size: 150%;
font-family: Trebuchet MS, Verdana, sans-serif;
font-weight: bold;
- margin: 0.25em 0 0.7em 0;
+ margin: .25em 0 .5em 0;
border-bottom: 1px solid;
- padding-top: 10px;
padding-bottom: 4px;
+ display: block;
+ width: 100%;
}
-#maincontent h3 {
- margin: 0.5em 0 1.1em 0;
+h3, legend {
font-size: 125%;
- font-weight: bold;
- font-style: italic;
- font-family: Trebuchet MS, Verdana, sans-serif;
- color: #27408B;
}
-#maincontent p {
- margin-bottom: 1em;
+h4 {
+ font-size: 112%;
}
-.cbi-section {
- margin-bottom: 0.5em;
- padding: 0.5em 1em;
- border: 1px dotted #555555;
- background-color: #ffffff;
- color: #000000;
-}
+fieldset { border: none; }
+fieldset > legend { float: left; }
+fieldset > legend + * { clear: both; }
-.cbi-section legend {
- font-size: 110%;
- font-weight: bold;
- height: 1em;
- padding: 0 0.25em;
- background-color: transparent;
- color: #555555;
+p {
+ margin-bottom: .5em;
}
-.cbi-section h2 {
- margin: 0em 0 0.5em -0.5em !important;
+.cbi-section {
+ margin: 0 0 .5em 0;
}
-.cbi-section h3 {
- text-decoration: none !important;
- font-weight: bold !important;
- color: #555555 !important;
- margin: 0.25em !important;
- font-size: 100% !important;
+.cbi-section > h3,
+.cbi-section > legend {
+ margin-top: .5em;
}
.cbi-section-descr {
font-size: 95%;
}
+.cbi-section-descr:empty {
+ display: none;
+}
+
.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:hover,
+input:not(.btn):not(.cbi-button):hover,
select:focus,
select:hover {
background-color: #ffffff;
color: #000000;
}
+input[type=text],
+input[type=password] {
+ padding: 0 3px;
+}
+
select,
input[type=text],
input[type=password] {
width: 20em;
+ font-size: inherit;
+ line-height: 13pt;
+ height: 14pt;
+}
+
+select[multiple] {
+ height: auto;
+}
+
+input[type=radio],
+input[type=checkbox],
+[data-dynlist] > input + img,
+input.cbi-input-password + img {
+ vertical-align: middle;
}
.td select,
-.td input[type=text],
-.td input[type=password] {
- width: 99%;
+.td .cbi-dropdown,
+.td input[type=text] {
+ width: 100%;
+}
+
+.td [data-dynlist] > input,
+.td input.cbi-input-password {
+ width: calc(100% - 20px);
}
img.cbi-image-button {
vertical-align: middle;
}
-.cbi-button {
- padding: 2px;
+.btn, .cbi-button {
+ padding: 0 .5em;
border-radius: 3px;
border: 1px solid #aaa;
- background: #eee 1px center no-repeat;
+ text-decoration: none;
+ color: #000;
+ display: inline-block;
+ font-size: inherit;
+ -webkit-appearance: none;
+ background: #fff;
+ text-align: center;
+ font-weight: bold;
+ line-height: 13pt;
+ height: 16pt;
}
-.cbi-button:hover {
- border-color: #4a6b7c;
- background-color: #fff;
+.btn:hover, .cbi-button:hover {
+ box-shadow: 0 0 3px #37c;
}
+.btn[disabled],
+.btn[disabled]:hover,
.cbi-button[disabled],
.cbi-button[disabled]:hover {
opacity: .6;
cursor: default;
- border-color: inherit;
- background-color: inherit;
-}
-
-input.cbi-input-user {
- background-image: url('../resources/cbi/user.gif');
- background-repeat: no-repeat;
- background-position: 1px center;
- color: #000000;
- text-indent: 17px;
-}
-
-input.cbi-input-password {
- background-image: url('../resources/cbi/key.gif');
- background-repeat: no-repeat;
- background-position: 1px center;
- color: #000000;
- text-indent: 17px;
-}
-
-input.cbi-input-find,
-input.cbi-button-find {
- background-image: url('../resources/cbi/find.gif');
- color: #000000;
- padding-left: 17px;
-}
-
-input.cbi-input-reload {
- background-image: url('../resources/cbi/reload.gif');
- color: #000000;
- padding-left: 17px;
-}
-
-input.cbi-input-add,
-input.cbi-button-add {
- background-image: url('../resources/cbi/add.gif');
- color: #000000;
- padding-left: 17px;
- padding-right: 1px;
-}
-
-input.cbi-input-fieldadd,
-input.cbi-button-fieldadd {
- background-image: url(../resources/cbi/fieldadd.gif);
- color: #000000;
- padding-left: 17px;
-}
-
-input.cbi-input-reset,
-input.cbi-button-reset {
- background-image: url('../resources/cbi/reset.gif');
- color: #000000;
- padding-left: 17px;
- padding-right: 1px;
-}
-
-input.cbi-input-save,
-input.cbi-button-save {
- background-image: url('../resources/cbi/save.gif');
- color: #000000;
- padding-left: 17px;
- padding-right: 1px;
-}
-
-/*
-input.cbi-input-apply,
-input.cbi-button-apply {
- background-image: url('../resources/cbi/apply.gif');
- color: #000000;
- padding-left: 17px;
- padding-right: 1px;
-}
-*/
-
-input.cbi-input-apply:before,
-input.cbi-button-apply:before {
- background-image: url('../resources/cbi/apply.gif');
- border: 2px solid red;
- width: 100px;
- height: 100px;
- content: ".";
- display: block;
- position: absolute;
+ pointer-events: none;
}
-input.cbi-input-link,
-input.cbi-button-link {
- background-image: url('../resources/cbi/link.gif');
- color: #000000;
- padding-left: 17px;
- padding-right: 1px;
+.cbi-button-positive,
+.cbi-button-fieldadd,
+.cbi-button-add,
+.cbi-button-save {
+ border-color: #595;
+ color: #595;
}
-input.cbi-input-download,
-input.cbi-button-download {
- background-image: url('../resources/cbi/download.gif');
- color: #000000;
- padding-left: 17px;
- padding-right: 1px;
+.cbi-button-neutral,
+.cbi-button-reset,
+.cbi-button-download,
+.cbi-button-find,
+.cbi-button-link,
+.cbi-button-up,
+.cbi-button-down {
+ border-color: #444;
+ color: #444;
}
-input.cbi-input-remove,
-div.cbi-section-remove input {
- background-image: url('../resources/cbi/remove.gif');
- color: #000000;
- padding-left: 17px;
- padding-right: 1px;
+.cbi-button-action,
+.cbi-button-apply,
+.cbi-button-reload,
+.cbi-button-edit {
+ border-color: #37c;
+ color: #37c;
}
-input.cbi-button-up {
- background-image: url('../resources/cbi/up.gif');
- padding-left: 11px;
- padding-right: 1px;
+.cbi-button-negative,
+.cbi-section-remove .cbi-button,
+.cbi-button-remove {
+ border-color: #a22;
+ color: #a22;
}
-input.cbi-button-down {
- background-image: url('../resources/cbi/down.gif');
- padding-left: 11px;
- padding-right: 1px;
+.cbi-button-action.important,
+.cbi-page-actions .cbi-button-apply,
+.cbi-section-actions .cbi-button-edit {
+ color: #fff;
+ background: #37c;
}
-input.cbi-button-edit {
- background-image: url('../resources/cbi/edit.gif');
- color: #000000;
- padding-left: 17px;
- padding-right: 1px;
+.cbi-button-positive.important,
+.cbi-page-actions .cbi-button-save {
+ color: #fff;
+ background: #595;
}
-input.cbi-button-reload {
- background-image: url('../resources/cbi/reload.gif');
- color: #000000;
- padding-left: 17px;
- padding-right: 1px;
+.cbi-button-negative.important {
+ color: #fff;
+ background: #a22;
}
-input.cbi-button-reset {
- background-image: url('../resources/cbi/reset.gif');
- color: #000000;
- padding-left: 17px;
- padding-right: 1px;
-}
-
-input.cbi-button-remove {
- background-image: url('../resources/cbi/remove.gif');
- color: #000000;
- padding-left: 17px;
- padding-right: 1px;
+.cbi-page-actions .cbi-button-apply + .cbi-button-save {
+ background: #fff;
+ color: #595;
}
.cbi-input-invalid {
border-color: #FF0000;
}
-div.cbi-section-remove input {
- border-bottom: none;
-}
-
-textarea {
- margin-left: -1px;
- margin-bottom: 0.5em;
-}
-
-form > div > input[type=submit],
-form > div > input[type=reset] {
- float: right;
- margin-left: 0.5em;
-}
-
table td, table th {
color: #000000;
}
.table .td, .table .th {
color: #000000;
- padding: .25em 0;
- text-align: center;
- vertical-align: middle;
+ padding: .25em;
}
.table.smalltext {
border-left: 1px solid #666666;
}
-.table.cbi-section-table .cbi-rowstyle-1 {
+.cbi-rowstyle-1 {
background-color: #eeeeff;
color: #000000;
}
-.table.cbi-section-table .cbi-rowstyle-1:hover,
-.table.cbi-section-table .cbi-rowstyle-2:hover {
- background-color: #b2c8d4;
- color: #000000;
-}
-
-.table.cbi-section-table .cbi-section-table-cell {
- padding: 3px;
- white-space: nowrap;
-}
-
-.cbi-section .cbi-rowstyle-1 h3 {
- background-color: #eeeeff;
- color: #555555;
-}
-
.cbi-rowstyle-2 {
color: #000000;
}
-div.cbi-value {
+.cbi-value {
clear: left;
vertical-align: middle;
padding: 0.25em 0.6em;
border-bottom: 1px dotted #bbbbbb;
}
-div.cbi-value:hover {
+.cbi-value:hover {
background: #f8f8f8;
color: #000000;
}
line-height: 1.8em;
}
-div.cbi-value-field {
+.cbi-value-field {
width: 58%;
margin-left: 40%;
padding: 0.25em 0;
}
-div.td.cbi-value-field {
+.td.cbi-value-field {
width: auto;
+ margin-left: 0;
+ align-self: center;
vertical-align: middle;
}
-div.cbi-value-description {
- font-size: 90%;
- display: inline;
+.cbi-value-description {
+ background-image: url(/luci-static/resources/cbi/help.gif);
+ background-position: .25em .25em;
+ background-repeat: no-repeat;
+ margin: .25em 0 0 0;
+ padding: .25em .25em .25em 1.75em;
}
-div.cbi-section-create {
- clear: left;
- white-space: nowrap;
- vertical-align: top;
+.cbi-section-create {
+ padding: 0 0 .25em 0;
+ margin: -3px;
+ display: inline-flex;
+ align-items: center;
}
-div.cbi-section-create .cbi-button {
- margin: 0.25em;
+.cbi-section-create > * {
+ margin: 3px;
+ flex: 1 1 auto;
}
-input.cbi-section-create-name {
- margin-right: -0.25em;
+.cbi-section-create > * > input {
+ width: 100%;
+}
+
+.cbi-section-remove > .cbi-button {
+ margin-bottom: -1px;
+ border-radius: 3px 3px 0 0;
+}
+
+.cbi-section-node + .cbi-section-create {
+ padding-top: 0;
}
div.cbi-map-descr {
border-bottom: 1px dotted #bbbbbb;
}
-div.cbi-section-remove {
- float: right;
-}
-
.cbi-section-node {
clear: both;
- border: 1px solid #BBBBBB;
- border-radius: 3px;
padding-bottom: 0;
position: relative;
+ border: 1px dotted #555;
+ background: #fff;
+ margin-bottom: .5em;
}
.cbi-section-node-tabbed {
- border-top-left-radius: 0;
+ border-top: none;
+ margin-top: -.5em;
}
-.cbi-section-node .cbi-value-last {
+.cbi-section-node .cbi-value:last-child,
+.cbi-section-node .cbi-optionals:last-child {
border-bottom: none;
}
-.cbi-section-node .table div {
- padding-bottom: 0;
- border-bottom: none;
+.table.cbi-section-table {
+ width: 100%;
+ font-size: 95%;
+ border: 1px dotted #444;
+ background: #fff;
+ margin: 0 0 .5em 0;
}
-.cbi-section-node div.cbi-section-table-row {
- margin: 0.25em;
+.cbi-section-node > .table.cbi-section-table {
+ border: none;
+ margin: 0;
}
-.table.cbi-section-table {
- width: 100%;
- font-size: 95%;
+@keyframes flash {
+ 0% { opacity: 1; }
+ 50% { opacity: .5; }
+ 100% { opacity: 1; }
}
-.table.cbi-section-table .th,
-.table.cbi-section-table .td {
- text-align: center;
+.tr.cbi-section-table-row.flash {
+ animation: flash .35s;
}
.tr.cbi-section-table-descr .th {
padding-top: 1em;
}
-.cbi-value-helpicon img {
- vertical-align: bottom;
+.th.cbi-section-actions,
+.td.cbi-section-actions {
+ overflow: visible;
+ align-self: center;
+ vertical-align: middle;
}
-div.cbi-error {
- font-size: 95%;
+.th.cbi-section-actions > *,
+.td.cbi-section-actions > * {
+ display: flex;
+ justify-content: flex-end;
+ flex-direction: row;
+ flex: 1 1 150px;
+ margin: auto -1px auto auto;
+}
+
+.td.cbi-section-actions > * > *,
+.td.cbi-section-actions > * > form > * {
+ flex: 1 1 4em;
+ margin: 0 1px;
+}
+
+.td.cbi-section-actions > * > form {
+ display: flex;
+ margin: 0;
+}
+
+.cbi-page-actions {
+ display: flex;
+ justify-content: flex-end;
+ margin: -3px;
+}
+
+.cbi-page-actions > form {
+ display: flex;
+}
+
+.cbi-page-actions > * {
+ flex: 0 1 auto;
+ margin: 3px;
+}
+
+.cbi-page-actions > form > * {
+ flex: 1;
+ margin: 0 3px 0 0;
+}
+
+.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: 1 1 2em;
+ text-align: center;
+}
+
+#cbi-network-switch_vlan .th,
+#cbi-network-switch_vlan .td {
+ flex-basis: 12%;
+}
+
+.td[data-title]::before {
+ content: attr(data-title) ":\20";
font-weight: bold;
- color: #ff0000;
- background-color: #ffffff;
+ text-align: left;
+ display: none;
+ padding: 1px;
+ white-space: nowrap;
+}
+
+.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;
+}
+
+.tr[data-title]::before,
+.tr.cbi-section-table-titles.named::before {
+ content: attr(data-title) "\20";
+ font-weight: bold;
+ text-align: left;
+ 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 {
+ vertical-align: bottom;
}
.td.cbi-value-error {
}
ul.cbi-tabmenu {
- padding: 3px 0;
- margin-left: 0 !important;
list-style-type: none;
+ display: flex;
+ margin: 0 0 .5em 0 !important;
+ padding: 0 0 0 5px;
+ border-bottom: 1px solid #bbb;
+}
+
+ul.cbi-tabmenu li {
+ display: inline-flex;
+ margin: 0 5px -1px 0;
+ flex: 0 1 auto;
+ border: 1px solid #bbb;
+ border-bottom: none;
+ border-radius: 3px 3px 0 0;
+ background: linear-gradient(#ddd 90%, #aaa 100%);
+ color: #888;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ word-wrap: break-word;
+}
+
+ul.cbi-tabmenu li a,
+ul.cbi-tabmenu li a:hover {
+ text-decoration: none;
+ color: inherit;
+ padding: 5px;
+ flex: 1 1 auto;
+ width: 100%;
+ height: 100%;
+}
+
+ul.cbi-tabmenu li.cbi-tab-highlighted {
+ color: #000;
+ background: #fea;
+}
+
+ul.cbi-tabmenu li.cbi-tab {
+ color: #000;
+ background: #fff;
+}
+
+.cbi-tab-descr {
+ background-image: url(/luci-static/resources/cbi/help.gif);
+ background-position: .25em 50%;
+ background-repeat: no-repeat;
+ border-bottom: 1px solid #ccc;
+ margin: 0 .25em .25em .25em;
+ padding: .5em .5em .5em 2em;
+}
+
+
+.cbi-dropdown {
+ border: 1px inset #000;
+ display: inline-flex;
+ cursor: pointer;
+ background: #eee;
position: relative;
- z-index: 10;
- top: 4px;
- line-height: 20px;
+ padding: 0;
+ color: #000;
+ min-width: 20em;
+ max-width: 100%;
}
-ul.cbi-tabmenu li.cbi-tab,
-ul.cbi-tabmenu li.cbi-tab-disabled {
- display: inline;
+.cbi-dropdown:hover {
+ background: #fff;
+}
+
+.cbi-dropdown:focus {
+ outline: 2px solid #4b6e9b;
+}
+
+.cbi-dropdown > ul {
+ margin: 0 !important;
+ padding: 0;
+ list-style: none;
+ overflow-x: hidden;
+ overflow-y: auto;
+ display: flex;
+ width: 100%;
+}
+
+.cbi-dropdown > ul.preview {
+ display: none;
+}
+
+.cbi-dropdown > .open {
+ border: 2px outset #eee;
+ flex-basis: 15px;
+}
+
+.cbi-dropdown > .open,
+.cbi-dropdown > .more {
+ flex-grow: 0;
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ text-align: center;
+ line-height: 2em;
+ padding: 0 .25em;
+}
+
+.cbi-dropdown > .more,
+.cbi-dropdown > ul > li[placeholder] {
+ color: #777;
+ font-weight: bold;
+ text-shadow: 1px 1px 0px #fff;
+ display: none;
+}
+
+.cbi-dropdown > ul > li {
+ display: none;
+ padding: .25em;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ flex-shrink: 1;
+ flex-grow: 1;
+ align-items: center;
+ align-self: center;
+ min-height: 20px;
+}
+
+.cbi-dropdown > ul > li .hide-open { display: initial; }
+.cbi-dropdown > ul > li .hide-close { display: none; }
+
+.cbi-dropdown > ul > li[display]:not([display="0"]) {
+ border-left: 1px solid #ccc;
+}
+
+.cbi-dropdown[empty] > ul {
+ max-width: 1px;
+}
+
+.cbi-dropdown > ul > li > form {
+ display: none;
margin: 0;
+ padding: 0;
+ pointer-events: none;
}
-ul.cbi-tabmenu li.cbi-tab a,
-ul.cbi-tabmenu li.cbi-tab-disabled a {
- text-decoration: none;
- padding: 3px 7px;
- margin-right: 3px;
- border: 1px solid #BBBBBB;
+.cbi-dropdown > ul > li img {
+ vertical-align: middle;
+ margin-right: .25em;
+}
+
+.cbi-dropdown > ul > li > form > input[type="checkbox"] {
+ margin: 0;
+}
+
+.cbi-dropdown > ul > li input[type="text"] {
+ height: 20px;
+}
+
+.cbi-dropdown[open] {
+ position: relative;
+}
+
+.cbi-dropdown[open] > ul.dropdown {
+ display: block;
+ background: #f6f6f5;
+ border: 1px solid #918e8c;
+ box-shadow: 0 0 4px #918e8c;
+ position: absolute;
+ z-index: 1000;
+ max-width: none;
+ min-width: 100%;
+ width: auto;
+}
+
+.cbi-dropdown > ul > li[display],
+.cbi-dropdown[open] > ul.preview,
+.cbi-dropdown[open] > ul.dropdown > li,
+.cbi-dropdown[multiple] > ul > li > label,
+.cbi-dropdown[multiple][open] > ul.dropdown > li,
+.cbi-dropdown[multiple][more] > .more,
+.cbi-dropdown[multiple][empty] > .more {
+ flex-grow: 1;
+ display: flex;
+ align-items: center;
+}
+
+.cbi-dropdown[empty] > ul > li,
+.cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
+.cbi-dropdown[multiple][open] > ul.dropdown > li > form {
+ display: block;
+}
+
+.cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
+.cbi-dropdown[open] > ul.dropdown > li .hide-close { display: initial; }
+
+.cbi-dropdown[open] > ul.dropdown > li {
+ border-bottom: 1px solid #ccc;
+}
+
+.cbi-dropdown[open] > ul.dropdown > li[selected] {
+ background: #b0d0f0;
+}
+
+.cbi-dropdown[open] > ul.dropdown > li.focus {
+ background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
+}
+
+.cbi-dropdown[open] > ul.dropdown > li:last-child {
+ margin-bottom: 0;
border-bottom: none;
- border-radius: 3px 3px 0 0;
- background-color: #EEEEEE;
- color: #BBBBBB;
}
-ul.cbi-tabmenu li.cbi-tab-highlighted a {
- color: #000000;
- background-color: #FFEEAA;
+.cbi-dropdown[disabled] {
+ pointer-events: none;
+ opacity: .6;
}
-ul.cbi-tabmenu li a:hover {
- color: #000000;
+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;
}
-ul.cbi-tabmenu li.cbi-tab a {
- padding-top: 4px;
- color: #000000;
- background-color: #FFFFFF;
+.cbi-tooltip-container {
+ cursor: help;
}
-div.cbi-tab-descr {
- background-image: url(/luci-static/resources/cbi/help.gif);
- background-position: 0.25em 50%;
- background-repeat: no-repeat;
- border-bottom: 1px solid #CCCCCC;
- margin: 0.25em 0.25em 2em;
- padding: 0.5em 0.5em 0.5em 2em;
+.cbi-tooltip {
+ position: absolute;
+ z-index: 1000;
+ left: -1000px;
+ opacity: 0;
+ transition: opacity .25s ease-out;
+ pointer-events: none;
+ box-shadow: 0 0 2px #444;
}
-.left {
- text-align: left !important;
+.cbi-tooltip-container:hover .cbi-tooltip {
+ left: auto;
+ opacity: 1;
+ transition: opacity .25s ease-in;
+}
+
+.zonebadge .cbi-tooltip {
+ padding: 1px;
+ background: inherit;
+ margin: -1.6em 0 0 -5px;
+}
+
+
+.zone-forwards {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.zone-forwards > * {
+ flex: 1 1 45%;
+ padding: 1px;
}
-.right {
- text-align: right !important;
+.zone-forwards > span {
+ flex-basis: 10%;
+ text-align: center;
}
-.center {
- text-align: center !important;
+.zone-forwards .zone-src,
+.zone-forwards .zone-dest {
+ display: flex;
+ flex-direction: column;
}
+
+.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; }
+
+.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.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;
bottom: 0;
left: 1em;
height: 1.5em;
font-size: 80%;
+ margin-bottom: 0;
}
.luci a:link,
padding: 0.5em;
}
-.errorbox {
- border: 1px solid #FF0000;
- background-color: #FFCCCC;
- padding: 5px;
- margin-bottom: 5px;
-}
-
-.errorbox a {
- color: #000000 !important;
-}
-
.ifacebadge, .ifacebox {
display: inline-flex;
border-radius: 3px;
padding: 2px;
background: #fff;
- margin: .25em .5em;
}
.ifacebox-head {
background: #90c0e0;
}
-.ifacebadge > img {
+.ifacebadge, .zonebadge {
+ align-items: center;
+}
+
+.ifacebadge > * {
+ align-self: flex-start;
+}
+
+.ifacebadge > img,
+.ifacebadge > em {
margin-right: 5px;
- align-self: start;
+ display: inline-block;
+ height: 16px;
}
.ifacebadge-active {
.ifacebox {
flex-direction: column;
- margin: 0 10px;
+ margin: 0;
padding: 0;
min-width: 100px;
+ text-align: center;
}
.ifacebox > * {
padding: 2px;
}
+.td > .ifacebadge,
+.td > .zonebadge {
+ margin: 0;
+ vertical-align: top;
+}
.network-status-table {
display: flex;
flex-wrap: wrap;
+ margin: -.25em -.25em .25em -.25em;
}
.network-status-table .ifacebox {
- margin: .5em;
+ margin: .25em;
font-size: 90%;
flex-grow: 1;
}
.network-status-table .ifacebox-body {
display: flex;
flex-direction: column;
- height: 100%;
+ flex: 1 0 auto;
+ padding: .5em;
}
.network-status-table .ifacebox-body > span {
- flex: 10;
+ flex: 10 10 auto;
}
.network-status-table .ifacebox-body > div {
flex-wrap: wrap;
}
+.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;
display: inline-block;
white-space: nowrap;
- cursor: pointer;
+ border-radius: 3px;
}
-.zonebadge em,
-.zonebadge strong {
+.zonebadge > em,
+.zonebadge > strong {
margin: 3px;
- display: inline-block;
}
.zonebadge input {
height: 1.5em;
}
+.zonebadge .ifacebadge,
+.cbi-dropdown .ifacebadge {
+ margin: 1px;
+}
+
+.zonebadge .ifacebadge img,
+.zonebadge .ifacebadge em,
+.cbi-dropdown .ifacebadge img,
+.cbi-dropdown .ifacebadge em {
+ margin: 0 1px;
+}
+
.zonebadge-empty {
border: 1px dashed #AAAAAA;
color: #AAAAAA;
.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;
+}
+
+
+}
+
+@media screen and (max-width: 992px) {
+ body {
+ -webkit-text-size-adjust: 100%;
+ }
+
+ #maincontainer {
+ flex-direction: column;
+ width: 100%;
+ }
+
+ #maincontent {
+ width: 96%;
+ margin: auto;
+ flex-basis: auto;
+ }
+
+ #mainmenu {
+ border: none;
+ border-radius: 0;
+ max-width: none;
+ background: #000;
+ box-shadow: 0 0 2px #444;
+ padding: 0;
+ border-top: 1px solid #444;
+ position: relative;
+ }
+
+ #mainmenu ul > li.selected > a {
+ background: #444;
+ color: #fff;
+ border-top: none;
+ }
+
+ #mainmenu ul > li.selected:not(.active) > ul {
+ max-height: 0;
+ visibility: hidden;
+ }
+
+ #mainmenu ul > li > a {
+ flex: 1 1 auto;
+ color: #fff;
+ border: 1px solid #444;
+ border-width: 0 0 1px 1px;
+ }
+
+ #mainmenu ul.l1 {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ position: relative;
+ margin-left: -1px;
+ width: 100%;
+ }
+
+ #mainmenu ul.l1 > li {
+ display: inline-flex;
+ flex: 1 1 auto;
+ position: relative;
+ height: 2em;
+ }
+
+ #mainmenu ul.l1 ul.l2 {
+ position: absolute;
+ top: 2em;
+ right: 0;
+ z-index: 1000;
+ background: #000;
+ box-shadow: 0 0 2px #444;
+ min-width: 120px;
+ display: block;
+ }
+
+ #mainmenu ul.l1 ul.l2.align-left {
+ right: auto;
+ left: 0;
+ }
+
+ #mainmenu ul.l2 > li {
+ display: block;
+ }
+
+ #mainmenu ul.l2 > li > a {
+ padding: .5em;
+ }
+
+ #mainmenu ul li.mainmenu-item-logout {
+ margin-top: 0;
+ margin-left: auto;
+ }
+
+ #mainmenu ul li.mainmenu-item-logout::before {
+ content: "\0a";
+ flex: 10;
+ border: 1px solid #444;
+ border-width: 0 0 1px 1px;
+ }
+
+ .table {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ }
+
+ .tr {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ align-items: flex-end;
+ }
+
+ .th, .td {
+ flex: 2 2 25%;
+ align-self: flex-start;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ word-wrap: break-word;
+ display: inline-block;
+ }
+
+ .td select {
+ word-wrap: normal;
+ }
+
+ .td[data-type="button"],
+ .td[data-type="fvalue"] {
+ flex: 1 1 12.5%;
+ text-align: left;
+ }
+
+ .td.cbi-value-field {
+ align-self: flex-start;
+ }
+
+ .td.cbi-value-field .cbi-button {
+ width: 100%;
+ }
+
+ .table.cbi-section-table {
+ border: none;
+ background: none;
+ margin: 0;
+ }
+
+ .tr.table-titles,
+ .cbi-section-table-titles,
+ .cbi-section-table-descr {
+ display: none;
+ }
+
+ .cbi-section-table-row {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ border: 1px dotted #444;
+ margin: 0 0 .5em 0;
+ background: #fff;
+ }
+
+ .cbi-section-table-row:hover {
+ border: 1px solid #4a6b7c;
+ }
+
+ .cbi-section-table + .cbi-section-create {
+ padding-top: 0;
+ }
+
+ .tr[data-title]::before {
+ display: block;
+ flex: 1 1 100%;
+ background: #eef;
+ }
+
+ .td[data-title]::before,
+ .td[data-description]::after {
+ display: block;
+ }
+
+ .td[data-title] ~ .td.cbi-section-actions {
+ align-self: flex-start;
+ }
+
+ .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) {
+ body {
+ font-size: 12pt;
+ }
+
+ input, textarea, select {
+ font-size: 12pt !important;
+ line-height: 1.4em;
+ }
+
+ select, input[type="text"], input[type="password"] {
+ width: 100%;
+ height: 1.4em;
+ }
+
+ [data-dynlist] > input,
+ input.cbi-input-password {
+ width: calc(100% - 20px);
+ }
+
+ .cbi-dropdown {
+ min-width: 100%;
+ }
+
+ .btn, .cbi-button {
+ font-size: 9pt !important;
+ line-height: 13pt;
+ }
+
+ #maincontent {
+ padding: .25em;
+ }
+
+ #tabmenu {
+ margin: -.25em -.25em 1em -.25em;
+ }
+
+ .th, .td {
+ flex: 2 2 50%;
+ }
+
+ .td.cbi-value-field {
+ flex-basis: 100%;
+ }
+
+ .td.cbi-value-field[data-type="dvalue"] {
+ flex-basis: 50%;
+ }
+
+ .td.cbi-value-field[data-type="button"],
+ .td.cbi-value-field[data-type="fvalue"] {
+ flex-basis: 25%;
+ text-align: left;
+ }
+
+ .cbi-value-title {
+ float: none;
+ font-weight: bold;
+ }
+
+ .cbi-value-field {
+ width: 100%;
+ margin: 0;
+ }
+
+ .cbi-value-description {
+ margin-top: 5px;
+ display: block;
+ }
+
+ .cbi-section-create {
+ margin-bottom: 1em;
+ }
+
+ .cbi-page-actions {
+ flex-wrap: wrap;
+ margin: -2px;
+ }
+
+ .cbi-page-actions > .cbi-button-link {
+ flex-basis: 100%;
+ margin-right: 2px;
+ }
+
+ .cbi-page-actions > * {
+ flex: 1 1 auto;
+ margin: 2px;
+ }
+
+ ul.cbi-tabmenu {
+ padding: 0 3px;
+ }
+
+ ul.cbi-tabmenu li {
+ font-size: 90%;
+ margin: 0 1px -1px 0;
+ }
+
+ .hide-xs {
+ display: none;
+ }
+
+ #cbi-network .td[id] > strong {
+ display: block;
+ }
+
+ #cbi-network-switch_vlan .td.cbi-section-actions {
+ flex-basis: 100%;
+ }
+
+ #dsl_status_table .ifacebox-body > span > strong {
+ display: block;
+ width: 100%;
+ margin-top: .5em;
+ }
}
projects / project / luci.git / blobdiff