3 * Copyright 2012 Nut & Bolt
4 * By David Menting <david@nut-bolt.nl>
5 * Based on Bootstrap v1.4.0
7 * Copyright 2011 Twitter, Inc
8 * Licensed under the Apache License v2.0
9 * http://www.apache.org/licenses/LICENSE-2.0
11 * Designed and built with all the love in the world @twitter by @mdo and @fat.
14 * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
15 * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
26 h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, code, del, em, img, q, s,
27 small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset,
28 form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td,
29 .table, .tbody, .tfoot, .thead, .tr, .th, .td {
40 abbr[title], acronym[title] {
41 border-bottom: 1px dotted;
46 border-collapse: collapse;
64 -webkit-text-size-adjust: 100%;
65 -ms-text-size-adjust: 100%;
93 vertical-align: baseline;
106 -ms-interpolation-mode: bicubic;
116 box-sizing: border-box;
117 vertical-align: baseline;
118 *vertical-align: middle;
126 button::-moz-focus-inner, input::-moz-focus-inner {
132 input[type="button"],
134 input[type="submit"] {
136 -webkit-appearance: button;
140 input[type="button"][disabled],
141 input[type="reset"][disabled],
142 input[type="submit"][disabled] {
146 input[type="search"] {
147 -webkit-appearance: textfield;
148 box-sizing: content-box;
151 input[type="search"]::-webkit-search-decoration {
152 -webkit-appearance: none;
162 * Basic and global styles for generating a grid system, structural layout, and page templates
163 * ------------------------------------------------------------------------------------------- */
165 background-color: #fff;
167 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
183 .container:before, .container:after {
195 text-decoration: none;
196 line-height: inherit;
197 font-weight: inherit;
202 text-decoration: underline;
214 * Headings, body text, lists, code, and more for a versatile and durable typography system
215 * ---------------------------------------------------------------------------------------- */
219 .table .tr.cbi-section-table-descr .th {
299 text-transform: uppercase;
303 margin: 0 0 18px 25px;
350 border-bottom: 1px solid #eee;
360 font-weight: inherit;
361 line-height: inherit;
364 small { font-size: 0.9em }
374 font-family: Monaco, Andale Mono, Courier New, monospace;
380 background-color: #fee9cc;
381 color: rgba(0, 0, 0, 0.75);
386 background-color: #f5f5f5;
392 border: 1px solid #ccc;
393 border: 1px solid rgba(0, 0, 0, 0.15);
396 white-space: pre-wrap;
397 word-wrap: break-word;
401 * Base styles for various input types, form layouts, and states
402 * ------------------------------------------------------------- */
418 *padding: 0 0 5px 0px;
425 form .cbi-tab-descr {
436 form .clearfix:before, form .clearfix:after,
437 form .cbi-value:before, form .cbi-value:after {
443 form .clearfix:after,
444 form .cbi-value:after {
452 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
459 form .cbi-value-field {
463 form .cbi-value label.cbi-value-title {
473 input[type=checkbox], input[type=radio] {
482 display: inline-block;
489 border: 1px solid #ccc;
491 box-sizing: border-box;
503 box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.1);
506 input[type=checkbox], input[type=radio] {
519 background-color: #fff;
522 line-height: initial;
524 width: auto !important;
527 input[type=button], input[type=reset], input[type=submit] {
532 select, input[type=file] {
535 /* For IE7, add top margin to align select with labels */
540 background-color: #fff;
547 .td > input[type=text],
548 .td > input[type=password],
550 .td > .cbi-dropdown {
555 background-color: #fff;
558 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
566 ::-webkit-input-placeholder {
570 .btn, .cbi-button, input, textarea {
571 transition: border linear 0.2s, box-shadow linear 0.2s;
572 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
575 .btn:hover, .cbi-button:hover,
576 input:focus, textarea:focus {
578 border-color: rgba(82, 168, 236, 0.8) !important;
579 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
580 text-decoration: none;
583 input[type=file]:focus, input[type=checkbox]:focus, select:focus {
585 outline: 1px dotted #666;
594 background-color: #f5f5f5;
596 pointer-events: none;
601 .cbi-section-create {
602 padding: 0 0 10px 10px;
605 .cbi-section-create {
607 display: inline-flex;
611 .cbi-section-create > * {
616 .cbi-section-create > * > input {
624 padding: 17px 20px 18px 17px;
625 border-top: 1px solid #ddd;
626 border-radius: 0 0 3px 3px;
630 .actions .secondary-action,
631 .cbi-page-actions .secondary-action{
635 .actions .secondary-action a,
636 .cbi-page-actions .secondary-action a {
640 .actions .secondary-action a:hover,
641 .cbi-page-actions .secondary-action a:hover {
642 text-decoration: underline;
645 .cbi-page-actions > form {
649 .help-inline, .help-block {
672 * Tables for, you guessed it, tabular data
673 * ---------------------------------------- */
674 .tr { display: table-row; }
675 .table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
676 .table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
684 border-collapse: collapse;
688 .table .th, .table .td {
690 vertical-align: middle; /* Fixme */
691 padding: 10px 10px 9px;
699 vertical-align: middle;
702 .table .td, .table .tbody .th {
703 border-top: 1px solid #ddd;
707 height: calc(3em + 20px);
710 .tr.placeholder > .td {
720 * Repeatable UI elements outside the base styles provided from the scaffolding
721 * ---------------------------------------------------------------------------- */
735 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
738 header h3 a:hover, header .brand:hover, header ul .active > a {
739 background-color: #333;
740 background-color: rgba(255, 255, 255, 0.05);
742 text-decoration: none;
749 header h3 a, header .brand {
752 padding: 8px 20px 12px;
766 background-color: #222;
767 background-repeat: repeat-x;
768 background-image: linear-gradient(to bottom, #333333, #222222);
769 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
773 header div > ul, .nav {
781 header div > ul > li, .nav > li {
786 header div > ul a, .nav a {
789 padding: 10px 10px 11px;
791 text-decoration: none;
794 header div > ul a:hover, .nav a:hover {
796 text-decoration: none;
799 header div > ul .active > a, .nav .active > a {
800 background-color: #222;
801 background-color: rgba(0, 0, 0, 0.5);
804 header div > ul.secondary-nav, .nav.secondary-nav {
810 header div > ul.secondary-nav .menu-dropdown,
811 .nav.secondary-nav .menu-dropdown,
812 header div > ul.secondary-nav .dropdown-menu,
813 .nav.secondary-nav .dropdown-menu {
818 header div > ul a.menu:hover,
820 header div > ul li.open .menu,
822 header div > ul .dropdown-toggle:hover,
823 .nav .dropdown-toggle:hover,
824 header div > ul .dropdown.open .dropdown-toggle,
825 .nav .dropdown.open .dropdown-toggle {
827 background: rgba(255, 255, 255, 0.05);
830 header div > ul .menu-dropdown,
832 header div > ul .dropdown-menu,
833 .nav .dropdown-menu {
834 background-color: #333;
837 header div > ul .menu-dropdown a.menu,
838 .nav .menu-dropdown a.menu,
839 header div > ul .dropdown-menu a.menu,
840 .nav .dropdown-menu a.menu,
841 header div > ul .menu-dropdown .dropdown-toggle,
842 .nav .menu-dropdown .dropdown-toggle,
843 header div > ul .dropdown-menu .dropdown-toggle,
844 .nav .dropdown-menu .dropdown-toggle {
848 header div > ul .menu-dropdown a.menu.open,
849 .nav .menu-dropdown a.menu.open,
850 header div > ul .dropdown-menu a.menu.open,
851 .nav .dropdown-menu a.menu.open,
852 header div > ul .menu-dropdown .dropdown-toggle.open,
853 .nav .menu-dropdown .dropdown-toggle.open,
854 header div > ul .dropdown-menu .dropdown-toggle.open,
855 .nav .dropdown-menu .dropdown-toggle.open {
857 background: rgba(255, 255, 255, 0.05);
860 header div > ul .menu-dropdown li a,
861 .nav .menu-dropdown li a,
862 header div > ul .dropdown-menu li a,
863 .nav .dropdown-menu li a {
865 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
868 header div > ul .menu-dropdown li a:hover,
869 .nav .menu-dropdown li a:hover,
870 header div > ul .dropdown-menu li a:hover,
871 .nav .dropdown-menu li a:hover {
872 background-color: #191919;
873 background-repeat: repeat-x;
874 background-image: linear-gradient(to bottom, #292929, #191919);
878 header div > ul .menu-dropdown .active a,
879 .nav .menu-dropdown .active a,
880 header div > ul .dropdown-menu .active a,
881 .nav .dropdown-menu .active a {
885 header div > ul .menu-dropdown .divider,
886 .nav .menu-dropdown .divider,
887 header div > ul .dropdown-menu .divider,
888 .nav .dropdown-menu .divider {
889 background-color: #222;
893 header ul .menu-dropdown li a, header ul .dropdown-menu li a {
901 a.menu:after, .dropdown-toggle:after {
904 display: inline-block;
906 text-indent: -99999px;
910 border-left: 4px solid transparent;
911 border-right: 4px solid transparent;
912 border-top: 4px solid #fff;
916 .menu-dropdown, .dropdown-menu {
917 background-color: #fff;
931 border-color: rgba(0, 0, 0, 0.2);
933 border-width: 0 1px 1px;
934 border-radius: 0 0 6px 6px;
935 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
936 background-clip: padding-box;
939 .menu-dropdown li, .dropdown-menu li {
942 background-color: transparent;
945 .menu-dropdown .divider, .dropdown-menu .divider {
949 background-color: #eee;
950 border-bottom: 1px solid #fff;
953 header .dropdown-menu a, .dropdown-menu a {
960 text-shadow: 0 1px 0 #fff;
963 header .dropdown-menu a:hover,
964 .dropdown-menu a:hover,
965 header .dropdown-menu a.hover,
966 .dropdown-menu a.hover {
967 background-color: #ddd;
968 background-repeat: repeat-x;
969 background-image: linear-gradient(to bottom, #eee, #ddd);
971 text-decoration: none;
972 box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
976 .dropdown.open .menu,
977 .open .dropdown-toggle,
978 .dropdown.open .dropdown-toggle {
981 background: rgba(0, 0, 0, 0.3);
984 .open .menu-dropdown,
985 .dropdown.open .menu-dropdown,
986 .open .dropdown-menu,
987 .dropdown.open .dropdown-menu {
991 .dropdown:hover ul.dropdown-menu {
995 .dropdown-menu .dropdown-menu {
1004 .tabs, .cbi-tabmenu {
1012 .cbi-tabmenu:before,
1014 .cbi-tabmenu:after {
1020 .tabs:after, .cbi-tabmenu:after {
1024 .tabs > li, .cbi-tabmenu > li {
1028 .tabs > li > a, .cbi-tabmenu > li > a {
1035 border-style: solid;
1036 border-width: 0 0 1px;
1042 margin-bottom: -1px;
1049 .cbi-tabmenu.map > li {
1054 .cbi-tabcontainer > fieldset.cbi-section[id] > legend {
1059 .cbi-tabmenu > li > a {
1063 border: 1px solid transparent;
1064 border-radius: 4px 4px 0 0;
1067 .tabs > li > a:hover,
1068 .cbi-tabmenu > li > a:hover {
1069 text-decoration: none;
1070 background-color: #eee;
1071 border-color: #eee #eee #ddd;
1074 .tabs .active > a, .tabs .active > a:hover,
1075 .cbi-tabmenu .active > a, .cbi-tabmenu .active > a:hover,
1076 .cbi-tab > a:link, .cbi-tab > a:hover {
1078 background-color: #fff;
1079 border: 1px solid #ddd;
1080 border-bottom-color: transparent;
1084 .tabs .menu-dropdown, .tabs .dropdown-menu,
1085 .cbi-tabmenu .menu-dropdown, .cbi-tabmenu .dropdown-menu {
1088 border-radius: 0 6px 6px 6px;
1091 .tabs a.menu:after, .tabs .dropdown-toggle:after,
1092 .cbi-tabmenu a.menu:after, .cbi-tabmenu .dropdown-toggle:after {
1093 border-top-color: #999;
1098 .tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle,
1099 .cbi-tabmenu li.open.menu .menu, .cbi-tabmenu .open.dropdown .dropdown-toggle {
1103 .tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after,
1104 .cbi-tabmenu li.open a.menu:after, .cbi-tabmenu .dropdown.open .dropdown-toggle:after {
1105 border-top-color: #555;
1108 .tab-content > .tab-pane,
1109 .tab-content > div {
1113 .tab-content > .active {
1120 background-color: #f5f5f5;
1121 background-repeat: repeat-x;
1122 background-image: linear-gradient(to bottom, #fff, #f5f5f5);
1123 border: 1px solid #ddd;
1125 box-shadow: inset 0 1px 0 #fff;
1130 text-shadow: 0 1px 0 #fff;
1133 .breadcrumb .divider {
1138 .breadcrumb .active a {
1145 border-top: 1px solid #eee;
1149 .alert-message.danger,
1151 .alert-message.danger:hover,
1153 .alert-message.error,
1155 .alert-message.error:hover,
1157 .alert-message.success,
1159 .alert-message.success:hover,
1161 .alert-message.info,
1163 .alert-message.info:hover {
1167 .btn .close, .alert-message .close {
1168 font-family: Arial, sans-serif;
1173 .alert-message.danger,
1175 .alert-message.error {
1176 background: linear-gradient(to bottom, #ee5f5b, #c43c35) repeat-x;
1177 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1178 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1181 .btn.success, .alert-message.success {
1182 background: linear-gradient(to bottom, #62c462, #57a957) repeat-x;
1183 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1184 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1187 .btn.info, .alert-message.info {
1188 background: linear-gradient(to bottom, #5bc0de, #339bb9) repeat-x;
1189 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1190 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1193 .alert-message.notice {
1194 background: linear-gradient(to bottom, #efefef, #fefefe) repeat-x;
1195 text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
1196 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1202 display: inline-block;
1203 background: linear-gradient(#fff, #fff 25%, #e6e6e6) no-repeat;
1204 padding: 5px 14px 6px;
1205 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1208 line-height: normal;
1209 border: 1px solid #ccc;
1210 border-bottom-color: #bbb;
1212 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1217 outline: 1px dotted #666;
1221 .cbi-value-error input {
1226 .cbi-button-positive,
1227 .cbi-button-fieldadd,
1234 .cbi-button-neutral,
1235 .cbi-button-download,
1248 border-color: #0069d6;
1252 .cbi-button-negative,
1253 .cbi-section-remove .cbi-button,
1255 .cbi-button-remove {
1260 .cbi-page-actions .cbi-button-link,
1261 .cbi-page-actions form[method="get"]:first-child {
1266 .cbi-button-action.important,
1267 .cbi-page-actions .cbi-button-apply,
1268 .cbi-section-actions .cbi-button-edit {
1270 background: linear-gradient(to bottom, #0069d6, #0049d6) no-repeat;
1271 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1274 .cbi-button-positive.important,
1275 .cbi-page-actions .cbi-button-save {
1277 background: linear-gradient(to bottom, #4a4, #484) no-repeat;
1278 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1281 .cbi-button-negative.important {
1283 background: linear-gradient(to bottom, #c44, #c00) no-repeat;
1284 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1287 .cbi-page-actions .cbi-button-apply + .cbi-button-save {
1288 background: linear-gradient(#fff, #fff 25%, #e6e6e6);
1289 text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.75);
1294 border: 1px solid #ccc;
1296 display: inline-flex;
1300 background: linear-gradient(#fff 0%, #e9e8e6 100%);
1305 .cbi-dropdown:focus {
1306 outline: 2px solid #4b6e9b;
1309 .cbi-dropdown > ul {
1310 margin: 0 !important;
1319 .cbi-dropdown > ul.preview {
1323 .cbi-dropdown > .open,
1324 .cbi-dropdown > .more {
1328 flex-direction: column;
1329 justify-content: center;
1335 .cbi-dropdown > .more,
1336 .cbi-dropdown > ul > li[placeholder] {
1339 text-shadow: 1px 1px 0px #fff;
1343 .cbi-dropdown > ul > li {
1346 white-space: nowrap;
1348 text-overflow: ellipsis;
1351 align-items: center;
1357 .cbi-dropdown > ul > li .hide-open { display: block; display: initial; }
1358 .cbi-dropdown > ul > li .hide-close { display: none; }
1360 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1361 border-left: 1px solid #ccc;
1364 .cbi-dropdown[empty] > ul {
1368 .cbi-dropdown > ul > li > form {
1372 pointer-events: none;
1375 .cbi-dropdown > ul > li img {
1376 vertical-align: middle;
1377 margin-right: .25em;
1380 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1384 .cbi-dropdown > ul > li input[type="text"] {
1388 .cbi-dropdown[open] {
1392 .cbi-dropdown[open] > ul.dropdown {
1394 background: #f6f6f5;
1395 border: 1px solid #918e8c;
1396 box-shadow: 0 0 4px #918e8c;
1404 .cbi-dropdown > ul > li[display],
1405 .cbi-dropdown[open] > ul.preview,
1406 .cbi-dropdown[open] > ul.dropdown > li,
1407 .cbi-dropdown[multiple] > ul > li > label,
1408 .cbi-dropdown[multiple][open] > ul.dropdown > li,
1409 .cbi-dropdown[multiple][more] > .more,
1410 .cbi-dropdown[multiple][empty] > .more {
1415 .cbi-dropdown[empty] > ul > li,
1416 .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
1417 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1421 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
1422 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block; display: initial; }
1424 .cbi-dropdown[open] > ul.dropdown > li {
1425 border-bottom: 1px solid #ccc;
1428 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1429 background: #b0d0f0;
1432 .cbi-dropdown[open] > ul.dropdown > li.focus {
1433 background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
1436 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1438 border-bottom: none;
1441 .cbi-dropdown[disabled] {
1442 pointer-events: none;
1446 .cbi-tooltip-container {
1455 transition: opacity .25s ease-out;
1458 .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
1461 transition: opacity .25s ease-in;
1464 .zonebadge .cbi-tooltip {
1466 background: inherit;
1467 margin: -1.6em 0 0 -5px;
1469 pointer-events: none;
1470 box-shadow: 0 0 3px #444;
1473 .zonebadge .cbi-tooltip > * {
1482 .zone-forwards > * {
1487 .zone-forwards > span {
1492 .zone-forwards .zone-src,
1493 .zone-forwards .zone-dest {
1495 flex-direction: column;
1498 .btn.active, .btn:active {
1499 box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1504 background-image: none;
1511 background-image: none;
1518 line-height: normal;
1519 padding: 9px 14px 9px;
1524 padding: 7px 9px 7px;
1528 button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
1538 line-height: 13.5px;
1539 text-shadow: 0 1px 0 #fff;
1545 text-decoration: none;
1552 margin-bottom: 18px;
1554 background: linear-gradient(to bottom, #fceec1, #eedc94) repeat-x;
1555 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1556 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1557 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
1559 border-style: solid;
1561 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1564 .alert-message .close {
1574 .alert-message.danger p a,
1575 .alert-message.error p a,
1576 .alert-message.success p a,
1577 .alert-message.info p a {
1589 .alert-message div {
1596 padding: 1px 3px 2px;
1599 color: #fff !important;
1600 text-transform: uppercase;
1601 white-space: nowrap;
1602 background-color: #bfbfbf;
1613 text-decoration: none;
1617 background-color: #c43c35;
1621 background-color: #f89406;
1625 background-color: #46a546;
1629 background-color: #62cffc;
1632 /* LuCI specific items */
1633 .hidden { display: none }
1640 border: 1px solid #ccc;
1641 border-radius: 3px 3px 3px 3px;
1643 display: inline-block;
1652 form.inline { display: inline }
1654 header .pull-right { padding-top: 8px; }
1656 #modemenu li:last-child span.divider { display: none }
1658 #syslog { width: 100%; }
1660 .cbi-section-table tbody tr:nth-child(odd) td, .cbi-section-table tbody tr:nth-child(odd) th {
1661 background-color: #f9f9f9;
1664 .cbi-section-table tbody tr:hover td, .cbi-section-table tbody tr:hover th {
1665 background-color: #f5f5f5;
1668 .cbi-section-table tr.cbi-section-table-descr th {
1669 font-weight: normal;
1672 .cbi-section-table-titles.named::before,
1673 .cbi-section-table-descr.named::before,
1674 .cbi-section-table-row[data-title]::before {
1675 content: attr(data-title) " ";
1676 display: table-cell;
1677 padding: 10px 10px 9px;
1680 vertical-align: middle;
1683 .cbi-section-table-row[data-title]::before {
1684 border-top: 1px solid #ddd;
1687 .left { text-align: left !important; }
1688 .right { text-align: right !important; }
1689 .center { text-align: center !important; }
1690 .top { vertical-align: top !important; }
1691 .middle { vertical-align: middle !important; }
1692 .bottom { vertical-align: bottom !important; }
1694 .cbi-value-field { line-height: 1.5em; }
1696 .cbi-value-field input[type=checkbox],
1697 .cbi-value-field input[type=radio] {
1703 .cbi-value-field table td {
1707 .table.cbi-section-table input[type="password"],
1708 .table.cbi-section-table input[type="text"],
1709 .table.cbi-section-table textarea,
1710 .table.cbi-section-table select {
1714 .table.cbi-section-table .td.cbi-section-table-cell {
1715 white-space: nowrap;
1719 .table.cbi-section-table .td.cbi-section-table-cell select {
1723 .td.cbi-section-actions {
1725 vertical-align: middle;
1728 .td.cbi-section-actions > * {
1732 .td.cbi-section-actions > * > *,
1733 .td.cbi-section-actions > * > form > * {
1738 .td.cbi-section-actions > * > form {
1739 display: inline-flex;
1743 .table.valign-middle .td {
1744 vertical-align: middle;
1748 background: #f9f9f9;
1751 .cbi-value-description {
1752 background-image: url(/luci-static/resources/cbi/help.gif);
1753 background-position: .25em .2em;
1754 background-repeat: no-repeat;
1755 margin: .25em 0 0 0;
1756 padding: 0 0 0 1.7em;
1759 .cbi-section-error {
1760 border: 1px solid #f00;
1762 background-color: #fce6e6;
1764 margin-bottom: 18px;
1767 .cbi-section-error ul { margin: 0 0 0 20px; }
1769 .cbi-section-error ul li {
1775 background-color: #fff;
1776 border: 1px solid #ccc;
1779 white-space: nowrap;
1780 background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
1781 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1783 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1784 display: inline-flex;
1785 flex-direction: column;
1790 .ifacebox .ifacebox-head {
1791 border-bottom: 1px solid #ccc;
1796 .ifacebox .ifacebox-head.active {
1797 background: #90c0e0;
1800 .ifacebox .ifacebox-body {
1805 display: inline-block;
1806 flex-direction: row;
1807 white-space: nowrap;
1808 background-color: #fff;
1809 border: 1px solid #ccc;
1811 background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
1812 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1814 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1822 vertical-align: middle;
1825 .ifacebadge-active {
1830 .network-status-table {
1835 .network-status-table .ifacebox {
1840 .network-status-table .ifacebox-body {
1842 flex-direction: column;
1847 .network-status-table .ifacebox-body > * {
1851 .network-status-table .ifacebox-body > span {
1855 .network-status-table .ifacebox-body > div {
1862 .network-status-table .ifacebox-body .ifacebadge {
1863 display: inline-flex;
1871 .ifacebadge.large > * {
1878 display: inline-block;
1879 white-space: nowrap;
1881 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1885 .zonebadge > strong {
1887 display: inline-block;
1894 .zonebadge > .ifacebadge {
1899 border: 1px dashed #aaa;
1906 .td.cbi-value-field var {
1912 font-family: monospace;
1915 .uci-change-list ins,
1916 .uci-change-legend-label ins {
1917 text-decoration: none;
1918 border: 1px solid #0f0;
1919 background-color: #cfc;
1924 .uci-change-list del,
1925 .uci-change-legend-label del {
1926 text-decoration: none;
1927 border: 1px solid #f00;
1928 background-color: #fcc;
1934 .uci-change-list var,
1935 .uci-change-legend-label var {
1936 text-decoration: none;
1937 border: 1px solid #ccc;
1938 background-color: #eee;
1946 .uci-change-list var ins,
1947 .uci-change-list var del {
1955 .uci-change-legend {
1959 .uci-change-legend-label {
1964 .uci-change-legend-label > ins,
1965 .uci-change-legend-label > del,
1966 .uci-change-legend-label > var {
1974 .uci-change-legend-label var ins,
1975 .uci-change-legend-label var del {
1980 html body.apply-overlay-active {
1981 height: calc(100vh - 63px);