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;
458 border: 1px solid #ccc;
464 .cbi-dropdown:not(.btn):not(.cbi-button),
483 display: inline-flex;
484 flex-direction: column;
487 .cbi-dynlist > .item {
489 box-shadow: 0 0 2px #ccc;
491 padding: 2px 2em 2px 4px;
492 border: 1px solid #ccc;
495 pointer-events: none;
498 .cbi-dynlist > .item::after {
501 display: inline-flex;
507 border: 1px solid #ccc;
508 border-radius: 0 3px 3px 0;
511 pointer-events: auto;
514 .cbi-dynlist > .add-item {
518 .cbi-dynlist > .add-item > input,
519 .cbi-dynlist > .add-item > button {
522 text-overflow: ellipsis;
529 box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.1);
532 input[type=checkbox], input[type=radio] {
545 background-color: #fff;
548 line-height: initial;
550 width: auto !important;
553 input[type=button], input[type=reset], input[type=submit] {
560 background-color: #fff;
563 .td > input[type=text],
564 .td > input[type=password],
567 .cbi-dynlist > .add-item > .cbi-dropdown {
572 background-color: #fff;
575 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
583 ::-webkit-input-placeholder {
587 .item::after, .btn, .cbi-button, input, button, textarea {
588 transition: border linear 0.2s, box-shadow linear 0.2s;
589 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
593 .btn:hover, .cbi-button:hover, button:hover,
594 input:focus, textarea:focus {
596 border-color: rgba(82, 168, 236, 0.8) !important;
597 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
598 text-decoration: none;
601 input[type=file]:focus, input[type=checkbox]:focus, select:focus {
603 outline: 1px dotted #666;
614 background-color: #f5f5f5;
616 pointer-events: none;
622 pointer-events: auto;
627 .cbi-section-create {
628 padding: 0 0 10px 10px;
631 .cbi-section-create {
633 display: inline-flex;
637 .cbi-section-create > * {
642 .cbi-section-create > * > input {
650 padding: 17px 20px 18px 17px;
651 border-top: 1px solid #ddd;
652 border-radius: 0 0 3px 3px;
656 .actions .secondary-action,
657 .cbi-page-actions .secondary-action{
661 .actions .secondary-action a,
662 .cbi-page-actions .secondary-action a {
666 .actions .secondary-action a:hover,
667 .cbi-page-actions .secondary-action a:hover {
668 text-decoration: underline;
671 .cbi-page-actions > form {
676 .help-inline, .help-block {
699 * Tables for, you guessed it, tabular data
700 * ---------------------------------------- */
701 .tr { display: table-row; }
702 .table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
703 .table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
711 border-collapse: collapse;
715 .table .th, .table .td {
717 vertical-align: middle; /* Fixme */
718 padding: 10px 10px 9px;
723 .table .tr:first-child .th {
729 .table .td, .table .th {
730 border-top: 1px solid #ddd;
734 height: calc(3em + 20px);
737 .tr.placeholder > .td {
747 .tr.drag-over-below {
748 border: 2px solid #0069d6;
749 border-width: 2px 0 0 0;
752 .tr.drag-over-below {
753 border-width: 0 0 2px 0;
757 * Repeatable UI elements outside the base styles provided from the scaffolding
758 * ---------------------------------------------------------------------------- */
772 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
775 header h3 a:hover, header .brand:hover, header ul .active > a {
776 background-color: #333;
777 background-color: rgba(255, 255, 255, 0.05);
779 text-decoration: none;
786 header h3 a, header .brand {
789 padding: 8px 20px 12px;
803 background-color: #222;
804 background-repeat: repeat-x;
805 background-image: linear-gradient(to bottom, #333333, #222222);
806 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
810 header div > ul, .nav {
818 header div > ul > li, .nav > li {
823 header div > ul a, .nav a {
826 padding: 10px 10px 11px;
828 text-decoration: none;
831 header div > ul a:hover, .nav a:hover {
833 text-decoration: none;
836 header div > ul .active > a, .nav .active > a {
837 background-color: #222;
838 background-color: rgba(0, 0, 0, 0.5);
841 header div > ul.secondary-nav, .nav.secondary-nav {
847 header div > ul.secondary-nav .menu-dropdown,
848 .nav.secondary-nav .menu-dropdown,
849 header div > ul.secondary-nav .dropdown-menu,
850 .nav.secondary-nav .dropdown-menu {
855 header div > ul a.menu:hover,
857 header div > ul li.open .menu,
859 header div > ul .dropdown-toggle:hover,
860 .nav .dropdown-toggle:hover,
861 header div > ul .dropdown.open .dropdown-toggle,
862 .nav .dropdown.open .dropdown-toggle {
864 background: rgba(255, 255, 255, 0.05);
867 header div > ul .menu-dropdown,
869 header div > ul .dropdown-menu,
870 .nav .dropdown-menu {
871 background-color: #333;
874 header div > ul .menu-dropdown a.menu,
875 .nav .menu-dropdown a.menu,
876 header div > ul .dropdown-menu a.menu,
877 .nav .dropdown-menu a.menu,
878 header div > ul .menu-dropdown .dropdown-toggle,
879 .nav .menu-dropdown .dropdown-toggle,
880 header div > ul .dropdown-menu .dropdown-toggle,
881 .nav .dropdown-menu .dropdown-toggle {
885 header div > ul .menu-dropdown a.menu.open,
886 .nav .menu-dropdown a.menu.open,
887 header div > ul .dropdown-menu a.menu.open,
888 .nav .dropdown-menu a.menu.open,
889 header div > ul .menu-dropdown .dropdown-toggle.open,
890 .nav .menu-dropdown .dropdown-toggle.open,
891 header div > ul .dropdown-menu .dropdown-toggle.open,
892 .nav .dropdown-menu .dropdown-toggle.open {
894 background: rgba(255, 255, 255, 0.05);
897 header div > ul .menu-dropdown li a,
898 .nav .menu-dropdown li a,
899 header div > ul .dropdown-menu li a,
900 .nav .dropdown-menu li a {
902 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
905 header div > ul .menu-dropdown li a:hover,
906 .nav .menu-dropdown li a:hover,
907 header div > ul .dropdown-menu li a:hover,
908 .nav .dropdown-menu li a:hover {
909 background-color: #191919;
910 background-repeat: repeat-x;
911 background-image: linear-gradient(to bottom, #292929, #191919);
915 header div > ul .menu-dropdown .active a,
916 .nav .menu-dropdown .active a,
917 header div > ul .dropdown-menu .active a,
918 .nav .dropdown-menu .active a {
922 header div > ul .menu-dropdown .divider,
923 .nav .menu-dropdown .divider,
924 header div > ul .dropdown-menu .divider,
925 .nav .dropdown-menu .divider {
926 background-color: #222;
930 header ul .menu-dropdown li a, header ul .dropdown-menu li a {
938 a.menu:after, .dropdown-toggle:after {
941 display: inline-block;
943 text-indent: -99999px;
947 border-left: 4px solid transparent;
948 border-right: 4px solid transparent;
949 border-top: 4px solid #fff;
953 .menu-dropdown, .dropdown-menu {
954 background-color: #fff;
968 border-color: rgba(0, 0, 0, 0.2);
970 border-width: 0 1px 1px;
971 border-radius: 0 0 6px 6px;
972 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
973 background-clip: padding-box;
976 .menu-dropdown li, .dropdown-menu li {
979 background-color: transparent;
982 .menu-dropdown .divider, .dropdown-menu .divider {
986 background-color: #eee;
987 border-bottom: 1px solid #fff;
990 header .dropdown-menu a, .dropdown-menu a {
997 text-shadow: 0 1px 0 #fff;
1000 header .dropdown-menu a:hover,
1001 .dropdown-menu a:hover,
1002 header .dropdown-menu a.hover,
1003 .dropdown-menu a.hover {
1004 background-color: #ddd;
1005 background-repeat: repeat-x;
1006 background-image: linear-gradient(to bottom, #eee, #ddd);
1008 text-decoration: none;
1009 box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
1013 .dropdown.open .menu,
1014 .open .dropdown-toggle,
1015 .dropdown.open .dropdown-toggle {
1018 background: rgba(0, 0, 0, 0.3);
1021 .open .menu-dropdown,
1022 .dropdown.open .menu-dropdown,
1023 .open .dropdown-menu,
1024 .dropdown.open .dropdown-menu {
1028 .dropdown:hover ul.dropdown-menu {
1032 .dropdown-menu .dropdown-menu {
1041 .tabs, .cbi-tabmenu {
1042 margin: 0 -5px 18px;
1047 background: linear-gradient(#fff 28px, #ddd 28px);
1048 background-size: 1px 29px;
1049 background-position: left bottom;
1052 .tabs > li, .cbi-tabmenu > li {
1055 align-items: center;
1058 margin: 4px 2px 0 2px;
1060 border: 1px solid #ddd;
1061 border-bottom: none;
1062 border-radius: 4px 4px 0 0;
1066 .tabs > li > a, .cbi-tabmenu > li > a {
1068 white-space: nowrap;
1070 text-overflow: ellipsis;
1072 text-decoration: none;
1073 border-radius: 4px 4px 0 0;
1078 .tabs > li:not(.active):hover, .cbi-tabmenu > .cbi-tab-disabled:hover {
1079 background: linear-gradient(#fff 90%, #ddd 100%);
1082 .tabs > li:not(.active), .cbi-tabmenu > .cbi-tab-disabled {
1084 background: linear-gradient(#eee 90%, #ddd 100%);
1087 .cbi-tab-disabled[data-errors]::after {
1088 content: attr(data-errors);
1089 background: #c43c35;
1103 .cbi-tabmenu.map > li {
1108 .cbi-tabcontainer > fieldset.cbi-section[id] > legend {
1112 .tabs .menu-dropdown, .tabs .dropdown-menu {
1115 border-radius: 0 6px 6px 6px;
1118 .tabs a.menu:after, .tabs .dropdown-toggle:after {
1119 border-top-color: #999;
1124 .tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle {
1128 .tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after {
1129 border-top-color: #555;
1132 .tab-content > .tab-pane,
1133 .tab-content > div {
1137 .tab-content > .active {
1144 background-color: #f5f5f5;
1145 background-repeat: repeat-x;
1146 background-image: linear-gradient(to bottom, #fff, #f5f5f5);
1147 border: 1px solid #ddd;
1149 box-shadow: inset 0 1px 0 #fff;
1154 text-shadow: 0 1px 0 #fff;
1157 .breadcrumb .divider {
1162 .breadcrumb .active a {
1169 border-top: 1px solid #eee;
1178 background: rgba(0, 0, 0, 0.7);
1181 -webkit-overflow-scrolling: touch;
1182 transition: opacity .125s ease-in;
1194 align-items: center;
1197 box-shadow: 0 0 3px #444;
1198 padding: 1em 1em .5em 1em;
1205 line-height: normal;
1206 margin-bottom: .5em;
1212 white-space: pre-wrap;
1216 body.modal-overlay-active {
1221 body.modal-overlay-active #modal_overlay {
1225 visibility: visible;
1229 .alert-message.danger,
1231 .alert-message.danger:hover,
1233 .alert-message.error,
1235 .alert-message.error:hover,
1237 .alert-message.success,
1239 .alert-message.success:hover,
1241 .alert-message.info,
1243 .alert-message.info:hover,
1244 .cbi-tooltip.error, .cbi-tooltip.success, .cbi-tooltip.info {
1248 .btn .close, .alert-message .close {
1249 font-family: Arial, sans-serif;
1254 .alert-message.danger,
1256 .alert-message.error,
1257 .cbi-tooltip.error {
1258 background: linear-gradient(to bottom, #ee5f5b, #c43c35) repeat-x;
1259 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1260 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1263 .btn.success, .alert-message.success, .cbi-tooltip.success {
1264 background: linear-gradient(to bottom, #62c462, #57a957) repeat-x;
1265 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1266 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1269 .btn.info, .alert-message.info, .cbi-tooltip.info {
1270 background: linear-gradient(to bottom, #5bc0de, #339bb9) repeat-x;
1271 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1272 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1275 .alert-message.notice, .cbi-tooltip.notice {
1276 background: linear-gradient(to bottom, #efefef, #fefefe) repeat-x;
1277 text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
1278 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1285 display: inline-block;
1286 background: linear-gradient(#fff, #fff 25%, #e6e6e6) no-repeat;
1287 padding: 5px 14px 6px;
1288 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1291 line-height: normal;
1292 border: 1px solid #ccc;
1293 border-bottom-color: #bbb;
1295 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1300 outline: 1px dotted #666;
1304 .cbi-input-invalid.cbi-dropdown,
1305 .cbi-input-invalid.cbi-dropdown:not([open]) > ul > li,
1306 .cbi-value-error input {
1311 .cbi-button-positive,
1312 .cbi-button-fieldadd,
1319 .cbi-button-neutral,
1320 .cbi-button-download,
1333 border-color: #0069d6;
1337 .cbi-button-negative,
1338 .cbi-section-remove .cbi-button,
1340 .cbi-button-remove {
1345 .cbi-page-actions::after {
1351 .cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-save):not(.cbi-button-reset) {
1357 .cbi-button-action.important,
1358 .cbi-page-actions .cbi-button-apply,
1359 .cbi-section-actions .cbi-button-edit {
1361 background: linear-gradient(to bottom, #0069d6, #0049d6) no-repeat;
1362 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1365 .cbi-button-positive.important,
1366 .cbi-page-actions .cbi-button-save {
1368 background: linear-gradient(to bottom, #4a4, #484) no-repeat;
1369 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1372 .cbi-button-negative.important {
1374 background: linear-gradient(to bottom, #c44, #c00) no-repeat;
1375 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1378 .cbi-page-actions .cbi-button-apply + .cbi-button-save {
1379 background: linear-gradient(#fff, #fff 25%, #e6e6e6);
1380 text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.75);
1385 border: 1px solid #ccc;
1387 display: inline-flex;
1391 background: linear-gradient(#fff 0%, #e9e8e6 100%);
1396 .cbi-dynlist > .item:focus,
1397 .cbi-dropdown:focus {
1398 outline: 2px solid #4b6e9b;
1401 .cbi-dropdown > ul {
1402 margin: 0 !important;
1411 .cbi-dropdown > ul.preview {
1415 .cbi-dropdown > .open,
1416 .cbi-dropdown > .more {
1420 flex-direction: column;
1421 justify-content: center;
1427 .cbi-dropdown > .more,
1428 .cbi-dropdown > ul > li[placeholder] {
1431 text-shadow: 1px 1px 0px #fff;
1433 justify-content: center;
1436 .cbi-dropdown > ul > li {
1439 white-space: nowrap;
1441 text-overflow: ellipsis;
1444 align-items: center;
1450 .cbi-dropdown > ul > li .hide-open { display: block; display: initial; }
1451 .cbi-dropdown > ul > li .hide-close { display: none; }
1453 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1454 border-left: 1px solid #ccc;
1457 .cbi-dropdown[empty] > ul {
1461 .cbi-dropdown > ul > li > form {
1465 pointer-events: none;
1468 .cbi-dropdown > ul > li img {
1469 vertical-align: middle;
1470 margin-right: .25em;
1473 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1477 .cbi-dropdown > ul > li input[type="text"] {
1481 .cbi-dropdown[open] {
1485 .cbi-dropdown[open] > ul.dropdown {
1487 background: #f6f6f5;
1488 border: 1px solid #918e8c;
1489 box-shadow: 0 0 4px #918e8c;
1495 transition: max-height .125s ease-in;
1498 .cbi-dropdown > ul > li[display],
1499 .cbi-dropdown[open] > ul.preview,
1500 .cbi-dropdown[open] > ul.dropdown > li,
1501 .cbi-dropdown[multiple] > ul > li > label,
1502 .cbi-dropdown[multiple][open] > ul.dropdown > li,
1503 .cbi-dropdown[multiple][more] > .more,
1504 .cbi-dropdown[multiple][empty] > .more {
1509 .cbi-dropdown[empty] > ul > li,
1510 .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
1511 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1515 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
1516 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block; display: initial; }
1518 .cbi-dropdown[open] > ul.dropdown > li {
1519 border-bottom: 1px solid #ccc;
1522 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1523 background: #b0d0f0;
1526 .cbi-dropdown[open] > ul.dropdown > li.focus {
1527 background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
1530 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1532 border-bottom: none;
1535 .cbi-dropdown[open] > ul.dropdown > li[unselectable] {
1539 .cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
1543 .cbi-dropdown[disabled] {
1544 pointer-events: none;
1548 input[type="text"] + .cbi-button,
1549 input[type="password"] + .cbi-button,
1550 select + .cbi-button {
1551 border-radius: 0 3px 3px 0;
1555 vertical-align: top;
1561 select + .cbi-button {
1562 border-left-color: transparent;
1569 .cbi-title-ref::after {
1573 .cbi-tooltip-container {
1581 box-shadow: 0 0 2px #ccc;
1587 transition: opacity .25s ease-in;
1590 .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
1593 transition: opacity .25s ease-in;
1597 border: 1px solid #ccc;
1603 background: #f9f9f9;
1606 .cbi-progressbar > div {
1607 background: #90c0e0;
1609 transition: width .25s ease-in;
1613 .cbi-progressbar::after {
1620 text-shadow: 0 0 2px #fff;
1621 content: attr(title);
1624 text-overflow: ellipsis;
1627 .zonebadge .cbi-tooltip {
1629 background: inherit;
1630 margin: -1.6em 0 0 -5px;
1632 pointer-events: none;
1633 box-shadow: 0 0 3px #444;
1636 .zonebadge .cbi-tooltip > * {
1645 .zone-forwards > * {
1650 .zone-forwards > span {
1655 .zone-forwards .zone-src,
1656 .zone-forwards .zone-dest {
1658 flex-direction: column;
1661 .btn.active, .btn:active {
1662 box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
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;