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 * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
21 box-sizing: border-box;
24 abbr[title], acronym[title] {
25 border-bottom: 1px dotted;
31 border-collapse: collapse;
41 -webkit-text-size-adjust: 100%;
42 -ms-text-size-adjust: 100%;
64 vertical-align: baseline;
76 -ms-interpolation-mode: bicubic;
86 box-sizing: border-box;
87 vertical-align: baseline;
91 button::-moz-focus-inner, input::-moz-focus-inner {
99 input[type="submit"] {
101 -webkit-appearance: button;
102 word-break: break-all;
106 input[type="button"][disabled],
107 input[type="reset"][disabled],
108 input[type="submit"][disabled] {
112 input[type="search"] {
113 -webkit-appearance: textfield;
114 box-sizing: content-box;
117 input[type="search"]::-webkit-search-decoration {
118 -webkit-appearance: none;
128 * Basic and global styles for generating a grid system, structural layout, and page templates
129 * ------------------------------------------------------------------------------------------- */
131 background-color: #fff;
132 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
137 padding: 58px 5px 5px 5px;
148 .container:before, .container:after {
160 text-decoration: none;
161 line-height: inherit;
162 font-weight: inherit;
167 text-decoration: underline;
183 * Headings, body text, lists, code, and more for a versatile and durable typography system
184 * ---------------------------------------------------------------------------------------- */
188 .table .tr.cbi-section-table-descr .th {
268 text-transform: uppercase;
272 margin: 0 0 18px 25px;
319 border-bottom: 1px solid #eee;
329 font-weight: inherit;
330 line-height: inherit;
333 small { font-size: 0.9em }
343 font-family: Monaco, Andale Mono, Courier New, monospace;
349 background-color: #fee9cc;
350 color: rgba(0, 0, 0, 0.75);
355 background-color: #f5f5f5;
361 border: 1px solid #ccc;
362 border: 1px solid rgba(0, 0, 0, 0.15);
365 white-space: pre-wrap;
366 word-wrap: break-word;
370 * Base styles for various input types, form layouts, and states
371 * ------------------------------------------------------------- */
389 form .cbi-tab-descr {
400 form .clearfix:before, form .clearfix:after,
401 .cbi-value:before, .cbi-value:after {
407 form .clearfix:after,
417 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
428 .cbi-value label.cbi-value-title {
438 input[type=checkbox], input[type=radio] {
442 label > input[type="checkbox"],
443 label > input[type="radio"] {
444 vertical-align: bottom;
453 display: inline-block;
459 border: 1px solid #ccc;
477 display: inline-flex;
478 flex-direction: column;
481 .cbi-dynlist > .item {
483 box-shadow: 0 0 2px #ccc;
485 padding: 2px 2em 2px 4px;
486 border: 1px solid #ccc;
489 pointer-events: none;
492 .cbi-dynlist > .item::after {
495 display: inline-flex;
501 border: 1px solid #ccc;
502 border-radius: 0 3px 3px 0;
505 pointer-events: auto;
508 .cbi-dynlist > .add-item {
512 .cbi-dynlist > .add-item > input,
513 .cbi-dynlist > .add-item > button {
516 text-overflow: ellipsis;
523 box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.1);
526 input[type=checkbox], input[type=radio] {
539 background-color: #fff;
542 line-height: initial;
544 width: auto !important;
547 input[type=button], input[type=reset], input[type=submit] {
554 background-color: #fff;
558 height: auto !important;
561 .td > input[type=text],
562 .td > input[type=password],
565 .cbi-dynlist > .add-item > .cbi-dropdown {
570 background-color: #fff;
573 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
581 ::-webkit-input-placeholder {
585 .item::after, .btn, .cbi-button, input, button, textarea {
586 transition: border linear 0.2s, box-shadow linear 0.2s;
587 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
591 .btn:hover, .cbi-button:hover, button:hover,
592 input:focus, textarea:focus {
594 border-color: rgba(82, 168, 236, 0.8) !important;
595 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
596 text-decoration: none;
599 input[type=file]:focus, input[type=checkbox]:focus, select:focus {
601 outline: 1px dotted #666;
612 background-color: #f5f5f5;
614 pointer-events: none;
620 pointer-events: auto;
625 .cbi-section-create {
626 padding: 0 0 10px 10px;
629 .cbi-section-create {
631 display: inline-flex;
635 .cbi-section-create > * {
640 .cbi-section-create > * > input {
648 padding: 17px 20px 18px 17px;
649 border-top: 1px solid #ddd;
650 border-radius: 0 0 3px 3px;
654 .actions .secondary-action,
655 .cbi-page-actions .secondary-action{
659 .actions .secondary-action a,
660 .cbi-page-actions .secondary-action a {
664 .actions .secondary-action a:hover,
665 .cbi-page-actions .secondary-action a:hover {
666 text-decoration: underline;
669 .cbi-page-actions > form {
674 .help-inline, .help-block {
697 * Tables for, you guessed it, tabular data
698 * ---------------------------------------- */
699 .tr { display: table-row; }
700 .table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
701 .table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
709 border-collapse: collapse;
713 .table .th, .table .td {
715 vertical-align: middle; /* Fixme */
716 padding: 10px 10px 9px;
721 .table .tr:first-child .th {
727 .table .td, .table .th {
728 border-top: 1px solid #ddd;
732 height: calc(3em + 20px);
735 .tr.placeholder > .td {
745 .tr.drag-over-below {
746 border: 2px solid #0069d6;
747 border-width: 2px 0 0 0;
750 .tr.drag-over-below {
751 border-width: 0 0 2px 0;
755 * Repeatable UI elements outside the base styles provided from the scaffolding
756 * ---------------------------------------------------------------------------- */
770 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
773 header h3 a:hover, header .brand:hover, header ul .active > a {
774 background-color: #333;
775 background-color: rgba(255, 255, 255, 0.05);
777 text-decoration: none;
784 header h3 a, header .brand {
787 padding: 8px 20px 12px;
801 background-color: #222;
802 background-repeat: repeat-x;
803 background-image: linear-gradient(to bottom, #333333, #222222);
804 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
808 header div > ul, .nav {
816 header div > ul > li, .nav > li {
821 header div > ul a, .nav a {
824 padding: 10px 10px 11px;
826 text-decoration: none;
829 header div > ul a:hover, .nav a:hover {
831 text-decoration: none;
834 header div > ul .active > a, .nav .active > a {
835 background-color: #222;
836 background-color: rgba(0, 0, 0, 0.5);
839 header div > ul.secondary-nav, .nav.secondary-nav {
845 header div > ul.secondary-nav .menu-dropdown,
846 .nav.secondary-nav .menu-dropdown,
847 header div > ul.secondary-nav .dropdown-menu,
848 .nav.secondary-nav .dropdown-menu {
853 header div > ul a.menu:hover,
855 header div > ul li.open .menu,
857 header div > ul .dropdown-toggle:hover,
858 .nav .dropdown-toggle:hover,
859 header div > ul .dropdown.open .dropdown-toggle,
860 .nav .dropdown.open .dropdown-toggle {
862 background: rgba(255, 255, 255, 0.05);
865 header div > ul .menu-dropdown,
867 header div > ul .dropdown-menu,
868 .nav .dropdown-menu {
869 background-color: #333;
872 header div > ul .menu-dropdown a.menu,
873 .nav .menu-dropdown a.menu,
874 header div > ul .dropdown-menu a.menu,
875 .nav .dropdown-menu a.menu,
876 header div > ul .menu-dropdown .dropdown-toggle,
877 .nav .menu-dropdown .dropdown-toggle,
878 header div > ul .dropdown-menu .dropdown-toggle,
879 .nav .dropdown-menu .dropdown-toggle {
883 header div > ul .menu-dropdown a.menu.open,
884 .nav .menu-dropdown a.menu.open,
885 header div > ul .dropdown-menu a.menu.open,
886 .nav .dropdown-menu a.menu.open,
887 header div > ul .menu-dropdown .dropdown-toggle.open,
888 .nav .menu-dropdown .dropdown-toggle.open,
889 header div > ul .dropdown-menu .dropdown-toggle.open,
890 .nav .dropdown-menu .dropdown-toggle.open {
892 background: rgba(255, 255, 255, 0.05);
895 header div > ul .menu-dropdown li a,
896 .nav .menu-dropdown li a,
897 header div > ul .dropdown-menu li a,
898 .nav .dropdown-menu li a {
900 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
903 header div > ul .menu-dropdown li a:hover,
904 .nav .menu-dropdown li a:hover,
905 header div > ul .dropdown-menu li a:hover,
906 .nav .dropdown-menu li a:hover {
907 background-color: #191919;
908 background-repeat: repeat-x;
909 background-image: linear-gradient(to bottom, #292929, #191919);
913 header div > ul .menu-dropdown .active a,
914 .nav .menu-dropdown .active a,
915 header div > ul .dropdown-menu .active a,
916 .nav .dropdown-menu .active a {
920 header div > ul .menu-dropdown .divider,
921 .nav .menu-dropdown .divider,
922 header div > ul .dropdown-menu .divider,
923 .nav .dropdown-menu .divider {
924 background-color: #222;
928 header ul .menu-dropdown li a, header ul .dropdown-menu li a {
936 a.menu:after, .dropdown-toggle:after {
939 display: inline-block;
941 text-indent: -99999px;
945 border-left: 4px solid transparent;
946 border-right: 4px solid transparent;
947 border-top: 4px solid #fff;
951 .menu-dropdown, .dropdown-menu {
952 background-color: #fff;
966 border-color: rgba(0, 0, 0, 0.2);
968 border-width: 0 1px 1px;
969 border-radius: 0 0 6px 6px;
970 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
971 background-clip: padding-box;
974 .menu-dropdown li, .dropdown-menu li {
977 background-color: transparent;
980 .menu-dropdown .divider, .dropdown-menu .divider {
984 background-color: #eee;
985 border-bottom: 1px solid #fff;
988 header .dropdown-menu a, .dropdown-menu a {
995 text-shadow: 0 1px 0 #fff;
998 header .dropdown-menu a:hover,
999 .dropdown-menu a:hover,
1000 header .dropdown-menu a.hover,
1001 .dropdown-menu a.hover {
1002 background-color: #ddd;
1003 background-repeat: repeat-x;
1004 background-image: linear-gradient(to bottom, #eee, #ddd);
1006 text-decoration: none;
1007 box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
1011 .dropdown.open .menu,
1012 .open .dropdown-toggle,
1013 .dropdown.open .dropdown-toggle {
1016 background: rgba(0, 0, 0, 0.3);
1019 .open .menu-dropdown,
1020 .dropdown.open .menu-dropdown,
1021 .open .dropdown-menu,
1022 .dropdown.open .dropdown-menu {
1026 .dropdown:hover ul.dropdown-menu {
1030 .dropdown-menu .dropdown-menu {
1039 .tabs, .cbi-tabmenu {
1040 margin: 0 -5px 18px;
1045 background: linear-gradient(#fff 28px, #ddd 28px);
1046 background-size: 1px 29px;
1047 background-position: left bottom;
1050 .tabs > li, .cbi-tabmenu > li {
1053 align-items: center;
1056 margin: 4px 2px 0 2px;
1058 border: 1px solid #ddd;
1059 border-bottom: none;
1060 border-radius: 4px 4px 0 0;
1064 .tabs > li > a, .cbi-tabmenu > li > a {
1066 white-space: nowrap;
1068 text-overflow: ellipsis;
1070 text-decoration: none;
1071 border-radius: 4px 4px 0 0;
1076 .tabs > li:not(.active):hover, .cbi-tabmenu > .cbi-tab-disabled:hover {
1077 background: linear-gradient(#fff 90%, #ddd 100%);
1080 .tabs > li:not(.active), .cbi-tabmenu > .cbi-tab-disabled {
1082 background: linear-gradient(#eee 90%, #ddd 100%);
1085 .cbi-tab-disabled[data-errors]::after {
1086 content: attr(data-errors);
1087 background: #c43c35;
1101 .cbi-tabmenu.map > li {
1106 .cbi-tabcontainer > fieldset.cbi-section[id] > legend {
1110 .tabs .menu-dropdown, .tabs .dropdown-menu {
1113 border-radius: 0 6px 6px 6px;
1116 .tabs a.menu:after, .tabs .dropdown-toggle:after {
1117 border-top-color: #999;
1122 .tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle {
1126 .tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after {
1127 border-top-color: #555;
1130 .tab-content > .tab-pane,
1131 .tab-content > div {
1135 .tab-content > .active {
1142 background-color: #f5f5f5;
1143 background-repeat: repeat-x;
1144 background-image: linear-gradient(to bottom, #fff, #f5f5f5);
1145 border: 1px solid #ddd;
1147 box-shadow: inset 0 1px 0 #fff;
1152 text-shadow: 0 1px 0 #fff;
1155 .breadcrumb .divider {
1160 .breadcrumb .active a {
1167 border-top: 1px solid #eee;
1176 background: rgba(0, 0, 0, 0.7);
1179 -webkit-overflow-scrolling: touch;
1180 transition: opacity .125s ease-in;
1192 align-items: center;
1195 box-shadow: 0 0 3px #444;
1196 padding: 1em 1em .5em 1em;
1203 line-height: normal;
1204 margin-bottom: .5em;
1210 white-space: pre-wrap;
1214 body.modal-overlay-active {
1219 body.modal-overlay-active #modal_overlay {
1223 visibility: visible;
1227 .alert-message.danger,
1229 .alert-message.danger:hover,
1231 .alert-message.error,
1233 .alert-message.error:hover,
1235 .alert-message.success,
1237 .alert-message.success:hover,
1239 .alert-message.info,
1241 .alert-message.info:hover,
1242 .cbi-tooltip.error, .cbi-tooltip.success, .cbi-tooltip.info {
1246 .btn .close, .alert-message .close {
1247 font-family: Arial, sans-serif;
1252 .alert-message.danger,
1254 .alert-message.error,
1255 .cbi-tooltip.error {
1256 background: linear-gradient(to bottom, #ee5f5b, #c43c35) repeat-x;
1257 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1258 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1261 .btn.success, .alert-message.success, .cbi-tooltip.success {
1262 background: linear-gradient(to bottom, #62c462, #57a957) repeat-x;
1263 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1264 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1267 .btn.info, .alert-message.info, .cbi-tooltip.info {
1268 background: linear-gradient(to bottom, #5bc0de, #339bb9) repeat-x;
1269 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1270 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1273 .alert-message.notice, .cbi-tooltip.notice {
1274 background: linear-gradient(to bottom, #efefef, #fefefe) repeat-x;
1275 text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
1276 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1283 display: inline-block;
1284 background: linear-gradient(#fff, #fff 25%, #e6e6e6) no-repeat;
1285 padding: 5px 14px 6px;
1286 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1289 line-height: normal;
1290 border: 1px solid #ccc;
1291 border-bottom-color: #bbb;
1293 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1298 outline: 1px dotted #666;
1302 .cbi-input-invalid.cbi-dropdown,
1303 .cbi-input-invalid.cbi-dropdown:not([open]) > ul > li,
1304 .cbi-value-error input {
1309 .cbi-button-positive,
1310 .cbi-button-fieldadd,
1317 .cbi-button-neutral,
1318 .cbi-button-download,
1331 border-color: #0069d6;
1335 .cbi-button-negative,
1336 .cbi-section-remove .cbi-button,
1338 .cbi-button-remove {
1343 .cbi-page-actions::after {
1349 .cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-save):not(.cbi-button-reset) {
1355 .cbi-button-action.important,
1356 .cbi-page-actions .cbi-button-apply,
1357 .cbi-section-actions .cbi-button-edit {
1359 background: linear-gradient(to bottom, #0069d6, #0049d6) no-repeat;
1360 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1363 .cbi-button-positive.important,
1364 .cbi-page-actions .cbi-button-save {
1366 background: linear-gradient(to bottom, #4a4, #484) no-repeat;
1367 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1370 .cbi-button-negative.important {
1372 background: linear-gradient(to bottom, #c44, #c00) no-repeat;
1373 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1376 .cbi-page-actions .cbi-button-apply + .cbi-button-save {
1377 background: linear-gradient(#fff, #fff 25%, #e6e6e6);
1378 text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.75);
1383 border: 1px solid #ccc;
1385 display: inline-flex;
1389 background: linear-gradient(#fff 0%, #e9e8e6 100%);
1394 .cbi-dynlist > .item:focus,
1395 .cbi-dropdown:focus {
1396 outline: 2px solid #4b6e9b;
1399 .cbi-dropdown > ul {
1400 margin: 0 !important;
1409 .cbi-dropdown > ul.preview {
1413 .cbi-dropdown > .open,
1414 .cbi-dropdown > .more {
1418 flex-direction: column;
1419 justify-content: center;
1425 .cbi-dropdown > .more,
1426 .cbi-dropdown > ul > li[placeholder] {
1429 text-shadow: 1px 1px 0px #fff;
1431 justify-content: center;
1434 .cbi-dropdown > ul > li {
1437 white-space: nowrap;
1439 text-overflow: ellipsis;
1442 align-items: center;
1448 .cbi-dropdown > ul > li .hide-open { display: block; display: initial; }
1449 .cbi-dropdown > ul > li .hide-close { display: none; }
1451 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1452 border-left: 1px solid #ccc;
1455 .cbi-dropdown[empty] > ul {
1459 .cbi-dropdown > ul > li > form {
1463 pointer-events: none;
1466 .cbi-dropdown > ul > li img {
1467 vertical-align: middle;
1468 margin-right: .25em;
1471 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1475 .cbi-dropdown > ul > li input[type="text"] {
1479 .cbi-dropdown[open] {
1483 .cbi-dropdown[open] > ul.dropdown {
1485 background: #f6f6f5;
1486 border: 1px solid #918e8c;
1487 box-shadow: 0 0 4px #918e8c;
1493 transition: max-height .125s ease-in;
1496 .cbi-dropdown > ul > li[display],
1497 .cbi-dropdown[open] > ul.preview,
1498 .cbi-dropdown[open] > ul.dropdown > li,
1499 .cbi-dropdown[multiple] > ul > li > label,
1500 .cbi-dropdown[multiple][open] > ul.dropdown > li,
1501 .cbi-dropdown[multiple][more] > .more,
1502 .cbi-dropdown[multiple][empty] > .more {
1507 .cbi-dropdown[empty] > ul > li,
1508 .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
1509 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1513 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
1514 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block; display: initial; }
1516 .cbi-dropdown[open] > ul.dropdown > li {
1517 border-bottom: 1px solid #ccc;
1520 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1521 background: #b0d0f0;
1524 .cbi-dropdown[open] > ul.dropdown > li.focus {
1525 background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
1528 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1530 border-bottom: none;
1533 .cbi-dropdown[open] > ul.dropdown > li[unselectable] {
1537 .cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
1541 .cbi-dropdown[disabled] {
1542 pointer-events: none;
1546 input[type="text"] + .cbi-button,
1547 input[type="password"] + .cbi-button,
1548 select + .cbi-button {
1549 border-radius: 0 3px 3px 0;
1553 vertical-align: top;
1559 select + .cbi-button {
1560 border-left-color: transparent;
1567 .cbi-title-ref::after {
1571 .cbi-tooltip-container {
1579 box-shadow: 0 0 2px #ccc;
1585 transition: opacity .25s ease-in;
1588 .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
1591 transition: opacity .25s ease-in;
1595 border: 1px solid #ccc;
1601 background: #f9f9f9;
1604 .cbi-progressbar > div {
1605 background: #90c0e0;
1607 transition: width .25s ease-in;
1611 .cbi-progressbar::after {
1618 text-shadow: 0 0 2px #fff;
1619 content: attr(title);
1622 text-overflow: ellipsis;
1625 .zonebadge .cbi-tooltip {
1627 background: inherit;
1628 margin: -1.6em 0 0 -5px;
1630 pointer-events: none;
1631 box-shadow: 0 0 3px #444;
1634 .zonebadge .cbi-tooltip > * {
1643 .zone-forwards > * {
1648 .zone-forwards > span {
1653 .zone-forwards .zone-src,
1654 .zone-forwards .zone-dest {
1656 flex-direction: column;
1659 .btn.active, .btn:active {
1660 box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1665 background-image: none;
1672 background-image: none;
1679 line-height: normal;
1680 padding: 9px 14px 9px;
1685 padding: 7px 9px 7px;
1689 button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
1699 line-height: 13.5px;
1700 text-shadow: 0 1px 0 #fff;
1706 text-decoration: none;
1712 padding: .5em .5em .25em .5em;
1713 margin-bottom: .5em;
1715 background: linear-gradient(to bottom, #fceec1, #eedc94) repeat-x;
1716 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1717 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1718 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
1720 border-style: solid;
1722 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1725 .alert-message .close {
1738 line-height: inherit;
1739 background: transparent;
1744 .alert-message button {
1749 padding: 1px 3px 2px;
1752 color: #fff !important;
1753 text-transform: uppercase;
1754 white-space: nowrap;
1755 background-color: #bfbfbf;
1766 text-decoration: none;
1770 background-color: #c43c35;
1774 background-color: #f89406;
1778 background-color: #46a546;
1782 background-color: #62cffc;
1785 /* LuCI specific items */
1786 .hidden { display: none }
1792 form.inline { display: inline; margin-bottom: 0; }
1794 header .pull-right { padding-top: 8px; }
1796 #modemenu li:last-child span.divider { display: none }
1798 #syslog { width: 100%; }
1800 .cbi-section-table .tr:hover .td,
1801 .cbi-section-table .tr:hover .th,
1802 .cbi-section-table .tr:hover::before {
1803 background-color: #f5f5f5;
1806 .cbi-section-table .tr.cbi-section-table-descr .th {
1807 font-weight: normal;
1810 .cbi-section-table-titles.named::before,
1811 .cbi-section-table-descr.named::before,
1812 .cbi-section-table-row[data-title]::before {
1813 content: attr(data-title) " ";
1814 display: table-cell;
1815 padding: 10px 10px 9px;
1818 vertical-align: middle;
1821 .cbi-section-table-titles.named::before,
1822 .cbi-section-table-descr.named::before,
1823 .cbi-section-table-row[data-title]::before {
1824 border-top: 1px solid #ddd;
1827 .left { text-align: left !important; }
1828 .right { text-align: right !important; }
1829 .center { text-align: center !important; }
1830 .top { vertical-align: top !important; }
1831 .middle { vertical-align: middle !important; }
1832 .bottom { vertical-align: bottom !important; }
1834 .cbi-value-field { line-height: 1.5em; }
1836 .cbi-value-field input[type=checkbox],
1837 .cbi-value-field input[type=radio] {
1843 .cbi-value-field table td {
1847 .table.cbi-section-table input[type="password"],
1848 .table.cbi-section-table input[type="text"],
1849 .table.cbi-section-table textarea,
1850 .table.cbi-section-table select {
1854 .table.cbi-section-table .td.cbi-section-table-cell {
1855 white-space: nowrap;
1859 .table.cbi-section-table .td.cbi-section-table-cell select {
1863 .td.cbi-section-actions {
1865 vertical-align: middle;
1868 .td.cbi-section-actions > * {
1872 .td.cbi-section-actions > * > *,
1873 .td.cbi-section-actions > * > form > * {
1878 .td.cbi-section-actions > * > form {
1879 display: inline-flex;
1883 .table.valign-middle .td {
1884 vertical-align: middle;
1889 .tr.cbi-section-table-titles {
1890 background: #f9f9f9;
1893 .cbi-value-description {
1894 background-image: url(/luci-static/resources/cbi/help.gif);
1895 background-position: .25em .2em;
1896 background-repeat: no-repeat;
1897 margin: .25em 0 0 0;
1898 padding: 0 0 0 1.7em;
1901 .cbi-section-error {
1902 border: 1px solid #f00;
1904 background-color: #fce6e6;
1906 margin-bottom: 18px;
1909 .cbi-section-error ul { margin: 0 0 0 20px; }
1911 .cbi-section-error ul li {
1917 background-color: #fff;
1918 border: 1px solid #ccc;
1921 white-space: nowrap;
1922 background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
1923 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1925 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1926 display: inline-flex;
1927 flex-direction: column;
1932 .ifacebox .ifacebox-head {
1933 border-bottom: 1px solid #ccc;
1938 .ifacebox .ifacebox-head.active {
1939 background: #90c0e0;
1942 .ifacebox .ifacebox-body {
1947 display: inline-block;
1948 flex-direction: row;
1949 white-space: nowrap;
1950 background-color: #fff;
1951 border: 1px solid #ccc;
1953 background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
1954 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1956 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1964 vertical-align: middle;
1967 .ifacebadge-active {
1972 .network-status-table {
1977 .network-status-table .ifacebox {
1982 .network-status-table .ifacebox-body {
1984 flex-direction: column;
1989 .network-status-table .ifacebox-body > * {
1993 .network-status-table .ifacebox-body > span {
1998 .network-status-table .ifacebox-body > div {
2002 #dsl_status_table .ifacebox-body span > strong {
2003 display: inline-block;
2008 .network-status-table .ifacebox-body .ifacebadge {
2017 display: inline-flex;
2020 .network-status-table .ifacebox-body .ifacebadge > span {
2022 text-overflow: ellipsis;
2026 .ifacebadge.large > * {
2033 display: inline-block;
2034 white-space: nowrap;
2036 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
2040 .zonebadge > strong {
2042 display: inline-block;
2049 .zonebadge > .ifacebadge {
2054 border: 1px dashed #aaa;
2061 .td.cbi-value-field var {
2066 #modal_overlay > .modal.uci-dialog,
2067 #modal_overlay > .modal.cbi-modal {
2076 .uci-change-list del,
2077 .uci-change-list ins,
2078 .uci-change-list var,
2079 .uci-change-legend-label del,
2080 .uci-change-legend-label ins,
2081 .uci-change-legend-label var {
2082 text-decoration: none;
2083 font-family: monospace;
2085 border: 1px solid #ccc;
2093 .uci-change-list ins,
2094 .uci-change-legend-label ins {
2099 .uci-change-list del,
2100 .uci-change-legend-label del {
2105 .uci-change-list var,
2106 .uci-change-legend-label var {
2111 .uci-change-list var ins,
2112 .uci-change-list var del {
2113 display: inline-block;
2119 .uci-change-legend {
2123 .uci-change-legend-label {
2128 .uci-change-legend-label > ins,
2129 .uci-change-legend-label > del,
2130 .uci-change-legend-label > var {
2139 .uci-change-legend-label var ins,
2140 .uci-change-legend-label var del {
2155 background: rgba(0, 0, 0, 0.7);
2158 -webkit-overflow-scrolling: touch;
2159 transition: opacity .125s ease-in;
2163 #modal_overlay > .modal {
2170 align-items: center;
2173 box-shadow: 0 0 3px #444;
2174 padding: 1em 1em .5em 1em;
2179 #modal_overlay .modal > * {
2181 line-height: normal;
2182 margin-bottom: .5em;
2185 #modal_overlay .modal > pre,
2186 #modal_overlay .modal > textarea {
2187 white-space: pre-wrap;
2191 body.modal-overlay-active {
2196 body.modal-overlay-active #modal_overlay {
2202 html body.apply-overlay-active {
2203 height: calc(100vh - 63px);
2206 #applyreboot-section {
2210 [data-page="admin-network-dhcp"] [data-name="ip"] {
2216 50% { opacity: .5; }
2217 100% { opacity: 1; }
2221 animation: flash .35s;
2226 padding-left: 32px !important;
2236 background: url(../resources/icons/loading.gif) no-repeat center;
2237 background-size: 16px;
2246 [data-tab-active="true"] {
2250 transition: opacity .25s ease-in;
2256 border: 1px solid #ccc;
2259 flex-direction: column;
2265 .cbi-filebrowser.open {
2269 transition: opacity .25s ease-in;
2272 .cbi-filebrowser > * {
2275 text-overflow: ellipsis;
2276 padding: 0 0 .25em 0;
2277 margin: .25em .25em 0px .25em;
2278 white-space: nowrap;
2279 border-bottom: 1px solid #ccc;
2282 .cbi-filebrowser .cbi-button-positive {
2283 margin-right: .25em;
2286 .cbi-filebrowser > div {
2287 border-bottom: none;
2290 .cbi-filebrowser > ul > li {
2292 flex-direction: row;
2295 .cbi-filebrowser > ul > li:hover {
2296 background: #f5f5f5;
2299 .cbi-filebrowser > ul > li > div:first-child {
2302 text-overflow: ellipsis;
2305 .cbi-filebrowser > ul > li > div:last-child {
2310 .cbi-filebrowser > ul > li > div:last-child > button {
2311 padding: .125em .25em;
2312 margin: 1px 0 1px .25em;
2315 .cbi-filebrowser .upload {
2317 flex-direction: row;
2319 margin: 0 -.125em .25em -.125em;
2320 padding: 0 0 .125em 0px;
2321 border-bottom: 1px solid #ccc;
2324 .cbi-filebrowser .upload > * {
2329 .cbi-filebrowser .upload > .btn {
2333 .cbi-filebrowser .upload > div {
2338 .cbi-filebrowser .upload > div > input {
2342 @keyframes fade-in {
2344 100% { opacity: 1; }
2347 @keyframes fade-out {
2349 100% { opacity: 0; }
2353 animation: fade-in .4s ease;
2357 animation: fade-out .4s ease;