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;
451 .cbi-dropdown:not(.btn):not(.cbi-button),
453 display: inline-block;
458 border: 1px solid #ccc;
464 .cbi-dropdown:not(.btn):not(.cbi-button),
473 .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],
566 .td > .cbi-dropdown:not(.btn):not(.cbi-button),
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-negative):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 .cbi-page-actions .cbi-button-negative + .cbi-button-save {
1380 background: linear-gradient(#fff, #fff 25%, #e6e6e6);
1381 text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.75);
1386 display: inline-flex !important;
1390 padding: 0 !important;
1393 .cbi-dropdown:not(.btn):not(.cbi-button) {
1394 background: linear-gradient(#fff 0%, #e9e8e6 100%);
1395 border: 1px solid #ccc;
1400 .cbi-dynlist > .item:focus,
1401 .cbi-dropdown:focus {
1402 outline: 2px solid #4b6e9b;
1405 .cbi-dropdown > ul {
1406 margin: 0 !important;
1415 .cbi-dropdown.btn > ul:not(.dropdown),
1416 .cbi-dropdown.cbi-button > ul:not(.dropdown) {
1417 margin: 0 0 0 13px !important;
1420 .cbi-dropdown.btn.spinning > ul:not(.dropdown),
1421 .cbi-dropdown.cbi-button.spinning > ul:not(.dropdown) {
1422 margin: 0 !important;
1425 .cbi-dropdown > ul.preview {
1429 .cbi-dropdown > .open,
1430 .cbi-dropdown > .more {
1434 flex-direction: column;
1435 justify-content: center;
1441 .cbi-dropdown.btn > .open,
1442 .cbi-dropdown.cbi-button > .open {
1445 border-left: 1px solid;
1448 .cbi-dropdown > .more,
1449 .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li[placeholder] {
1452 text-shadow: 1px 1px 0px #fff;
1454 justify-content: center;
1457 .cbi-dropdown > ul > li {
1459 white-space: nowrap;
1461 text-overflow: ellipsis;
1464 align-items: center;
1469 .cbi-dropdown > ul.dropdown > li,
1470 .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li {
1476 .cbi-dropdown > ul > li .hide-open { display: block; display: initial; }
1477 .cbi-dropdown > ul > li .hide-close { display: none; }
1479 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1480 border-left: 1px solid #ccc;
1483 .cbi-dropdown[empty] > ul {
1487 .cbi-dropdown > ul > li > form {
1491 pointer-events: none;
1494 .cbi-dropdown > ul > li img {
1495 vertical-align: middle;
1496 margin-right: .25em;
1499 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1503 .cbi-dropdown > ul > li input[type="text"] {
1507 .cbi-dropdown[open] {
1511 .cbi-dropdown[open] > ul.dropdown {
1513 background: #f6f6f5;
1514 border: 1px solid #918e8c;
1515 box-shadow: 0 0 4px #918e8c;
1521 transition: max-height .125s ease-in;
1524 .cbi-dropdown > ul > li[display],
1525 .cbi-dropdown[open] > ul.preview,
1526 .cbi-dropdown[open] > ul.dropdown > li,
1527 .cbi-dropdown[multiple] > ul > li > label,
1528 .cbi-dropdown[multiple][open] > ul.dropdown > li,
1529 .cbi-dropdown[multiple][more] > .more,
1530 .cbi-dropdown[multiple][empty] > .more {
1532 display: flex !important;
1535 .cbi-dropdown[empty] > ul > li,
1536 .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
1537 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1538 display: block !important;
1541 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
1542 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block; display: initial; }
1544 .cbi-dropdown[open] > ul.dropdown > li {
1545 border-bottom: 1px solid #ccc;
1548 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1549 background: #b0d0f0;
1552 .cbi-dropdown[open] > ul.dropdown > li.focus {
1553 background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
1556 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1558 border-bottom: none;
1561 .cbi-dropdown[open] > ul.dropdown > li[unselectable] {
1565 .cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
1569 .cbi-dropdown[disabled] {
1570 pointer-events: none;
1574 input[type="text"] + .cbi-button,
1575 input[type="password"] + .cbi-button,
1576 select + .cbi-button {
1577 border-radius: 0 3px 3px 0;
1581 vertical-align: top;
1587 select + .cbi-button {
1588 border-left-color: transparent;
1595 .cbi-title-ref::after {
1599 .cbi-tooltip-container {
1607 box-shadow: 0 0 2px #ccc;
1613 transition: opacity .25s ease-in;
1616 .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
1619 transition: opacity .25s ease-in;
1623 border: 1px solid #ccc;
1629 background: #f9f9f9;
1632 .cbi-progressbar > div {
1633 background: #90c0e0;
1635 transition: width .25s ease-in;
1639 .cbi-progressbar::after {
1646 text-shadow: 0 0 2px #fff;
1647 content: attr(title);
1650 text-overflow: ellipsis;
1653 .zonebadge .cbi-tooltip {
1655 background: inherit;
1656 margin: -1.6em 0 0 -5px;
1658 pointer-events: none;
1659 box-shadow: 0 0 3px #444;
1662 .zonebadge .cbi-tooltip > * {
1671 .zone-forwards > * {
1676 .zone-forwards > span {
1681 .zone-forwards .zone-src,
1682 .zone-forwards .zone-dest {
1684 flex-direction: column;
1687 .btn.active, .btn:active {
1688 box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1705 line-height: normal;
1706 padding: 9px 14px 9px;
1711 padding: 7px 9px 7px;
1715 button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
1725 line-height: 13.5px;
1726 text-shadow: 0 1px 0 #fff;
1732 text-decoration: none;
1738 padding: .5em .5em .25em .5em;
1739 margin-bottom: .5em;
1741 background: linear-gradient(to bottom, #fceec1, #eedc94) repeat-x;
1742 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1743 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1744 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
1746 border-style: solid;
1748 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1751 .alert-message .close {
1764 line-height: inherit;
1765 background: transparent;
1770 .alert-message button {
1775 padding: 1px 3px 2px;
1778 color: #fff !important;
1779 text-transform: uppercase;
1780 white-space: nowrap;
1781 background-color: #bfbfbf;
1792 text-decoration: none;
1796 background-color: #c43c35;
1800 background-color: #f89406;
1804 background-color: #46a546;
1808 background-color: #62cffc;
1811 /* LuCI specific items */
1812 .hidden { display: none }
1818 form.inline { display: inline; margin-bottom: 0; }
1820 header .pull-right { padding-top: 8px; }
1822 #modemenu li:last-child span.divider { display: none }
1824 #syslog { width: 100%; }
1826 .cbi-section-table .tr:hover .td,
1827 .cbi-section-table .tr:hover .th,
1828 .cbi-section-table .tr:hover::before {
1829 background-color: #f5f5f5;
1832 .cbi-section-table .tr.cbi-section-table-descr .th {
1833 font-weight: normal;
1836 .cbi-section-table-titles.named::before,
1837 .cbi-section-table-descr.named::before,
1838 .cbi-section-table-row[data-title]::before {
1839 content: attr(data-title) " ";
1840 display: table-cell;
1841 padding: 10px 10px 9px;
1844 vertical-align: middle;
1847 .cbi-section-table-titles.named::before,
1848 .cbi-section-table-descr.named::before,
1849 .cbi-section-table-row[data-title]::before {
1850 border-top: 1px solid #ddd;
1853 .left { text-align: left !important; }
1854 .right { text-align: right !important; }
1855 .center { text-align: center !important; }
1856 .top { vertical-align: top !important; }
1857 .middle { vertical-align: middle !important; }
1858 .bottom { vertical-align: bottom !important; }
1860 .cbi-value-field { line-height: 1.5em; }
1862 .cbi-value-field input[type=checkbox],
1863 .cbi-value-field input[type=radio] {
1869 .cbi-value-field table td {
1873 .table.cbi-section-table input[type="password"],
1874 .table.cbi-section-table input[type="text"],
1875 .table.cbi-section-table textarea,
1876 .table.cbi-section-table select {
1880 .table.cbi-section-table .td.cbi-section-table-cell {
1881 white-space: nowrap;
1885 .table.cbi-section-table .td.cbi-section-table-cell select {
1889 .td.cbi-section-actions {
1891 vertical-align: middle;
1894 .td.cbi-section-actions > * {
1898 .td.cbi-section-actions > * > *,
1899 .td.cbi-section-actions > * > form > * {
1904 .td.cbi-section-actions > * > form {
1905 display: inline-flex;
1909 .table.valign-middle .td {
1910 vertical-align: middle;
1915 .tr.cbi-section-table-titles {
1916 background: #f9f9f9;
1919 .cbi-value-description {
1920 background-image: url(/luci-static/resources/cbi/help.gif);
1921 background-position: .25em .2em;
1922 background-repeat: no-repeat;
1923 margin: .25em 0 0 0;
1924 padding: 0 0 0 1.7em;
1927 .cbi-section-error {
1928 border: 1px solid #f00;
1930 background-color: #fce6e6;
1932 margin-bottom: 18px;
1935 .cbi-section-error ul { margin: 0 0 0 20px; }
1937 .cbi-section-error ul li {
1943 background-color: #fff;
1944 border: 1px solid #ccc;
1947 white-space: nowrap;
1948 background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
1949 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1951 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1952 display: inline-flex;
1953 flex-direction: column;
1958 .ifacebox .ifacebox-head {
1959 border-bottom: 1px solid #ccc;
1964 .ifacebox .ifacebox-head.active {
1965 background: #90c0e0;
1968 .ifacebox .ifacebox-body {
1973 display: inline-block;
1974 flex-direction: row;
1975 white-space: nowrap;
1976 background-color: #fff;
1977 border: 1px solid #ccc;
1979 background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
1980 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1982 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1990 vertical-align: middle;
1993 .ifacebadge-active {
1998 .network-status-table {
2003 .network-status-table .ifacebox {
2008 .network-status-table .ifacebox-body {
2010 flex-direction: column;
2015 .network-status-table .ifacebox-body > * {
2019 .network-status-table .ifacebox-body > span {
2024 .network-status-table .ifacebox-body > div {
2028 #dsl_status_table .ifacebox-body span > strong {
2029 display: inline-block;
2034 .network-status-table .ifacebox-body .ifacebadge {
2043 display: inline-flex;
2046 .network-status-table .ifacebox-body .ifacebadge > span {
2048 text-overflow: ellipsis;
2052 .ifacebadge.large > * {
2059 display: inline-block;
2060 white-space: nowrap;
2062 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
2066 .zonebadge > strong {
2068 display: inline-block;
2075 .zonebadge > .ifacebadge {
2080 border: 1px dashed #aaa;
2087 .td.cbi-value-field var {
2092 #modal_overlay > .modal.uci-dialog,
2093 #modal_overlay > .modal.cbi-modal {
2102 .uci-change-list del,
2103 .uci-change-list ins,
2104 .uci-change-list var,
2105 .uci-change-legend-label del,
2106 .uci-change-legend-label ins,
2107 .uci-change-legend-label var {
2108 text-decoration: none;
2109 font-family: monospace;
2111 border: 1px solid #ccc;
2119 .uci-change-list ins,
2120 .uci-change-legend-label ins {
2125 .uci-change-list del,
2126 .uci-change-legend-label del {
2131 .uci-change-list var,
2132 .uci-change-legend-label var {
2137 .uci-change-list var ins,
2138 .uci-change-list var del {
2139 display: inline-block;
2145 .uci-change-legend {
2149 .uci-change-legend-label {
2154 .uci-change-legend-label > ins,
2155 .uci-change-legend-label > del,
2156 .uci-change-legend-label > var {
2165 .uci-change-legend-label var ins,
2166 .uci-change-legend-label var del {
2181 background: rgba(0, 0, 0, 0.7);
2184 -webkit-overflow-scrolling: touch;
2185 transition: opacity .125s ease-in;
2189 #modal_overlay > .modal {
2196 align-items: center;
2199 box-shadow: 0 0 3px #444;
2200 padding: 1em 1em .5em 1em;
2205 #modal_overlay .modal > * {
2207 line-height: normal;
2208 margin-bottom: .5em;
2211 #modal_overlay .modal > pre,
2212 #modal_overlay .modal > textarea {
2213 white-space: pre-wrap;
2217 body.modal-overlay-active {
2222 body.modal-overlay-active #modal_overlay {
2228 html body.apply-overlay-active {
2229 height: calc(100vh - 63px);
2232 #applyreboot-section {
2236 [data-page="admin-network-dhcp"] [data-name="ip"] {
2242 50% { opacity: .5; }
2243 100% { opacity: 1; }
2247 animation: flash .35s;
2252 padding-left: 32px !important;
2262 background: url(../resources/icons/loading.gif) no-repeat center;
2263 background-size: 16px;
2272 [data-tab-active="true"] {
2276 transition: opacity .25s ease-in;
2282 border: 1px solid #ccc;
2285 flex-direction: column;
2291 .cbi-filebrowser.open {
2295 transition: opacity .25s ease-in;
2298 .cbi-filebrowser > * {
2301 text-overflow: ellipsis;
2302 padding: 0 0 .25em 0;
2303 margin: .25em .25em 0px .25em;
2304 white-space: nowrap;
2305 border-bottom: 1px solid #ccc;
2308 .cbi-filebrowser .cbi-button-positive {
2309 margin-right: .25em;
2312 .cbi-filebrowser > div {
2313 border-bottom: none;
2316 .cbi-filebrowser > ul > li {
2318 flex-direction: row;
2321 .cbi-filebrowser > ul > li:hover {
2322 background: #f5f5f5;
2325 .cbi-filebrowser > ul > li > div:first-child {
2328 text-overflow: ellipsis;
2331 .cbi-filebrowser > ul > li > div:last-child {
2336 .cbi-filebrowser > ul > li > div:last-child > button {
2337 padding: .125em .25em;
2338 margin: 1px 0 1px .25em;
2341 .cbi-filebrowser .upload {
2343 flex-direction: row;
2345 margin: 0 -.125em .25em -.125em;
2346 padding: 0 0 .125em 0px;
2347 border-bottom: 1px solid #ccc;
2350 .cbi-filebrowser .upload > * {
2355 .cbi-filebrowser .upload > .btn {
2359 .cbi-filebrowser .upload > div {
2364 .cbi-filebrowser .upload > div > input {
2368 @keyframes fade-in {
2370 100% { opacity: 1; }
2373 @keyframes fade-out {
2375 100% { opacity: 0; }
2379 animation: fade-in .4s ease;
2383 animation: fade-out .4s ease;