18 background-color: #4a6b7c;
19 background-position: bottom center
;
20 background-repeat: repeat-x
;
21 font-family: Arial
, Verdana
, sans-serif
;
23 padding-bottom: 1.5em;
29 box-sizing: border-box
;
32 .table { display: table
; width: 100%; position: relative
; }
33 .tr { display: table-row
; }
34 .thead { display: table-header-group
; }
35 .tbody { display: table-row-group
; }
36 .tfoot { display: table-footer-group
; }
37 .td, .th { display: table-cell
; }
38 .th { font-weight: bold
; }
40 .table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
41 .table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
43 .col-1 { flex: 1 1 30px !important
; -webkit-flex: 1 1 30px !important
; }
44 .col-2 { flex: 2 2 60px !important
; -webkit-flex: 2 2 60px !important
; }
45 .col-3 { flex: 3 3 90px !important
; -webkit-flex: 3 3 90px !important
; }
46 .col-4 { flex: 4 4 120px !important
; -webkit-flex: 4 4 120px !important
; }
47 .col-5 { flex: 5 5 150px !important
; -webkit-flex: 5 5 150px !important
; }
48 .col-6 { flex: 6 6 180px !important
; -webkit-flex: 6 6 180px !important
; }
49 .col-7 { flex: 7 7 210px !important
; -webkit-flex: 7 7 210px !important
; }
50 .col-8 { flex: 8 8 240px !important
; -webkit-flex: 8 8 240px !important
; }
51 .col-9 { flex: 9 9 270px !important
; -webkit-flex: 9 9 270px !important
; }
52 .col-10 { flex: 10 10 300px !important
; -webkit-flex: 10 10 300px !important
; }
58 .tr.placeholder > .td {
73 text-decoration: none
;
87 border: 1px solid
#444;
88 border-width: 0 0 1px 1px;
104 #mainmenu ul li
> a
{
108 text-decoration: none
;
111 #mainmenu ul li
.selected
> a
{
114 border: 1px dotted
#444;
118 #mainmenu ul li
.selected:first-child
> a
{
122 #mainmenu ul li li
> a
{
127 #mainmenu ul li
> ul
{
131 transition: max-height
.15s;
134 #mainmenu ul:not
(.active
) li
.selected
> ul
,
135 #mainmenu ul li
.active
> ul
{
138 transition: max-height
.25s;
141 #mainmenu ul li
.mainmenu-item-logout
{
147 margin: -.5em -.5em .5em -.5em;
155 background: repeating-linear-gradient
(#f5f5f5, #bbb 2.4em, #f5f5f5 2.4em, #bbb);
163 #tabmenu ul li
.cbi-tab
{
170 font-variant: normal
;
175 border-bottom: 1px dotted
;
180 a:visited abbr
[title
],
181 a:link acronym
[title
],
182 a:visited acronym
[title
] {
187 font-family: monospace
;
194 border: 1px solid
#444;
195 border-width: 0 0 1px 0;
204 background-color: white
;
226 background-color: white
;
233 border: 1px solid
#a22;
239 .alert-message.notice {
245 .alert-message.warning {
259 .lang_he div.hostinfo {
267 #xhr_poll_status #xhr_poll_status_off
{
272 #xhr_poll_status #xhr_poll_status_on
{
286 background-color: #557788;
289 html #menubar
a:link
,
290 html #menubar
a:visited
{
296 text-decoration: none
;
300 html #menubar
a:link:hover
,
301 html #menubar
a:visited:hover
,
302 html #menubar
a:link:active
,
303 html #menubar
a:visited:active
,
304 #menubar a:link:focus
,
305 #menubar a:visited:focus
{
311 html #menubar
a:link
.active
,
312 html #menubar
a:visited
.active
,
313 html #menubar
a:link
.preactive
,
314 html #menubar
a:visited
.preactive
{
320 html #menubar
a:link
.warning
,
321 html #menubar
a:visited
.warning
{
350 .lang_de #submenu_admin_uci {
354 .lang_ru #submenu_admin_uci {
361 border: 3px solid
#cccccc;
363 font-family: monospace
;
377 border-width: 0 1px 1px 1px;
379 border-color: #444444;
382 .lang_he #maincontent {
388 font-family: Trebuchet MS
, Verdana
, sans-serif
;
390 margin: .25em 0 .5em 0;
391 border-bottom: 1px solid
;
405 fieldset
{ border: none
; }
406 fieldset
> legend
{ float: left
; }
407 fieldset
> legend
+ * { clear: both
; }
418 .cbi-section > legend {
423 margin-bottom: 0.5em;
427 .cbi-section-descr:empty {
433 text-decoration: none
;
435 background: url
('../resources/cbi/link.gif') no-repeat scroll right center
;
436 background-color: inherit
;
443 input:-webkit-input-placeholder
{
447 input:-moz-placeholder
{
451 input:-ms-input-placeholder
{
468 border-color: #000000;
476 input:not
(.btn
):not
(.cbi-button
):hover
,
479 background-color: #ffffff;
484 input
[type
=password
] {
490 input
[type
=password
] {
502 input
[type
=checkbox
],
503 [data-dynlist
] > input
+ img
,
504 input
.cbi-input-password
+ img
{
505 vertical-align: middle
;
510 .td input[type=text] {
514 .td
[data-dynlist
] > input
,
515 .td input.cbi-input-password {
516 width: calc
(100% - 20px);
519 img
.cbi-image-button
{
522 vertical-align: middle
;
528 border: 1px solid
#aaa;
529 text-decoration: none
;
531 display: inline-block
;
533 -webkit-appearance: none
;
541 .btn:hover, .cbi-button:hover {
542 box-shadow: 0 0 3px #37c;
546 .btn
[disabled
]:hover
,
547 .cbi-button
[disabled
],
548 .cbi-button[disabled]:hover {
551 pointer-events: none
;
554 .cbi-button-positive
,
555 .cbi-button-fieldadd
,
564 .cbi-button-download
,
581 .cbi-button-negative
,
582 .cbi-section-remove
.cbi-button
,
588 .cbi-button-action
.important
,
589 .cbi-page-actions
.cbi-button-apply
,
590 .cbi-section-actions .cbi-button-edit {
595 .cbi-button-positive
.important
,
596 .cbi-page-actions .cbi-button-save {
601 .cbi-button-negative.important {
606 .cbi-page-actions .cbi-button-apply + .cbi-button-save {
612 background-image: url
('../resources/cbi/reset.gif');
613 background-repeat: no-repeat
;
614 background-position: right
;
615 color: #FF0000 !important
;
616 border-color: #FF0000;
623 .table .td, .table .th {
631 border-top: 1px solid
#666666;
632 border-right: 1px solid
#666666;
633 border-bottom: 1px solid
#666666;
638 border-collapse: collapse
;
641 .table.smalltext .tr:hover .td {
642 background-color: #bbddee;
646 .table.smalltext .tr .th {
648 border-left: 1px solid
#666666;
652 .table.smalltext .tr .td {
654 border-top: 1px solid
#666666;
655 border-left: 1px solid
#666666;
659 background-color: #eeeeff;
669 vertical-align: middle
;
670 padding: 0.25em 0.6em;
671 border-bottom: 1px dotted
#bbbbbb;
691 .td.cbi-value-field {
695 vertical-align: middle
;
698 .cbi-value-description {
699 background-image: url
(/luci-static
/resources
/cbi
/help
.gif
);
700 background-position: .25em .25em;
701 background-repeat: no-repeat
;
703 padding: .25em .25em .25em 1.75em;
706 .cbi-section-create {
707 padding: 0 0 .25em 0;
709 display: inline-flex
;
713 .cbi-section-create > * {
718 .cbi-section-create > * > input {
722 .cbi-section-remove > .cbi-button {
724 border-radius: 3px 3px 0 0;
727 .cbi-section-node + .cbi-section-create {
737 border-bottom: 1px dotted
#bbbbbb;
744 border: 1px dotted
#555;
749 .cbi-section-node-tabbed {
754 .cbi-section-node
.cbi-value:last-child
,
755 .cbi-section-node .cbi-optionals:last-child {
759 .table.cbi-section-table {
762 border: 1px dotted
#444;
767 .cbi-section-node > .table.cbi-section-table {
778 .tr.cbi-section-table-row.flash {
779 animation: flash
.35s;
782 .tr.cbi-section-table-descr .th {
788 .td.cbi-section-table-optionals {
789 text-align: left
!important
;
793 .th
.cbi-section-actions
,
794 .td.cbi-section-actions {
797 vertical-align: middle
;
800 .th
.cbi-section-actions
> *,
801 .td.cbi-section-actions > * {
803 justify-content: flex-end
;
806 margin: auto
-1px auto auto
;
809 .td
.cbi-section-actions
> * > *,
810 .td.cbi-section-actions > * > form > * {
815 .td.cbi-section-actions > * > form {
822 justify-content: flex-end
;
826 .cbi-page-actions > form {
830 .cbi-page-actions > * {
835 .cbi-page-actions > form > * {
840 .cbi-page-actions
> .cbi-button-link
,
841 .cbi-page-actions > form[method="get"]:first-child {
846 .cbi-page-actions
> .cbi-button-link
,
847 .cbi-page-actions > form[method="get"]:first-child {
851 .th
[data-type
="button"], .td
[data-type
="button"],
852 .th[data-type="fvalue"], .td[data-type="fvalue"] {
857 #cbi-network-switch_vlan .th
,
858 #cbi-network-switch_vlan .td
{
862 .td[data-title]::before {
863 content: attr
(data-title
) ":\20";
871 .tr.placeholder .td[data-title]::before {
875 .tr
[data-title
]::before
,
876 .tr.cbi-section-table-titles.named::before {
877 content: attr
(data-title
) "\20";
885 word-wrap: break-word
;
886 vertical-align: middle
;
889 .cbi-value-helpicon img {
890 vertical-align: bottom
;
893 .td.cbi-value-error {
897 .cbi-value-error input
,
898 .cbi-value-error select {
900 background-color: #ffcccc;
905 background-color: white
;
907 border: 1px dotted red
;
912 .cbi-value-field var {
917 list-style-type: none
;
919 margin: 0 0 .5em 0 !important
;
921 border-bottom: 1px solid
#bbb;
925 display: inline-flex
;
926 margin: 0 5px -1px 0;
928 border: 1px solid
#bbb;
930 border-radius: 3px 3px 0 0;
931 background: linear-gradient
(#ddd 90%, #aaa 100%);
934 text-overflow: ellipsis
;
935 word-wrap: break-word
;
939 ul
.cbi-tabmenu li
a:hover
{
940 text-decoration: none
;
948 ul
.cbi-tabmenu li
.cbi-tab-highlighted
{
953 ul
.cbi-tabmenu li
.cbi-tab
{
959 background-image: url
(/luci-static
/resources
/cbi
/help
.gif
);
960 background-position: .25em 50%;
961 background-repeat: no-repeat
;
962 border-bottom: 1px solid
#ccc;
963 margin: 0 .25em .25em .25em;
964 padding: .5em .5em .5em 2em;
969 border: 1px inset
#000;
970 display: inline-flex
;
980 .cbi-dropdown:hover {
984 .cbi-dropdown:focus {
985 outline: 2px solid
#4b6e9b;
989 margin: 0 !important
;
998 .cbi-dropdown > ul.preview {
1002 .cbi-dropdown > .open {
1003 border: 2px outset
#eee;
1007 .cbi-dropdown
> .open
,
1008 .cbi-dropdown > .more {
1012 flex-direction: column
;
1013 justify-content: center
;
1019 .cbi-dropdown
> .more
,
1020 .cbi-dropdown > ul > li[placeholder] {
1023 text-shadow: 1px 1px 0px #fff;
1027 .cbi-dropdown > ul > li {
1030 white-space: nowrap
;
1032 text-overflow: ellipsis
;
1035 align-items: center
;
1040 .cbi-dropdown > ul > li .hide-open { display: initial
; }
1041 .cbi-dropdown > ul > li .hide-close { display: none
; }
1043 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1044 border-left: 1px solid
#ccc;
1047 .cbi-dropdown[empty] > ul {
1051 .cbi-dropdown > ul > li > form {
1055 pointer-events: none
;
1058 .cbi-dropdown > ul > li img {
1059 vertical-align: middle
;
1060 margin-right: .25em;
1063 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1067 .cbi-dropdown > ul > li input[type="text"] {
1071 .cbi-dropdown[open] {
1075 .cbi-dropdown[open] > ul.dropdown {
1077 background: #f6f6f5;
1078 border: 1px solid
#918e8c;
1079 box-shadow: 0 0 4px #918e8c;
1087 .cbi-dropdown
> ul
> li
[display
],
1088 .cbi-dropdown
[open
] > ul
.preview
,
1089 .cbi-dropdown
[open
] > ul
.dropdown
> li
,
1090 .cbi-dropdown
[multiple
] > ul
> li
> label
,
1091 .cbi-dropdown
[multiple
][open
] > ul
.dropdown
> li
,
1092 .cbi-dropdown
[multiple
][more
] > .more
,
1093 .cbi-dropdown[multiple][empty] > .more {
1096 align-items: center
;
1099 .cbi-dropdown
[empty
] > ul
> li
,
1100 .cbi-dropdown
[optional
][open
] > ul
.dropdown
> li
[placeholder
],
1101 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1105 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none
; }
1106 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: initial
; }
1108 .cbi-dropdown[open] > ul.dropdown > li {
1109 border-bottom: 1px solid
#ccc;
1112 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1113 background: #b0d0f0;
1116 .cbi-dropdown[open] > ul.dropdown > li.focus {
1117 background: linear-gradient
(90deg, #a3c2e8 0%, #84aad9 100%);
1120 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1122 border-bottom: none
;
1125 .cbi-dropdown[disabled] {
1126 pointer-events: none
;
1131 .cbi-tooltip-container {
1140 transition: opacity
.25s ease-out
;
1141 pointer-events: none
;
1142 box-shadow: 0 0 2px #444;
1145 .cbi-tooltip-container:hover .cbi-tooltip {
1148 transition: opacity
.25s ease-in
;
1151 .zonebadge .cbi-tooltip {
1153 background: inherit
;
1154 margin: -1.6em 0 0 -5px;
1163 .zone-forwards > * {
1168 .zone-forwards > span {
1173 .zone-forwards
.zone-src
,
1174 .zone-forwards .zone-dest {
1176 flex-direction: column
;
1180 .left, .left::before { text-align: left
!important
; }
1181 .right, .right::before { text-align: right
!important
; }
1182 .center, .center::before { text-align: center
!important
; }
1184 .top, .top::before { vertical-align: top
!important
; }
1185 .middle, .middle::before { vertical-align: middle
!important
; }
1186 .bottom, .bottom::before { vertical-align: bottom
!important
; }
1188 .td.top { align-self: flex-start
; vertical-align: top
; }
1189 .td.middle { align-self: center
; vertical-align: middle
; }
1190 .td.bottom { align-self: flex-end
; vertical-align: bottom
; }
1203 background-color: transparent
;
1205 text-decoration: none
;
1214 white-space: normal
;
1215 border: 1px dotted
#ff0000;
1216 background-color: #ffffff;
1222 .ifacebadge, .ifacebox {
1223 display: inline-flex
;
1224 align-content: center
;
1225 border: 1px solid
#ccc;
1235 .ifacebox-head.active {
1236 background: #90c0e0;
1239 .ifacebadge, .zonebadge {
1240 align-items: center
;
1244 align-self: flex-start
;
1250 display: inline-block
;
1254 .ifacebadge-active {
1255 border-color: #000000;
1260 flex-direction: column
;
1274 vertical-align: top
;
1277 .network-status-table {
1280 margin: -.25em -.25em .25em -.25em;
1283 .network-status-table .ifacebox {
1289 .network-status-table .ifacebox-body {
1291 flex-direction: column
;
1296 .network-status-table .ifacebox-body > span {
1300 .network-status-table .ifacebox-body > div {
1306 .network-status-table .ifacebox-body .ifacebadge {
1308 -webkit-flex: 1 1 auto
;
1311 white-space: nowrap
;
1314 .network-status-table .ifacebox-body .ifacebadge {
1321 display: inline-block
;
1322 white-space: nowrap
;
1327 .zonebadge > strong {
1336 .zonebadge
.ifacebadge
,
1337 .cbi-dropdown .ifacebadge {
1341 .zonebadge
.ifacebadge img
,
1342 .zonebadge
.ifacebadge em
,
1343 .cbi-dropdown
.ifacebadge img
,
1344 .cbi-dropdown .ifacebadge em {
1349 border: 1px dashed
#AAAAAA;
1357 font-family: monospace
;
1360 .uci-change-list ins
,
1361 .uci-change-legend-label ins {
1362 text-decoration: none
;
1363 border: 1px solid
#00FF00;
1364 background-color: #CCFFCC;
1369 .uci-change-list del
,
1370 .uci-change-legend-label del {
1371 text-decoration: none
;
1372 border: 1px solid
#FF0000;
1373 background-color: #FFCCCC;
1379 .uci-change-list var
,
1380 .uci-change-legend-label var {
1381 text-decoration: none
;
1382 border: 1px solid
#CCCCCC;
1383 background-color: #EEEEEE;
1389 .uci-change-list var ins
,
1390 .uci-change-list var del {
1391 /*display: inline;*/
1398 .uci-change-legend {
1402 .uci-change-legend-label {
1408 .uci-change-legend-label
>ins
,
1409 .uci-change-legend-label
>del
,
1410 .uci-change-legend-label>var {
1418 .uci-change-legend-label var ins
,
1419 .uci-change-legend-label var del {
1427 @media screen and
(max-width: 992px) {
1429 -webkit-text-size-adjust: 100%;
1433 flex-direction: column
;
1448 box-shadow: 0 0 2px #444;
1450 border-top: 1px solid
#444;
1454 #mainmenu ul
> li
.selected
> a
{
1460 #mainmenu ul
> li
.selected:not
(.active
) > ul
{
1465 #mainmenu ul
> li
> a
{
1468 border: 1px solid
#444;
1469 border-width: 0 0 1px 1px;
1474 flex-direction: row
;
1481 #mainmenu ul
.l1
> li
{
1482 display: inline-flex
;
1488 #mainmenu ul
.l1 ul
.l2
{
1494 box-shadow: 0 0 2px #444;
1499 #mainmenu ul
.l1 ul
.l2
.align-left
{
1504 #mainmenu ul
.l2
> li
{
1508 #mainmenu ul
.l2
> li
> a
{
1512 #mainmenu ul li
.mainmenu-item-logout
{
1517 #mainmenu ul li
.mainmenu-item-logout::before
{
1520 border: 1px solid
#444;
1521 border-width: 0 0 1px 1px;
1526 flex-direction: column
;
1532 flex-direction: row
;
1534 align-items: flex-end
;
1539 align-self: flex-start
;
1541 text-overflow: ellipsis
;
1542 word-wrap: break-word
;
1543 display: inline-block
;
1550 .td
[data-type
="button"],
1551 .td[data-type="fvalue"] {
1556 .td.cbi-value-field {
1557 align-self: flex-start
;
1560 .td.cbi-value-field .cbi-button {
1564 .table.cbi-section-table {
1571 .cbi-section-table-titles
,
1572 .cbi-section-table-descr {
1576 .cbi-section-table-row {
1578 flex-direction: row
;
1580 border: 1px dotted
#444;
1585 .cbi-section-table-row:hover {
1586 border: 1px solid
#4a6b7c;
1589 .cbi-section-table + .cbi-section-create {
1593 .tr[data-title]::before {
1599 .td[data-title]::before {
1603 .td[data-title] ~ .td.cbi-section-actions {
1604 align-self: flex-end
;
1613 @media screen and
(max-width: 480px) {
1618 input
, textarea
, select
{
1619 font-size: 12pt !important
;
1623 select
, input
[type
="text"], input
[type
="password"] {
1628 [data-dynlist
] > input
,
1629 input
.cbi-input-password
{
1630 width: calc
(100% - 20px);
1638 font-size: 9pt !important
;
1647 margin: -.25em -.25em 1em -.25em;
1654 .td.cbi-value-field {
1658 .td.cbi-value-field[data-type="dvalue"] {
1662 .td
.cbi-value-field
[data-type
="button"],
1663 .td.cbi-value-field[data-type="fvalue"] {
1678 .cbi-value-description {
1683 .cbi-section-create {
1692 .cbi-page-actions > .cbi-button-link {
1697 .cbi-page-actions > * {
1708 margin: 0 1px -1px 0;
1715 #cbi-network .td
[id
] > strong
{
1719 #cbi-network-switch_vlan .td
.cbi-section-actions
{