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: 18px 5px 5px 5px;
149 .container:before, .container:after {
161 text-decoration: none
;
162 line-height: inherit
;
163 font-weight: inherit
;
168 text-decoration: underline
;
184 * Headings, body text, lists, code, and more for a versatile and durable typography system
185 * ---------------------------------------------------------------------------------------- */
189 .table .tr.cbi-section-table-descr .th {
269 text-transform: uppercase
;
273 margin: 0 0 18px 25px;
320 border-bottom: 1px solid
#eee;
330 font-weight: inherit
;
331 line-height: inherit
;
334 small
{ font-size: 0.9em }
344 font-family: Monaco
, Andale Mono
, Courier New
, monospace
;
350 background-color: #fee9cc;
351 color: rgba
(0, 0, 0, 0.75);
356 background-color: #f5f5f5;
362 border: 1px solid
#ccc;
363 border: 1px solid rgba
(0, 0, 0, 0.15);
366 white-space: pre-wrap
;
367 word-wrap: break-word
;
371 * Base styles for various input types, form layouts, and states
372 * ------------------------------------------------------------- */
390 form
.cbi-tab-descr
{
401 form
.clearfix:before
, form
.clearfix:after
,
402 .cbi-value:before, .cbi-value:after {
408 form
.clearfix:after
,
418 font-family: "Helvetica Neue", Helvetica
, Arial
, sans-serif
;
429 .cbi-value label.cbi-value-title {
439 input
[type
=checkbox
], input
[type
=radio
] {
443 label
> input
[type
="checkbox"],
444 label
> input
[type
="radio"] {
445 vertical-align: bottom
;
452 .cbi-dropdown:not
(.btn
):not
(.cbi-button
),
454 display: inline-block
;
459 border: 1px solid
#ccc;
465 .cbi-dropdown:not
(.btn
):not
(.cbi-button
),
474 .cbi-dropdown:not
(.btn
):not
(.cbi-button
),
484 display: inline-flex
;
485 flex-direction: column
;
488 .cbi-dynlist > .item {
490 box-shadow: 0 0 2px #ccc;
492 padding: 2px 2em 2px 4px;
493 border: 1px solid
#ccc;
496 pointer-events: none
;
498 word-break: break-all
;
501 .cbi-dynlist > .item::after {
504 display: inline-flex
;
510 border: 1px solid
#ccc;
511 border-radius: 0 3px 3px 0;
514 pointer-events: auto
;
517 .cbi-dynlist > .add-item {
521 .cbi-dynlist
> .add-item
> input
,
522 .cbi-dynlist > .add-item > button {
525 text-overflow: ellipsis
;
532 box-shadow: inset
0 -1px 3px rgba
(0, 0, 0, 0.1);
535 input
[type
=checkbox
], input
[type
=radio
] {
548 background-color: #fff;
551 line-height: initial
;
553 width: auto
!important
;
556 input
[type
=button
], input
[type
=reset
], input
[type
=submit
] {
563 background-color: #fff;
566 .td
> input
[type
=text
],
567 .td
> input
[type
=password
],
569 .td
> .cbi-dropdown:not
(.btn
):not
(.cbi-button
),
570 .cbi-dynlist > .add-item > .cbi-dropdown {
575 background-color: #fff;
578 box-shadow: inset
0 1px 2px rgba
(0, 0, 0, 0.025);
586 ::-webkit-input-placeholder
{
590 .item::after, .btn, .cbi-button, input, button, textarea {
591 transition: border linear
0.2s, box-shadow linear
0.2s;
592 box-shadow: inset
0 1px 3px rgba
(0, 0, 0, 0.1);
596 .btn:hover
, .cbi-button:hover
, button:hover
,
597 input:focus
, textarea:focus
{
599 border-color: rgba
(82, 168, 236, 0.8) !important
;
600 box-shadow: inset
0 1px 3px rgba
(0, 0, 0, 0.1), 0 0 8px rgba
(82, 168, 236, 0.6);
601 text-decoration: none
;
604 input
[type
=file
]:focus
, input
[type
=checkbox
]:focus
, select:focus
{
606 outline: 1px dotted
#666;
617 background-color: #f5f5f5;
619 pointer-events: none
;
625 pointer-events: auto
;
630 .cbi-section-create {
631 padding: 0 0 10px 10px;
634 .cbi-section-create {
636 display: inline-flex
;
640 .cbi-section-create > * {
645 .cbi-section-create > * > input {
653 padding: 17px 20px 18px 17px;
654 border-top: 1px solid
#ddd;
655 border-radius: 0 0 3px 3px;
659 .actions
.secondary-action
,
660 .cbi-page-actions .secondary-action{
664 .actions
.secondary-action a
,
665 .cbi-page-actions .secondary-action a {
669 .actions
.secondary-action
a:hover
,
670 .cbi-page-actions .secondary-action a:hover {
671 text-decoration: underline
;
674 .cbi-page-actions > form {
679 .help-inline, .help-block {
702 * Tables for, you guessed it, tabular data
703 * ---------------------------------------- */
704 .tr { display: table-row
; }
705 .table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
706 .table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
714 border-collapse: collapse
;
718 .table .th, .table .td {
720 vertical-align: middle
; /* Fixme */
721 padding: 10px 10px 9px;
726 .table .tr:first-child .th {
732 .table .td, .table .th {
733 border-top: 1px solid
#ddd;
737 height: calc
(3em + 20px);
740 .tr.placeholder > .td {
750 .tr.drag-over-below {
751 border: 2px solid
#0069d6;
752 border-width: 2px 0 0 0;
755 .tr.drag-over-below {
756 border-width: 0 0 2px 0;
760 * Repeatable UI elements outside the base styles provided from the scaffolding
761 * ---------------------------------------------------------------------------- */
774 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
777 header h3
a:hover
, header
.brand:hover
, header ul
.active
> a
{
778 background-color: #333;
779 background-color: rgba
(255, 255, 255, 0.05);
781 text-decoration: none
;
788 header h3 a
, header
.brand
{
791 padding: 8px 20px 12px;
805 background-color: #222;
806 background-repeat: repeat-x
;
807 background-image: linear-gradient
(to bottom
, #333333, #222222);
808 box-shadow: 0 1px 3px rgba
(0, 0, 0, 0.25), inset
0 -1px 0 rgba
(0, 0, 0, 0.1);
812 header div
> ul
, .nav
{
820 header div
> ul
> li
, .nav
> li
{
825 header div
> ul a
, .nav a
{
828 padding: 10px 10px 11px;
830 text-decoration: none
;
833 header div
> ul
a:hover
, .nav
a:hover
{
835 text-decoration: none
;
838 header div
> ul
.active
> a
, .nav
.active
> a
{
839 background-color: #222;
840 background-color: rgba
(0, 0, 0, 0.5);
843 header div
> ul
.secondary-nav
, .nav
.secondary-nav
{
849 header div
> ul
.secondary-nav
.menu-dropdown
,
850 .nav
.secondary-nav
.menu-dropdown
,
851 header div
> ul
.secondary-nav
.dropdown-menu
,
852 .nav.secondary-nav .dropdown-menu {
857 header div
> ul a
.menu:hover
,
859 header div
> ul li
.open
.menu
,
861 header div
> ul
.dropdown-toggle:hover
,
862 .nav
.dropdown-toggle:hover
,
863 header div
> ul
.dropdown
.open
.dropdown-toggle
,
864 .nav .dropdown.open .dropdown-toggle {
866 background: rgba
(255, 255, 255, 0.05);
869 header div
> ul
.menu-dropdown
,
871 header div
> ul
.dropdown-menu
,
872 .nav .dropdown-menu {
873 background-color: #333;
876 header div
> ul
.menu-dropdown a
.menu
,
877 .nav
.menu-dropdown a
.menu
,
878 header div
> ul
.dropdown-menu a
.menu
,
879 .nav
.dropdown-menu a
.menu
,
880 header div
> ul
.menu-dropdown
.dropdown-toggle
,
881 .nav
.menu-dropdown
.dropdown-toggle
,
882 header div
> ul
.dropdown-menu
.dropdown-toggle
,
883 .nav .dropdown-menu .dropdown-toggle {
887 header div
> ul
.menu-dropdown a
.menu
.open
,
888 .nav
.menu-dropdown a
.menu
.open
,
889 header div
> ul
.dropdown-menu a
.menu
.open
,
890 .nav
.dropdown-menu a
.menu
.open
,
891 header div
> ul
.menu-dropdown
.dropdown-toggle
.open
,
892 .nav
.menu-dropdown
.dropdown-toggle
.open
,
893 header div
> ul
.dropdown-menu
.dropdown-toggle
.open
,
894 .nav .dropdown-menu .dropdown-toggle.open {
896 background: rgba
(255, 255, 255, 0.05);
899 header div
> ul
.menu-dropdown li a
,
900 .nav
.menu-dropdown li a
,
901 header div
> ul
.dropdown-menu li a
,
902 .nav .dropdown-menu li a {
904 text-shadow: 0 1px 0 rgba
(0, 0, 0, 0.5);
907 header div
> ul
.menu-dropdown li
a:hover
,
908 .nav
.menu-dropdown li
a:hover
,
909 header div
> ul
.dropdown-menu li
a:hover
,
910 .nav .dropdown-menu li a:hover {
911 background-color: #191919;
912 background-repeat: repeat-x
;
913 background-image: linear-gradient
(to bottom
, #292929, #191919);
917 header div
> ul
.menu-dropdown
.active a
,
918 .nav
.menu-dropdown
.active a
,
919 header div
> ul
.dropdown-menu
.active a
,
920 .nav .dropdown-menu .active a {
924 header div
> ul
.menu-dropdown
.divider
,
925 .nav
.menu-dropdown
.divider
,
926 header div
> ul
.dropdown-menu
.divider
,
927 .nav .dropdown-menu .divider {
928 background-color: #222;
932 header ul
.menu-dropdown li a
, header ul
.dropdown-menu li a
{
940 a
.menu:after
, .dropdown-toggle:after
{
943 display: inline-block
;
945 text-indent: -99999px;
949 border-left: 4px solid transparent
;
950 border-right: 4px solid transparent
;
951 border-top: 4px solid
#fff;
955 .menu-dropdown, .dropdown-menu {
956 background-color: #fff;
970 border-color: rgba
(0, 0, 0, 0.2);
972 border-width: 0 1px 1px;
973 border-radius: 0 0 6px 6px;
974 box-shadow: 0 2px 4px rgba
(0, 0, 0, 0.2);
975 background-clip: padding-box
;
978 .menu-dropdown li, .dropdown-menu li {
981 background-color: transparent
;
984 .menu-dropdown .divider, .dropdown-menu .divider {
988 background-color: #eee;
989 border-bottom: 1px solid
#fff;
992 header
.dropdown-menu a
, .dropdown-menu a
{
999 text-shadow: 0 1px 0 #fff;
1002 header
.dropdown-menu
a:hover
,
1003 .dropdown-menu
a:hover
,
1004 header
.dropdown-menu a
.hover
,
1005 .dropdown-menu a.hover {
1006 background-color: #ddd;
1007 background-repeat: repeat-x
;
1008 background-image: linear-gradient
(to bottom
, #eee, #ddd);
1010 text-decoration: none
;
1011 box-shadow: inset
0 1px 0 rgba
(0, 0, 0, 0.025), inset
0 -1px rgba
(0, 0, 0, 0.025);
1015 .dropdown
.open
.menu
,
1016 .open
.dropdown-toggle
,
1017 .dropdown.open .dropdown-toggle {
1020 background: rgba
(0, 0, 0, 0.3);
1023 .open
.menu-dropdown
,
1024 .dropdown
.open
.menu-dropdown
,
1025 .open
.dropdown-menu
,
1026 .dropdown.open .dropdown-menu {
1030 .dropdown:hover ul.dropdown-menu {
1034 .dropdown-menu .dropdown-menu {
1043 .tabs, .cbi-tabmenu {
1044 margin: 0 -5px 18px;
1049 background: linear-gradient
(#fff 28px, #ddd 28px);
1050 background-size: 1px 29px;
1051 background-position: left bottom
;
1054 .tabs > li, .cbi-tabmenu > li {
1057 align-items: center
;
1060 margin: 4px 2px 0 2px;
1062 border: 1px solid
#ddd;
1063 border-bottom: none
;
1064 border-radius: 4px 4px 0 0;
1068 .tabs > li > a, .cbi-tabmenu > li > a {
1070 white-space: nowrap
;
1072 text-overflow: ellipsis
;
1074 text-decoration: none
;
1075 border-radius: 4px 4px 0 0;
1080 .tabs > li:not(.active):hover, .cbi-tabmenu > .cbi-tab-disabled:hover {
1081 background: linear-gradient
(#fff 90%, #ddd 100%);
1084 .tabs > li:not(.active), .cbi-tabmenu > .cbi-tab-disabled {
1086 background: linear-gradient
(#eee 90%, #ddd 100%);
1089 .cbi-tab-disabled[data-errors]::after {
1090 content: attr
(data-errors
);
1091 background: #c43c35;
1105 .cbi-tabmenu.map > li {
1110 .cbi-tabcontainer > fieldset.cbi-section[id] > legend {
1114 .tabs .menu-dropdown, .tabs .dropdown-menu {
1117 border-radius: 0 6px 6px 6px;
1120 .tabs a.menu:after, .tabs .dropdown-toggle:after {
1121 border-top-color: #999;
1126 .tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle {
1130 .tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after {
1131 border-top-color: #555;
1134 .tab-content
> .tab-pane
,
1135 .tab-content > div {
1139 .tab-content > .active {
1146 background-color: #f5f5f5;
1147 background-repeat: repeat-x
;
1148 background-image: linear-gradient
(to bottom
, #fff, #f5f5f5);
1149 border: 1px solid
#ddd;
1151 box-shadow: inset
0 1px 0 #fff;
1156 text-shadow: 0 1px 0 #fff;
1159 .breadcrumb .divider {
1164 .breadcrumb .active a {
1171 border-top: 1px solid
#eee;
1180 background: rgba
(0, 0, 0, 0.7);
1183 -webkit-overflow-scrolling: touch
;
1184 transition: opacity
.125s ease-in
;
1196 align-items: center
;
1199 box-shadow: 0 0 3px #444;
1200 padding: 1em 1em .5em 1em;
1206 line-height: normal
;
1207 margin-bottom: .5em;
1213 white-space: pre-wrap
;
1217 body
.modal-overlay-active
{
1222 body
.modal-overlay-active #modal_overlay
{
1226 visibility: visible
;
1230 .alert-message
.danger
,
1232 .alert-message
.danger:hover
,
1234 .alert-message
.error
,
1236 .alert-message
.error:hover
,
1238 .alert-message
.success
,
1240 .alert-message
.success:hover
,
1242 .alert-message
.info
,
1244 .alert-message
.info:hover
,
1245 .cbi-tooltip.error, .cbi-tooltip.success, .cbi-tooltip.info {
1249 .btn .close, .alert-message .close {
1250 font-family: Arial
, sans-serif
;
1255 .alert-message
.danger
,
1257 .alert-message
.error
,
1258 .cbi-tooltip.error {
1259 background: linear-gradient
(to bottom
, #ee5f5b, #c43c35) repeat-x
;
1260 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1261 border-color: rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.25);
1264 .btn.success, .alert-message.success, .cbi-tooltip.success {
1265 background: linear-gradient
(to bottom
, #62c462, #57a957) repeat-x
;
1266 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1267 border-color: rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.25);
1270 .btn.info, .alert-message.info, .cbi-tooltip.info {
1271 background: linear-gradient
(to bottom
, #5bc0de, #339bb9) repeat-x
;
1272 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1273 border-color: rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.25);
1276 .alert-message.notice, .cbi-tooltip.notice {
1277 background: linear-gradient
(to bottom
, #efefef, #fefefe) repeat-x
;
1278 text-shadow: 0 -1px 0 rgba
(255, 255, 255, 0.25);
1279 border-color: rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.25);
1286 display: inline-block
;
1287 background: linear-gradient
(#fff, #fff 25%, #e6e6e6) no-repeat
;
1288 padding: 5px 14px 6px;
1289 text-shadow: 0 1px 1px rgba
(255, 255, 255, 0.75);
1292 line-height: normal
;
1293 border: 1px solid
#ccc;
1294 border-bottom-color: #bbb;
1296 box-shadow: inset
0 1px 0 rgba
(255, 255, 255, 0.2), 0 1px 2px rgba
(0, 0, 0, 0.05);
1301 outline: 1px dotted
#666;
1305 .cbi-input-invalid
.cbi-dropdown:not
(.btn
):not
(.cbi-button
),
1306 .cbi-input-invalid
.cbi-dropdown:not
([open
]) > ul
> li
,
1307 .cbi-value-error input {
1312 .cbi-button-positive
,
1313 .cbi-button-fieldadd
,
1320 .cbi-button-neutral
,
1321 .cbi-button-download
,
1334 border-color: #0069d6;
1338 .cbi-button-negative
,
1339 .cbi-section-remove
.cbi-button
,
1341 .cbi-button-remove {
1346 .cbi-page-actions::after {
1352 .cbi-page-actions > * {
1353 vertical-align: middle
;
1356 .cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-negative):not(.cbi-button-save):not(.cbi-button-reset) {
1362 .cbi-button-action
.important
,
1363 .cbi-page-actions
.cbi-button-apply
,
1364 .cbi-section-actions .cbi-button-edit {
1366 background: linear-gradient
(to bottom
, #0069d6, #0049d6) no-repeat
;
1367 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1370 .cbi-button-positive
.important
,
1371 .cbi-page-actions .cbi-button-save {
1373 background: linear-gradient
(to bottom
, #4a4, #484) no-repeat
;
1374 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1377 .cbi-button-negative.important {
1379 background: linear-gradient
(to bottom
, #c44, #c00) no-repeat
;
1380 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1383 .cbi-page-actions
.cbi-button-apply
+ .cbi-button-save
,
1384 .cbi-page-actions .cbi-button-negative + .cbi-button-save {
1385 background: linear-gradient
(#fff, #fff 25%, #e6e6e6);
1386 text-shadow: 0 -1px 0 rgba
(255, 255, 255, 0.75);
1391 display: inline-flex
!important
;
1395 padding: 0 !important
;
1398 .cbi-dropdown:not(.btn):not(.cbi-button) {
1399 background: linear-gradient
(#fff 0%, #e9e8e6 100%);
1400 border: 1px solid
#ccc;
1405 .cbi-dynlist
> .item:focus
,
1406 .cbi-dropdown:focus {
1407 outline: 2px solid
#4b6e9b;
1410 .cbi-dropdown > ul {
1411 margin: 0 !important
;
1420 .cbi-dropdown
.btn
> ul:not
(.dropdown
),
1421 .cbi-dropdown.cbi-button > ul:not(.dropdown) {
1422 margin: 0 0 0 13px !important
;
1425 .cbi-dropdown
.btn
.spinning
> ul:not
(.dropdown
),
1426 .cbi-dropdown.cbi-button.spinning > ul:not(.dropdown) {
1427 margin: 0 !important
;
1430 .cbi-dropdown > ul.preview {
1434 .cbi-dropdown
> .open
,
1435 .cbi-dropdown > .more {
1439 flex-direction: column
;
1440 justify-content: center
;
1446 .cbi-dropdown
.btn
> .open
,
1447 .cbi-dropdown.cbi-button > .open {
1450 border-left: 1px solid
;
1453 .cbi-dropdown
> .more
,
1454 .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li[placeholder] {
1457 text-shadow: 1px 1px 0px #fff;
1459 justify-content: center
;
1462 .cbi-dropdown > ul > li {
1464 white-space: nowrap
;
1466 text-overflow: ellipsis
;
1469 align-items: center
;
1474 .cbi-dropdown
> ul
.dropdown
> li
,
1475 .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li {
1481 .cbi-dropdown > ul > li .hide-open { display: block
; display: initial
; }
1482 .cbi-dropdown > ul > li .hide-close { display: none
; }
1484 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1485 border-left: 1px solid
#ccc;
1488 .cbi-dropdown[empty] > ul {
1492 .cbi-dropdown > ul > li > form {
1496 pointer-events: none
;
1499 .cbi-dropdown > ul > li img {
1500 vertical-align: middle
;
1501 margin-right: .25em;
1504 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1508 .cbi-dropdown > ul > li input[type="text"] {
1512 .cbi-dropdown[open] {
1516 .cbi-dropdown[open] > ul.dropdown {
1518 background: #f6f6f5;
1519 border: 1px solid
#918e8c;
1520 box-shadow: 0 0 4px #918e8c;
1526 transition: max-height
.125s ease-in
;
1529 .cbi-dropdown
> ul
> li
[display
],
1530 .cbi-dropdown
[open
] > ul
.preview
,
1531 .cbi-dropdown
[open
] > ul
.dropdown
> li
,
1532 .cbi-dropdown
[multiple
] > ul
> li
> label
,
1533 .cbi-dropdown
[multiple
][open
] > ul
.dropdown
> li
,
1534 .cbi-dropdown
[multiple
][more
] > .more
,
1535 .cbi-dropdown[multiple][empty] > .more {
1537 display: flex
!important
;
1540 .cbi-dropdown
[empty
] > ul
> li
,
1541 .cbi-dropdown
[optional
][open
] > ul
.dropdown
> li
[placeholder
],
1542 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1543 display: block
!important
;
1546 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none
; }
1547 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block
; display: initial
; }
1549 .cbi-dropdown[open] > ul.dropdown > li {
1550 border-bottom: 1px solid
#ccc;
1553 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1554 background: #b0d0f0;
1557 .cbi-dropdown[open] > ul.dropdown > li.focus {
1558 background: linear-gradient
(90deg, #a3c2e8 0%, #84aad9 100%);
1561 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1563 border-bottom: none
;
1566 .cbi-dropdown[open] > ul.dropdown > li[unselectable] {
1570 .cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
1574 .cbi-dropdown[disabled] {
1575 pointer-events: none
;
1579 input
[type
="text"] + .cbi-button
,
1580 input
[type
="password"] + .cbi-button
,
1581 select
+ .cbi-button
{
1582 border-radius: 0 3px 3px 0;
1586 vertical-align: top
;
1592 select
+ .cbi-button
{
1593 border-left-color: transparent
;
1600 .cbi-title-ref::after {
1604 .cbi-tooltip-container {
1612 box-shadow: 0 0 2px #ccc;
1618 transition: opacity
.25s ease-in
;
1621 .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
1624 transition: opacity
.25s ease-in
;
1628 border: 1px solid
#ccc;
1634 background: #f9f9f9;
1637 .cbi-progressbar > div {
1638 background: #90c0e0;
1640 transition: width
.25s ease-in
;
1644 .cbi-progressbar::after {
1651 text-shadow: 0 0 2px #fff;
1652 content: attr
(title
);
1655 text-overflow: ellipsis
;
1658 .zonebadge .cbi-tooltip {
1660 background: inherit
;
1661 margin: -1.6em 0 0 -5px;
1663 pointer-events: none
;
1664 box-shadow: 0 0 3px #444;
1667 .zonebadge .cbi-tooltip > * {
1676 .zone-forwards > * {
1681 .zone-forwards > span {
1686 .zone-forwards
.zone-src
,
1687 .zone-forwards .zone-dest {
1689 flex-direction: column
;
1692 .btn.active, .btn:active {
1693 box-shadow: inset
0 2px 4px rgba
(0, 0, 0, 0.25), 0 1px 2px rgba
(0, 0, 0, 0.05);
1710 line-height: normal
;
1711 padding: 9px 14px 9px;
1716 padding: 7px 9px 7px;
1720 button
.btn::-moz-focus-inner
, input
[type
=submit
].btn::-moz-focus-inner
{
1730 line-height: 13.5px;
1731 text-shadow: 0 1px 0 #fff;
1737 text-decoration: none
;
1743 padding: .5em .5em .25em .5em;
1744 margin-bottom: .5em;
1746 background: linear-gradient
(to bottom
, #fceec1, #eedc94) repeat-x
;
1747 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1748 border-color: rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.25);
1749 text-shadow: 0 1px 0 rgba
(255, 255, 255, 0.5);
1751 border-style: solid
;
1753 box-shadow: inset
0 1px 0 rgba
(255, 255, 255, 0.25);
1756 .alert-message .close {
1769 line-height: inherit
;
1770 background: transparent
;
1775 .alert-message button {
1780 header
[data-indicator
] {
1781 padding: 1px 3px 2px;
1784 color: #fff !important
;
1785 text-transform: uppercase
;
1786 white-space: nowrap
;
1787 background-color: #bfbfbf;
1792 header
[data-indicator
][data-clickable
] {
1802 text-decoration: none
;
1806 background-color: #c43c35;
1810 background-color: #f89406;
1814 background-color: #46a546;
1818 header
[data-indicator
][data-style
="active"] {
1819 background-color: #62cffc;
1822 /* LuCI specific items */
1823 .hidden { display: none
}
1829 form
.inline
{ display: inline
; margin-bottom: 0; }
1831 header
.pull-right
{ padding-top: 8px; }
1833 #modemenu li:last-child span
.divider
{ display: none
}
1835 #syslog { width: 100%; }
1837 .cbi-section-table
.tr:hover
.td
,
1838 .cbi-section-table
.tr:hover
.th
,
1839 .cbi-section-table .tr:hover::before {
1840 background-color: #f5f5f5;
1843 .cbi-section-table .tr.cbi-section-table-descr .th {
1844 font-weight: normal
;
1847 .cbi-section-table-titles
.named::before
,
1848 .cbi-section-table-descr
.named::before
,
1849 .cbi-section-table-row[data-title]::before {
1850 content: attr
(data-title
) " ";
1851 display: table-cell
;
1852 padding: 10px 10px 9px;
1855 vertical-align: middle
;
1858 .cbi-section-table-titles
.named::before
,
1859 .cbi-section-table-descr
.named::before
,
1860 .cbi-section-table-row[data-title]::before {
1861 border-top: 1px solid
#ddd;
1864 .left { text-align: left
!important
; }
1865 .right { text-align: right
!important
; }
1866 .center { text-align: center
!important
; }
1867 .top { vertical-align: top
!important
; }
1868 .middle { vertical-align: middle
!important
; }
1869 .bottom { vertical-align: bottom
!important
; }
1871 .cbi-value-field { line-height: 1.5em; }
1873 .cbi-value-field input
[type
=checkbox
],
1874 .cbi-value-field input[type=radio] {
1880 .cbi-value-field table td {
1884 .table
.cbi-section-table input
[type
="password"],
1885 .table
.cbi-section-table input
[type
="text"],
1886 .table
.cbi-section-table textarea
,
1887 .table.cbi-section-table select {
1891 .table.cbi-section-table .td.cbi-section-table-cell {
1892 white-space: nowrap
;
1896 .table.cbi-section-table .td.cbi-section-table-cell select {
1900 .td.cbi-section-actions {
1902 vertical-align: middle
;
1905 .td.cbi-section-actions > * {
1909 .td
.cbi-section-actions
> * > *,
1910 .td.cbi-section-actions > * > form > * {
1915 .td.cbi-section-actions > * > form {
1916 display: inline-flex
;
1920 .table.valign-middle .td {
1921 vertical-align: middle
;
1926 .tr.cbi-section-table-titles {
1927 background: #f9f9f9;
1930 .cbi-value-description {
1931 background-image: url
(/luci-static
/resources
/cbi
/help
.gif
);
1932 background-position: .25em .2em;
1933 background-repeat: no-repeat
;
1934 margin: .25em 0 0 0;
1935 padding: 0 0 0 1.7em;
1938 .cbi-section-error {
1939 border: 1px solid
#f00;
1941 background-color: #fce6e6;
1943 margin-bottom: 18px;
1946 .cbi-section-error ul { margin: 0 0 0 20px; }
1948 .cbi-section-error ul li {
1954 background-color: #fff;
1955 border: 1px solid
#ccc;
1958 white-space: nowrap
;
1959 background-image: linear-gradient
(#fff, #fff 25%, #f9f9f9);
1960 text-shadow: 0 1px 1px rgba
(255, 255, 255, 0.75);
1962 box-shadow: inset
0 1px 0 rgba
(255, 255, 255, 0.2), 0 1px 2px rgba
(0, 0, 0, 0.05);
1963 display: inline-flex
;
1964 flex-direction: column
;
1969 .ifacebox .ifacebox-head {
1970 border-bottom: 1px solid
#ccc;
1975 .ifacebox .ifacebox-head.active {
1976 background: #90c0e0;
1979 .ifacebox .ifacebox-body {
1984 display: inline-block
;
1985 flex-direction: row
;
1986 white-space: nowrap
;
1987 background-color: #fff;
1988 border: 1px solid
#ccc;
1990 background-image: linear-gradient
(#fff, #fff 25%, #f9f9f9);
1991 text-shadow: 0 1px 1px rgba
(255, 255, 255, 0.75);
1993 box-shadow: inset
0 1px 0 rgba
(255, 255, 255, 0.2), 0 1px 2px rgba
(0, 0, 0, 0.05);
2001 vertical-align: middle
;
2004 .ifacebadge-active {
2009 .network-status-table {
2014 .network-status-table .ifacebox {
2019 .network-status-table .ifacebox-body {
2021 flex-direction: column
;
2026 .network-status-table .ifacebox-body > * {
2030 .network-status-table .ifacebox-body > span {
2035 .network-status-table .ifacebox-body > div {
2041 #dsl_status_table .ifacebox-body span
> strong
{
2042 display: inline-block
;
2047 .network-status-table .ifacebox-body .ifacebadge {
2056 display: inline-flex
;
2059 .network-status-table .ifacebox-body .ifacebadge > span {
2061 text-overflow: ellipsis
;
2065 .ifacebadge.large > * {
2072 display: inline-block
;
2073 white-space: nowrap
;
2075 text-shadow: 0 1px 1px rgba
(255, 255, 255, 0.75);
2079 .zonebadge > strong {
2081 display: inline-block
;
2088 .zonebadge > .ifacebadge {
2093 border: 1px dashed
#aaa;
2100 .td.cbi-value-field var {
2105 div
.cbi-value var
[data-tooltip
],
2106 .td
.cbi-value-field var
[data-tooltip
],
2107 div
.cbi-value var
.cbi-tooltip-container
,
2108 .td.cbi-value-field var.cbi-tooltip-container {
2110 border-bottom: 1px dotted
#0069d6;
2113 div
.cbi-value var
.cbi-tooltip-container
,
2114 .td.cbi-value-field var.cbi-tooltip-container .cbi-tooltip {
2116 white-space: normal
;
2120 #modal_overlay > .modal
.uci-dialog
,
2121 #modal_overlay > .modal
.cbi-modal
{
2130 .uci-change-list del
,
2131 .uci-change-list ins
,
2132 .uci-change-list var
,
2133 .uci-change-legend-label del
,
2134 .uci-change-legend-label ins
,
2135 .uci-change-legend-label var {
2136 text-decoration: none
;
2137 font-family: monospace
;
2139 border: 1px solid
#ccc;
2147 .uci-change-list ins
,
2148 .uci-change-legend-label ins {
2153 .uci-change-list del
,
2154 .uci-change-legend-label del {
2159 .uci-change-list var
,
2160 .uci-change-legend-label var {
2165 .uci-change-list var ins
,
2166 .uci-change-list var del {
2167 display: inline-block
;
2173 .uci-change-legend {
2177 .uci-change-legend-label {
2182 .uci-change-legend-label
> ins
,
2183 .uci-change-legend-label
> del
,
2184 .uci-change-legend-label > var {
2193 .uci-change-legend-label var ins
,
2194 .uci-change-legend-label var del {
2209 background: rgba
(0, 0, 0, 0.7);
2212 -webkit-overflow-scrolling: touch
;
2213 transition: opacity
.125s ease-in
;
2217 #modal_overlay > .modal
{
2224 align-items: center
;
2227 box-shadow: 0 0 3px #444;
2228 padding: 1em 1em .5em 1em;
2232 #modal_overlay .modal
> * {
2234 line-height: normal
;
2235 margin-bottom: .5em;
2238 #modal_overlay .modal
> pre
,
2239 #modal_overlay .modal
> textarea
{
2240 white-space: pre-wrap
;
2244 body
.modal-overlay-active
{
2249 body
.modal-overlay-active #modal_overlay
{
2255 html body
.apply-overlay-active
{
2256 height: calc
(100vh - 63px);
2259 #applyreboot-section {
2263 [data-page
="admin-network-dhcp"] [data-name
="ip"] {
2269 50% { opacity: .5; }
2270 100% { opacity: 1; }
2274 animation: flash
.35s;
2279 padding-left: 32px !important
;
2289 background: url
(../resources/icons/loading.gif) no-repeat center
;
2290 background-size: 16px;
2299 [data-tab-active
="true"] {
2303 transition: opacity
.25s ease-in
;
2309 border: 1px solid
#ccc;
2312 flex-direction: column
;
2318 .cbi-filebrowser.open {
2322 transition: opacity
.25s ease-in
;
2325 .cbi-filebrowser > * {
2328 text-overflow: ellipsis
;
2329 padding: 0 0 .25em 0;
2330 margin: .25em .25em 0px .25em;
2331 white-space: nowrap
;
2332 border-bottom: 1px solid
#ccc;
2335 .cbi-filebrowser .cbi-button-positive {
2336 margin-right: .25em;
2339 .cbi-filebrowser > div {
2340 border-bottom: none
;
2343 .cbi-filebrowser > ul > li {
2345 flex-direction: row
;
2348 .cbi-filebrowser > ul > li:hover {
2349 background: #f5f5f5;
2352 .cbi-filebrowser > ul > li > div:first-child {
2355 text-overflow: ellipsis
;
2358 .cbi-filebrowser > ul > li > div:last-child {
2363 .cbi-filebrowser > ul > li > div:last-child > button {
2364 padding: .125em .25em;
2365 margin: 1px 0 1px .25em;
2368 .cbi-filebrowser .upload {
2370 flex-direction: row
;
2372 margin: 0 -.125em .25em -.125em;
2373 padding: 0 0 .125em 0px;
2374 border-bottom: 1px solid
#ccc;
2377 .cbi-filebrowser .upload > * {
2382 .cbi-filebrowser .upload > .btn {
2386 .cbi-filebrowser .upload > div {
2391 .cbi-filebrowser .upload > div > input {
2395 @keyframes fade-in
{
2397 100% { opacity: 1; }
2400 @keyframes fade-out
{
2402 100% { opacity: 0; }
2406 animation: fade-in
.4s ease
;
2410 animation: fade-out
.4s ease
;
2413 .assoclist .ifacebadge {
2415 flex-direction: column
;
2416 align-items: center
;
2417 white-space: normal
;
2421 .assoclist .ifacebadge > img {
2425 .assoclist
.td:nth-of-type
(3),
2426 .assoclist .td:nth-of-type(5) {
2430 .assoclist .td:nth-of-type(6) button {