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-h: 0;
20 --background-color-s: 0%;
21 --background-color-l: 100%;
23 --background-color-high-hsl:
24 var
(--background-color-h
),
25 var
(--background-color-s
),
26 var
(--background-color-l
);
27 --background-color-high: hsl
(var
(--background-color-high-hsl
));
29 --background-color-medium-hsl:
30 var
(--background-color-h
),
31 var
(--background-color-s
),
32 calc
(var
(--background-color-l
) + var
(--background-color-delta-l-sign
) * calc
(6 / 255 * 100%));
33 --background-color-medium: hsl
(var
(--background-color-medium-hsl
));
35 --background-color-low-hsl:
36 var
(--background-color-h
),
37 var
(--background-color-s
),
38 calc
(var
(--background-color-l
) + var
(--background-color-delta-l-sign
) * calc
(10 / 255 * 100%));
39 --background-color-low: hsl
(var
(--background-color-low-hsl
));
41 --text-color-delta-l-sign: 1;
46 --text-color-highest-hsl:
50 --text-color-highest: hsl
(var
(--text-color-highest-hsl
));
52 --text-color-high-hsl:
55 calc
(var
(--text-color-l
) + var
(--text-color-delta-l-sign
) * calc
(64 / 255 * 100%));
56 --text-color-high: hsl
(var
(--text-color-high-hsl
));
58 --text-color-medium-hsl:
61 calc
(var
(--text-color-l
) + var
(--text-color-delta-l-sign
) * calc
(128 / 255 * 100%));
62 --text-color-medium: hsl
(var
(--text-color-medium-hsl
));
67 calc
(var
(--text-color-l
) + var
(--text-color-delta-l-sign
) * calc
(191 / 255 * 100%));
68 --text-color-low: hsl
(var
(--text-color-low-hsl
));
70 --border-color-delta-l-sign: -1;
71 --border-color-h: var
(--background-color-h
);
72 --border-color-s: var
(--background-color-s
);
73 --border-color-l: var
(--background-color-l
);
75 --border-color-high-hsl:
76 var
(--border-color-h
),
77 var
(--border-color-s
),
78 calc
(var
(--border-color-l
) + var
(--border-color-delta-l-sign
) * calc
(51 / 255 * 100%));
79 --border-color-high: hsl
(var
(--border-color-high-hsl
));
81 --border-color-medium-hsl:
82 var
(--border-color-h
),
83 var
(--border-color-s
),
84 calc
(var
(--border-color-l
) + var
(--border-color-delta-l-sign
) * calc
(34 / 255 * 100%));
85 --border-color-medium: hsl
(var
(--border-color-medium-hsl
));
87 --border-color-low-hsl:
88 var
(--border-color-h
),
89 var
(--border-color-s
),
90 calc
(var
(--border-color-l
) + var
(--border-color-delta-l-sign
) * calc
(17 / 255 * 100%));
91 --border-color-low: hsl
(var
(--border-color-low-hsl
));
93 --primary-color-high: #1976d2;
94 --primary-color-medium: #1564c0;
95 --primary-color-low: #0d46a1;
96 --on-primary-color: var
(--background-color-high
);
98 --error-color-high-rgb: 246, 43, 18;
99 --error-color-high: rgb
(var
(--error-color-high-rgb
));
100 --error-color-medium: #e8210d;
101 --error-color-low: #d00000;
102 --on-error-color: var
(--background-color-high
);
104 --success-color-high-rgb: 0, 172, 89;
105 --success-color-high: rgb
(var
(--success-color-high-rgb
));
106 --success-color-medium: #009a4c;
107 --success-color-low: #007936;
108 --on-success-color: var
(--background-color-high
);
110 --warn-color-high: #efbd0b;
111 --warn-color-medium: #f0c629;
112 --warn-color-low: #f2d24f;
113 --on-warn-color: var
(--text-color-highest
);
115 --disabled-opacity: .7;
120 :root
[data-darkmode
="true"] {
121 --background-color-delta-l-sign: 1;
122 --background-color-h: 0;
123 --background-color-s: 0%;
124 --background-color-l: calc
(34 / 255 * 100%);
125 --text-color-delta-l-sign: -1;
128 --text-color-l: 100%;
129 --border-color-delta-l-sign: 1;
131 --primary-color-high: #4da1c0;
132 --primary-color-medium: #448da6;
133 --primary-color-low: #3c7a8d;
135 --error-color-high-rgb: 209, 86, 83;
136 --error-color-medium: #bf4e4c;
137 --error-color-low: #b14946;
139 --success-color-high-rgb: 0, 166, 108;
140 --success-color-medium: #00945e;
141 --success-color-low: #008252;
143 --warn-color-high: #a69461;
144 --warn-color-medium: #a68d45;
145 --warn-color-low: #a68732;
146 --on-warn-color: var
(--background-color-high
);
148 --disabled-opacity: .4;
154 * 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).
155 * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
161 box-sizing: border-box
;
164 abbr
[title
], acronym
[title
] {
165 border-bottom: 1px dotted
;
166 font-weight: inherit
;
171 border-collapse: collapse
;
181 -webkit-text-size-adjust: 100%;
182 -ms-text-size-adjust: 100%;
187 outline: thin dotted
;
198 vertical-align: baseline
;
210 -ms-interpolation-mode: bicubic
;
220 box-sizing: border-box
;
221 vertical-align: baseline
;
225 button::-moz-focus-inner
, input::-moz-focus-inner
{
231 input
[type
="button"],
233 input
[type
="submit"] {
235 -webkit-appearance: button
;
236 word-break: break-all
;
240 input
[type
="button"][disabled
],
241 input
[type
="reset"][disabled
],
242 input
[type
="submit"][disabled
] {
243 opacity: var
(--disabled-opacity
);
246 input
[type
="search"] {
247 -webkit-appearance: textfield
;
248 box-sizing: content-box
;
251 input
[type
="search"]::-webkit-search-decoration
{
252 -webkit-appearance: none
;
262 * Basic and global styles for generating a grid system, structural layout, and page templates
263 * ------------------------------------------------------------------------------------------- */
265 background-color: var
(--background-color-high
);
266 font-family: "Helvetica Neue", Helvetica
, Arial
, sans-serif
;
270 color: var
(--text-color-high
);
274 flex-direction: column
;
286 color: var
(--primary-color-high
);
287 text-decoration: none
;
288 line-height: inherit
;
289 font-weight: inherit
;
293 color: var
(--primary-color-low
);
294 text-decoration: underline
;
310 * Headings, body text, lists, code, and more for a versatile and durable typography system
311 * ---------------------------------------------------------------------------------------- */
315 .table .tr.cbi-section-table-descr .th {
324 color: var
(--text-color-low
);
334 color: var
(--text-color-high
);
343 color: var
(--text-color-low
);
394 color: var
(--text-color-low
);
395 text-transform: uppercase
;
399 margin: 0 0 18px 25px;
419 color: var
(--text-color-medium
);
446 border-bottom: 1px solid var
(--border-color-low
);
456 font-weight: inherit
;
457 line-height: inherit
;
460 small
{ font-size: 0.9em }
470 font-family: Monaco
, Andale Mono
, Courier New
, monospace
;
476 background-color: var
(--border-color-low
);
477 color: var
(--text-color-high
);
482 --border-color-h: var
(--background-color-h
);
483 --border-color-s: var
(--background-color-s
);
484 --border-color-delta-l: 100%;
485 --border-color-l: calc
(var
(--background-color-l
) + var
(--background-color-delta-l-sign
) * var
(--border-color-delta-l
));
486 --border-color-a: 0.15;
487 --border-color: hsla
(var
(--border-color-hsl
), var
(--border-color-a
));
489 background-color: var
(--background-color-low
);
495 border: 1px solid var
(--border-color
);
498 white-space: pre-wrap
;
499 word-wrap: break-word
;
503 * Base styles for various input types, form layouts, and states
504 * ------------------------------------------------------------- */
519 color: var
(--text-color-high
);
523 form
.cbi-tab-descr
{
533 font-family: "Helvetica Neue", Helvetica
, Arial
, sans-serif
;
544 .cbi-value label.cbi-value-title {
551 color: var
(--text-color-high
);
554 label
> input
[type
="checkbox"],
555 label
> input
[type
="radio"] {
556 vertical-align: text-top
;
568 .cbi-dropdown:not(.btn):not(.cbi-button) {
569 display: inline-block
;
572 background: var
(--background-color-high
);
573 color: var
(--text-color-high
);
576 border: 1px solid var
(--border-color-high
);
583 .cbi-dropdown:not(.btn):not(.cbi-button) {
587 .cbi-dropdown:not
(.btn
):not
(.cbi-button
),
598 display: inline-flex
;
599 flex-direction: column
;
602 .cbi-dynlist > .item {
604 box-shadow: 0 0 2px var
(--border-color-high
);
605 background: var
(--background-color-high
);
606 padding: 2px 2em 2px 4px;
607 border: 1px solid var
(--border-color-high
);
609 color: var
(--text-color-high
);
611 pointer-events: none
;
613 word-break: break-all
;
616 .cbi-dynlist > .item::after {
619 display: inline-flex
;
625 border: 1px solid var
(--border-color-high
);
626 border-radius: 0 3px 3px 0;
629 pointer-events: auto
;
632 .cbi-dynlist > .add-item {
636 .cbi-dynlist
> .add-item
> input
,
637 .cbi-dynlist > .add-item > button {
640 text-overflow: ellipsis
;
644 .cbi-value-field > .cbi-checkbox {
653 background: linear-gradient
(var
(--background-color-high
), var
(--border-color-low
));
658 .cbi-select select:focus {
659 -webkit-appearance: none
;
663 background: transparent
;
671 .cbi-select::before {
678 background: linear-gradient
(var
(--background-color-high
), var
(--border-color-low
));
679 pointer-events: none
;
683 .cbi-select select option {
684 background: var
(--background-color-low
);
685 color: var
(--text-color-high
);
688 .cbi-select select option:hover {
689 background: var
(--primary-color-low
);
690 color: var
(--on-primary-color
);
693 .cbi-select select option:checked {
694 background: var
(--primary-color-medium
);
695 color: var
(--on-primary-color
);
699 background-color: #fff;
702 line-height: initial
;
704 width: auto
!important
;
707 input
[type
=button
], input
[type
=reset
], input
[type
=submit
] {
714 background-color: #fff;
717 input
[type
="checkbox"],
718 input
[type
="radio"] {
719 --bd-color: var
(--border-color-high
);
720 --fg-color: var
(--text-color-high
);
723 -webkit-appearance: none
;
726 color: var
(--fg-color
);
728 display: inline-block
;
734 input
[type
="checkbox"]::before
,
735 input
[type
="checkbox"]::after
,
736 input
[type
="radio"]::before
,
737 input
[type
="radio"]::after
{
742 input
[type
="checkbox"]::before
,
743 input
[type
="radio"]::before
{
748 background: linear-gradient
(var
(--background-color-high
), var
(--background-color-low
));
749 border: 1px solid var
(--bd-color
);
754 input
[type
="radio"]::before
{
758 input
[type
="checkbox"]::after
,
759 input
[type
="radio"]::after
{
766 input
[type
="checkbox"]:checked::after
,
767 input
[type
="radio"]:checked::after
{
768 --checkmark-icon: url
("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><path d='m2.5 7.4 7.5 7.5-2.5 2.4L0 10Zm15-5L20 4.9 7.5 17.3 5 15Z'/></svg>");
769 -webkit-mask: var
(--checkmark-icon
) center
/cover no-repeat
;
770 mask: var
(--checkmark-icon
) center
/cover no-repeat
;
771 background: var
(--fg-color
);
774 input
[type
="radio"]:checked:after
{
775 --checkmark-icon: url
("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='10' cy='10' r='8'/></svg>");
778 input
[type
="checkbox"].cbi-input-invalid
,
779 input
[type
="radio"].cbi-input-invalid
{
780 --bd-color: var
(--error-color-medium
);
781 --fg-color: var
(--error-color-high
);
784 .td
> input
[type
=text
],
785 .td
> input
[type
=password
],
787 .td
> .cbi-dropdown:not
(.btn
):not
(.cbi-button
),
788 .cbi-dynlist > .add-item > .cbi-dropdown {
793 color: var
(--text-color-medium
);
801 .cbi-dynlist
> .item
,
802 input
[type
="checkbox"]::before
,
803 input
[type
="radio"]::before
,
804 input
, button
, textarea
{
805 transition: border linear
0.2s, box-shadow linear
0.2s;
806 box-shadow: inset
0 1px 3px hsla
(var
(--border-color-low-hsl
), .01);
810 .btn:hover
, .btn:focus
,
811 .cbi-button:hover
, .cbi-button:focus
,
813 .cbi-dropdown:focus
, .cbi-dropdown
[open
],
814 .cbi-dynlist
> .item:focus
,
815 input
[type
="checkbox"]:focus::before
,
816 input
[type
="radio"]:focus::before
,
817 input:focus
, button:hover
, textarea:focus
{
818 --focus-color-rgb: 82, 168, 236;
821 border-color: rgba
(var
(--focus-color-rgb
), 0.8) !important
;
822 box-shadow: inset
0 1px 3px hsla
(var
(--border-color-low-hsl
), .01), 0 0 8px rgba
(var
(--focus-color-rgb
), 0.6);
823 text-decoration: none
;
826 .cbi-input-invalid:focus
,
827 .cbi-select
.cbi-input-invalid
,
828 input
[type
="checkbox"].cbi-input-invalid:focus::before
,
829 input
[type
="radio"].cbi-input-invalid:focus::before
{
830 --focus-color-rgb: var
(--error-color-high-rgb
);
837 .cbi-dropdown
[disabled
],
838 input
[type
="checkbox"][disabled
]::before
,
839 input
[type
="checkbox"][disabled
]::after
,
840 input
[type
="radio"][disabled
]::before
,
841 input
[type
="radio"][disabled
]::after
,
846 .cbi-dropdown
[readonly
],
847 input
[type
="checkbox"][readonly
]::before
,
848 input
[type
="checkbox"][readonly
]::after
,
849 input
[type
="radio"][readonly
]::before
,
850 input
[type
="radio"][readonly
]::after
{
851 opacity: var
(--disabled-opacity
);
852 pointer-events: none
;
858 pointer-events: auto
;
863 .cbi-section-create {
864 padding: 0 0 10px 10px;
867 .cbi-section-create {
869 display: inline-flex
;
873 .cbi-section-create > * {
878 .cbi-section-create > * > input {
884 background: var
(--background-color-low
);
886 padding: 17px 20px 18px 17px;
887 border-top: 1px solid var
(--border-color-medium
);
888 border-radius: 0 0 3px 3px;
892 .actions
.secondary-action
,
893 .cbi-page-actions .secondary-action{
897 .actions
.secondary-action a
,
898 .cbi-page-actions .secondary-action a {
902 .actions
.secondary-action
a:hover
,
903 .cbi-page-actions .secondary-action a:hover {
904 text-decoration: underline
;
907 .cbi-page-actions > form {
914 * Tables for, you guessed it, tabular data
915 * ---------------------------------------- */
916 .tr { display: table-row
; }
917 .table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
918 .table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
926 border-collapse: collapse
;
930 .table .th, .table .td {
932 vertical-align: middle
; /* Fixme */
933 padding: 10px 10px 9px;
938 .table .tr:first-child .th {
944 .table .td, .table .th {
945 border-top: 1px solid var
(--border-color-medium
);
949 height: calc
(3em + 20px);
952 .tr.placeholder > .td {
962 .tr.drag-over-below {
963 border: 2px solid
#0069d6;
964 border-width: 2px 0 0 0;
967 .tr.drag-over-below {
968 border-width: 0 0 2px 0;
972 * Repeatable UI elements outside the base styles provided from the scaffolding
973 * ---------------------------------------------------------------------------- */
980 margin: -5px -5px 15px -5px;
986 text-shadow: 0 -1px 0 hsla
(var
(--border-color-low-hsl
), .25);
989 header
.brand:hover
, header ul
.active
> a
{
990 background-color: #333;
991 background-color: rgba
(255, 255, 255, 0.05);
993 text-decoration: none
;
999 padding: 8px 20px 12px;
1007 header
.pull-right
{
1019 background: linear-gradient
(#333333, #222222);
1020 box-shadow: 0 1px 3px hsla
(var
(--border-color-low-hsl
), .25), inset
0 -1px 0 hsla
(var
(--border-color-low-hsl
), .01);
1022 /* the redundant properties below work around a csstidy bug */
1023 padding-left: calc
((100% - 940px) / 2);
1024 padding-right: calc
((100% - 940px) / 2);
1043 padding: 10px 10px 11px;
1045 text-decoration: none
;
1050 text-decoration: none
;
1054 background-color: #222;
1055 background-color: rgba
(0, 0, 0, 0.5);
1060 background: rgba
(255, 255, 255, 0.05);
1063 .nav .dropdown-menu {
1064 background-color: #333;
1067 .nav .dropdown-menu a.menu {
1071 .nav .dropdown-menu li a {
1073 text-shadow: 0 1px 0 rgba
(0, 0, 0, 0.5);
1076 .nav .dropdown-menu li a:hover {
1077 background-color: #191919;
1078 background-repeat: repeat-x
;
1079 background-image: linear-gradient
(to bottom
, #292929, #191919);
1083 .nav .dropdown-menu .active a {
1087 .nav .dropdown-menu li a {
1091 li
.menu
, .dropdown
{
1098 display: inline-block
;
1100 text-indent: -99999px;
1101 vertical-align: top
;
1104 border-left: 4px solid transparent
;
1105 border-right: 4px solid transparent
;
1106 border-top: 4px solid
#fff;
1111 background-color: #fff;
1124 border-color: rgba
(0, 0, 0, 0.2);
1125 border-style: solid
;
1126 border-width: 0 1px 1px;
1127 border-radius: 0 0 6px 6px;
1128 box-shadow: 0 2px 4px rgba
(0, 0, 0, 0.2);
1129 background-clip: padding-box
;
1135 background-color: transparent
;
1142 font-weight: normal
;
1145 text-shadow: 0 1px 0 #fff;
1148 .dropdown-menu a:hover {
1149 background-color: #ddd;
1150 background-repeat: repeat-x
;
1151 background-image: linear-gradient
(to bottom
, #eee, #ddd);
1153 text-decoration: none
;
1154 box-shadow: inset
0 1px 0 rgba
(0, 0, 0, 0.025), inset
0 -1px rgba
(0, 0, 0, 0.025);
1157 .dropdown:hover ul.dropdown-menu {
1161 .dropdown-menu .dropdown-menu {
1170 .tabs, .cbi-tabmenu {
1171 --tab-bar-background-color: var
(--background-color-high
);
1172 --tab-inactive-background-color-h: var
(--border-color-low-h
);
1173 --tab-inactive-background-color-s: var
(--border-color-low-s
);
1174 --tab-inactive-background-color-l: var
(--border-color-low-l
);
1175 --tab-inactive-background-color: var
(--border-color-low
);
1176 --tab-inactive-border-color: var
(--border-color-medium
);
1177 --tab-inactive-text-color-delta-l: calc
(85 / 255 * 100%);
1178 --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
));
1179 --tab-inactive-text-color: hsl
(var
(--tab-inactive-background-color-hsl
));
1180 --tab-inactive-hover-background-color: var
(--background-color-high
);
1181 --tab-active-background-color: var
(--background-color-high
);
1182 --tab-active-text-color: #0069d6;
1183 --tab-active-border-color: var
(--border-color-medium
);
1185 margin: 0 -5px 18px;
1190 background: linear-gradient
(var
(--tab-bar-background-color
) 28px, var
(--tab-inactive-border-color
) 28px);
1191 background-size: 1px 29px;
1192 background-position: left bottom
;
1195 .tabs > li, .cbi-tabmenu > li {
1198 align-items: center
;
1201 margin: 4px 2px 0 2px;
1202 background: var
(--tab-active-background-color
);
1203 border: 1px solid var
(--tab-active-border-color
);
1204 border-bottom: none
;
1205 border-radius: 4px 4px 0 0;
1206 color: var
(--primary-color-high
);
1209 .tabs > li > a, .cbi-tabmenu > li > a {
1211 white-space: nowrap
;
1213 text-overflow: ellipsis
;
1215 text-decoration: none
;
1216 border-radius: 4px 4px 0 0;
1221 .tabs > li:not(.active):hover, .cbi-tabmenu > .cbi-tab-disabled:hover {
1222 background: linear-gradient
(var
(--tab-inactive-hover-background-color
) 90%, var
(--tab-inactive-border-color
) 100%);
1225 .tabs > li:not(.active), .cbi-tabmenu > .cbi-tab-disabled {
1226 color: var
(--tab-inactive-text-color
);
1227 background: linear-gradient
(var
(--tab-inactive-background-color
) 90%, var
(--tab-inactive-border-color
) 100%);
1230 .cbi-tab-disabled[data-errors]::after {
1231 content: attr
(data-errors
);
1232 background: #c43c35;
1246 .cbi-tabmenu.map > li {
1251 .cbi-tabcontainer > fieldset.cbi-section[id] > legend {
1255 .tabs .menu-dropdown, .tabs .dropdown-menu {
1258 border-radius: 0 6px 6px 6px;
1261 .tabs a.menu:after, .tabs .dropdown-toggle:after {
1262 border-top-color: #999;
1267 .tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle {
1271 .tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after {
1272 border-top-color: #555;
1275 .tab-content
> .tab-pane
,
1276 .tab-content > div {
1280 .tab-content > .active {
1287 background: linear-gradient
(to bottom
, var
(--background-color-high
), var
(--background-color-low
));
1288 border: 1px solid var
(--border-color-medium
);
1298 .breadcrumb li:not(:last-child)::after {
1303 .breadcrumb .active a {
1304 color: var
(--text-color-medium
);
1310 border-top: 1px solid var
(--border-color-low
);
1313 align-items: baseline
;
1314 justify-content: space-between
;
1316 color: var
(--text-color-low
);
1317 /* the redundant properties below work around a csstidy bug */
1318 padding-left: calc
((100% - 940px) / 2);
1319 padding-right: calc
((100% - 940px) / 2);
1323 color: var
(--primary-color-low
);
1330 footer ul
.breadcrumb
{
1338 background: rgba
(0, 0, 0, 0.7);
1341 transition: opacity
.125s ease-in
;
1352 background: var
(--background-color-high
);
1353 border: 1px solid var
(--border-color-low
);
1354 box-shadow: 0 0 3px var
(--background-color-low
);
1355 padding: 1em 1em .5em 1em;
1360 line-height: normal
;
1361 margin-bottom: .5em;
1367 white-space: pre-wrap
;
1372 body
.modal-overlay-active
{
1377 body
.modal-overlay-active #modal_overlay
{
1381 visibility: visible
;
1384 .btn .close, .alert-message .close {
1385 font-family: Arial
, sans-serif
;
1390 .alert-message
.danger
,
1392 .alert-message
.error
,
1393 .cbi-tooltip.error {
1394 background: linear-gradient
(var
(--error-color-low
), var
(--error-color-medium
));
1395 color: var
(--on-error-color
);
1396 border-color: var
(--error-color-high
) var
(--error-color-high
) var
(--error-color-low
);
1399 .btn.success, .alert-message.success, .cbi-tooltip.success {
1400 background: linear-gradient
(var
(--success-color-low
), var
(--success-color-medium
));
1401 color: var
(--on-error-color
);
1402 border-color: var
(--success-color-high
) var
(--success-color-high
) var
(--success-color-low
);
1405 .btn.info, .alert-message.info, .cbi-tooltip.info {
1406 background: linear-gradient
(var
(--primary-color-low
), var
(--primary-color-medium
));
1407 color: var
(--on-primary-color
);
1408 border-color: var
(--primary-color-high
) var
(--primary-color-high
) var
(--primary-color-low
);
1411 .alert-message.notice, .cbi-tooltip.notice {
1412 background: linear-gradient
(var
(--background-color-low
), var
(--background-color-medium
));
1413 border-color: var
(--background-color-high
) var
(--background-color-high
) var
(--background-color-low
);
1414 color: var
(--text-color-high
);
1417 .alert-message.warning {
1418 background: linear-gradient
(var
(--warn-color-low
), var
(--warn-color-medium
));
1419 border-color: var
(--warn-color-high
) var
(--warn-color-high
) var
(--warn-color-low
);
1420 color: var
(--on-warn-color
);
1423 .modal.alert-message {
1424 color: var
(--text-color-high
);
1430 --default-btn-background: linear-gradient
(var
(--background-color-high
), var
(--background-color-high
) 25%, var
(--background-color-low
));
1431 --on-color: var
(--text-color-high
);
1434 display: inline-block
;
1435 background: var
(--default-btn-background
);
1437 color: var
(--on-color
);
1440 border: 1px solid var
(--border-color-high
);
1446 .cbi-input-invalid
.cbi-dropdown:not
(.btn
):not
(.cbi-button
),
1447 .cbi-input-invalid
.cbi-dropdown:not
([open
]) > ul
> li
,
1448 .cbi-value-error input {
1449 color: var
(--error-color-high
);
1450 border-color: var
(--error-color-medium
);
1453 .cbi-button-positive
,
1454 .cbi-button-fieldadd
,
1457 --on-color: var
(--success-color-high
);
1458 border-color: var
(--on-color
);
1461 .cbi-button-neutral
,
1462 .cbi-button-download
,
1467 color: var
(--text-color-high
);
1475 --on-color: var
(--primary-color-high
);
1476 border-color: var
(--on-color
);
1479 .cbi-button-negative
,
1480 .cbi-section-remove
.cbi-button
,
1482 .cbi-button-remove {
1483 --on-color: var
(--error-color-high
);
1484 border-color: var
(--on-color
);
1487 .cbi-page-actions::after {
1493 .cbi-page-actions > * {
1494 vertical-align: middle
;
1497 .cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-negative):not(.cbi-button-save):not(.cbi-button-reset) {
1503 .cbi-button-action
.important
,
1504 .cbi-page-actions
.cbi-button-apply
,
1505 .cbi-section-actions .cbi-button-edit {
1506 --on-color: var
(--on-primary-color
);
1507 background: linear-gradient
(var
(--primary-color-medium
), var
(--primary-color-low
));
1508 border-color: var
(--primary-color-high
);
1511 .cbi-button-positive
.important
,
1512 .cbi-page-actions .cbi-button-save {
1513 --on-color: var
(--on-success-color
);
1514 background: linear-gradient
(var
(--success-color-medium
), var
(--success-color-low
));
1515 border-color: var
(--success-color-high
);
1518 .cbi-button-negative.important {
1519 --on-color: var
(--on-error-color
);
1520 background: linear-gradient
(var
(--error-color-medium
), var
(--error-color-low
));
1521 border-color: var
(--error-color-high
);
1524 .cbi-page-actions
.cbi-button-apply
+ .cbi-button-save
,
1525 .cbi-page-actions .cbi-button-negative + .cbi-button-save {
1526 --on-color: var
(--success-color-high
);
1527 border-color: var
(--on-color
);
1528 background: var
(--default-btn-background
);
1532 display: inline-flex
!important
;
1536 padding: 0 !important
;
1539 .cbi-dropdown:not(.btn):not(.cbi-button) {
1540 background: linear-gradient
(var
(--background-color-high
) 0%, var
(--border-color-low
) 100%);
1541 border: 1px solid var
(--border-color-high
);
1543 color: var
(--text-color-high
);
1546 .cbi-dropdown > ul {
1547 margin: 0 !important
;
1556 .cbi-dropdown
.btn
> ul:not
(.dropdown
),
1557 .cbi-dropdown.cbi-button > ul:not(.dropdown) {
1558 margin: 0 0 0 13px !important
;
1561 .cbi-dropdown
.btn
.spinning
> ul:not
(.dropdown
),
1562 .cbi-dropdown.cbi-button.spinning > ul:not(.dropdown) {
1563 margin: 0 !important
;
1566 .cbi-dropdown > ul.preview {
1570 .cbi-dropdown
> .open
,
1571 .cbi-dropdown > .more {
1575 flex-direction: column
;
1576 justify-content: center
;
1582 .cbi-dropdown
.btn
> .open
,
1583 .cbi-dropdown.cbi-button > .open {
1586 border-left: 1px solid
;
1589 .cbi-dropdown
> .more
,
1590 .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li[placeholder] {
1591 color: var
(--text-color-medium
);
1595 .cbi-dropdown > ul > li {
1597 white-space: nowrap
;
1599 text-overflow: ellipsis
;
1602 align-items: center
;
1607 .cbi-dropdown
> ul
.dropdown
> li
,
1608 .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li {
1611 color: var
(--text-color-high
);
1614 .cbi-dropdown > ul > li .hide-open { display: block
; display: initial
; }
1615 .cbi-dropdown > ul > li .hide-close { display: none
; }
1617 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1618 border-left: 1px solid var
(--border-color-high
);
1621 .cbi-dropdown[empty] > ul {
1625 .cbi-dropdown > ul > li > form {
1629 pointer-events: none
;
1632 .cbi-dropdown > ul > li img {
1633 vertical-align: middle
;
1634 margin-right: .25em;
1637 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1638 margin: 0 .25em 0 0;
1641 .cbi-dropdown > ul > li input[type="text"] {
1645 .cbi-dropdown[open] {
1649 .cbi-dropdown[open] > ul.dropdown {
1651 background: var
(--background-color-low
);
1652 border: 1px solid
#918e8c;
1653 box-shadow: 0 0 4px #918e8c;
1659 transition: max-height
.125s ease-in
;
1663 .cbi-dropdown
> ul
> li
[display
],
1664 .cbi-dropdown
[open
] > ul
.preview
,
1665 .cbi-dropdown
[open
] > ul
.dropdown
> li
,
1666 .cbi-dropdown
[multiple
] > ul
> li
> label
,
1667 .cbi-dropdown
[multiple
][open
] > ul
.dropdown
> li
,
1668 .cbi-dropdown
[multiple
][more
] > .more
,
1669 .cbi-dropdown[multiple][empty] > .more {
1671 display: flex
!important
;
1674 .cbi-dropdown
[empty
] > ul
> li
,
1675 .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder] {
1676 display: block
!important
;
1679 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1680 display: flex
!important
;
1683 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none
; }
1684 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block
; display: initial
; }
1686 .cbi-dropdown[open] > ul.dropdown > li {
1687 border-bottom: 1px solid var
(--border-color-high
);
1690 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1691 background: var
(--primary-color-medium
);
1692 color: var
(--on-primary-color
);
1695 .cbi-dropdown[open] > ul.dropdown > li.focus {
1696 background: var
(--primary-color-low
);
1697 color: var
(--on-primary-color
);
1700 .cbi-dropdown[open] > ul.dropdown > li[selected].focus {
1701 background: linear-gradient
(90deg, var
(--primary-color-medium
) 50%, var
(--primary-color-low
));
1704 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1706 border-bottom: none
;
1709 .cbi-dropdown[open] > ul.dropdown > li[unselectable] {
1713 .cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
1717 input
[type
="text"] + .cbi-button
,
1718 input
[type
="password"] + .cbi-button
,
1719 select
+ .cbi-button
{
1720 border-radius: 0 3px 3px 0;
1721 border-color: var
(--border-color-high
);
1724 vertical-align: top
;
1730 select
+ .cbi-button
{
1731 border-left-color: transparent
;
1738 .cbi-title-ref::after {
1742 .cbi-tooltip-container {
1750 box-shadow: 0 0 2px var
(--border-color-high
);
1752 background: var
(--background-color-high
);
1756 transition: opacity
.25s ease-in
;
1759 .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
1762 transition: opacity
.25s ease-in
;
1766 border: 1px solid var
(--border-color-high
);
1771 margin: 1.4em 0 4px 0;
1772 background: var
(--background-color-medium
);
1775 .cbi-progressbar > div {
1776 background: var
(--primary-color-medium
);
1778 transition: width
.25s ease-in
;
1783 .cbi-progressbar::before {
1787 content: attr
(title
);
1790 text-overflow: ellipsis
;
1793 .zonebadge .cbi-tooltip {
1795 background: inherit
;
1796 margin: -1.6em 0 0 -5px;
1798 pointer-events: none
;
1799 box-shadow: 0 0 3px #444;
1802 .zonebadge .cbi-tooltip > * {
1813 .zone-forwards > * {
1818 .zone-forwards > span {
1823 .zone-forwards
.zone-src
,
1824 .zone-forwards .zone-dest {
1826 flex-direction: column
;
1829 .btn.active, .btn:active {
1830 box-shadow: inset
0 2px 4px hsla
(var
(--border-color-low-hsl
), .25), 0 1px 2px rgba
(0, 0, 0, 0.05);
1836 opacity: var
(--disabled-opacity
);
1842 line-height: normal
;
1843 padding: 9px 14px 9px;
1848 padding: 7px 9px 7px;
1852 button
.btn::-moz-focus-inner
, input
[type
=submit
].btn::-moz-focus-inner
{
1862 line-height: 13.5px;
1863 text-shadow: 0 1px 0 #fff;
1869 text-decoration: none
;
1875 padding: .5em .5em .25em .5em;
1876 margin-bottom: .5em;
1877 color: var
(--on-warn-color
);
1878 background: linear-gradient
(#fceec1, #eedc94);
1879 border: 1px solid var
(--border-color-low
);
1880 border-color: var
(--border-color-high
) var
(--border-color-high
) var
(--border-color-low
);
1882 box-shadow: 1px 1px 1px var
(--border-color-low
);
1886 .alert-message .close {
1898 line-height: inherit
;
1899 background: transparent
;
1904 .alert-message button {
1909 header
[data-indicator
] {
1910 padding: 3px 3px 2px;
1913 color: var
(--text-color-high
);
1914 text-transform: uppercase
;
1915 white-space: nowrap
;
1916 background-color: var
(--background-color-low
);
1919 margin: .125em 0 .125em .4em;
1922 header
[data-indicator
][data-clickable
] {
1932 text-decoration: none
;
1936 background-color: var
(--primary-color-high
);
1937 color: var
(--on-primary-color
);
1941 background-color: var
(--warn-color-high
);
1942 color: var
(--on-warn-color
);
1946 background-color: var
(--success-color-high
);
1947 color: var
(--on-success-color
);
1951 header
[data-indicator
][data-style
="active"] {
1952 color: var
(--on-primary-color
);
1953 background-color: var
(--primary-color-high
);
1956 /* LuCI specific items */
1957 .hidden { display: none
}
1959 form
.inline
{ display: inline
; margin-bottom: 0; }
1961 #modemenu li:last-child span
.divider
{ display: none
}
1965 color: var
(--text-color-highest
);
1968 .cbi-section-table
.tr:hover
.td
,
1969 .cbi-section-table
.tr:hover
.th
,
1970 .cbi-section-table .tr:hover::before {
1971 background-color: var
(--background-color-low
);
1974 .cbi-section-table .tr.cbi-section-table-descr .th {
1975 font-weight: normal
;
1978 .cbi-section-table-titles
.named::before
,
1979 .cbi-section-table-descr
.named::before
,
1980 .cbi-section-table-row[data-title]::before {
1981 content: attr
(data-title
) " ";
1982 display: table-cell
;
1983 padding: 10px 10px 9px;
1986 vertical-align: middle
;
1989 .cbi-section-table-titles
.named::before
,
1990 .cbi-section-table-descr
.named::before
,
1991 .cbi-section-table-row[data-title]::before {
1992 border-top: 1px solid var
(--border-color-medium
);
1995 .left { text-align: left
!important
; }
1996 .right { text-align: right
!important
; }
1997 .center { text-align: center
!important
; }
1998 .top { vertical-align: top
!important
; }
1999 .middle { vertical-align: middle
!important
; }
2000 .bottom { vertical-align: bottom
!important
; }
2003 .cbi-value-field table td {
2007 .table
.cbi-section-table input
[type
="password"],
2008 .table
.cbi-section-table input
[type
="text"],
2009 .table
.cbi-section-table textarea
,
2010 .table
.cbi-section-table select
,
2011 .table.cbi-section-table .cbi-select {
2016 .table.cbi-section-table .td.cbi-section-table-cell {
2017 white-space: nowrap
;
2021 .table
.cbi-section-table
.td
.cbi-section-table-cell select
,
2022 .table.cbi-section-table .td.cbi-section-table-cell .cbi-select {
2026 .td.cbi-section-actions {
2028 vertical-align: middle
;
2031 .td.cbi-section-actions > * {
2035 .td
.cbi-section-actions
> * > *,
2036 .td.cbi-section-actions > * > form > * {
2041 .td.cbi-section-actions > * > form {
2042 display: inline-flex
;
2046 .table.valign-middle .td {
2047 vertical-align: middle
;
2052 .tr.cbi-section-table-titles {
2053 background: var
(--background-color-medium
);
2056 .cbi-value-description {
2057 margin: .25em 0 0 1.25em;
2061 .cbi-value-description:not(:empty)::before {
2062 --help-icon: url
("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><path 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>");
2067 display: inline-block
;
2070 margin-right: .25em;
2071 background: var
(--primary-color-high
);
2072 mask-image: var
(--help-icon
);
2074 -webkit-mask-image: var
(--help-icon
);
2075 -webkit-mask-size: cover
;
2078 .cbi-section-error {
2079 border: 1px solid
#f00;
2081 background-color: #fce6e6;
2083 margin-bottom: 18px;
2086 .cbi-section-error ul { margin: 0 0 0 20px; }
2088 .cbi-section-error ul li {
2094 border: 1px solid var
(--border-color-high
);
2097 white-space: nowrap
;
2098 background: linear-gradient
(var
(--background-color-high
), var
(--background-color-medium
));
2100 box-shadow: inset
0 1px 0 hsla
(var
(--text-color-low-hsl
), 0.05);
2101 display: inline-flex
;
2102 flex-direction: column
;
2107 .ifacebox .ifacebox-head {
2108 border-bottom: 1px solid var
(--border-color-high
);
2109 border-radius: 4px 4px 0 0;
2112 color: var
(--text-color-high
);
2115 .ifacebox .ifacebox-head[style] {
2116 text-shadow: 0 1px 1px hsla
(var
(--background-color-high-hsl
), 0.75);
2119 .ifacebox .ifacebox-head.active {
2120 background: var
(--primary-color-high
);
2121 color: var
(--on-primary-color
);
2124 [data-darkmode
="true"] .zonebadge
[style
],
2125 [data-darkmode
="true"] .ifacebox-head
[style
] {
2126 background: linear-gradient
(rgba
(var
(--zone-color-rgb
), .4), rgba
(var
(--zone-color-rgb
), .3)) !important
;
2129 .ifacebox .ifacebox-body {
2134 display: inline-block
;
2135 flex-direction: row
;
2136 white-space: nowrap
;
2137 border: 1px solid var
(--border-color-high
);
2139 background: linear-gradient
(var
(--background-color-high
), var
(--background-color-high
) 25%, var
(--background-color-medium
));
2140 color: var
(--text-color-high
);
2141 text-shadow: 0 1px 1px hsla
(var
(--background-color-high-hsl
), 0.75);
2143 box-shadow: inset
0 1px 0 hsla
(var
(--background-color-high-hsl
), 0.05);
2151 vertical-align: middle
;
2154 .ifacebadge-active {
2159 .network-status-table {
2164 .network-status-table .ifacebox {
2169 .network-status-table .ifacebox-body {
2171 flex-direction: column
;
2176 .network-status-table .ifacebox-body > * {
2180 .network-status-table .ifacebox-body > span {
2185 .network-status-table .ifacebox-body > div {
2191 #dsl_status_table .ifacebox-body span
> strong
{
2192 display: inline-block
;
2197 .network-status-table .ifacebox-body .ifacebadge {
2206 display: inline-flex
;
2209 .network-status-table .ifacebox-body .ifacebadge > span {
2211 text-overflow: ellipsis
;
2215 .ifacebadge.large > * {
2222 display: inline-block
;
2223 white-space: nowrap
;
2224 color: var
(--text-color-high
);
2225 text-shadow: 0 1px 1px hsla
(var
(--background-color-high-hsl
), 0.75);
2229 .zonebadge > strong {
2231 display: inline-block
;
2238 .zonebadge > .ifacebadge {
2243 border: 1px dashed
#aaa;
2250 .td.cbi-value-field var {
2255 div
.cbi-value var
[data-tooltip
],
2256 .td
.cbi-value-field var
[data-tooltip
],
2257 div
.cbi-value var
.cbi-tooltip-container
,
2258 .td.cbi-value-field var.cbi-tooltip-container {
2260 border-bottom: 1px dotted
#0069d6;
2263 div
.cbi-value var
.cbi-tooltip-container
,
2264 .td.cbi-value-field var.cbi-tooltip-container .cbi-tooltip {
2266 white-space: normal
;
2267 color: var
(--text-color-high
);
2270 #modal_overlay > .modal
.uci-dialog
,
2271 #modal_overlay > .modal
.cbi-modal
{
2275 #modal_overlay > .modal
.login
> button
.important
{
2276 font-size: 120% !important
;
2286 .uci-change-dialog div
> del
,
2287 .uci-change-dialog div
> ins
,
2288 .uci-change-dialog div > var {
2290 border: 1px solid
#ccc;
2294 text-overflow: ellipsis
;
2299 .uci-change-list > * > * {
2301 text-overflow: ellipsis
;
2304 .uci-change-dialog del
,
2305 .uci-change-dialog ins
,
2306 .uci-change-dialog var {
2307 text-decoration: none
;
2308 font-family: monospace
;
2310 color: var
(--text-color-high
);
2314 .uci-change-dialog div > ins {
2315 border-color: rgba
(var
(--success-color-high-rgb
), .6);
2316 background: var
(--border-color-low
);
2319 .uci-change-dialog div > del {
2320 border-color: rgba
(var
(--error-color-high-rgb
), .6);
2321 background: var
(--border-color-low
);
2324 .uci-change-dialog div > var {
2325 border-color: var
(--border-color-high
);
2326 background: var
(--border-color-low
);
2329 .uci-change-dialog div > :not(div) > ins {
2330 background: rgba
(var
(--success-color-high-rgb
), .3);
2333 .uci-change-dialog div > :not(div) > del {
2334 background: rgba
(var
(--error-color-high-rgb
), .3);
2337 .uci-change-dialog div > var > * {
2342 .uci-change-dialog div
> ins
> ins
,
2343 .uci-change-dialog div > del > del {
2348 .uci-change-legend {
2353 .uci-change-legend-label {
2357 align-items: center
;
2360 .uci-change-legend-label
> ins
,
2361 .uci-change-legend-label
> del
,
2362 .uci-change-legend-label > var {
2369 .uci-change-legend-label > * > * {
2374 #applyreboot-section {
2378 [data-page
="admin-network-dhcp"] [data-name
="ip"] {
2384 50% { opacity: .5; }
2385 100% { opacity: 1; }
2389 animation: flash
.35s;
2392 #view > div
.spinning:first-child
{
2399 padding-left: 32px !important
;
2403 --spinner-icon: url
("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' stroke='%23000' stroke-width='3' fill='none'><circle cx='10' cy='10' r='8' stroke-opacity='.5'/><path d='M10 2c4 0 8 4 8 8'><animateTransform attributeName='transform' type='rotate' dur='1s' from='0 10 10' to='360 10 10' repeatCount='indefinite'/></path></svg>");
2406 top: calc
(50% - 10px);
2411 background: var
(--on-color
, #000);
2412 mask: var
(--spinner-icon
) center
/cover no-repeat
;
2413 -webkit-mask: var
(--spinner-icon
) center
/cover no-repeat
;
2416 [data-darkmode
="true"] .spinning::before
{
2417 background: var
(--on-color
, #fff);
2426 [data-tab-active
="true"] {
2430 transition: opacity
.25s ease-in
;
2436 border: 1px solid
#ccc;
2439 flex-direction: column
;
2445 .cbi-filebrowser.open {
2449 transition: opacity
.25s ease-in
;
2452 .cbi-filebrowser > * {
2455 text-overflow: ellipsis
;
2456 padding: 0 0 .25em 0;
2457 margin: .25em .25em 0px .25em;
2458 white-space: nowrap
;
2459 border-bottom: 1px solid
#ccc;
2462 .cbi-filebrowser .cbi-button-positive {
2463 margin-right: .25em;
2466 .cbi-filebrowser > div {
2467 border-bottom: none
;
2470 .cbi-filebrowser > ul > li {
2472 flex-direction: row
;
2475 .cbi-filebrowser > ul > li:hover {
2476 background: #f5f5f5;
2479 .cbi-filebrowser > ul > li > div:first-child {
2482 text-overflow: ellipsis
;
2485 .cbi-filebrowser > ul > li > div:last-child {
2490 .cbi-filebrowser > ul > li > div:last-child > button {
2491 padding: .125em .25em;
2492 margin: 1px 0 1px .25em;
2495 .cbi-filebrowser .upload {
2497 flex-direction: row
;
2499 margin: 0 -.125em .25em -.125em;
2500 padding: 0 0 .125em 0px;
2501 border-bottom: 1px solid
#ccc;
2504 .cbi-filebrowser .upload > * {
2509 .cbi-filebrowser .upload > .btn {
2513 .cbi-filebrowser .upload > div {
2518 .cbi-filebrowser .upload > div > input {
2522 @keyframes fade-in
{
2524 100% { opacity: 1; }
2527 @keyframes fade-out
{
2529 100% { opacity: 0; }
2533 animation: fade-in
.4s ease
;
2537 animation: fade-out
.4s ease
;
2540 .assoclist .ifacebadge {
2542 flex-direction: column
;
2543 align-items: center
;
2544 white-space: normal
;
2548 .assoclist .ifacebadge > img {
2552 .assoclist
.td:nth-of-type
(3),
2553 .assoclist .td:nth-of-type(5) {
2557 .assoclist .td:nth-of-type(6) button {
2561 [data-darkmode
="true"] [data-page
="admin-statistics-graphs"] [data-plugin
] img
{
2562 filter: invert
(100%) hue-rotate
(150deg);