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.
18 --background-color-delta-l-sign: -1;
19 --background-color-high-h: 0;
20 --background-color-high-s: 0%;
21 --background-color-high-l: 100%;
22 --background-color-high: hsl
(var
(--background-color-high-h
), var
(--background-color-high-s
), var
(--background-color-high-l
));
23 --background-color-medium-h: var
(--background-color-high-h
);
24 --background-color-medium-s: var
(--background-color-high-s
);
25 --background-color-medium-delta-l: calc
(6 / 255 * 100%);
26 --background-color-medium-l: calc
(var
(--background-color-high-l
) + var
(--background-color-delta-l-sign
) * var
(--background-color-medium-delta-l
));
27 --background-color-medium: hsl
(var
(--background-color-medium-h
), var
(--background-color-medium-s
), var
(--background-color-medium-l
));
28 --background-color-low-h: var
(--background-color-high-h
);
29 --background-color-low-s: var
(--background-color-high-s
);
30 --background-color-low-delta-l: calc
(10 / 255 * 100%);
31 --background-color-low-l: calc
(var
(--background-color-high-l
) + var
(--background-color-delta-l-sign
) * var
(--background-color-low-delta-l
));
32 --background-color-low: hsl
(var
(--background-color-low-h
), var
(--background-color-low-s
), var
(--background-color-low-l
));
33 --text-color-delta-l-sign: 1;
34 --text-color-highest-h: 0;
35 --text-color-highest-s: 0%;
36 --text-color-highest-l: 0%;
37 --text-color-highest: hsl
(var
(--text-color-highest-h
), var
(--text-color-highest-s
), var
(--text-color-highest-l
));
38 --text-color-high-h: var
(--text-color-highest-h
);
39 --text-color-high-s: var
(--text-color-highest-s
);
40 --text-color-high-delta-l: calc
(64 / 255 * 100%);
41 --text-color-high-l: calc
(var
(--text-color-highest-l
) + var
(--text-color-delta-l-sign
) * var
(--text-color-high-delta-l
));
42 --text-color-high: hsl
(var
(--text-color-high-h
), var
(--text-color-high-s
), var
(--text-color-high-l
));
43 --text-color-medium-h: var
(--text-color-highest-h
);
44 --text-color-medium-s: var
(--text-color-highest-s
);
45 --text-color-medium-delta-l: calc
(128 / 255 * 100%);
46 --text-color-medium-l: calc
(var
(--text-color-highest-l
) + var
(--text-color-delta-l-sign
) * var
(--text-color-medium-delta-l
));
47 --text-color-medium: hsl
(var
(--text-color-medium-h
), var
(--text-color-medium-s
), var
(--text-color-medium-l
));
48 --text-color-low-h: var
(--text-color-highest-h
);
49 --text-color-low-s: var
(--text-color-highest-s
);
50 --text-color-low-delta-l: calc
(191 / 255 * 100%);
51 --text-color-low-l: calc
(var
(--text-color-highest-l
) + var
(--text-color-delta-l-sign
) * var
(--text-color-low-delta-l
));
52 --text-color-low: hsl
(var
(--text-color-low-h
), var
(--text-color-low-s
), var
(--text-color-low-l
));
53 --border-color-delta-l-sign: -1;
54 --border-color-high-h: var
(--background-color-high-h
);
55 --border-color-high-s: var
(--background-color-high-s
);
56 --border-color-high-delta-l: calc
(51 / 255 * 100%);
57 --border-color-high-l: calc
(var
(--background-color-high-l
) + var
(--border-color-delta-l-sign
) * var
(--border-color-high-delta-l
));
58 --border-color-high: hsl
(var
(--border-color-high-h
), var
(--border-color-high-s
), var
(--border-color-high-l
));
59 --border-color-medium-h: var
(--border-color-high-h
);
60 --border-color-medium-s: var
(--border-color-high-s
);
61 --border-color-medium-delta-l: calc
(34 / 255 * 100%);
62 --border-color-medium-l: calc
(var
(--background-color-high-l
) + var
(--border-color-delta-l-sign
) * var
(--border-color-medium-delta-l
));
63 --border-color-medium: hsl
(var
(--border-color-medium-h
), var
(--border-color-medium-s
), var
(--border-color-medium-l
));
64 --border-color-low-h: var
(--border-color-high-h
);
65 --border-color-low-s: var
(--border-color-high-s
);
66 --border-color-low-delta-l: calc
(17 / 255 * 100%);
67 --border-color-low-l: calc
(var
(--background-color-high-l
) + var
(--border-color-delta-l-sign
) * var
(--border-color-low-delta-l
));
68 --border-color-low: hsl
(var
(--border-color-low-h
), var
(--border-color-low-s
), var
(--border-color-low-l
));
70 color-scheme: light dark
;
73 @media (prefers-color-scheme: dark
) {
75 --background-color-delta-l-sign: 1;
76 --background-color-high-h: 0;
77 --background-color-high-s: 0%;
78 --background-color-high-l: calc
(34 / 255 * 100%);
79 --text-color-delta-l-sign: -1;
80 --text-color-highest-h: 0;
81 --text-color-highest-s: 0%;
82 --text-color-highest-l: 100%;
83 --border-color-delta-l-sign: 1;
88 * 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).
89 * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
95 box-sizing: border-box
;
98 abbr
[title
], acronym
[title
] {
99 border-bottom: 1px dotted
;
100 font-weight: inherit
;
105 border-collapse: collapse
;
115 -webkit-text-size-adjust: 100%;
116 -ms-text-size-adjust: 100%;
120 outline: thin dotted
;
131 vertical-align: baseline
;
143 -ms-interpolation-mode: bicubic
;
153 box-sizing: border-box
;
154 vertical-align: baseline
;
158 button::-moz-focus-inner
, input::-moz-focus-inner
{
164 input
[type
="button"],
166 input
[type
="submit"] {
168 -webkit-appearance: button
;
169 word-break: break-all
;
173 input
[type
="button"][disabled
],
174 input
[type
="reset"][disabled
],
175 input
[type
="submit"][disabled
] {
179 input
[type
="search"] {
180 -webkit-appearance: textfield
;
181 box-sizing: content-box
;
184 input
[type
="search"]::-webkit-search-decoration
{
185 -webkit-appearance: none
;
195 * Basic and global styles for generating a grid system, structural layout, and page templates
196 * ------------------------------------------------------------------------------------------- */
198 background-color: var
(--background-color-high
);
199 font-family: "Helvetica Neue", Helvetica
, Arial
, sans-serif
;
203 color: var
(--text-color-high
);
217 text-decoration: none
;
218 line-height: inherit
;
219 font-weight: inherit
;
224 text-decoration: underline
;
240 * Headings, body text, lists, code, and more for a versatile and durable typography system
241 * ---------------------------------------------------------------------------------------- */
245 .table .tr.cbi-section-table-descr .th {
254 color: var
(--text-color-low
);
264 color: var
(--text-color-high
);
273 color: var
(--text-color-low
);
324 color: var
(--text-color-low
);
325 text-transform: uppercase
;
329 margin: 0 0 18px 25px;
349 color: var
(--text-color-medium
);
376 border-bottom: 1px solid var
(--border-color-low
);
386 font-weight: inherit
;
387 line-height: inherit
;
390 small
{ font-size: 0.9em }
400 font-family: Monaco
, Andale Mono
, Courier New
, monospace
;
406 background-color: #fee9cc;
407 color: rgba
(0, 0, 0, 0.75);
412 --border-color-h: var
(--background-color-high-h
);
413 --border-color-s: var
(--background-color-high-s
);
414 --border-color-delta-l: 100%;
415 --border-color-l: calc
(var
(--background-color-high-l
) + var
(--background-color-delta-l-sign
) * var
(--border-color-delta-l
));
416 --border-color-a: 0.15;
417 --border-color: hsla
(var
(--border-color-h
), var
(--border-color-s
), var
(--border-color-l
), var
(--border-color-a
));
419 background-color: var
(--background-color-low
);
425 border: 1px solid var
(--border-color
);
428 white-space: pre-wrap
;
429 word-wrap: break-word
;
433 * Base styles for various input types, form layouts, and states
434 * ------------------------------------------------------------- */
448 color: var
(--text-color-high
);
452 form
.cbi-tab-descr
{
463 form
.clearfix:before
, form
.clearfix:after
,
464 .cbi-value:before, .cbi-value:after {
470 form
.clearfix:after
,
480 font-family: "Helvetica Neue", Helvetica
, Arial
, sans-serif
;
491 .cbi-value label.cbi-value-title {
498 color: var
(--text-color-high
);
501 input
[type
=checkbox
], input
[type
=radio
] {
505 label
> input
[type
="checkbox"],
506 label
> input
[type
="radio"] {
507 vertical-align: bottom
;
514 .cbi-dropdown:not
(.btn
):not
(.cbi-button
),
516 display: inline-block
;
519 background: var
(--background-color-high
);
520 color: var
(--text-color-high
);
523 border: 1px solid var
(--border-color-high
);
529 .cbi-dropdown:not
(.btn
):not
(.cbi-button
),
538 .cbi-dropdown:not
(.btn
):not
(.cbi-button
),
548 display: inline-flex
;
549 flex-direction: column
;
552 .cbi-dynlist > .item {
554 box-shadow: 0 0 2px var
(--border-color-high
);
555 background: var
(--background-color-high
);
556 padding: 2px 2em 2px 4px;
557 border: 1px solid var
(--border-color-high
);
559 color: var
(--text-color-high
);
561 pointer-events: none
;
563 word-break: break-all
;
566 .cbi-dynlist > .item::after {
569 display: inline-flex
;
575 border: 1px solid var
(--border-color-high
);
576 border-radius: 0 3px 3px 0;
579 pointer-events: auto
;
582 .cbi-dynlist > .add-item {
586 .cbi-dynlist
> .add-item
> input
,
587 .cbi-dynlist > .add-item > button {
590 text-overflow: ellipsis
;
596 box-shadow: inset
0 -1px 3px rgba
(0, 0, 0, 0.1);
599 input
[type
=checkbox
], input
[type
=radio
] {
612 background-color: #fff;
615 line-height: initial
;
617 width: auto
!important
;
620 input
[type
=button
], input
[type
=reset
], input
[type
=submit
] {
627 background-color: #fff;
630 .td
> input
[type
=text
],
631 .td
> input
[type
=password
],
633 .td
> .cbi-dropdown:not
(.btn
):not
(.cbi-button
),
634 .cbi-dynlist > .add-item > .cbi-dropdown {
639 background-color: #fff;
642 box-shadow: inset
0 1px 2px rgba
(0, 0, 0, 0.025);
647 color: var
(--text-color-low
);
650 .item::after, .btn, .cbi-button, input, button, textarea {
651 transition: border linear
0.2s, box-shadow linear
0.2s;
652 box-shadow: inset
0 1px 3px rgba
(0, 0, 0, 0.1);
656 .btn:hover
, .cbi-button:hover
, button:hover
,
657 input:focus
, textarea:focus
{
659 border-color: rgba
(82, 168, 236, 0.8) !important
;
660 box-shadow: inset
0 1px 3px rgba
(0, 0, 0, 0.1), 0 0 8px rgba
(82, 168, 236, 0.6);
661 text-decoration: none
;
664 input
[type
=file
]:focus
, input
[type
=checkbox
]:focus
, select:focus
{
666 outline: 1px dotted
#666;
677 background-color: var
(--background-color-medium
);
678 color: var
(--text-color-medium
);
679 border-color: var
(--border-color-low
);
680 pointer-events: none
;
686 pointer-events: auto
;
691 .cbi-section-create {
692 padding: 0 0 10px 10px;
695 .cbi-section-create {
697 display: inline-flex
;
701 .cbi-section-create > * {
706 .cbi-section-create > * > input {
712 background: var
(--background-color-low
);
714 padding: 17px 20px 18px 17px;
715 border-top: 1px solid var
(--border-color-medium
);
716 border-radius: 0 0 3px 3px;
720 .actions
.secondary-action
,
721 .cbi-page-actions .secondary-action{
725 .actions
.secondary-action a
,
726 .cbi-page-actions .secondary-action a {
730 .actions
.secondary-action
a:hover
,
731 .cbi-page-actions .secondary-action a:hover {
732 text-decoration: underline
;
735 .cbi-page-actions > form {
740 .help-inline, .help-block {
743 color: var
(--text-color-low
);
763 * Tables for, you guessed it, tabular data
764 * ---------------------------------------- */
765 .tr { display: table-row
; }
766 .table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
767 .table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
775 border-collapse: collapse
;
779 .table .th, .table .td {
781 vertical-align: middle
; /* Fixme */
782 padding: 10px 10px 9px;
787 .table .tr:first-child .th {
793 .table .td, .table .th {
794 border-top: 1px solid var
(--border-color-medium
);
798 height: calc
(3em + 20px);
801 .tr.placeholder > .td {
811 .tr.drag-over-below {
812 border: 2px solid
#0069d6;
813 border-width: 2px 0 0 0;
816 .tr.drag-over-below {
817 border-width: 0 0 2px 0;
821 * Repeatable UI elements outside the base styles provided from the scaffolding
822 * ---------------------------------------------------------------------------- */
829 margin: -5px -5px 15px -5px;
835 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
838 header
.brand:hover
, header ul
.active
> a
{
839 background-color: #333;
840 background-color: rgba
(255, 255, 255, 0.05);
842 text-decoration: none
;
848 padding: 8px 20px 12px;
862 background-color: #222;
863 background-repeat: repeat-x
;
864 background-image: linear-gradient
(to bottom
, #333333, #222222);
865 box-shadow: 0 1px 3px rgba
(0, 0, 0, 0.25), inset
0 -1px 0 rgba
(0, 0, 0, 0.1);
866 padding: 0 calc
((100% - 940px) / 2 + 5px);
885 padding: 10px 10px 11px;
887 text-decoration: none
;
892 text-decoration: none
;
896 background-color: #222;
897 background-color: rgba
(0, 0, 0, 0.5);
902 background: rgba
(255, 255, 255, 0.05);
905 .nav .dropdown-menu {
906 background-color: #333;
909 .nav .dropdown-menu a.menu {
913 .nav .dropdown-menu li a {
915 text-shadow: 0 1px 0 rgba
(0, 0, 0, 0.5);
918 .nav .dropdown-menu li a:hover {
919 background-color: #191919;
920 background-repeat: repeat-x
;
921 background-image: linear-gradient
(to bottom
, #292929, #191919);
925 .nav .dropdown-menu .active a {
929 .nav .dropdown-menu li a {
940 display: inline-block
;
942 text-indent: -99999px;
946 border-left: 4px solid transparent
;
947 border-right: 4px solid transparent
;
948 border-top: 4px solid
#fff;
953 background-color: #fff;
967 border-color: rgba
(0, 0, 0, 0.2);
969 border-width: 0 1px 1px;
970 border-radius: 0 0 6px 6px;
971 box-shadow: 0 2px 4px rgba
(0, 0, 0, 0.2);
972 background-clip: padding-box
;
978 background-color: transparent
;
988 text-shadow: 0 1px 0 #fff;
991 .dropdown-menu a:hover {
992 background-color: #ddd;
993 background-repeat: repeat-x
;
994 background-image: linear-gradient
(to bottom
, #eee, #ddd);
996 text-decoration: none
;
997 box-shadow: inset
0 1px 0 rgba
(0, 0, 0, 0.025), inset
0 -1px rgba
(0, 0, 0, 0.025);
1000 .dropdown:hover ul.dropdown-menu {
1004 .dropdown-menu .dropdown-menu {
1013 .tabs, .cbi-tabmenu {
1014 --tab-bar-background-color: var
(--background-color-high
);
1015 --tab-inactive-background-color-h: var
(--border-color-low-h
);
1016 --tab-inactive-background-color-s: var
(--border-color-low-s
);
1017 --tab-inactive-background-color-l: var
(--border-color-low-l
);
1018 --tab-inactive-background-color: var
(--border-color-low
);
1019 --tab-inactive-border-color: var
(--border-color-medium
);
1020 --tab-inactive-text-color-delta-l: calc
(85 / 255 * 100%);
1021 --tab-inactive-text-color-l: calc
(var
(--tab-inactive-background-color-l
) + var
(--background-color-delta-l-sign
) * var
(--tab-inactive-text-color-delta-l
));
1022 --tab-inactive-text-color: hsl
(var
(--tab-inactive-background-color-h
), var
(--tab-inactive-background-color-s
), var
(--tab-inactive-text-color-l
));
1023 --tab-inactive-hover-background-color: var
(--background-color-high
);
1024 --tab-active-background-color: var
(--background-color-high
);
1025 --tab-active-text-color: #0069d6;
1026 --tab-active-border-color: var
(--border-color-medium
);
1028 margin: 0 -5px 18px;
1033 background: linear-gradient
(var
(--tab-bar-background-color
) 28px, var
(--tab-inactive-border-color
) 28px);
1034 background-size: 1px 29px;
1035 background-position: left bottom
;
1038 .tabs > li, .cbi-tabmenu > li {
1041 align-items: center
;
1044 margin: 4px 2px 0 2px;
1045 background: var
(--tab-active-background-color
);
1046 border: 1px solid var
(--tab-active-border-color
);
1047 border-bottom: none
;
1048 border-radius: 4px 4px 0 0;
1049 color: var
(--tab-active-text-color
);
1052 .tabs > li > a, .cbi-tabmenu > li > a {
1054 white-space: nowrap
;
1056 text-overflow: ellipsis
;
1058 text-decoration: none
;
1059 border-radius: 4px 4px 0 0;
1064 .tabs > li:not(.active):hover, .cbi-tabmenu > .cbi-tab-disabled:hover {
1065 background: linear-gradient
(var
(--tab-inactive-hover-background-color
) 90%, var
(--tab-inactive-border-color
) 100%);
1068 .tabs > li:not(.active), .cbi-tabmenu > .cbi-tab-disabled {
1069 color: var
(--tab-inactive-text-color
);
1070 background: linear-gradient
(var
(--tab-inactive-background-color
) 90%, var
(--tab-inactive-border-color
) 100%);
1073 .cbi-tab-disabled[data-errors]::after {
1074 content: attr
(data-errors
);
1075 background: #c43c35;
1089 .cbi-tabmenu.map > li {
1094 .cbi-tabcontainer > fieldset.cbi-section[id] > legend {
1098 .tabs .menu-dropdown, .tabs .dropdown-menu {
1101 border-radius: 0 6px 6px 6px;
1104 .tabs a.menu:after, .tabs .dropdown-toggle:after {
1105 border-top-color: #999;
1110 .tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle {
1114 .tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after {
1115 border-top-color: #555;
1118 .tab-content
> .tab-pane
,
1119 .tab-content > div {
1123 .tab-content > .active {
1130 background: linear-gradient
(to bottom
, var
(--background-color-high
), var
(--background-color-low
));
1131 border: 1px solid var
(--border-color-medium
);
1141 .breadcrumb li:not(:last-child)::after {
1146 .breadcrumb .active a {
1147 color: var
(--text-color-medium
);
1153 border-top: 1px solid var
(--border-color-low
);
1156 align-items: baseline
;
1157 justify-content: space-between
;
1164 background: rgba
(0, 0, 0, 0.7);
1167 transition: opacity
.125s ease-in
;
1179 background: var
(--background-color-high
);
1180 box-shadow: 0 0 3px #444;
1181 padding: 1em 1em .5em 1em;
1186 line-height: normal
;
1187 margin-bottom: .5em;
1193 white-space: pre-wrap
;
1197 body
.modal-overlay-active
{
1202 body
.modal-overlay-active #modal_overlay
{
1206 visibility: visible
;
1210 .alert-message
.danger
,
1212 .alert-message
.danger:hover
,
1214 .alert-message
.error
,
1216 .alert-message
.error:hover
,
1218 .alert-message
.success
,
1220 .alert-message
.success:hover
,
1222 .alert-message
.info
,
1224 .alert-message
.info:hover
,
1225 .cbi-tooltip.error, .cbi-tooltip.success, .cbi-tooltip.info {
1229 .btn .close, .alert-message .close {
1230 font-family: Arial
, sans-serif
;
1235 .alert-message
.danger
,
1237 .alert-message
.error
,
1238 .cbi-tooltip.error {
1239 background: linear-gradient
(to bottom
, #ee5f5b, #c43c35) repeat-x
;
1240 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1241 border-color: rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.25);
1244 .btn.success, .alert-message.success, .cbi-tooltip.success {
1245 background: linear-gradient
(to bottom
, #62c462, #57a957) repeat-x
;
1246 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1247 border-color: rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.25);
1250 .btn.info, .alert-message.info, .cbi-tooltip.info {
1251 background: linear-gradient
(to bottom
, #5bc0de, #339bb9) repeat-x
;
1252 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1253 border-color: rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.25);
1256 .alert-message.notice, .cbi-tooltip.notice {
1257 background: linear-gradient
(to bottom
, #efefef, #fefefe) repeat-x
;
1258 text-shadow: 0 -1px 0 rgba
(255, 255, 255, 0.25);
1259 border-color: rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.25);
1262 .modal.alert-message {
1263 color: var
(--text-color-high
);
1270 display: inline-block
;
1271 background: linear-gradient
(var
(--background-color-high
), var
(--background-color-high
) 25%, var
(--border-color-low
)) no-repeat
;
1273 text-shadow: 0 1px 1px hsla
(var
(--background-color-high-h
), var
(--background-color-high-s
), var
(--background-color-high-l
), 0.75);
1274 color: var
(--text-color-high
);
1277 border: 1px solid var
(--border-color-high
);
1279 box-shadow: inset
0 1px 0 hsla
(var
(--background-color-high-h
), var
(--background-color-high-s
), var
(--background-color-high-l
), 0.2), 0 1px 2px hsla
(var
(--text-color-high-h
), var
(--text-color-high-s
), var
(--text-color-high-l
), 0.05);
1285 outline: 1px dotted
#666;
1289 .cbi-input-invalid
.cbi-dropdown:not
(.btn
):not
(.cbi-button
),
1290 .cbi-input-invalid
.cbi-dropdown:not
([open
]) > ul
> li
,
1291 .cbi-value-error input {
1296 .cbi-button-positive
,
1297 .cbi-button-fieldadd
,
1304 .cbi-button-neutral
,
1305 .cbi-button-download
,
1310 color: var
(--text-color-high
);
1318 border-color: #0069d6;
1322 .cbi-button-negative
,
1323 .cbi-section-remove
.cbi-button
,
1325 .cbi-button-remove {
1330 .cbi-page-actions::after {
1336 .cbi-page-actions > * {
1337 vertical-align: middle
;
1340 .cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-negative):not(.cbi-button-save):not(.cbi-button-reset) {
1346 .cbi-button-action
.important
,
1347 .cbi-page-actions
.cbi-button-apply
,
1348 .cbi-section-actions .cbi-button-edit {
1350 background: linear-gradient
(to bottom
, #0069d6, #0049d6) no-repeat
;
1351 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1354 .cbi-button-positive
.important
,
1355 .cbi-page-actions .cbi-button-save {
1357 background: linear-gradient
(to bottom
, #4a4, #484) no-repeat
;
1358 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1361 .cbi-button-negative.important {
1363 background: linear-gradient
(to bottom
, #c44, #c00) no-repeat
;
1364 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1367 .cbi-page-actions
.cbi-button-apply
+ .cbi-button-save
,
1368 .cbi-page-actions .cbi-button-negative + .cbi-button-save {
1369 background: linear-gradient
(var
(--background-color-high
), var
(--background-color-high
) 25%, var
(--border-color-low
));
1370 text-shadow: 0 -1px 0 hsla
(var
(--background-color-high-h
), var
(--background-color-high-s
), var
(--background-color-high-l
), 0.75);
1375 display: inline-flex
!important
;
1379 padding: 0 !important
;
1382 .cbi-dropdown:not(.btn):not(.cbi-button) {
1383 background: linear-gradient
(var
(--background-color-high
) 0%, var
(--border-color-low
) 100%);
1384 border: 1px solid var
(--border-color-high
);
1386 color: var
(--text-color-high
);
1389 .cbi-dynlist
> .item:focus
,
1390 .cbi-dropdown:focus {
1391 outline: 2px solid
#4b6e9b;
1394 .cbi-dropdown > ul {
1395 margin: 0 !important
;
1404 .cbi-dropdown
.btn
> ul:not
(.dropdown
),
1405 .cbi-dropdown.cbi-button > ul:not(.dropdown) {
1406 margin: 0 0 0 13px !important
;
1409 .cbi-dropdown
.btn
.spinning
> ul:not
(.dropdown
),
1410 .cbi-dropdown.cbi-button.spinning > ul:not(.dropdown) {
1411 margin: 0 !important
;
1414 .cbi-dropdown > ul.preview {
1418 .cbi-dropdown
> .open
,
1419 .cbi-dropdown > .more {
1423 flex-direction: column
;
1424 justify-content: center
;
1430 .cbi-dropdown
.btn
> .open
,
1431 .cbi-dropdown.cbi-button > .open {
1434 border-left: 1px solid
;
1437 .cbi-dropdown
> .more
,
1438 .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li[placeholder] {
1441 text-shadow: 1px 1px 0px var
(--background-color-high
);
1443 justify-content: center
;
1446 .cbi-dropdown > ul > li {
1448 white-space: nowrap
;
1450 text-overflow: ellipsis
;
1453 align-items: center
;
1458 .cbi-dropdown
> ul
.dropdown
> li
,
1459 .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li {
1462 color: var
(--text-color-high
);
1465 .cbi-dropdown > ul > li .hide-open { display: block
; display: initial
; }
1466 .cbi-dropdown > ul > li .hide-close { display: none
; }
1468 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1469 border-left: 1px solid var
(--border-color-high
);
1472 .cbi-dropdown[empty] > ul {
1476 .cbi-dropdown > ul > li > form {
1480 pointer-events: none
;
1483 .cbi-dropdown > ul > li img {
1484 vertical-align: middle
;
1485 margin-right: .25em;
1488 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1492 .cbi-dropdown > ul > li input[type="text"] {
1496 .cbi-dropdown[open] {
1500 .cbi-dropdown[open] > ul.dropdown {
1502 background: var
(--background-color-low
);
1503 border: 1px solid
#918e8c;
1504 box-shadow: 0 0 4px #918e8c;
1510 transition: max-height
.125s ease-in
;
1513 .cbi-dropdown
> ul
> li
[display
],
1514 .cbi-dropdown
[open
] > ul
.preview
,
1515 .cbi-dropdown
[open
] > ul
.dropdown
> li
,
1516 .cbi-dropdown
[multiple
] > ul
> li
> label
,
1517 .cbi-dropdown
[multiple
][open
] > ul
.dropdown
> li
,
1518 .cbi-dropdown
[multiple
][more
] > .more
,
1519 .cbi-dropdown[multiple][empty] > .more {
1521 display: flex
!important
;
1524 .cbi-dropdown
[empty
] > ul
> li
,
1525 .cbi-dropdown
[optional
][open
] > ul
.dropdown
> li
[placeholder
],
1526 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1527 display: block
!important
;
1530 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none
; }
1531 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block
; display: initial
; }
1533 .cbi-dropdown[open] > ul.dropdown > li {
1534 border-bottom: 1px solid var
(--border-color-high
);
1537 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1538 background: #b0d0f0;
1542 .cbi-dropdown[open]:not(.btn):not(.cbi-button) > ul > li[selected][placeholder] {
1544 text-shadow: 1px 1px 0px #fff;
1547 .cbi-dropdown[open] > ul.dropdown > li.focus {
1548 background: linear-gradient
(90deg, #a3c2e8 0%, #84aad9 100%);
1552 .cbi-dropdown[open]:not(.btn):not(.cbi-button) > ul > li.focus[placeholder] {
1554 text-shadow: 1px 1px 0px #fff;
1557 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1559 border-bottom: none
;
1562 .cbi-dropdown[open] > ul.dropdown > li[unselectable] {
1566 .cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
1570 .cbi-dropdown[disabled] {
1571 pointer-events: none
;
1575 input
[type
="text"] + .cbi-button
,
1576 input
[type
="password"] + .cbi-button
,
1577 select
+ .cbi-button
{
1578 border-radius: 0 3px 3px 0;
1579 border-color: var
(--border-color-high
);
1582 vertical-align: top
;
1588 select
+ .cbi-button
{
1589 border-left-color: transparent
;
1596 .cbi-title-ref::after {
1600 .cbi-tooltip-container {
1608 box-shadow: 0 0 2px var
(--border-color-high
);
1610 background: var
(--background-color-high
);
1614 transition: opacity
.25s ease-in
;
1617 .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
1620 transition: opacity
.25s ease-in
;
1624 border: 1px solid var
(--border-color-high
);
1630 background: var
(--background-color-medium
);
1633 .cbi-progressbar > div {
1634 background: #90c0e0;
1636 transition: width
.25s ease-in
;
1640 .cbi-progressbar::after {
1647 text-shadow: 0 0 2px var
(--background-color-high
);
1648 content: attr
(title
);
1651 text-overflow: ellipsis
;
1653 @media (prefers-color-scheme: dark
) {
1654 .cbi-progressbar::after {
1655 mix-blend-mode: difference
;
1659 .zonebadge .cbi-tooltip {
1661 background: inherit
;
1662 margin: -1.6em 0 0 -5px;
1664 pointer-events: none
;
1665 box-shadow: 0 0 3px #444;
1668 .zonebadge .cbi-tooltip > * {
1677 .zone-forwards > * {
1682 .zone-forwards > span {
1687 .zone-forwards
.zone-src
,
1688 .zone-forwards .zone-dest {
1690 flex-direction: column
;
1693 .btn.active, .btn:active {
1694 box-shadow: inset
0 2px 4px rgba
(0, 0, 0, 0.25), 0 1px 2px rgba
(0, 0, 0, 0.05);
1711 line-height: normal
;
1712 padding: 9px 14px 9px;
1717 padding: 7px 9px 7px;
1721 button
.btn::-moz-focus-inner
, input
[type
=submit
].btn::-moz-focus-inner
{
1731 line-height: 13.5px;
1732 text-shadow: 0 1px 0 #fff;
1738 text-decoration: none
;
1744 padding: .5em .5em .25em .5em;
1745 margin-bottom: .5em;
1747 background: linear-gradient
(to bottom
, #fceec1, #eedc94) repeat-x
;
1748 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1749 border-color: rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.25);
1750 text-shadow: 0 1px 0 rgba
(255, 255, 255, 0.5);
1752 border-style: solid
;
1754 box-shadow: inset
0 1px 0 rgba
(255, 255, 255, 0.25);
1758 .alert-message .close {
1771 line-height: inherit
;
1772 background: transparent
;
1777 .alert-message button {
1782 header
[data-indicator
] {
1783 padding: 1px 3px 2px;
1786 color: #fff !important
;
1787 text-transform: uppercase
;
1788 white-space: nowrap
;
1789 background-color: #bfbfbf;
1795 header
[data-indicator
][data-clickable
] {
1805 text-decoration: none
;
1809 background-color: #c43c35;
1813 background-color: #f89406;
1817 background-color: #46a546;
1821 header
[data-indicator
][data-style
="active"] {
1822 background-color: #62cffc;
1825 /* LuCI specific items */
1826 .hidden { display: none
}
1828 form
.inline
{ display: inline
; margin-bottom: 0; }
1830 header
.pull-right
{ padding-top: 8px; margin-left: auto
; }
1832 #modemenu li:last-child span
.divider
{ display: none
}
1836 color: var
(--text-color-highest
);
1839 .cbi-section-table
.tr:hover
.td
,
1840 .cbi-section-table
.tr:hover
.th
,
1841 .cbi-section-table .tr:hover::before {
1842 background-color: var
(--background-color-low
);
1845 .cbi-section-table .tr.cbi-section-table-descr .th {
1846 font-weight: normal
;
1849 .cbi-section-table-titles
.named::before
,
1850 .cbi-section-table-descr
.named::before
,
1851 .cbi-section-table-row[data-title]::before {
1852 content: attr
(data-title
) " ";
1853 display: table-cell
;
1854 padding: 10px 10px 9px;
1857 vertical-align: middle
;
1860 .cbi-section-table-titles
.named::before
,
1861 .cbi-section-table-descr
.named::before
,
1862 .cbi-section-table-row[data-title]::before {
1863 border-top: 1px solid var
(--border-color-medium
);
1866 .left { text-align: left
!important
; }
1867 .right { text-align: right
!important
; }
1868 .center { text-align: center
!important
; }
1869 .top { vertical-align: top
!important
; }
1870 .middle { vertical-align: middle
!important
; }
1871 .bottom { vertical-align: bottom
!important
; }
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: var
(--background-color-medium
);
1930 .cbi-value-description {
1931 background: url
("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><path fill='%230069d6' d='M10 0A10 10 0 000 10a10 10 0 0010 10 10 10 0 0010-10A10 10 0 0010 0zm1 17H9v-2h2v2zm2.1-7.7l-.9.9c-.8.7-1.2 1.3-1.2 2.8H9v-.5c0-1.1.4-2.1 1.2-2.8l1.2-1.3c.4-.3.6-.8.6-1.4a2 2 0 00-2-2 2 2 0 00-2 2H6a4 4 0 014-4 4 4 0 014 4c0 .9-.4 1.7-.9 2.3z'/></svg>") 0 .05em/1em no-repeat
;
1933 padding: .1em 0 0 1.3em;
1936 .cbi-section-error {
1937 border: 1px solid
#f00;
1939 background-color: #fce6e6;
1941 margin-bottom: 18px;
1944 .cbi-section-error ul { margin: 0 0 0 20px; }
1946 .cbi-section-error ul li {
1952 border: 1px solid var
(--border-color-high
);
1955 white-space: nowrap
;
1956 background: linear-gradient
(var
(--background-color-high
), var
(--background-color-high
) 25%, var
(--background-color-medium
));
1957 text-shadow: 0 1px 1px hsla
(var
(--background-color-high-h
), var
(--background-color-high-s
), var
(--background-color-high-l
), 0.75);
1959 box-shadow: inset
0 1px 0 hsla
(var
(--text-color-low-h
), var
(--text-color-low-s
), var
(--text-color-low-l
), 0.2), 0 1px 2px hsla
(var
(--text-color-highest-h
), var
(--text-color-highest-s
), var
(--text-color-highest-l
), 0.05);
1960 display: inline-flex
;
1961 flex-direction: column
;
1966 .ifacebox .ifacebox-head {
1967 border-bottom: 1px solid var
(--border-color-high
);
1968 border-radius: 4px 4px 0 0;
1972 text-shadow: 0 1px 1px rgba
(255, 255, 255, 0.75);
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 border: 1px solid var
(--border-color-high
);
1989 background: linear-gradient
(var
(--background-color-high
), var
(--background-color-high
) 25%, var
(--background-color-medium
));
1990 color: var
(--text-color-high
);
1991 text-shadow: 0 1px 1px hsla
(var
(--background-color-high-h
), var
(--background-color-high-s
), var
(--background-color-high-l
), 0.75);
1993 box-shadow: inset
0 1px 0 hsla
(var
(--background-color-high-h
), var
(--background-color-high-s
), var
(--background-color-high-l
), 0.2), 0 1px 2px hsla
(var
(--text-color-high-h
), var
(--text-color-high-s
), var
(--text-color-high-l
), 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
;
2117 color: var
(--text-color-high
);
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 {
2137 border: 1px solid
#ccc;
2141 text-overflow: ellipsis
;
2145 .uci-change-list
> * > del
,
2146 .uci-change-list
> * > ins
,
2147 .uci-change-list > * > var {
2149 text-overflow: ellipsis
;
2152 .uci-change-list del
,
2153 .uci-change-list ins
,
2154 .uci-change-list var
,
2155 .uci-change-legend-label del
,
2156 .uci-change-legend-label ins
,
2157 .uci-change-legend-label var {
2158 text-decoration: none
;
2159 font-family: monospace
;
2165 .uci-change-list ins
,
2166 .uci-change-legend-label ins {
2171 .uci-change-list del
,
2172 .uci-change-legend-label del {
2177 .uci-change-list var
,
2178 .uci-change-legend-label var {
2183 .uci-change-legend {
2188 .uci-change-legend-label {
2192 align-items: center
;
2195 .uci-change-legend-label
> ins
,
2196 .uci-change-legend-label
> del
,
2197 .uci-change-legend-label > var {
2204 .uci-change-legend-label > var > * {
2208 html body
.apply-overlay-active
{
2209 height: calc
(100vh - 63px);
2212 #applyreboot-section {
2216 [data-page
="admin-network-dhcp"] [data-name
="ip"] {
2222 50% { opacity: .5; }
2223 100% { opacity: 1; }
2227 animation: flash
.35s;
2232 padding-left: 32px !important
;
2242 background: url
(../resources/icons/loading.gif) no-repeat center
;
2243 background-size: 16px;
2252 [data-tab-active
="true"] {
2256 transition: opacity
.25s ease-in
;
2262 border: 1px solid
#ccc;
2265 flex-direction: column
;
2271 .cbi-filebrowser.open {
2275 transition: opacity
.25s ease-in
;
2278 .cbi-filebrowser > * {
2281 text-overflow: ellipsis
;
2282 padding: 0 0 .25em 0;
2283 margin: .25em .25em 0px .25em;
2284 white-space: nowrap
;
2285 border-bottom: 1px solid
#ccc;
2288 .cbi-filebrowser .cbi-button-positive {
2289 margin-right: .25em;
2292 .cbi-filebrowser > div {
2293 border-bottom: none
;
2296 .cbi-filebrowser > ul > li {
2298 flex-direction: row
;
2301 .cbi-filebrowser > ul > li:hover {
2302 background: #f5f5f5;
2305 .cbi-filebrowser > ul > li > div:first-child {
2308 text-overflow: ellipsis
;
2311 .cbi-filebrowser > ul > li > div:last-child {
2316 .cbi-filebrowser > ul > li > div:last-child > button {
2317 padding: .125em .25em;
2318 margin: 1px 0 1px .25em;
2321 .cbi-filebrowser .upload {
2323 flex-direction: row
;
2325 margin: 0 -.125em .25em -.125em;
2326 padding: 0 0 .125em 0px;
2327 border-bottom: 1px solid
#ccc;
2330 .cbi-filebrowser .upload > * {
2335 .cbi-filebrowser .upload > .btn {
2339 .cbi-filebrowser .upload > div {
2344 .cbi-filebrowser .upload > div > input {
2348 @keyframes fade-in
{
2350 100% { opacity: 1; }
2353 @keyframes fade-out
{
2355 100% { opacity: 0; }
2359 animation: fade-in
.4s ease
;
2363 animation: fade-out
.4s ease
;
2366 .assoclist .ifacebadge {
2368 flex-direction: column
;
2369 align-items: center
;
2370 white-space: normal
;
2374 .assoclist .ifacebadge > img {
2378 .assoclist
.td:nth-of-type
(3),
2379 .assoclist .td:nth-of-type(5) {
2383 .assoclist .td:nth-of-type(6) button {