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;
1204 line-height: normal
;
1205 margin-bottom: .5em;
1211 white-space: pre-wrap
;
1215 body
.modal-overlay-active
{
1220 body
.modal-overlay-active #modal_overlay
{
1224 visibility: visible
;
1228 .alert-message
.danger
,
1230 .alert-message
.danger:hover
,
1232 .alert-message
.error
,
1234 .alert-message
.error:hover
,
1236 .alert-message
.success
,
1238 .alert-message
.success:hover
,
1240 .alert-message
.info
,
1242 .alert-message
.info:hover
,
1243 .cbi-tooltip.error, .cbi-tooltip.success, .cbi-tooltip.info {
1247 .btn .close, .alert-message .close {
1248 font-family: Arial
, sans-serif
;
1253 .alert-message
.danger
,
1255 .alert-message
.error
,
1256 .cbi-tooltip.error {
1257 background: linear-gradient
(to bottom
, #ee5f5b, #c43c35) repeat-x
;
1258 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1259 border-color: rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.25);
1262 .btn.success, .alert-message.success, .cbi-tooltip.success {
1263 background: linear-gradient
(to bottom
, #62c462, #57a957) repeat-x
;
1264 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1265 border-color: rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.25);
1268 .btn.info, .alert-message.info, .cbi-tooltip.info {
1269 background: linear-gradient
(to bottom
, #5bc0de, #339bb9) repeat-x
;
1270 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1271 border-color: rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.25);
1274 .alert-message.notice, .cbi-tooltip.notice {
1275 background: linear-gradient
(to bottom
, #efefef, #fefefe) repeat-x
;
1276 text-shadow: 0 -1px 0 rgba
(255, 255, 255, 0.25);
1277 border-color: rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.25);
1284 display: inline-block
;
1285 background: linear-gradient
(#fff, #fff 25%, #e6e6e6) no-repeat
;
1286 padding: 5px 14px 6px;
1287 text-shadow: 0 1px 1px rgba
(255, 255, 255, 0.75);
1290 line-height: normal
;
1291 border: 1px solid
#ccc;
1292 border-bottom-color: #bbb;
1294 box-shadow: inset
0 1px 0 rgba
(255, 255, 255, 0.2), 0 1px 2px rgba
(0, 0, 0, 0.05);
1299 outline: 1px dotted
#666;
1303 .cbi-input-invalid
.cbi-dropdown:not
(.btn
):not
(.cbi-button
),
1304 .cbi-input-invalid
.cbi-dropdown:not
([open
]) > ul
> li
,
1305 .cbi-value-error input {
1310 .cbi-button-positive
,
1311 .cbi-button-fieldadd
,
1318 .cbi-button-neutral
,
1319 .cbi-button-download
,
1332 border-color: #0069d6;
1336 .cbi-button-negative
,
1337 .cbi-section-remove
.cbi-button
,
1339 .cbi-button-remove {
1344 .cbi-page-actions::after {
1350 .cbi-page-actions > * {
1351 vertical-align: middle
;
1354 .cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-negative):not(.cbi-button-save):not(.cbi-button-reset) {
1360 .cbi-button-action
.important
,
1361 .cbi-page-actions
.cbi-button-apply
,
1362 .cbi-section-actions .cbi-button-edit {
1364 background: linear-gradient
(to bottom
, #0069d6, #0049d6) no-repeat
;
1365 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1368 .cbi-button-positive
.important
,
1369 .cbi-page-actions .cbi-button-save {
1371 background: linear-gradient
(to bottom
, #4a4, #484) no-repeat
;
1372 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1375 .cbi-button-negative.important {
1377 background: linear-gradient
(to bottom
, #c44, #c00) no-repeat
;
1378 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1381 .cbi-page-actions
.cbi-button-apply
+ .cbi-button-save
,
1382 .cbi-page-actions .cbi-button-negative + .cbi-button-save {
1383 background: linear-gradient
(#fff, #fff 25%, #e6e6e6);
1384 text-shadow: 0 -1px 0 rgba
(255, 255, 255, 0.75);
1389 display: inline-flex
!important
;
1393 padding: 0 !important
;
1396 .cbi-dropdown:not(.btn):not(.cbi-button) {
1397 background: linear-gradient
(#fff 0%, #e9e8e6 100%);
1398 border: 1px solid
#ccc;
1403 .cbi-dynlist
> .item:focus
,
1404 .cbi-dropdown:focus {
1405 outline: 2px solid
#4b6e9b;
1408 .cbi-dropdown > ul {
1409 margin: 0 !important
;
1418 .cbi-dropdown
.btn
> ul:not
(.dropdown
),
1419 .cbi-dropdown.cbi-button > ul:not(.dropdown) {
1420 margin: 0 0 0 13px !important
;
1423 .cbi-dropdown
.btn
.spinning
> ul:not
(.dropdown
),
1424 .cbi-dropdown.cbi-button.spinning > ul:not(.dropdown) {
1425 margin: 0 !important
;
1428 .cbi-dropdown > ul.preview {
1432 .cbi-dropdown
> .open
,
1433 .cbi-dropdown > .more {
1437 flex-direction: column
;
1438 justify-content: center
;
1444 .cbi-dropdown
.btn
> .open
,
1445 .cbi-dropdown.cbi-button > .open {
1448 border-left: 1px solid
;
1451 .cbi-dropdown
> .more
,
1452 .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li[placeholder] {
1455 text-shadow: 1px 1px 0px #fff;
1457 justify-content: center
;
1460 .cbi-dropdown > ul > li {
1462 white-space: nowrap
;
1464 text-overflow: ellipsis
;
1467 align-items: center
;
1472 .cbi-dropdown
> ul
.dropdown
> li
,
1473 .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li {
1479 .cbi-dropdown > ul > li .hide-open { display: block
; display: initial
; }
1480 .cbi-dropdown > ul > li .hide-close { display: none
; }
1482 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1483 border-left: 1px solid
#ccc;
1486 .cbi-dropdown[empty] > ul {
1490 .cbi-dropdown > ul > li > form {
1494 pointer-events: none
;
1497 .cbi-dropdown > ul > li img {
1498 vertical-align: middle
;
1499 margin-right: .25em;
1502 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1506 .cbi-dropdown > ul > li input[type="text"] {
1510 .cbi-dropdown[open] {
1514 .cbi-dropdown[open] > ul.dropdown {
1516 background: #f6f6f5;
1517 border: 1px solid
#918e8c;
1518 box-shadow: 0 0 4px #918e8c;
1524 transition: max-height
.125s ease-in
;
1527 .cbi-dropdown
> ul
> li
[display
],
1528 .cbi-dropdown
[open
] > ul
.preview
,
1529 .cbi-dropdown
[open
] > ul
.dropdown
> li
,
1530 .cbi-dropdown
[multiple
] > ul
> li
> label
,
1531 .cbi-dropdown
[multiple
][open
] > ul
.dropdown
> li
,
1532 .cbi-dropdown
[multiple
][more
] > .more
,
1533 .cbi-dropdown[multiple][empty] > .more {
1535 display: flex
!important
;
1538 .cbi-dropdown
[empty
] > ul
> li
,
1539 .cbi-dropdown
[optional
][open
] > ul
.dropdown
> li
[placeholder
],
1540 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1541 display: block
!important
;
1544 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none
; }
1545 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block
; display: initial
; }
1547 .cbi-dropdown[open] > ul.dropdown > li {
1548 border-bottom: 1px solid
#ccc;
1551 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1552 background: #b0d0f0;
1555 .cbi-dropdown[open] > ul.dropdown > li.focus {
1556 background: linear-gradient
(90deg, #a3c2e8 0%, #84aad9 100%);
1559 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1561 border-bottom: none
;
1564 .cbi-dropdown[open] > ul.dropdown > li[unselectable] {
1568 .cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
1572 .cbi-dropdown[disabled] {
1573 pointer-events: none
;
1577 input
[type
="text"] + .cbi-button
,
1578 input
[type
="password"] + .cbi-button
,
1579 select
+ .cbi-button
{
1580 border-radius: 0 3px 3px 0;
1584 vertical-align: top
;
1590 select
+ .cbi-button
{
1591 border-left-color: transparent
;
1598 .cbi-title-ref::after {
1602 .cbi-tooltip-container {
1610 box-shadow: 0 0 2px #ccc;
1616 transition: opacity
.25s ease-in
;
1619 .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
1622 transition: opacity
.25s ease-in
;
1626 border: 1px solid
#ccc;
1632 background: #f9f9f9;
1635 .cbi-progressbar > div {
1636 background: #90c0e0;
1638 transition: width
.25s ease-in
;
1642 .cbi-progressbar::after {
1649 text-shadow: 0 0 2px #fff;
1650 content: attr
(title
);
1653 text-overflow: ellipsis
;
1656 .zonebadge .cbi-tooltip {
1658 background: inherit
;
1659 margin: -1.6em 0 0 -5px;
1661 pointer-events: none
;
1662 box-shadow: 0 0 3px #444;
1665 .zonebadge .cbi-tooltip > * {
1674 .zone-forwards > * {
1679 .zone-forwards > span {
1684 .zone-forwards
.zone-src
,
1685 .zone-forwards .zone-dest {
1687 flex-direction: column
;
1690 .btn.active, .btn:active {
1691 box-shadow: inset
0 2px 4px rgba
(0, 0, 0, 0.25), 0 1px 2px rgba
(0, 0, 0, 0.05);
1708 line-height: normal
;
1709 padding: 9px 14px 9px;
1714 padding: 7px 9px 7px;
1718 button
.btn::-moz-focus-inner
, input
[type
=submit
].btn::-moz-focus-inner
{
1728 line-height: 13.5px;
1729 text-shadow: 0 1px 0 #fff;
1735 text-decoration: none
;
1741 padding: .5em .5em .25em .5em;
1742 margin-bottom: .5em;
1744 background: linear-gradient
(to bottom
, #fceec1, #eedc94) repeat-x
;
1745 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1746 border-color: rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.25);
1747 text-shadow: 0 1px 0 rgba
(255, 255, 255, 0.5);
1749 border-style: solid
;
1751 box-shadow: inset
0 1px 0 rgba
(255, 255, 255, 0.25);
1754 .alert-message .close {
1767 line-height: inherit
;
1768 background: transparent
;
1773 .alert-message button {
1778 padding: 1px 3px 2px;
1781 color: #fff !important
;
1782 text-transform: uppercase
;
1783 white-space: nowrap
;
1784 background-color: #bfbfbf;
1795 text-decoration: none
;
1799 background-color: #c43c35;
1803 background-color: #f89406;
1807 background-color: #46a546;
1811 background-color: #62cffc;
1814 /* LuCI specific items */
1815 .hidden { display: none
}
1821 form
.inline
{ display: inline
; margin-bottom: 0; }
1823 header
.pull-right
{ padding-top: 8px; }
1825 #modemenu li:last-child span
.divider
{ display: none
}
1827 #syslog { width: 100%; }
1829 .cbi-section-table
.tr:hover
.td
,
1830 .cbi-section-table
.tr:hover
.th
,
1831 .cbi-section-table .tr:hover::before {
1832 background-color: #f5f5f5;
1835 .cbi-section-table .tr.cbi-section-table-descr .th {
1836 font-weight: normal
;
1839 .cbi-section-table-titles
.named::before
,
1840 .cbi-section-table-descr
.named::before
,
1841 .cbi-section-table-row[data-title]::before {
1842 content: attr
(data-title
) " ";
1843 display: table-cell
;
1844 padding: 10px 10px 9px;
1847 vertical-align: middle
;
1850 .cbi-section-table-titles
.named::before
,
1851 .cbi-section-table-descr
.named::before
,
1852 .cbi-section-table-row[data-title]::before {
1853 border-top: 1px solid
#ddd;
1856 .left { text-align: left
!important
; }
1857 .right { text-align: right
!important
; }
1858 .center { text-align: center
!important
; }
1859 .top { vertical-align: top
!important
; }
1860 .middle { vertical-align: middle
!important
; }
1861 .bottom { vertical-align: bottom
!important
; }
1863 .cbi-value-field { line-height: 1.5em; }
1865 .cbi-value-field input
[type
=checkbox
],
1866 .cbi-value-field input[type=radio] {
1872 .cbi-value-field table td {
1876 .table
.cbi-section-table input
[type
="password"],
1877 .table
.cbi-section-table input
[type
="text"],
1878 .table
.cbi-section-table textarea
,
1879 .table.cbi-section-table select {
1883 .table.cbi-section-table .td.cbi-section-table-cell {
1884 white-space: nowrap
;
1888 .table.cbi-section-table .td.cbi-section-table-cell select {
1892 .td.cbi-section-actions {
1894 vertical-align: middle
;
1897 .td.cbi-section-actions > * {
1901 .td
.cbi-section-actions
> * > *,
1902 .td.cbi-section-actions > * > form > * {
1907 .td.cbi-section-actions > * > form {
1908 display: inline-flex
;
1912 .table.valign-middle .td {
1913 vertical-align: middle
;
1918 .tr.cbi-section-table-titles {
1919 background: #f9f9f9;
1922 .cbi-value-description {
1923 background-image: url
(/luci-static
/resources
/cbi
/help
.gif
);
1924 background-position: .25em .2em;
1925 background-repeat: no-repeat
;
1926 margin: .25em 0 0 0;
1927 padding: 0 0 0 1.7em;
1930 .cbi-section-error {
1931 border: 1px solid
#f00;
1933 background-color: #fce6e6;
1935 margin-bottom: 18px;
1938 .cbi-section-error ul { margin: 0 0 0 20px; }
1940 .cbi-section-error ul li {
1946 background-color: #fff;
1947 border: 1px solid
#ccc;
1950 white-space: nowrap
;
1951 background-image: linear-gradient
(#fff, #fff 25%, #f9f9f9);
1952 text-shadow: 0 1px 1px rgba
(255, 255, 255, 0.75);
1954 box-shadow: inset
0 1px 0 rgba
(255, 255, 255, 0.2), 0 1px 2px rgba
(0, 0, 0, 0.05);
1955 display: inline-flex
;
1956 flex-direction: column
;
1961 .ifacebox .ifacebox-head {
1962 border-bottom: 1px solid
#ccc;
1967 .ifacebox .ifacebox-head.active {
1968 background: #90c0e0;
1971 .ifacebox .ifacebox-body {
1976 display: inline-block
;
1977 flex-direction: row
;
1978 white-space: nowrap
;
1979 background-color: #fff;
1980 border: 1px solid
#ccc;
1982 background-image: linear-gradient
(#fff, #fff 25%, #f9f9f9);
1983 text-shadow: 0 1px 1px rgba
(255, 255, 255, 0.75);
1985 box-shadow: inset
0 1px 0 rgba
(255, 255, 255, 0.2), 0 1px 2px rgba
(0, 0, 0, 0.05);
1993 vertical-align: middle
;
1996 .ifacebadge-active {
2001 .network-status-table {
2006 .network-status-table .ifacebox {
2011 .network-status-table .ifacebox-body {
2013 flex-direction: column
;
2018 .network-status-table .ifacebox-body > * {
2022 .network-status-table .ifacebox-body > span {
2027 .network-status-table .ifacebox-body > div {
2031 #dsl_status_table .ifacebox-body span
> strong
{
2032 display: inline-block
;
2037 .network-status-table .ifacebox-body .ifacebadge {
2046 display: inline-flex
;
2049 .network-status-table .ifacebox-body .ifacebadge > span {
2051 text-overflow: ellipsis
;
2055 .ifacebadge.large > * {
2062 display: inline-block
;
2063 white-space: nowrap
;
2065 text-shadow: 0 1px 1px rgba
(255, 255, 255, 0.75);
2069 .zonebadge > strong {
2071 display: inline-block
;
2078 .zonebadge > .ifacebadge {
2083 border: 1px dashed
#aaa;
2090 .td.cbi-value-field var {
2095 div
.cbi-value var
[data-tooltip
],
2096 .td
.cbi-value-field var
[data-tooltip
],
2097 div
.cbi-value var
.cbi-tooltip-container
,
2098 .td.cbi-value-field var.cbi-tooltip-container {
2100 border-bottom: 1px dotted
#0069d6;
2103 div
.cbi-value var
.cbi-tooltip-container
,
2104 .td.cbi-value-field var.cbi-tooltip-container .cbi-tooltip {
2106 white-space: normal
;
2110 #modal_overlay > .modal
.uci-dialog
,
2111 #modal_overlay > .modal
.cbi-modal
{
2120 .uci-change-list del
,
2121 .uci-change-list ins
,
2122 .uci-change-list var
,
2123 .uci-change-legend-label del
,
2124 .uci-change-legend-label ins
,
2125 .uci-change-legend-label var {
2126 text-decoration: none
;
2127 font-family: monospace
;
2129 border: 1px solid
#ccc;
2137 .uci-change-list ins
,
2138 .uci-change-legend-label ins {
2143 .uci-change-list del
,
2144 .uci-change-legend-label del {
2149 .uci-change-list var
,
2150 .uci-change-legend-label var {
2155 .uci-change-list var ins
,
2156 .uci-change-list var del {
2157 display: inline-block
;
2163 .uci-change-legend {
2167 .uci-change-legend-label {
2172 .uci-change-legend-label
> ins
,
2173 .uci-change-legend-label
> del
,
2174 .uci-change-legend-label > var {
2183 .uci-change-legend-label var ins
,
2184 .uci-change-legend-label var del {
2199 background: rgba
(0, 0, 0, 0.7);
2202 -webkit-overflow-scrolling: touch
;
2203 transition: opacity
.125s ease-in
;
2207 #modal_overlay > .modal
{
2214 align-items: center
;
2217 box-shadow: 0 0 3px #444;
2218 padding: 1em 1em .5em 1em;
2222 #modal_overlay .modal
> * {
2224 line-height: normal
;
2225 margin-bottom: .5em;
2228 #modal_overlay .modal
> pre
,
2229 #modal_overlay .modal
> textarea
{
2230 white-space: pre-wrap
;
2234 body
.modal-overlay-active
{
2239 body
.modal-overlay-active #modal_overlay
{
2245 html body
.apply-overlay-active
{
2246 height: calc
(100vh - 63px);
2249 #applyreboot-section {
2253 [data-page
="admin-network-dhcp"] [data-name
="ip"] {
2259 50% { opacity: .5; }
2260 100% { opacity: 1; }
2264 animation: flash
.35s;
2269 padding-left: 32px !important
;
2279 background: url
(../resources/icons/loading.gif) no-repeat center
;
2280 background-size: 16px;
2289 [data-tab-active
="true"] {
2293 transition: opacity
.25s ease-in
;
2299 border: 1px solid
#ccc;
2302 flex-direction: column
;
2308 .cbi-filebrowser.open {
2312 transition: opacity
.25s ease-in
;
2315 .cbi-filebrowser > * {
2318 text-overflow: ellipsis
;
2319 padding: 0 0 .25em 0;
2320 margin: .25em .25em 0px .25em;
2321 white-space: nowrap
;
2322 border-bottom: 1px solid
#ccc;
2325 .cbi-filebrowser .cbi-button-positive {
2326 margin-right: .25em;
2329 .cbi-filebrowser > div {
2330 border-bottom: none
;
2333 .cbi-filebrowser > ul > li {
2335 flex-direction: row
;
2338 .cbi-filebrowser > ul > li:hover {
2339 background: #f5f5f5;
2342 .cbi-filebrowser > ul > li > div:first-child {
2345 text-overflow: ellipsis
;
2348 .cbi-filebrowser > ul > li > div:last-child {
2353 .cbi-filebrowser > ul > li > div:last-child > button {
2354 padding: .125em .25em;
2355 margin: 1px 0 1px .25em;
2358 .cbi-filebrowser .upload {
2360 flex-direction: row
;
2362 margin: 0 -.125em .25em -.125em;
2363 padding: 0 0 .125em 0px;
2364 border-bottom: 1px solid
#ccc;
2367 .cbi-filebrowser .upload > * {
2372 .cbi-filebrowser .upload > .btn {
2376 .cbi-filebrowser .upload > div {
2381 .cbi-filebrowser .upload > div > input {
2385 @keyframes fade-in
{
2387 100% { opacity: 1; }
2390 @keyframes fade-out
{
2392 100% { opacity: 0; }
2396 animation: fade-in
.4s ease
;
2400 animation: fade-out
.4s ease
;