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 > * {
1352 vertical-align: middle
;
1355 .cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-negative):not(.cbi-button-save):not(.cbi-button-reset) {
1361 .cbi-button-action
.important
,
1362 .cbi-page-actions
.cbi-button-apply
,
1363 .cbi-section-actions .cbi-button-edit {
1365 background: linear-gradient
(to bottom
, #0069d6, #0049d6) no-repeat
;
1366 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1369 .cbi-button-positive
.important
,
1370 .cbi-page-actions .cbi-button-save {
1372 background: linear-gradient
(to bottom
, #4a4, #484) no-repeat
;
1373 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1376 .cbi-button-negative.important {
1378 background: linear-gradient
(to bottom
, #c44, #c00) no-repeat
;
1379 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1382 .cbi-page-actions
.cbi-button-apply
+ .cbi-button-save
,
1383 .cbi-page-actions .cbi-button-negative + .cbi-button-save {
1384 background: linear-gradient
(#fff, #fff 25%, #e6e6e6);
1385 text-shadow: 0 -1px 0 rgba
(255, 255, 255, 0.75);
1390 display: inline-flex
!important
;
1394 padding: 0 !important
;
1397 .cbi-dropdown:not(.btn):not(.cbi-button) {
1398 background: linear-gradient
(#fff 0%, #e9e8e6 100%);
1399 border: 1px solid
#ccc;
1404 .cbi-dynlist
> .item:focus
,
1405 .cbi-dropdown:focus {
1406 outline: 2px solid
#4b6e9b;
1409 .cbi-dropdown > ul {
1410 margin: 0 !important
;
1419 .cbi-dropdown
.btn
> ul:not
(.dropdown
),
1420 .cbi-dropdown.cbi-button > ul:not(.dropdown) {
1421 margin: 0 0 0 13px !important
;
1424 .cbi-dropdown
.btn
.spinning
> ul:not
(.dropdown
),
1425 .cbi-dropdown.cbi-button.spinning > ul:not(.dropdown) {
1426 margin: 0 !important
;
1429 .cbi-dropdown > ul.preview {
1433 .cbi-dropdown
> .open
,
1434 .cbi-dropdown > .more {
1438 flex-direction: column
;
1439 justify-content: center
;
1445 .cbi-dropdown
.btn
> .open
,
1446 .cbi-dropdown.cbi-button > .open {
1449 border-left: 1px solid
;
1452 .cbi-dropdown
> .more
,
1453 .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li[placeholder] {
1456 text-shadow: 1px 1px 0px #fff;
1458 justify-content: center
;
1461 .cbi-dropdown > ul > li {
1463 white-space: nowrap
;
1465 text-overflow: ellipsis
;
1468 align-items: center
;
1473 .cbi-dropdown
> ul
.dropdown
> li
,
1474 .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li {
1480 .cbi-dropdown > ul > li .hide-open { display: block
; display: initial
; }
1481 .cbi-dropdown > ul > li .hide-close { display: none
; }
1483 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1484 border-left: 1px solid
#ccc;
1487 .cbi-dropdown[empty] > ul {
1491 .cbi-dropdown > ul > li > form {
1495 pointer-events: none
;
1498 .cbi-dropdown > ul > li img {
1499 vertical-align: middle
;
1500 margin-right: .25em;
1503 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1507 .cbi-dropdown > ul > li input[type="text"] {
1511 .cbi-dropdown[open] {
1515 .cbi-dropdown[open] > ul.dropdown {
1517 background: #f6f6f5;
1518 border: 1px solid
#918e8c;
1519 box-shadow: 0 0 4px #918e8c;
1525 transition: max-height
.125s ease-in
;
1528 .cbi-dropdown
> ul
> li
[display
],
1529 .cbi-dropdown
[open
] > ul
.preview
,
1530 .cbi-dropdown
[open
] > ul
.dropdown
> li
,
1531 .cbi-dropdown
[multiple
] > ul
> li
> label
,
1532 .cbi-dropdown
[multiple
][open
] > ul
.dropdown
> li
,
1533 .cbi-dropdown
[multiple
][more
] > .more
,
1534 .cbi-dropdown[multiple][empty] > .more {
1536 display: flex
!important
;
1539 .cbi-dropdown
[empty
] > ul
> li
,
1540 .cbi-dropdown
[optional
][open
] > ul
.dropdown
> li
[placeholder
],
1541 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1542 display: block
!important
;
1545 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none
; }
1546 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block
; display: initial
; }
1548 .cbi-dropdown[open] > ul.dropdown > li {
1549 border-bottom: 1px solid
#ccc;
1552 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1553 background: #b0d0f0;
1556 .cbi-dropdown[open] > ul.dropdown > li.focus {
1557 background: linear-gradient
(90deg, #a3c2e8 0%, #84aad9 100%);
1560 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1562 border-bottom: none
;
1565 .cbi-dropdown[open] > ul.dropdown > li[unselectable] {
1569 .cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
1573 .cbi-dropdown[disabled] {
1574 pointer-events: none
;
1578 input
[type
="text"] + .cbi-button
,
1579 input
[type
="password"] + .cbi-button
,
1580 select
+ .cbi-button
{
1581 border-radius: 0 3px 3px 0;
1585 vertical-align: top
;
1591 select
+ .cbi-button
{
1592 border-left-color: transparent
;
1599 .cbi-title-ref::after {
1603 .cbi-tooltip-container {
1611 box-shadow: 0 0 2px #ccc;
1617 transition: opacity
.25s ease-in
;
1620 .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
1623 transition: opacity
.25s ease-in
;
1627 border: 1px solid
#ccc;
1633 background: #f9f9f9;
1636 .cbi-progressbar > div {
1637 background: #90c0e0;
1639 transition: width
.25s ease-in
;
1643 .cbi-progressbar::after {
1650 text-shadow: 0 0 2px #fff;
1651 content: attr
(title
);
1654 text-overflow: ellipsis
;
1657 .zonebadge .cbi-tooltip {
1659 background: inherit
;
1660 margin: -1.6em 0 0 -5px;
1662 pointer-events: none
;
1663 box-shadow: 0 0 3px #444;
1666 .zonebadge .cbi-tooltip > * {
1675 .zone-forwards > * {
1680 .zone-forwards > span {
1685 .zone-forwards
.zone-src
,
1686 .zone-forwards .zone-dest {
1688 flex-direction: column
;
1691 .btn.active, .btn:active {
1692 box-shadow: inset
0 2px 4px rgba
(0, 0, 0, 0.25), 0 1px 2px rgba
(0, 0, 0, 0.05);
1709 line-height: normal
;
1710 padding: 9px 14px 9px;
1715 padding: 7px 9px 7px;
1719 button
.btn::-moz-focus-inner
, input
[type
=submit
].btn::-moz-focus-inner
{
1729 line-height: 13.5px;
1730 text-shadow: 0 1px 0 #fff;
1736 text-decoration: none
;
1742 padding: .5em .5em .25em .5em;
1743 margin-bottom: .5em;
1745 background: linear-gradient
(to bottom
, #fceec1, #eedc94) repeat-x
;
1746 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1747 border-color: rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.25);
1748 text-shadow: 0 1px 0 rgba
(255, 255, 255, 0.5);
1750 border-style: solid
;
1752 box-shadow: inset
0 1px 0 rgba
(255, 255, 255, 0.25);
1755 .alert-message .close {
1768 line-height: inherit
;
1769 background: transparent
;
1774 .alert-message button {
1779 padding: 1px 3px 2px;
1782 color: #fff !important
;
1783 text-transform: uppercase
;
1784 white-space: nowrap
;
1785 background-color: #bfbfbf;
1796 text-decoration: none
;
1800 background-color: #c43c35;
1804 background-color: #f89406;
1808 background-color: #46a546;
1812 background-color: #62cffc;
1815 /* LuCI specific items */
1816 .hidden { display: none
}
1822 form
.inline
{ display: inline
; margin-bottom: 0; }
1824 header
.pull-right
{ padding-top: 8px; }
1826 #modemenu li:last-child span
.divider
{ display: none
}
1828 #syslog { width: 100%; }
1830 .cbi-section-table
.tr:hover
.td
,
1831 .cbi-section-table
.tr:hover
.th
,
1832 .cbi-section-table .tr:hover::before {
1833 background-color: #f5f5f5;
1836 .cbi-section-table .tr.cbi-section-table-descr .th {
1837 font-weight: normal
;
1840 .cbi-section-table-titles
.named::before
,
1841 .cbi-section-table-descr
.named::before
,
1842 .cbi-section-table-row[data-title]::before {
1843 content: attr
(data-title
) " ";
1844 display: table-cell
;
1845 padding: 10px 10px 9px;
1848 vertical-align: middle
;
1851 .cbi-section-table-titles
.named::before
,
1852 .cbi-section-table-descr
.named::before
,
1853 .cbi-section-table-row[data-title]::before {
1854 border-top: 1px solid
#ddd;
1857 .left { text-align: left
!important
; }
1858 .right { text-align: right
!important
; }
1859 .center { text-align: center
!important
; }
1860 .top { vertical-align: top
!important
; }
1861 .middle { vertical-align: middle
!important
; }
1862 .bottom { vertical-align: bottom
!important
; }
1864 .cbi-value-field { line-height: 1.5em; }
1866 .cbi-value-field input
[type
=checkbox
],
1867 .cbi-value-field input[type=radio] {
1873 .cbi-value-field table td {
1877 .table
.cbi-section-table input
[type
="password"],
1878 .table
.cbi-section-table input
[type
="text"],
1879 .table
.cbi-section-table textarea
,
1880 .table.cbi-section-table select {
1884 .table.cbi-section-table .td.cbi-section-table-cell {
1885 white-space: nowrap
;
1889 .table.cbi-section-table .td.cbi-section-table-cell select {
1893 .td.cbi-section-actions {
1895 vertical-align: middle
;
1898 .td.cbi-section-actions > * {
1902 .td
.cbi-section-actions
> * > *,
1903 .td.cbi-section-actions > * > form > * {
1908 .td.cbi-section-actions > * > form {
1909 display: inline-flex
;
1913 .table.valign-middle .td {
1914 vertical-align: middle
;
1919 .tr.cbi-section-table-titles {
1920 background: #f9f9f9;
1923 .cbi-value-description {
1924 background-image: url
(/luci-static
/resources
/cbi
/help
.gif
);
1925 background-position: .25em .2em;
1926 background-repeat: no-repeat
;
1927 margin: .25em 0 0 0;
1928 padding: 0 0 0 1.7em;
1931 .cbi-section-error {
1932 border: 1px solid
#f00;
1934 background-color: #fce6e6;
1936 margin-bottom: 18px;
1939 .cbi-section-error ul { margin: 0 0 0 20px; }
1941 .cbi-section-error ul li {
1947 background-color: #fff;
1948 border: 1px solid
#ccc;
1951 white-space: nowrap
;
1952 background-image: linear-gradient
(#fff, #fff 25%, #f9f9f9);
1953 text-shadow: 0 1px 1px rgba
(255, 255, 255, 0.75);
1955 box-shadow: inset
0 1px 0 rgba
(255, 255, 255, 0.2), 0 1px 2px rgba
(0, 0, 0, 0.05);
1956 display: inline-flex
;
1957 flex-direction: column
;
1962 .ifacebox .ifacebox-head {
1963 border-bottom: 1px solid
#ccc;
1968 .ifacebox .ifacebox-head.active {
1969 background: #90c0e0;
1972 .ifacebox .ifacebox-body {
1977 display: inline-block
;
1978 flex-direction: row
;
1979 white-space: nowrap
;
1980 background-color: #fff;
1981 border: 1px solid
#ccc;
1983 background-image: linear-gradient
(#fff, #fff 25%, #f9f9f9);
1984 text-shadow: 0 1px 1px rgba
(255, 255, 255, 0.75);
1986 box-shadow: inset
0 1px 0 rgba
(255, 255, 255, 0.2), 0 1px 2px rgba
(0, 0, 0, 0.05);
1994 vertical-align: middle
;
1997 .ifacebadge-active {
2002 .network-status-table {
2007 .network-status-table .ifacebox {
2012 .network-status-table .ifacebox-body {
2014 flex-direction: column
;
2019 .network-status-table .ifacebox-body > * {
2023 .network-status-table .ifacebox-body > span {
2028 .network-status-table .ifacebox-body > div {
2032 #dsl_status_table .ifacebox-body span
> strong
{
2033 display: inline-block
;
2038 .network-status-table .ifacebox-body .ifacebadge {
2047 display: inline-flex
;
2050 .network-status-table .ifacebox-body .ifacebadge > span {
2052 text-overflow: ellipsis
;
2056 .ifacebadge.large > * {
2063 display: inline-block
;
2064 white-space: nowrap
;
2066 text-shadow: 0 1px 1px rgba
(255, 255, 255, 0.75);
2070 .zonebadge > strong {
2072 display: inline-block
;
2079 .zonebadge > .ifacebadge {
2084 border: 1px dashed
#aaa;
2091 .td.cbi-value-field var {
2096 #modal_overlay > .modal
.uci-dialog
,
2097 #modal_overlay > .modal
.cbi-modal
{
2106 .uci-change-list del
,
2107 .uci-change-list ins
,
2108 .uci-change-list var
,
2109 .uci-change-legend-label del
,
2110 .uci-change-legend-label ins
,
2111 .uci-change-legend-label var {
2112 text-decoration: none
;
2113 font-family: monospace
;
2115 border: 1px solid
#ccc;
2123 .uci-change-list ins
,
2124 .uci-change-legend-label ins {
2129 .uci-change-list del
,
2130 .uci-change-legend-label del {
2135 .uci-change-list var
,
2136 .uci-change-legend-label var {
2141 .uci-change-list var ins
,
2142 .uci-change-list var del {
2143 display: inline-block
;
2149 .uci-change-legend {
2153 .uci-change-legend-label {
2158 .uci-change-legend-label
> ins
,
2159 .uci-change-legend-label
> del
,
2160 .uci-change-legend-label > var {
2169 .uci-change-legend-label var ins
,
2170 .uci-change-legend-label var del {
2185 background: rgba
(0, 0, 0, 0.7);
2188 -webkit-overflow-scrolling: touch
;
2189 transition: opacity
.125s ease-in
;
2193 #modal_overlay > .modal
{
2200 align-items: center
;
2203 box-shadow: 0 0 3px #444;
2204 padding: 1em 1em .5em 1em;
2208 #modal_overlay .modal
> * {
2210 line-height: normal
;
2211 margin-bottom: .5em;
2214 #modal_overlay .modal
> pre
,
2215 #modal_overlay .modal
> textarea
{
2216 white-space: pre-wrap
;
2220 body
.modal-overlay-active
{
2225 body
.modal-overlay-active #modal_overlay
{
2231 html body
.apply-overlay-active
{
2232 height: calc
(100vh - 63px);
2235 #applyreboot-section {
2239 [data-page
="admin-network-dhcp"] [data-name
="ip"] {
2245 50% { opacity: .5; }
2246 100% { opacity: 1; }
2250 animation: flash
.35s;
2255 padding-left: 32px !important
;
2265 background: url
(../resources/icons/loading.gif) no-repeat center
;
2266 background-size: 16px;
2275 [data-tab-active
="true"] {
2279 transition: opacity
.25s ease-in
;
2285 border: 1px solid
#ccc;
2288 flex-direction: column
;
2294 .cbi-filebrowser.open {
2298 transition: opacity
.25s ease-in
;
2301 .cbi-filebrowser > * {
2304 text-overflow: ellipsis
;
2305 padding: 0 0 .25em 0;
2306 margin: .25em .25em 0px .25em;
2307 white-space: nowrap
;
2308 border-bottom: 1px solid
#ccc;
2311 .cbi-filebrowser .cbi-button-positive {
2312 margin-right: .25em;
2315 .cbi-filebrowser > div {
2316 border-bottom: none
;
2319 .cbi-filebrowser > ul > li {
2321 flex-direction: row
;
2324 .cbi-filebrowser > ul > li:hover {
2325 background: #f5f5f5;
2328 .cbi-filebrowser > ul > li > div:first-child {
2331 text-overflow: ellipsis
;
2334 .cbi-filebrowser > ul > li > div:last-child {
2339 .cbi-filebrowser > ul > li > div:last-child > button {
2340 padding: .125em .25em;
2341 margin: 1px 0 1px .25em;
2344 .cbi-filebrowser .upload {
2346 flex-direction: row
;
2348 margin: 0 -.125em .25em -.125em;
2349 padding: 0 0 .125em 0px;
2350 border-bottom: 1px solid
#ccc;
2353 .cbi-filebrowser .upload > * {
2358 .cbi-filebrowser .upload > .btn {
2362 .cbi-filebrowser .upload > div {
2367 .cbi-filebrowser .upload > div > input {
2371 @keyframes fade-in
{
2373 100% { opacity: 1; }
2376 @keyframes fade-out
{
2378 100% { opacity: 0; }
2382 animation: fade-in
.4s ease
;
2386 animation: fade-out
.4s ease
;