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;
47 border-collapse: collapse;
65 -webkit-text-size-adjust: 100%;
66 -ms-text-size-adjust: 100%;
94 vertical-align: baseline;
107 -ms-interpolation-mode: bicubic;
117 box-sizing: border-box;
118 vertical-align: baseline;
119 *vertical-align: middle;
127 button::-moz-focus-inner, input::-moz-focus-inner {
133 input[type="button"],
135 input[type="submit"] {
137 -webkit-appearance: button;
141 input[type="button"][disabled],
142 input[type="reset"][disabled],
143 input[type="submit"][disabled] {
147 input[type="search"] {
148 -webkit-appearance: textfield;
149 box-sizing: content-box;
152 input[type="search"]::-webkit-search-decoration {
153 -webkit-appearance: none;
163 * Basic and global styles for generating a grid system, structural layout, and page templates
164 * ------------------------------------------------------------------------------------------- */
166 background-color: #fff;
168 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
184 .container:before, .container:after {
196 text-decoration: none;
197 line-height: inherit;
198 font-weight: inherit;
203 text-decoration: underline;
215 * Headings, body text, lists, code, and more for a versatile and durable typography system
216 * ---------------------------------------------------------------------------------------- */
220 .table .tr.cbi-section-table-descr .th {
300 text-transform: uppercase;
304 margin: 0 0 18px 25px;
351 border-bottom: 1px solid #eee;
361 font-weight: inherit;
362 line-height: inherit;
365 small { font-size: 0.9em }
375 font-family: Monaco, Andale Mono, Courier New, monospace;
381 background-color: #fee9cc;
382 color: rgba(0, 0, 0, 0.75);
387 background-color: #f5f5f5;
393 border: 1px solid #ccc;
394 border: 1px solid rgba(0, 0, 0, 0.15);
397 white-space: pre-wrap;
398 word-wrap: break-word;
402 * Base styles for various input types, form layouts, and states
403 * ------------------------------------------------------------- */
419 *padding: 0 0 5px 0px;
426 form .cbi-tab-descr {
437 form .clearfix:before, form .clearfix:after,
438 form .cbi-value:before, form .cbi-value:after {
444 form .clearfix:after,
445 form .cbi-value:after {
453 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
460 form .cbi-value-field {
464 form .cbi-value label.cbi-value-title {
474 input[type=checkbox], input[type=radio] {
483 display: inline-block;
490 border: 1px solid #ccc;
492 box-sizing: border-box;
504 box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.1);
507 input[type=checkbox], input[type=radio] {
520 background-color: #fff;
523 line-height: initial;
525 width: auto !important;
528 input[type=button], input[type=reset], input[type=submit] {
533 select, input[type=file] {
536 /* For IE7, add top margin to align select with labels */
541 background-color: #fff;
548 .td > input[type=text],
549 .td > input[type=password],
551 .td > .cbi-dropdown {
556 background-color: #fff;
559 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
567 ::-webkit-input-placeholder {
571 .btn, .cbi-button, input, textarea {
572 transition: border linear 0.2s, box-shadow linear 0.2s;
573 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
576 .btn:hover, .cbi-button:hover,
577 input:focus, textarea:focus {
579 border-color: rgba(82, 168, 236, 0.8) !important;
580 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
581 text-decoration: none;
584 input[type=file]:focus, input[type=checkbox]:focus, select:focus {
586 outline: 1px dotted #666;
595 background-color: #f5f5f5;
597 pointer-events: none;
603 pointer-events: auto;
608 .cbi-section-create {
609 padding: 0 0 10px 10px;
612 .cbi-section-create {
614 display: inline-flex;
618 .cbi-section-create > * {
623 .cbi-section-create > * > input {
631 padding: 17px 20px 18px 17px;
632 border-top: 1px solid #ddd;
633 border-radius: 0 0 3px 3px;
637 .actions .secondary-action,
638 .cbi-page-actions .secondary-action{
642 .actions .secondary-action a,
643 .cbi-page-actions .secondary-action a {
647 .actions .secondary-action a:hover,
648 .cbi-page-actions .secondary-action a:hover {
649 text-decoration: underline;
652 .cbi-page-actions > form {
657 .help-inline, .help-block {
680 * Tables for, you guessed it, tabular data
681 * ---------------------------------------- */
682 .tr { display: table-row; }
683 .table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
684 .table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
692 border-collapse: collapse;
696 .table .th, .table .td {
698 vertical-align: middle; /* Fixme */
699 padding: 10px 10px 9px;
704 .table .tr:first-child .th {
710 .table .td, .table .th {
711 border-top: 1px solid #ddd;
715 height: calc(3em + 20px);
718 .tr.placeholder > .td {
728 * Repeatable UI elements outside the base styles provided from the scaffolding
729 * ---------------------------------------------------------------------------- */
743 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
746 header h3 a:hover, header .brand:hover, header ul .active > a {
747 background-color: #333;
748 background-color: rgba(255, 255, 255, 0.05);
750 text-decoration: none;
757 header h3 a, header .brand {
760 padding: 8px 20px 12px;
774 background-color: #222;
775 background-repeat: repeat-x;
776 background-image: linear-gradient(to bottom, #333333, #222222);
777 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
781 header div > ul, .nav {
789 header div > ul > li, .nav > li {
794 header div > ul a, .nav a {
797 padding: 10px 10px 11px;
799 text-decoration: none;
802 header div > ul a:hover, .nav a:hover {
804 text-decoration: none;
807 header div > ul .active > a, .nav .active > a {
808 background-color: #222;
809 background-color: rgba(0, 0, 0, 0.5);
812 header div > ul.secondary-nav, .nav.secondary-nav {
818 header div > ul.secondary-nav .menu-dropdown,
819 .nav.secondary-nav .menu-dropdown,
820 header div > ul.secondary-nav .dropdown-menu,
821 .nav.secondary-nav .dropdown-menu {
826 header div > ul a.menu:hover,
828 header div > ul li.open .menu,
830 header div > ul .dropdown-toggle:hover,
831 .nav .dropdown-toggle:hover,
832 header div > ul .dropdown.open .dropdown-toggle,
833 .nav .dropdown.open .dropdown-toggle {
835 background: rgba(255, 255, 255, 0.05);
838 header div > ul .menu-dropdown,
840 header div > ul .dropdown-menu,
841 .nav .dropdown-menu {
842 background-color: #333;
845 header div > ul .menu-dropdown a.menu,
846 .nav .menu-dropdown a.menu,
847 header div > ul .dropdown-menu a.menu,
848 .nav .dropdown-menu a.menu,
849 header div > ul .menu-dropdown .dropdown-toggle,
850 .nav .menu-dropdown .dropdown-toggle,
851 header div > ul .dropdown-menu .dropdown-toggle,
852 .nav .dropdown-menu .dropdown-toggle {
856 header div > ul .menu-dropdown a.menu.open,
857 .nav .menu-dropdown a.menu.open,
858 header div > ul .dropdown-menu a.menu.open,
859 .nav .dropdown-menu a.menu.open,
860 header div > ul .menu-dropdown .dropdown-toggle.open,
861 .nav .menu-dropdown .dropdown-toggle.open,
862 header div > ul .dropdown-menu .dropdown-toggle.open,
863 .nav .dropdown-menu .dropdown-toggle.open {
865 background: rgba(255, 255, 255, 0.05);
868 header div > ul .menu-dropdown li a,
869 .nav .menu-dropdown li a,
870 header div > ul .dropdown-menu li a,
871 .nav .dropdown-menu li a {
873 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
876 header div > ul .menu-dropdown li a:hover,
877 .nav .menu-dropdown li a:hover,
878 header div > ul .dropdown-menu li a:hover,
879 .nav .dropdown-menu li a:hover {
880 background-color: #191919;
881 background-repeat: repeat-x;
882 background-image: linear-gradient(to bottom, #292929, #191919);
886 header div > ul .menu-dropdown .active a,
887 .nav .menu-dropdown .active a,
888 header div > ul .dropdown-menu .active a,
889 .nav .dropdown-menu .active a {
893 header div > ul .menu-dropdown .divider,
894 .nav .menu-dropdown .divider,
895 header div > ul .dropdown-menu .divider,
896 .nav .dropdown-menu .divider {
897 background-color: #222;
901 header ul .menu-dropdown li a, header ul .dropdown-menu li a {
909 a.menu:after, .dropdown-toggle:after {
912 display: inline-block;
914 text-indent: -99999px;
918 border-left: 4px solid transparent;
919 border-right: 4px solid transparent;
920 border-top: 4px solid #fff;
924 .menu-dropdown, .dropdown-menu {
925 background-color: #fff;
939 border-color: rgba(0, 0, 0, 0.2);
941 border-width: 0 1px 1px;
942 border-radius: 0 0 6px 6px;
943 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
944 background-clip: padding-box;
947 .menu-dropdown li, .dropdown-menu li {
950 background-color: transparent;
953 .menu-dropdown .divider, .dropdown-menu .divider {
957 background-color: #eee;
958 border-bottom: 1px solid #fff;
961 header .dropdown-menu a, .dropdown-menu a {
968 text-shadow: 0 1px 0 #fff;
971 header .dropdown-menu a:hover,
972 .dropdown-menu a:hover,
973 header .dropdown-menu a.hover,
974 .dropdown-menu a.hover {
975 background-color: #ddd;
976 background-repeat: repeat-x;
977 background-image: linear-gradient(to bottom, #eee, #ddd);
979 text-decoration: none;
980 box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
984 .dropdown.open .menu,
985 .open .dropdown-toggle,
986 .dropdown.open .dropdown-toggle {
989 background: rgba(0, 0, 0, 0.3);
992 .open .menu-dropdown,
993 .dropdown.open .menu-dropdown,
994 .open .dropdown-menu,
995 .dropdown.open .dropdown-menu {
999 .dropdown:hover ul.dropdown-menu {
1003 .dropdown-menu .dropdown-menu {
1012 .tabs, .cbi-tabmenu {
1020 .cbi-tabmenu:before,
1022 .cbi-tabmenu:after {
1028 .tabs:after, .cbi-tabmenu:after {
1032 .tabs > li, .cbi-tabmenu > li {
1036 .tabs > li > a, .cbi-tabmenu > li > a {
1043 border-style: solid;
1044 border-width: 0 0 1px;
1050 margin-bottom: -1px;
1057 .cbi-tabmenu.map > li {
1062 .cbi-tabcontainer > fieldset.cbi-section[id] > legend {
1067 .cbi-tabmenu > li > a {
1071 border: 1px solid transparent;
1072 border-radius: 4px 4px 0 0;
1075 .tabs > li > a:hover,
1076 .cbi-tabmenu > li > a:hover {
1077 text-decoration: none;
1078 background-color: #eee;
1079 border-color: #eee #eee #ddd;
1082 .tabs .active > a, .tabs .active > a:hover,
1083 .cbi-tabmenu .active > a, .cbi-tabmenu .active > a:hover,
1084 .cbi-tab > a:link, .cbi-tab > a:hover {
1086 background-color: #fff;
1087 border: 1px solid #ddd;
1088 border-bottom-color: transparent;
1092 .tabs .menu-dropdown, .tabs .dropdown-menu,
1093 .cbi-tabmenu .menu-dropdown, .cbi-tabmenu .dropdown-menu {
1096 border-radius: 0 6px 6px 6px;
1099 .tabs a.menu:after, .tabs .dropdown-toggle:after,
1100 .cbi-tabmenu a.menu:after, .cbi-tabmenu .dropdown-toggle:after {
1101 border-top-color: #999;
1106 .tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle,
1107 .cbi-tabmenu li.open.menu .menu, .cbi-tabmenu .open.dropdown .dropdown-toggle {
1111 .tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after,
1112 .cbi-tabmenu li.open a.menu:after, .cbi-tabmenu .dropdown.open .dropdown-toggle:after {
1113 border-top-color: #555;
1116 .tab-content > .tab-pane,
1117 .tab-content > div {
1121 .tab-content > .active {
1128 background-color: #f5f5f5;
1129 background-repeat: repeat-x;
1130 background-image: linear-gradient(to bottom, #fff, #f5f5f5);
1131 border: 1px solid #ddd;
1133 box-shadow: inset 0 1px 0 #fff;
1138 text-shadow: 0 1px 0 #fff;
1141 .breadcrumb .divider {
1146 .breadcrumb .active a {
1153 border-top: 1px solid #eee;
1157 .alert-message.danger,
1159 .alert-message.danger:hover,
1161 .alert-message.error,
1163 .alert-message.error:hover,
1165 .alert-message.success,
1167 .alert-message.success:hover,
1169 .alert-message.info,
1171 .alert-message.info:hover {
1175 .btn .close, .alert-message .close {
1176 font-family: Arial, sans-serif;
1181 .alert-message.danger,
1183 .alert-message.error {
1184 background: linear-gradient(to bottom, #ee5f5b, #c43c35) repeat-x;
1185 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1186 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1189 .btn.success, .alert-message.success {
1190 background: linear-gradient(to bottom, #62c462, #57a957) repeat-x;
1191 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1192 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1195 .btn.info, .alert-message.info {
1196 background: linear-gradient(to bottom, #5bc0de, #339bb9) repeat-x;
1197 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1198 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1201 .alert-message.notice {
1202 background: linear-gradient(to bottom, #efefef, #fefefe) repeat-x;
1203 text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
1204 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1210 display: inline-block;
1211 background: linear-gradient(#fff, #fff 25%, #e6e6e6) no-repeat;
1212 padding: 5px 14px 6px;
1213 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1216 line-height: normal;
1217 border: 1px solid #ccc;
1218 border-bottom-color: #bbb;
1220 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1225 outline: 1px dotted #666;
1229 .cbi-value-error input {
1234 .cbi-button-positive,
1235 .cbi-button-fieldadd,
1242 .cbi-button-neutral,
1243 .cbi-button-download,
1256 border-color: #0069d6;
1260 .cbi-button-negative,
1261 .cbi-section-remove .cbi-button,
1263 .cbi-button-remove {
1268 .cbi-page-actions::after {
1274 .cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-save):not(.cbi-button-reset) {
1280 .cbi-button-action.important,
1281 .cbi-page-actions .cbi-button-apply,
1282 .cbi-section-actions .cbi-button-edit {
1284 background: linear-gradient(to bottom, #0069d6, #0049d6) no-repeat;
1285 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1288 .cbi-button-positive.important,
1289 .cbi-page-actions .cbi-button-save {
1291 background: linear-gradient(to bottom, #4a4, #484) no-repeat;
1292 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1295 .cbi-button-negative.important {
1297 background: linear-gradient(to bottom, #c44, #c00) no-repeat;
1298 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1301 .cbi-page-actions .cbi-button-apply + .cbi-button-save {
1302 background: linear-gradient(#fff, #fff 25%, #e6e6e6);
1303 text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.75);
1308 border: 1px solid #ccc;
1310 display: inline-flex;
1314 background: linear-gradient(#fff 0%, #e9e8e6 100%);
1319 .cbi-dropdown:focus {
1320 outline: 2px solid #4b6e9b;
1323 .cbi-dropdown > ul {
1324 margin: 0 !important;
1333 .cbi-dropdown > ul.preview {
1337 .cbi-dropdown > .open,
1338 .cbi-dropdown > .more {
1342 flex-direction: column;
1343 justify-content: center;
1349 .cbi-dropdown > .more,
1350 .cbi-dropdown > ul > li[placeholder] {
1353 text-shadow: 1px 1px 0px #fff;
1357 .cbi-dropdown > ul > li {
1360 white-space: nowrap;
1362 text-overflow: ellipsis;
1365 align-items: center;
1371 .cbi-dropdown > ul > li .hide-open { display: block; display: initial; }
1372 .cbi-dropdown > ul > li .hide-close { display: none; }
1374 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1375 border-left: 1px solid #ccc;
1378 .cbi-dropdown[empty] > ul {
1382 .cbi-dropdown > ul > li > form {
1386 pointer-events: none;
1389 .cbi-dropdown > ul > li img {
1390 vertical-align: middle;
1391 margin-right: .25em;
1394 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1398 .cbi-dropdown > ul > li input[type="text"] {
1402 .cbi-dropdown[open] {
1406 .cbi-dropdown[open] > ul.dropdown {
1408 background: #f6f6f5;
1409 border: 1px solid #918e8c;
1410 box-shadow: 0 0 4px #918e8c;
1418 .cbi-dropdown > ul > li[display],
1419 .cbi-dropdown[open] > ul.preview,
1420 .cbi-dropdown[open] > ul.dropdown > li,
1421 .cbi-dropdown[multiple] > ul > li > label,
1422 .cbi-dropdown[multiple][open] > ul.dropdown > li,
1423 .cbi-dropdown[multiple][more] > .more,
1424 .cbi-dropdown[multiple][empty] > .more {
1429 .cbi-dropdown[empty] > ul > li,
1430 .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
1431 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1435 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
1436 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block; display: initial; }
1438 .cbi-dropdown[open] > ul.dropdown > li {
1439 border-bottom: 1px solid #ccc;
1442 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1443 background: #b0d0f0;
1446 .cbi-dropdown[open] > ul.dropdown > li.focus {
1447 background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
1450 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1452 border-bottom: none;
1455 .cbi-dropdown[disabled] {
1456 pointer-events: none;
1460 input[type="text"] + .cbi-button,
1461 input[type="password"] + .cbi-button,
1462 select + .cbi-button {
1463 border-radius: 0 3px 3px 0;
1465 margin: 0 0 1px -2px;
1467 vertical-align: top;
1474 select + .cbi-button {
1475 border-left-color: transparent;
1482 .cbi-title-ref::after {
1486 .cbi-tooltip-container {
1495 transition: opacity .25s ease-out;
1498 .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
1501 transition: opacity .25s ease-in;
1504 .zonebadge .cbi-tooltip {
1506 background: inherit;
1507 margin: -1.6em 0 0 -5px;
1509 pointer-events: none;
1510 box-shadow: 0 0 3px #444;
1513 .zonebadge .cbi-tooltip > * {
1522 .zone-forwards > * {
1527 .zone-forwards > span {
1532 .zone-forwards .zone-src,
1533 .zone-forwards .zone-dest {
1535 flex-direction: column;
1538 .btn.active, .btn:active {
1539 box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1544 background-image: none;
1551 background-image: none;
1558 line-height: normal;
1559 padding: 9px 14px 9px;
1564 padding: 7px 9px 7px;
1568 button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
1578 line-height: 13.5px;
1579 text-shadow: 0 1px 0 #fff;
1585 text-decoration: none;
1592 margin-bottom: 18px;
1594 background: linear-gradient(to bottom, #fceec1, #eedc94) repeat-x;
1595 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1596 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1597 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
1599 border-style: solid;
1601 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1604 .alert-message .close {
1614 .alert-message.danger p a,
1615 .alert-message.error p a,
1616 .alert-message.success p a,
1617 .alert-message.info p a {
1629 .alert-message div {
1636 padding: 1px 3px 2px;
1639 color: #fff !important;
1640 text-transform: uppercase;
1641 white-space: nowrap;
1642 background-color: #bfbfbf;
1653 text-decoration: none;
1657 background-color: #c43c35;
1661 background-color: #f89406;
1665 background-color: #46a546;
1669 background-color: #62cffc;
1672 /* LuCI specific items */
1673 .hidden { display: none }
1680 border: 1px solid #ccc;
1681 border-radius: 3px 3px 3px 3px;
1683 display: inline-block;
1692 form.inline { display: inline; margin-bottom: 0; }
1694 header .pull-right { padding-top: 8px; }
1696 #modemenu li:last-child span.divider { display: none }
1698 #syslog { width: 100%; }
1700 .cbi-section-table .tr:hover .td,
1701 .cbi-section-table .tr:hover .th,
1702 .cbi-section-table .tr:hover::before {
1703 background-color: #f5f5f5;
1706 .cbi-section-table .tr.cbi-section-table-descr .th {
1707 font-weight: normal;
1710 .cbi-section-table-titles.named::before,
1711 .cbi-section-table-descr.named::before,
1712 .cbi-section-table-row[data-title]::before {
1713 content: attr(data-title) " ";
1714 display: table-cell;
1715 padding: 10px 10px 9px;
1718 vertical-align: middle;
1721 .cbi-section-table-titles.named::before,
1722 .cbi-section-table-descr.named::before,
1723 .cbi-section-table-row[data-title]::before {
1724 border-top: 1px solid #ddd;
1727 .left { text-align: left !important; }
1728 .right { text-align: right !important; }
1729 .center { text-align: center !important; }
1730 .top { vertical-align: top !important; }
1731 .middle { vertical-align: middle !important; }
1732 .bottom { vertical-align: bottom !important; }
1734 .cbi-value-field { line-height: 1.5em; }
1736 .cbi-value-field input[type=checkbox],
1737 .cbi-value-field input[type=radio] {
1743 .cbi-value-field table td {
1747 .table.cbi-section-table input[type="password"],
1748 .table.cbi-section-table input[type="text"],
1749 .table.cbi-section-table textarea,
1750 .table.cbi-section-table select {
1754 .table.cbi-section-table .td.cbi-section-table-cell {
1755 white-space: nowrap;
1759 .table.cbi-section-table .td.cbi-section-table-cell select {
1763 .td.cbi-section-actions {
1765 vertical-align: middle;
1768 .td.cbi-section-actions > * {
1772 .td.cbi-section-actions > * > *,
1773 .td.cbi-section-actions > * > form > * {
1778 .td.cbi-section-actions > * > form {
1779 display: inline-flex;
1783 .table.valign-middle .td {
1784 vertical-align: middle;
1789 .tr.cbi-section-table-titles {
1790 background: #f9f9f9;
1793 .cbi-value-description {
1794 background-image: url(/luci-static/resources/cbi/help.gif);
1795 background-position: .25em .2em;
1796 background-repeat: no-repeat;
1797 margin: .25em 0 0 0;
1798 padding: 0 0 0 1.7em;
1801 .cbi-section-error {
1802 border: 1px solid #f00;
1804 background-color: #fce6e6;
1806 margin-bottom: 18px;
1809 .cbi-section-error ul { margin: 0 0 0 20px; }
1811 .cbi-section-error ul li {
1817 background-color: #fff;
1818 border: 1px solid #ccc;
1821 white-space: nowrap;
1822 background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
1823 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1825 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1826 display: inline-flex;
1827 flex-direction: column;
1832 .ifacebox .ifacebox-head {
1833 border-bottom: 1px solid #ccc;
1838 .ifacebox .ifacebox-head.active {
1839 background: #90c0e0;
1842 .ifacebox .ifacebox-body {
1847 display: inline-block;
1848 flex-direction: row;
1849 white-space: nowrap;
1850 background-color: #fff;
1851 border: 1px solid #ccc;
1853 background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
1854 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1856 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1864 vertical-align: middle;
1867 .ifacebadge-active {
1872 .network-status-table {
1877 .network-status-table .ifacebox {
1882 .network-status-table .ifacebox-body {
1884 flex-direction: column;
1889 .network-status-table .ifacebox-body > * {
1893 .network-status-table .ifacebox-body > span {
1897 .network-status-table .ifacebox-body > div {
1903 #dsl_status_table .ifacebox-body > span > strong {
1904 display: inline-block;
1909 .network-status-table .ifacebox-body .ifacebadge {
1910 display: inline-flex;
1918 .ifacebadge.large > * {
1925 display: inline-block;
1926 white-space: nowrap;
1928 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1932 .zonebadge > strong {
1934 display: inline-block;
1941 .zonebadge > .ifacebadge {
1946 border: 1px dashed #aaa;
1953 .td.cbi-value-field var {
1959 font-family: monospace;
1962 .uci-change-list ins,
1963 .uci-change-legend-label ins {
1964 text-decoration: none;
1965 border: 1px solid #0f0;
1966 background-color: #cfc;
1971 .uci-change-list del,
1972 .uci-change-legend-label del {
1973 text-decoration: none;
1974 border: 1px solid #f00;
1975 background-color: #fcc;
1981 .uci-change-list var,
1982 .uci-change-legend-label var {
1983 text-decoration: none;
1984 border: 1px solid #ccc;
1985 background-color: #eee;
1993 .uci-change-list var ins,
1994 .uci-change-list var del {
2002 .uci-change-legend {
2006 .uci-change-legend-label {
2011 .uci-change-legend-label > ins,
2012 .uci-change-legend-label > del,
2013 .uci-change-legend-label > var {
2021 .uci-change-legend-label var ins,
2022 .uci-change-legend-label var del {
2027 html body.apply-overlay-active {
2028 height: calc(100vh - 63px);