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;
105 input[type="button"][disabled],
106 input[type="reset"][disabled],
107 input[type="submit"][disabled] {
111 input[type="search"] {
112 -webkit-appearance: textfield;
113 box-sizing: content-box;
116 input[type="search"]::-webkit-search-decoration {
117 -webkit-appearance: none;
127 * Basic and global styles for generating a grid system, structural layout, and page templates
128 * ------------------------------------------------------------------------------------------- */
130 background-color: #fff;
131 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
136 padding: 58px 5px 5px 5px;
147 .container:before, .container:after {
159 text-decoration: none;
160 line-height: inherit;
161 font-weight: inherit;
166 text-decoration: underline;
182 * Headings, body text, lists, code, and more for a versatile and durable typography system
183 * ---------------------------------------------------------------------------------------- */
187 .table .tr.cbi-section-table-descr .th {
267 text-transform: uppercase;
271 margin: 0 0 18px 25px;
318 border-bottom: 1px solid #eee;
328 font-weight: inherit;
329 line-height: inherit;
332 small { font-size: 0.9em }
342 font-family: Monaco, Andale Mono, Courier New, monospace;
348 background-color: #fee9cc;
349 color: rgba(0, 0, 0, 0.75);
354 background-color: #f5f5f5;
360 border: 1px solid #ccc;
361 border: 1px solid rgba(0, 0, 0, 0.15);
364 white-space: pre-wrap;
365 word-wrap: break-word;
369 * Base styles for various input types, form layouts, and states
370 * ------------------------------------------------------------- */
388 form .cbi-tab-descr {
399 form .clearfix:before, form .clearfix:after,
400 .cbi-value:before, .cbi-value:after {
406 form .clearfix:after,
415 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
426 .cbi-value label.cbi-value-title {
436 input[type=checkbox], input[type=radio] {
440 label > input[type="checkbox"],
441 label > input[type="radio"] {
442 vertical-align: bottom;
451 display: inline-block;
458 border: 1px solid #ccc;
472 display: inline-flex;
473 flex-direction: column;
476 .cbi-dynlist > .item {
478 box-shadow: 0 0 2px #ccc;
480 padding: 2px 2em 2px 4px;
481 border: 1px solid #ccc;
484 pointer-events: none;
487 .cbi-dynlist > .item::after {
490 display: inline-flex;
496 border: 1px solid #ccc;
497 border-radius: 0 3px 3px 0;
500 pointer-events: auto;
503 .cbi-dynlist > .add-item {
507 .cbi-dynlist > .add-item > input,
508 .cbi-dynlist > .add-item > button {
511 text-overflow: ellipsis;
518 box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.1);
521 input[type=checkbox], input[type=radio] {
534 background-color: #fff;
537 line-height: initial;
539 width: auto !important;
542 input[type=button], input[type=reset], input[type=submit] {
549 background-color: #fff;
556 .td > input[type=text],
557 .td > input[type=password],
560 .cbi-dynlist > .add-item > .cbi-dropdown {
565 background-color: #fff;
568 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
576 ::-webkit-input-placeholder {
580 .item::after, .btn, .cbi-button, input, textarea {
581 transition: border linear 0.2s, box-shadow linear 0.2s;
582 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
586 .btn:hover, .cbi-button:hover,
587 input:focus, textarea:focus {
589 border-color: rgba(82, 168, 236, 0.8) !important;
590 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
591 text-decoration: none;
594 input[type=file]:focus, input[type=checkbox]:focus, select:focus {
596 outline: 1px dotted #666;
605 background-color: #f5f5f5;
607 pointer-events: none;
613 pointer-events: auto;
618 .cbi-section-create {
619 padding: 0 0 10px 10px;
622 .cbi-section-create {
624 display: inline-flex;
628 .cbi-section-create > * {
633 .cbi-section-create > * > input {
641 padding: 17px 20px 18px 17px;
642 border-top: 1px solid #ddd;
643 border-radius: 0 0 3px 3px;
647 .actions .secondary-action,
648 .cbi-page-actions .secondary-action{
652 .actions .secondary-action a,
653 .cbi-page-actions .secondary-action a {
657 .actions .secondary-action a:hover,
658 .cbi-page-actions .secondary-action a:hover {
659 text-decoration: underline;
662 .cbi-page-actions > form {
667 .help-inline, .help-block {
690 * Tables for, you guessed it, tabular data
691 * ---------------------------------------- */
692 .tr { display: table-row; }
693 .table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
694 .table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
702 border-collapse: collapse;
706 .table .th, .table .td {
708 vertical-align: middle; /* Fixme */
709 padding: 10px 10px 9px;
714 .table .tr:first-child .th {
720 .table .td, .table .th {
721 border-top: 1px solid #ddd;
725 height: calc(3em + 20px);
728 .tr.placeholder > .td {
738 * Repeatable UI elements outside the base styles provided from the scaffolding
739 * ---------------------------------------------------------------------------- */
753 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
756 header h3 a:hover, header .brand:hover, header ul .active > a {
757 background-color: #333;
758 background-color: rgba(255, 255, 255, 0.05);
760 text-decoration: none;
767 header h3 a, header .brand {
770 padding: 8px 20px 12px;
784 background-color: #222;
785 background-repeat: repeat-x;
786 background-image: linear-gradient(to bottom, #333333, #222222);
787 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
791 header div > ul, .nav {
799 header div > ul > li, .nav > li {
804 header div > ul a, .nav a {
807 padding: 10px 10px 11px;
809 text-decoration: none;
812 header div > ul a:hover, .nav a:hover {
814 text-decoration: none;
817 header div > ul .active > a, .nav .active > a {
818 background-color: #222;
819 background-color: rgba(0, 0, 0, 0.5);
822 header div > ul.secondary-nav, .nav.secondary-nav {
828 header div > ul.secondary-nav .menu-dropdown,
829 .nav.secondary-nav .menu-dropdown,
830 header div > ul.secondary-nav .dropdown-menu,
831 .nav.secondary-nav .dropdown-menu {
836 header div > ul a.menu:hover,
838 header div > ul li.open .menu,
840 header div > ul .dropdown-toggle:hover,
841 .nav .dropdown-toggle:hover,
842 header div > ul .dropdown.open .dropdown-toggle,
843 .nav .dropdown.open .dropdown-toggle {
845 background: rgba(255, 255, 255, 0.05);
848 header div > ul .menu-dropdown,
850 header div > ul .dropdown-menu,
851 .nav .dropdown-menu {
852 background-color: #333;
855 header div > ul .menu-dropdown a.menu,
856 .nav .menu-dropdown a.menu,
857 header div > ul .dropdown-menu a.menu,
858 .nav .dropdown-menu a.menu,
859 header div > ul .menu-dropdown .dropdown-toggle,
860 .nav .menu-dropdown .dropdown-toggle,
861 header div > ul .dropdown-menu .dropdown-toggle,
862 .nav .dropdown-menu .dropdown-toggle {
866 header div > ul .menu-dropdown a.menu.open,
867 .nav .menu-dropdown a.menu.open,
868 header div > ul .dropdown-menu a.menu.open,
869 .nav .dropdown-menu a.menu.open,
870 header div > ul .menu-dropdown .dropdown-toggle.open,
871 .nav .menu-dropdown .dropdown-toggle.open,
872 header div > ul .dropdown-menu .dropdown-toggle.open,
873 .nav .dropdown-menu .dropdown-toggle.open {
875 background: rgba(255, 255, 255, 0.05);
878 header div > ul .menu-dropdown li a,
879 .nav .menu-dropdown li a,
880 header div > ul .dropdown-menu li a,
881 .nav .dropdown-menu li a {
883 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
886 header div > ul .menu-dropdown li a:hover,
887 .nav .menu-dropdown li a:hover,
888 header div > ul .dropdown-menu li a:hover,
889 .nav .dropdown-menu li a:hover {
890 background-color: #191919;
891 background-repeat: repeat-x;
892 background-image: linear-gradient(to bottom, #292929, #191919);
896 header div > ul .menu-dropdown .active a,
897 .nav .menu-dropdown .active a,
898 header div > ul .dropdown-menu .active a,
899 .nav .dropdown-menu .active a {
903 header div > ul .menu-dropdown .divider,
904 .nav .menu-dropdown .divider,
905 header div > ul .dropdown-menu .divider,
906 .nav .dropdown-menu .divider {
907 background-color: #222;
911 header ul .menu-dropdown li a, header ul .dropdown-menu li a {
919 a.menu:after, .dropdown-toggle:after {
922 display: inline-block;
924 text-indent: -99999px;
928 border-left: 4px solid transparent;
929 border-right: 4px solid transparent;
930 border-top: 4px solid #fff;
934 .menu-dropdown, .dropdown-menu {
935 background-color: #fff;
949 border-color: rgba(0, 0, 0, 0.2);
951 border-width: 0 1px 1px;
952 border-radius: 0 0 6px 6px;
953 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
954 background-clip: padding-box;
957 .menu-dropdown li, .dropdown-menu li {
960 background-color: transparent;
963 .menu-dropdown .divider, .dropdown-menu .divider {
967 background-color: #eee;
968 border-bottom: 1px solid #fff;
971 header .dropdown-menu a, .dropdown-menu a {
978 text-shadow: 0 1px 0 #fff;
981 header .dropdown-menu a:hover,
982 .dropdown-menu a:hover,
983 header .dropdown-menu a.hover,
984 .dropdown-menu a.hover {
985 background-color: #ddd;
986 background-repeat: repeat-x;
987 background-image: linear-gradient(to bottom, #eee, #ddd);
989 text-decoration: none;
990 box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
994 .dropdown.open .menu,
995 .open .dropdown-toggle,
996 .dropdown.open .dropdown-toggle {
999 background: rgba(0, 0, 0, 0.3);
1002 .open .menu-dropdown,
1003 .dropdown.open .menu-dropdown,
1004 .open .dropdown-menu,
1005 .dropdown.open .dropdown-menu {
1009 .dropdown:hover ul.dropdown-menu {
1013 .dropdown-menu .dropdown-menu {
1022 .tabs, .cbi-tabmenu {
1023 margin: 0 -5px 18px;
1028 background: linear-gradient(#fff 28px, #ddd 28px);
1029 background-size: 1px 29px;
1030 background-position: left bottom;
1033 .tabs > li, .cbi-tabmenu > li {
1036 align-items: center;
1039 margin: 4px 2px 0 2px;
1041 border: 1px solid #ddd;
1042 border-bottom: none;
1043 border-radius: 4px 4px 0 0;
1047 .tabs > li > a, .cbi-tabmenu > li > a {
1049 white-space: nowrap;
1051 text-overflow: ellipsis;
1053 text-decoration: none;
1054 border-radius: 4px 4px 0 0;
1058 .tabs > li:not(.active):hover, .cbi-tabmenu > .cbi-tab-disabled:hover {
1059 background: linear-gradient(#fff 90%, #ddd 100%);
1062 .tabs > li:not(.active), .cbi-tabmenu > .cbi-tab-disabled {
1064 background: linear-gradient(#eee 90%, #ddd 100%);
1071 .cbi-tabmenu.map > li {
1076 .cbi-tabcontainer > fieldset.cbi-section[id] > legend {
1080 .tabs .menu-dropdown, .tabs .dropdown-menu {
1083 border-radius: 0 6px 6px 6px;
1086 .tabs a.menu:after, .tabs .dropdown-toggle:after {
1087 border-top-color: #999;
1092 .tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle {
1096 .tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after {
1097 border-top-color: #555;
1100 .tab-content > .tab-pane,
1101 .tab-content > div {
1105 .tab-content > .active {
1112 background-color: #f5f5f5;
1113 background-repeat: repeat-x;
1114 background-image: linear-gradient(to bottom, #fff, #f5f5f5);
1115 border: 1px solid #ddd;
1117 box-shadow: inset 0 1px 0 #fff;
1122 text-shadow: 0 1px 0 #fff;
1125 .breadcrumb .divider {
1130 .breadcrumb .active a {
1137 border-top: 1px solid #eee;
1146 background: rgba(0, 0, 0, 0.7);
1149 -webkit-overflow-scrolling: touch;
1150 transition: opacity .125s ease-in;
1162 align-items: center;
1165 box-shadow: 0 0 3px #444;
1166 padding: 1em 1em .5em 1em;
1173 line-height: normal;
1174 margin-bottom: .5em;
1179 white-space: pre-wrap;
1183 body.modal-overlay-active {
1188 body.modal-overlay-active #modal_overlay {
1192 visibility: visible;
1196 .alert-message.danger,
1198 .alert-message.danger:hover,
1200 .alert-message.error,
1202 .alert-message.error:hover,
1204 .alert-message.success,
1206 .alert-message.success:hover,
1208 .alert-message.info,
1210 .alert-message.info:hover,
1211 .cbi-tooltip.error, .cbi-tooltip.success, .cbi-tooltip.info {
1215 .btn .close, .alert-message .close {
1216 font-family: Arial, sans-serif;
1221 .alert-message.danger,
1223 .alert-message.error,
1224 .cbi-tooltip.error {
1225 background: linear-gradient(to bottom, #ee5f5b, #c43c35) repeat-x;
1226 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1227 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1230 .btn.success, .alert-message.success, .cbi-tooltip.success {
1231 background: linear-gradient(to bottom, #62c462, #57a957) repeat-x;
1232 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1233 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1236 .btn.info, .alert-message.info, .cbi-tooltip.info {
1237 background: linear-gradient(to bottom, #5bc0de, #339bb9) repeat-x;
1238 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1239 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1242 .alert-message.notice, .cbi-tooltip.notice {
1243 background: linear-gradient(to bottom, #efefef, #fefefe) repeat-x;
1244 text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
1245 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1252 display: inline-block;
1253 background: linear-gradient(#fff, #fff 25%, #e6e6e6) no-repeat;
1254 padding: 5px 14px 6px;
1255 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1258 line-height: normal;
1259 border: 1px solid #ccc;
1260 border-bottom-color: #bbb;
1262 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1267 outline: 1px dotted #666;
1271 .cbi-input-invalid.cbi-dropdown,
1272 .cbi-input-invalid.cbi-dropdown:not([open]) > ul > li,
1273 .cbi-value-error input {
1278 .cbi-button-positive,
1279 .cbi-button-fieldadd,
1286 .cbi-button-neutral,
1287 .cbi-button-download,
1300 border-color: #0069d6;
1304 .cbi-button-negative,
1305 .cbi-section-remove .cbi-button,
1307 .cbi-button-remove {
1312 .cbi-page-actions::after {
1318 .cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-save):not(.cbi-button-reset) {
1324 .cbi-button-action.important,
1325 .cbi-page-actions .cbi-button-apply,
1326 .cbi-section-actions .cbi-button-edit {
1328 background: linear-gradient(to bottom, #0069d6, #0049d6) no-repeat;
1329 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1332 .cbi-button-positive.important,
1333 .cbi-page-actions .cbi-button-save {
1335 background: linear-gradient(to bottom, #4a4, #484) no-repeat;
1336 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1339 .cbi-button-negative.important {
1341 background: linear-gradient(to bottom, #c44, #c00) no-repeat;
1342 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1345 .cbi-page-actions .cbi-button-apply + .cbi-button-save {
1346 background: linear-gradient(#fff, #fff 25%, #e6e6e6);
1347 text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.75);
1352 border: 1px solid #ccc;
1354 display: inline-flex;
1358 background: linear-gradient(#fff 0%, #e9e8e6 100%);
1363 .cbi-dynlist > .item:focus,
1364 .cbi-dropdown:focus {
1365 outline: 2px solid #4b6e9b;
1368 .cbi-dropdown > ul {
1369 margin: 0 !important;
1378 .cbi-dropdown > ul.preview {
1382 .cbi-dropdown > .open,
1383 .cbi-dropdown > .more {
1387 flex-direction: column;
1388 justify-content: center;
1394 .cbi-dropdown > .more,
1395 .cbi-dropdown > ul > li[placeholder] {
1398 text-shadow: 1px 1px 0px #fff;
1400 justify-content: center;
1403 .cbi-dropdown > ul > li {
1406 white-space: nowrap;
1408 text-overflow: ellipsis;
1411 align-items: center;
1417 .cbi-dropdown > ul > li .hide-open { display: block; display: initial; }
1418 .cbi-dropdown > ul > li .hide-close { display: none; }
1420 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1421 border-left: 1px solid #ccc;
1424 .cbi-dropdown[empty] > ul {
1428 .cbi-dropdown > ul > li > form {
1432 pointer-events: none;
1435 .cbi-dropdown > ul > li img {
1436 vertical-align: middle;
1437 margin-right: .25em;
1440 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1444 .cbi-dropdown > ul > li input[type="text"] {
1448 .cbi-dropdown[open] {
1452 .cbi-dropdown[open] > ul.dropdown {
1454 background: #f6f6f5;
1455 border: 1px solid #918e8c;
1456 box-shadow: 0 0 4px #918e8c;
1462 transition: max-height .125s ease-in;
1465 .cbi-dropdown > ul > li[display],
1466 .cbi-dropdown[open] > ul.preview,
1467 .cbi-dropdown[open] > ul.dropdown > li,
1468 .cbi-dropdown[multiple] > ul > li > label,
1469 .cbi-dropdown[multiple][open] > ul.dropdown > li,
1470 .cbi-dropdown[multiple][more] > .more,
1471 .cbi-dropdown[multiple][empty] > .more {
1476 .cbi-dropdown[empty] > ul > li,
1477 .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
1478 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1482 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
1483 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block; display: initial; }
1485 .cbi-dropdown[open] > ul.dropdown > li {
1486 border-bottom: 1px solid #ccc;
1489 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1490 background: #b0d0f0;
1493 .cbi-dropdown[open] > ul.dropdown > li.focus {
1494 background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
1497 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1499 border-bottom: none;
1502 .cbi-dropdown[open] > ul.dropdown > li[unselectable] {
1506 .cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
1510 .cbi-dropdown[disabled] {
1511 pointer-events: none;
1515 input[type="text"] + .cbi-button,
1516 input[type="password"] + .cbi-button,
1517 select + .cbi-button {
1518 border-radius: 0 3px 3px 0;
1522 vertical-align: top;
1528 select + .cbi-button {
1529 border-left-color: transparent;
1536 .cbi-title-ref::after {
1540 .cbi-tooltip-container {
1548 box-shadow: 0 0 2px #ccc;
1554 transition: opacity .25s ease-in;
1557 .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
1560 transition: opacity .25s ease-in;
1564 border: 1px solid #ccc;
1570 background: #f9f9f9;
1573 .cbi-progressbar > div {
1574 background: #90c0e0;
1576 transition: width .25s ease-in;
1580 .cbi-progressbar::after {
1587 text-shadow: 0 0 2px #fff;
1588 content: attr(title);
1591 text-overflow: ellipsis;
1594 .zonebadge .cbi-tooltip {
1596 background: inherit;
1597 margin: -1.6em 0 0 -5px;
1599 pointer-events: none;
1600 box-shadow: 0 0 3px #444;
1603 .zonebadge .cbi-tooltip > * {
1612 .zone-forwards > * {
1617 .zone-forwards > span {
1622 .zone-forwards .zone-src,
1623 .zone-forwards .zone-dest {
1625 flex-direction: column;
1628 .btn.active, .btn:active {
1629 box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1634 background-image: none;
1641 background-image: none;
1648 line-height: normal;
1649 padding: 9px 14px 9px;
1654 padding: 7px 9px 7px;
1658 button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
1668 line-height: 13.5px;
1669 text-shadow: 0 1px 0 #fff;
1675 text-decoration: none;
1682 margin-bottom: 18px;
1684 background: linear-gradient(to bottom, #fceec1, #eedc94) repeat-x;
1685 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1686 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1687 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
1689 border-style: solid;
1691 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1694 .alert-message .close {
1704 .alert-message.danger p a,
1705 .alert-message.error p a,
1706 .alert-message.success p a,
1707 .alert-message.info p a {
1719 .alert-message div {
1726 padding: 1px 3px 2px;
1729 color: #fff !important;
1730 text-transform: uppercase;
1731 white-space: nowrap;
1732 background-color: #bfbfbf;
1743 text-decoration: none;
1747 background-color: #c43c35;
1751 background-color: #f89406;
1755 background-color: #46a546;
1759 background-color: #62cffc;
1762 /* LuCI specific items */
1763 .hidden { display: none }
1769 form.inline { display: inline; margin-bottom: 0; }
1771 header .pull-right { padding-top: 8px; }
1773 #modemenu li:last-child span.divider { display: none }
1775 #syslog { width: 100%; }
1777 .cbi-section-table .tr:hover .td,
1778 .cbi-section-table .tr:hover .th,
1779 .cbi-section-table .tr:hover::before {
1780 background-color: #f5f5f5;
1783 .cbi-section-table .tr.cbi-section-table-descr .th {
1784 font-weight: normal;
1787 .cbi-section-table-titles.named::before,
1788 .cbi-section-table-descr.named::before,
1789 .cbi-section-table-row[data-title]::before {
1790 content: attr(data-title) " ";
1791 display: table-cell;
1792 padding: 10px 10px 9px;
1795 vertical-align: middle;
1798 .cbi-section-table-titles.named::before,
1799 .cbi-section-table-descr.named::before,
1800 .cbi-section-table-row[data-title]::before {
1801 border-top: 1px solid #ddd;
1804 .left { text-align: left !important; }
1805 .right { text-align: right !important; }
1806 .center { text-align: center !important; }
1807 .top { vertical-align: top !important; }
1808 .middle { vertical-align: middle !important; }
1809 .bottom { vertical-align: bottom !important; }
1811 .cbi-value-field { line-height: 1.5em; }
1813 .cbi-value-field input[type=checkbox],
1814 .cbi-value-field input[type=radio] {
1820 .cbi-value-field table td {
1824 .table.cbi-section-table input[type="password"],
1825 .table.cbi-section-table input[type="text"],
1826 .table.cbi-section-table textarea,
1827 .table.cbi-section-table select {
1831 .table.cbi-section-table .td.cbi-section-table-cell {
1832 white-space: nowrap;
1836 .table.cbi-section-table .td.cbi-section-table-cell select {
1840 .td.cbi-section-actions {
1842 vertical-align: middle;
1845 .td.cbi-section-actions > * {
1849 .td.cbi-section-actions > * > *,
1850 .td.cbi-section-actions > * > form > * {
1855 .td.cbi-section-actions > * > form {
1856 display: inline-flex;
1860 .table.valign-middle .td {
1861 vertical-align: middle;
1866 .tr.cbi-section-table-titles {
1867 background: #f9f9f9;
1870 .cbi-value-description {
1871 background-image: url(/luci-static/resources/cbi/help.gif);
1872 background-position: .25em .2em;
1873 background-repeat: no-repeat;
1874 margin: .25em 0 0 0;
1875 padding: 0 0 0 1.7em;
1878 .cbi-section-error {
1879 border: 1px solid #f00;
1881 background-color: #fce6e6;
1883 margin-bottom: 18px;
1886 .cbi-section-error ul { margin: 0 0 0 20px; }
1888 .cbi-section-error ul li {
1894 background-color: #fff;
1895 border: 1px solid #ccc;
1898 white-space: nowrap;
1899 background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
1900 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1902 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1903 display: inline-flex;
1904 flex-direction: column;
1909 .ifacebox .ifacebox-head {
1910 border-bottom: 1px solid #ccc;
1915 .ifacebox .ifacebox-head.active {
1916 background: #90c0e0;
1919 .ifacebox .ifacebox-body {
1924 display: inline-block;
1925 flex-direction: row;
1926 white-space: nowrap;
1927 background-color: #fff;
1928 border: 1px solid #ccc;
1930 background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
1931 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1933 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1941 vertical-align: middle;
1944 .ifacebadge-active {
1949 .network-status-table {
1954 .network-status-table .ifacebox {
1959 .network-status-table .ifacebox-body {
1961 flex-direction: column;
1966 .network-status-table .ifacebox-body > * {
1970 .network-status-table .ifacebox-body > span {
1974 .network-status-table .ifacebox-body > div {
1980 #dsl_status_table .ifacebox-body span > strong {
1981 display: inline-block;
1986 .network-status-table .ifacebox-body .ifacebadge {
1987 display: inline-flex;
1995 .ifacebadge.large > * {
2002 display: inline-block;
2003 white-space: nowrap;
2005 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
2009 .zonebadge > strong {
2011 display: inline-block;
2018 .zonebadge > .ifacebadge {
2023 border: 1px dashed #aaa;
2030 .td.cbi-value-field var {
2040 .uci-change-list del,
2041 .uci-change-list ins,
2042 .uci-change-list var,
2043 .uci-change-legend-label del,
2044 .uci-change-legend-label ins,
2045 .uci-change-legend-label var {
2046 text-decoration: none;
2047 font-family: monospace;
2049 border: 1px solid #ccc;
2057 .uci-change-list ins,
2058 .uci-change-legend-label ins {
2063 .uci-change-list del,
2064 .uci-change-legend-label del {
2069 .uci-change-list var,
2070 .uci-change-legend-label var {
2075 .uci-change-list var ins,
2076 .uci-change-list var del {
2077 display: inline-block;
2083 .uci-change-legend {
2087 .uci-change-legend-label {
2092 .uci-change-legend-label > ins,
2093 .uci-change-legend-label > del,
2094 .uci-change-legend-label > var {
2103 .uci-change-legend-label var ins,
2104 .uci-change-legend-label var del {
2119 background: rgba(0, 0, 0, 0.7);
2122 -webkit-overflow-scrolling: touch;
2123 transition: opacity .125s ease-in;
2127 #modal_overlay > .modal {
2134 align-items: center;
2137 box-shadow: 0 0 3px #444;
2138 padding: 1em 1em .5em 1em;
2143 #modal_overlay .modal > * {
2145 line-height: normal;
2146 margin-bottom: .5em;
2149 #modal_overlay .modal > pre,
2150 #modal_overlay .modal > textarea {
2151 white-space: pre-wrap;
2155 body.modal-overlay-active {
2160 body.modal-overlay-active #modal_overlay {
2166 html body.apply-overlay-active {
2167 height: calc(100vh - 63px);
2170 #applyreboot-section {
2174 [data-page="admin-network-dhcp"] [data-name="ip"] {
2180 50% { opacity: .5; }
2181 100% { opacity: 1; }
2185 animation: flash .35s;
2190 padding-left: 32px !important;
2200 background: url(../resources/icons/loading.gif) no-repeat center;
2201 background-size: 16px;