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 * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
158 scroll-margin-top: 40px;
161 *, *::before
, *::after
{
165 box-sizing: border-box
;
168 abbr
[title
], acronym
[title
] {
169 border-bottom: 1px dotted
;
170 font-weight: inherit
;
175 border-collapse: collapse
;
185 -webkit-text-size-adjust: 100%;
186 -ms-text-size-adjust: 100%;
191 outline: thin dotted
;
202 vertical-align: baseline
;
214 -ms-interpolation-mode: bicubic
;
224 box-sizing: border-box
;
225 vertical-align: baseline
;
229 button::-moz-focus-inner
, input::-moz-focus-inner
{
235 input
[type
="button"],
237 input
[type
="submit"] {
239 -webkit-appearance: button
;
240 word-break: break-all
;
244 input
[type
="button"][disabled
],
245 input
[type
="reset"][disabled
],
246 input
[type
="submit"][disabled
] {
247 opacity: var
(--disabled-opacity
);
250 input
[type
="search"] {
251 -webkit-appearance: textfield
;
252 box-sizing: content-box
;
255 input
[type
="search"]::-webkit-search-decoration
{
256 -webkit-appearance: none
;
265 display: inline-flex
;
269 .control-group
> input
+ :not
(input
):not
(select
),
270 .control-group > select + :not(input):not(select) {
271 margin-left: calc
(-.2em + -2px);
272 border-radius: 0 3px 3px 0;
278 * Basic and global styles for generating a grid system, structural layout, and page templates
279 * ------------------------------------------------------------------------------------------- */
281 background-color: var
(--background-color-high
);
282 font-family: "Helvetica Neue", Helvetica
, Arial
, sans-serif
;
286 color: var
(--text-color-high
);
290 flex-direction: column
;
303 color: var
(--primary-color-high
);
304 text-decoration: none
;
305 line-height: inherit
;
306 font-weight: inherit
;
310 color: var
(--primary-color-low
);
311 text-decoration: underline
;
327 * Headings, body text, lists, code, and more for a versatile and durable typography system
328 * ---------------------------------------------------------------------------------------- */
332 .table .tr.cbi-section-table-descr .th {
341 color: var
(--text-color-low
);
351 color: var
(--text-color-high
);
360 color: var
(--text-color-low
);
411 color: var
(--text-color-low
);
412 text-transform: uppercase
;
416 margin: 0 0 18px 25px;
436 color: var
(--text-color-medium
);
463 border-bottom: 1px solid var
(--border-color-low
);
473 font-weight: inherit
;
474 line-height: inherit
;
477 small
{ font-size: 0.9em }
487 font-family: Monaco
, Andale Mono
, Courier New
, monospace
;
493 background-color: var
(--border-color-low
);
494 color: var
(--text-color-high
);
499 --border-color-h: var
(--background-color-h
);
500 --border-color-s: var
(--background-color-s
);
501 --border-color-delta-l: 100%;
502 --border-color-l: calc
(var
(--background-color-l
) + var
(--background-color-delta-l-sign
) * var
(--border-color-delta-l
));
503 --border-color-a: 0.15;
504 --border-color: hsla
(var
(--border-color-hsl
), var
(--border-color-a
));
506 background-color: var
(--background-color-low
);
512 border: 1px solid var
(--border-color
);
515 white-space: pre-wrap
;
516 word-wrap: break-word
;
520 * Base styles for various input types, form layouts, and states
521 * ------------------------------------------------------------- */
531 color: var
(--text-color-high
);
540 font-family: "Helvetica Neue", Helvetica
, Arial
, sans-serif
;
557 .cbi-value label.cbi-value-title {
563 color: var
(--text-color-high
);
566 .cbi-value
> .cbi-section
,
567 .cbi-value > .cbi-tblsection {
571 label
> input
[type
="checkbox"],
572 label
> input
[type
="radio"] {
573 vertical-align: text-top
;
585 .cbi-dropdown:not(.btn):not(.cbi-button) {
586 display: inline-block
;
589 background: var
(--background-color-high
);
590 color: var
(--text-color-high
);
593 border: 1px solid var
(--border-color-high
);
600 .cbi-dropdown:not(.btn):not(.cbi-button) {
604 .cbi-dropdown:not
(.btn
):not
(.cbi-button
),
614 display: inline-flex
;
615 flex-direction: column
;
618 .cbi-dynlist > .item {
620 box-shadow: 0 0 2px var
(--border-color-high
);
621 background: var
(--background-color-high
);
622 padding: 6px 2em 6px 4px;
623 border: 1px solid var
(--border-color-high
);
625 color: var
(--text-color-high
);
627 pointer-events: none
;
629 word-break: break-all
;
632 .cbi-dynlist > .item::after {
635 display: inline-flex
;
641 border: 1px solid var
(--border-color-high
);
642 border-radius: 0 3px 3px 0;
645 pointer-events: auto
;
648 .cbi-dynlist > .add-item {
652 .cbi-dynlist
> .add-item
> input
,
653 .cbi-dynlist > .add-item > button {
656 text-overflow: ellipsis
;
660 .cbi-value-field
> .cbi-checkbox
,
661 .cbi-value-field > div > .cbi-radio {
663 display: inline-flex
;
675 background: linear-gradient
(var
(--background-color-high
), var
(--border-color-low
));
679 .cbi-select select:focus {
680 -webkit-appearance: none
;
684 background: transparent
;
692 .cbi-select::before {
699 background: linear-gradient
(var
(--background-color-high
), var
(--border-color-low
));
700 pointer-events: none
;
703 flex-direction: column
;
704 justify-content: center
;
707 .cbi-select select option {
708 background: var
(--background-color-low
);
709 color: var
(--text-color-high
);
712 .cbi-select select option:hover {
713 background: var
(--primary-color-low
);
714 color: var
(--on-primary-color
);
717 .cbi-select select option:checked {
718 background: var
(--primary-color-medium
);
719 color: var
(--on-primary-color
);
725 line-height: initial
;
727 width: auto
!important
;
730 input
[type
=button
], input
[type
=reset
], input
[type
=submit
] {
737 background-color: #fff;
740 input
[type
="checkbox"],
741 input
[type
="radio"] {
742 --bd-color: var
(--border-color-high
);
743 --fg-color: var
(--text-color-high
);
746 -webkit-appearance: none
;
749 color: var
(--fg-color
);
751 display: inline-block
;
757 input
[type
="checkbox"]::before
,
758 input
[type
="checkbox"]::after
,
759 input
[type
="radio"]::before
,
760 input
[type
="radio"]::after
{
765 input
[type
="checkbox"]::before
,
766 input
[type
="radio"]::before
{
771 background: linear-gradient
(var
(--background-color-high
), var
(--background-color-low
));
772 border: 1px solid var
(--bd-color
);
777 input
[type
="radio"]::before
{
781 input
[type
="checkbox"]::after
,
782 input
[type
="radio"]::after
{
789 input
[type
="checkbox"]:checked::after
,
790 input
[type
="radio"]:checked::after
{
791 --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>");
792 -webkit-mask: var
(--checkmark-icon
) center
/cover no-repeat
;
793 mask: var
(--checkmark-icon
) center
/cover no-repeat
;
794 background: var
(--fg-color
);
797 input
[type
="radio"]:checked:after
{
798 --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='7'/></svg>");
801 input
[type
="checkbox"].cbi-input-invalid
,
802 input
[type
="radio"].cbi-input-invalid
{
803 --bd-color: var
(--error-color-medium
);
804 --fg-color: var
(--error-color-high
);
807 .td
> input
[type
=text
],
808 .td
> input
[type
=password
],
810 .td
> .cbi-dropdown:not
(.btn
):not
(.cbi-button
),
811 .cbi-dynlist > .add-item > .cbi-dropdown {
816 color: var
(--text-color-medium
);
824 .cbi-dynlist
> .item
,
825 input
[type
="checkbox"]::before
,
826 input
[type
="radio"]::before
,
827 input
, button
, textarea
, select
{
828 transition: border linear
0.2s, box-shadow linear
0.2s;
829 box-shadow: inset
0 1px 3px hsla
(var
(--border-color-low-hsl
), .01);
833 .btn:hover
, .btn:focus
,
834 .cbi-button:hover
, .cbi-button:focus
,
836 .cbi-dropdown:focus
, .cbi-dropdown
[open
],
837 .cbi-dynlist
> .item:focus
,
838 input
[type
="checkbox"]:focus::before
,
839 input
[type
="radio"]:focus::before
,
840 input:focus
, button:hover
, textarea:focus
, select:focus
{
841 --focus-color-rgb: 82, 168, 236;
844 border-color: rgba
(var
(--focus-color-rgb
), 0.8) !important
;
845 box-shadow: inset
0 1px 3px hsla
(var
(--border-color-low-hsl
), .01), 0 0 8px rgba
(var
(--focus-color-rgb
), 0.6);
846 text-decoration: none
;
849 .cbi-input-invalid:focus
,
850 .cbi-select
.cbi-input-invalid
,
851 input
[type
="checkbox"].cbi-input-invalid:focus::before
,
852 input
[type
="radio"].cbi-input-invalid:focus::before
{
853 --focus-color-rgb: var
(--error-color-high-rgb
);
860 .cbi-select
[disabled
]::before
,
861 .cbi-dropdown
[disabled
]:not
(.btn
):not
(.cbi-button
),
862 input
[type
="checkbox"][disabled
]::before
,
863 input
[type
="checkbox"][disabled
]::after
,
864 input
[type
="radio"][disabled
]::before
,
865 input
[type
="radio"][disabled
]::after
{
866 opacity: var
(--disabled-opacity
);
867 pointer-events: none
;
874 border-color: hsla
(var
(--border-color-high-hsl
), var
(--disabled-opacity
));
875 pointer-events: auto
;
880 .cbi-section-create {
881 padding: 0 0 10px 10px;
884 .cbi-section-create {
886 display: inline-flex
;
890 .cbi-section-create > * {
895 .cbi-section-create > * > input {
901 background: var
(--background-color-low
);
903 padding: 17px 20px 18px 17px;
904 border-top: 1px solid var
(--border-color-medium
);
905 border-radius: 0 0 3px 3px;
909 .actions
.secondary-action
,
910 .cbi-page-actions .secondary-action{
914 .actions
.secondary-action a
,
915 .cbi-page-actions .secondary-action a {
919 .actions
.secondary-action
a:hover
,
920 .cbi-page-actions .secondary-action a:hover {
921 text-decoration: underline
;
924 .cbi-page-actions > form {
931 * Tables for, you guessed it, tabular data
932 * ---------------------------------------- */
933 .tr { display: table-row
; }
934 .table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
935 .table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
943 border-collapse: collapse
;
947 .table .th, .table .td {
949 vertical-align: middle
; /* Fixme */
950 padding: 10px 10px 9px;
955 .table .tr:first-child .th {
961 .table .td, .table .th {
962 border-top: 1px solid var
(--border-color-medium
);
966 height: calc
(3em + 20px);
969 .tr.placeholder > .td {
979 .tr.drag-over-below {
980 border: 2px solid
#0069d6;
981 border-width: 2px 0 0 0;
984 .tr.drag-over-below {
985 border-width: 0 0 2px 0;
989 * Repeatable UI elements outside the base styles provided from the scaffolding
990 * ---------------------------------------------------------------------------- */
997 margin: -5px -5px 15px -5px;
1003 text-shadow: 0 -1px 0 hsla
(var
(--border-color-low-hsl
), .25);
1006 header
.brand:hover
, header ul
.active
> a
{
1007 background-color: #333;
1008 background-color: rgba
(255, 255, 255, 0.05);
1010 text-decoration: none
;
1016 padding: 8px 20px 12px;
1024 header
.pull-right
{
1036 background: linear-gradient
(#333333, #222222);
1037 box-shadow: 0 1px 3px hsla
(var
(--border-color-low-hsl
), .25), inset
0 -1px 0 hsla
(var
(--border-color-low-hsl
), .01);
1039 /* the redundant properties below work around a csstidy bug */
1040 padding-left: calc
((100% - 940px) / 2);
1041 padding-right: calc
((100% - 940px) / 2);
1060 padding: 10px 10px 11px;
1062 text-decoration: none
;
1067 text-decoration: none
;
1071 background-color: #222;
1072 background-color: rgba
(0, 0, 0, 0.5);
1077 background: rgba
(255, 255, 255, 0.05);
1080 .nav .dropdown-menu {
1081 background-color: #333;
1084 .nav .dropdown-menu a.menu {
1088 .nav .dropdown-menu li a {
1090 text-shadow: 0 1px 0 rgba
(0, 0, 0, 0.5);
1093 .nav .dropdown-menu li a:hover {
1094 background-color: #191919;
1095 background-repeat: repeat-x
;
1096 background-image: linear-gradient
(to bottom
, #292929, #191919);
1100 .nav .dropdown-menu .active a {
1104 .nav .dropdown-menu li a {
1108 li
.menu
, .dropdown
{
1115 display: inline-block
;
1117 text-indent: -99999px;
1118 vertical-align: top
;
1121 border-left: 4px solid transparent
;
1122 border-right: 4px solid transparent
;
1123 border-top: 4px solid
#fff;
1128 background-color: #fff;
1141 border-color: rgba
(0, 0, 0, 0.2);
1142 border-style: solid
;
1143 border-width: 0 1px 1px;
1144 border-radius: 0 0 6px 6px;
1145 box-shadow: 0 2px 4px rgba
(0, 0, 0, 0.2);
1146 background-clip: padding-box
;
1152 background-color: transparent
;
1159 font-weight: normal
;
1162 text-shadow: 0 1px 0 #fff;
1165 .dropdown-menu a:hover {
1166 background-color: #ddd;
1167 background-repeat: repeat-x
;
1168 background-image: linear-gradient
(to bottom
, #eee, #ddd);
1170 text-decoration: none
;
1171 box-shadow: inset
0 1px 0 rgba
(0, 0, 0, 0.025), inset
0 -1px rgba
(0, 0, 0, 0.025);
1174 .dropdown:hover ul.dropdown-menu {
1178 .dropdown-menu .dropdown-menu {
1187 .tabs, .cbi-tabmenu {
1188 --tab-bar-background-color: var
(--background-color-high
);
1189 --tab-inactive-background-color-h: var
(--border-color-low-h
);
1190 --tab-inactive-background-color-s: var
(--border-color-low-s
);
1191 --tab-inactive-background-color-l: var
(--border-color-low-l
);
1192 --tab-inactive-background-color: var
(--border-color-low
);
1193 --tab-inactive-border-color: var
(--border-color-medium
);
1194 --tab-inactive-text-color-delta-l: calc
(85 / 255 * 100%);
1195 --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
));
1196 --tab-inactive-text-color: hsl
(var
(--tab-inactive-background-color-hsl
));
1197 --tab-inactive-hover-background-color: var
(--background-color-high
);
1198 --tab-active-background-color: var
(--background-color-high
);
1199 --tab-active-text-color: #0069d6;
1200 --tab-active-border-color: var
(--border-color-medium
);
1202 margin: 0 -5px 18px;
1207 background: linear-gradient
(var
(--tab-bar-background-color
) 28px, var
(--tab-inactive-border-color
) 28px);
1208 background-size: 1px 29px;
1209 background-position: left bottom
;
1212 .tabs > li, .cbi-tabmenu > li {
1215 align-items: center
;
1218 margin: 4px 2px 0 2px;
1219 background: var
(--tab-active-background-color
);
1220 border: 1px solid var
(--tab-active-border-color
);
1221 border-bottom: none
;
1222 border-radius: 4px 4px 0 0;
1223 color: var
(--primary-color-high
);
1226 .tabs > li > a, .cbi-tabmenu > li > a {
1228 white-space: nowrap
;
1230 text-overflow: ellipsis
;
1232 text-decoration: none
;
1233 border-radius: 4px 4px 0 0;
1238 .tabs > li > a:focus-visible, .cbi-tabmenu > li > a:focus-visible {
1239 text-decoration: underline
;
1242 .tabs > li:not(.active):hover, .cbi-tabmenu > .cbi-tab-disabled:hover {
1243 background: linear-gradient
(var
(--tab-inactive-hover-background-color
) 90%, var
(--tab-inactive-border-color
) 100%);
1246 .tabs > li:not(.active), .cbi-tabmenu > .cbi-tab-disabled {
1247 color: var
(--tab-inactive-text-color
);
1248 background: linear-gradient
(var
(--tab-inactive-background-color
) 90%, var
(--tab-inactive-border-color
) 100%);
1251 .cbi-tab-disabled[data-errors]::after {
1252 content: attr
(data-errors
);
1253 background: #c43c35;
1260 padding: 3px 2px 1px 2px;
1261 display: inline-flex
;
1262 flex-direction: column
;
1263 justify-content: center
;
1271 .cbi-tabmenu.map > li {
1277 margin: -9px 0 18px 0;
1280 .tabs .menu-dropdown, .tabs .dropdown-menu {
1283 border-radius: 0 6px 6px 6px;
1286 .tabs a.menu:after, .tabs .dropdown-toggle:after {
1287 border-top-color: #999;
1292 .tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle {
1296 .tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after {
1297 border-top-color: #555;
1300 .tab-content
> .tab-pane
,
1301 .tab-content > div {
1305 .tab-content > .active {
1312 background: linear-gradient
(to bottom
, var
(--background-color-high
), var
(--background-color-low
));
1313 border: 1px solid var
(--border-color-medium
);
1323 .breadcrumb li:not(:last-child)::after {
1328 .breadcrumb .active a {
1329 color: var
(--text-color-medium
);
1335 border-top: 1px solid var
(--border-color-low
);
1338 align-items: baseline
;
1339 justify-content: space-between
;
1341 color: var
(--text-color-medium
);
1342 /* the redundant properties below work around a csstidy bug */
1343 padding-left: calc
((100% - 940px) / 2);
1344 padding-right: calc
((100% - 940px) / 2);
1348 color: var
(--primary-color-low
);
1355 footer ul
.breadcrumb
{
1363 background: rgba
(0, 0, 0, 0.7);
1366 transition: opacity
.125s ease-in
;
1377 background: var
(--background-color-high
);
1378 border: 1px solid var
(--border-color-low
);
1379 box-shadow: 0 0 3px var
(--background-color-low
);
1380 padding: 1em 1em .5em 1em;
1385 line-height: normal
;
1386 margin-bottom: .5em;
1392 white-space: pre-wrap
;
1397 body
.modal-overlay-active
{
1402 body
.modal-overlay-active #modal_overlay
{
1406 visibility: visible
;
1409 .btn .close, .alert-message .close {
1410 font-family: Arial
, sans-serif
;
1415 .alert-message
.danger
,
1417 .alert-message
.error
,
1418 .cbi-tooltip.error {
1419 background: linear-gradient
(var
(--error-color-low
), var
(--error-color-medium
));
1420 color: var
(--on-error-color
);
1421 border-color: var
(--error-color-high
) var
(--error-color-high
) var
(--error-color-low
);
1424 .btn.success, .alert-message.success, .cbi-tooltip.success {
1425 background: linear-gradient
(var
(--success-color-low
), var
(--success-color-medium
));
1426 color: var
(--on-error-color
);
1427 border-color: var
(--success-color-high
) var
(--success-color-high
) var
(--success-color-low
);
1430 .btn.info, .alert-message.info, .cbi-tooltip.info {
1431 background: linear-gradient
(var
(--primary-color-low
), var
(--primary-color-medium
));
1432 color: var
(--on-primary-color
);
1433 border-color: var
(--primary-color-high
) var
(--primary-color-high
) var
(--primary-color-low
);
1436 .alert-message.notice, .cbi-tooltip.notice {
1437 background: linear-gradient
(var
(--background-color-low
), var
(--background-color-medium
));
1438 border-color: var
(--background-color-high
) var
(--background-color-high
) var
(--background-color-low
);
1439 color: var
(--text-color-high
);
1442 .alert-message.warning {
1443 background: linear-gradient
(var
(--warn-color-low
), var
(--warn-color-medium
));
1444 border-color: var
(--warn-color-high
) var
(--warn-color-high
) var
(--warn-color-low
);
1445 color: var
(--on-warn-color
);
1448 .modal.alert-message {
1449 color: var
(--text-color-high
);
1455 --default-btn-background: linear-gradient
(var
(--background-color-high
), var
(--background-color-high
) 25%, var
(--background-color-low
));
1456 --on-color: var
(--text-color-high
);
1459 display: inline-block
;
1460 background: var
(--default-btn-background
);
1462 color: var
(--on-color
);
1465 border: 1px solid var
(--border-color-high
);
1471 .cbi-input-invalid
.cbi-dropdown:not
(.btn
):not
(.cbi-button
),
1472 .cbi-input-invalid
.cbi-dropdown:not
([open
]) > ul
> li
,
1473 .cbi-value-error input {
1474 color: var
(--error-color-high
);
1475 border-color: var
(--error-color-medium
);
1478 .cbi-button-positive
,
1479 .cbi-button-fieldadd
,
1482 --on-color: var
(--success-color-high
);
1483 border-color: var
(--on-color
);
1486 .cbi-button-neutral
,
1487 .cbi-button-download
,
1492 color: var
(--text-color-high
);
1500 --on-color: var
(--primary-color-high
);
1501 border-color: var
(--on-color
);
1504 .cbi-button-negative
,
1505 .cbi-section-remove
.cbi-button
,
1507 .cbi-button-remove {
1508 --on-color: var
(--error-color-high
);
1509 border-color: var
(--on-color
);
1512 .cbi-page-actions::after {
1518 .cbi-page-actions > * {
1519 vertical-align: middle
;
1522 .cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-negative):not(.cbi-button-save):not(.cbi-button-reset) {
1528 .cbi-button-action
.important
,
1529 .cbi-page-actions
.cbi-button-apply
,
1530 .cbi-section-actions .cbi-button-edit {
1531 --on-color: var
(--on-primary-color
);
1532 background: linear-gradient
(var
(--primary-color-medium
), var
(--primary-color-low
));
1533 border-color: var
(--primary-color-high
);
1536 .cbi-button-positive
.important
,
1537 .cbi-page-actions .cbi-button-save {
1538 --on-color: var
(--on-success-color
);
1539 background: linear-gradient
(var
(--success-color-medium
), var
(--success-color-low
));
1540 border-color: var
(--success-color-high
);
1543 .cbi-button-negative.important {
1544 --on-color: var
(--on-error-color
);
1545 background: linear-gradient
(var
(--error-color-medium
), var
(--error-color-low
));
1546 border-color: var
(--error-color-high
);
1549 .cbi-page-actions
.cbi-button-apply
+ .cbi-button-save
,
1550 .cbi-page-actions .cbi-button-negative + .cbi-button-save {
1551 --on-color: var
(--success-color-high
);
1552 border-color: var
(--on-color
);
1553 background: var
(--default-btn-background
);
1557 display: inline-flex
!important
;
1561 padding: 0 !important
;
1564 .cbi-dropdown:not(.btn):not(.cbi-button) {
1565 background: linear-gradient
(var
(--background-color-high
) 0%, var
(--border-color-low
) 100%);
1566 border: 1px solid var
(--border-color-high
);
1568 color: var
(--text-color-high
);
1571 .cbi-dropdown > ul {
1572 margin: 0 !important
;
1581 .cbi-dropdown
.btn
> ul:not
(.dropdown
),
1582 .cbi-dropdown.cbi-button > ul:not(.dropdown) {
1583 margin: 0 0 0 13px !important
;
1586 .cbi-dropdown
.btn
.spinning
> ul:not
(.dropdown
),
1587 .cbi-dropdown.cbi-button.spinning > ul:not(.dropdown) {
1588 margin: 0 !important
;
1591 .cbi-dropdown > ul.preview {
1595 .cbi-dropdown
> .open
,
1596 .cbi-dropdown > .more {
1600 flex-direction: column
;
1601 justify-content: center
;
1607 .cbi-dropdown
.btn
> .open
,
1608 .cbi-dropdown.cbi-button > .open {
1611 border-left: 1px solid
;
1614 .cbi-dropdown
> .more
,
1615 .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li[placeholder] {
1616 color: var
(--text-color-medium
);
1620 .cbi-dropdown > ul > li {
1622 white-space: nowrap
;
1624 text-overflow: ellipsis
;
1627 align-items: center
;
1632 .cbi-dropdown
> ul
.dropdown
> li
,
1633 .cbi-dropdown:not(.btn):not(.cbi-button) > ul > li {
1636 color: var
(--text-color-high
);
1639 .cbi-dropdown > ul > li .hide-open { display: block
; display: initial
; }
1640 .cbi-dropdown > ul > li .hide-close { display: none
; }
1642 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1643 border-left: 1px solid var
(--border-color-high
);
1646 .cbi-dropdown[empty] > ul {
1650 .cbi-dropdown > ul > li > form {
1654 pointer-events: none
;
1657 .cbi-dropdown > ul > li img {
1658 vertical-align: middle
;
1659 margin-right: .25em;
1662 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1663 margin: 0 .25em 0 0;
1666 .cbi-dropdown > ul > li input[type="text"] {
1670 .cbi-dropdown[open] {
1674 .cbi-dropdown[open] > ul.dropdown {
1676 background: var
(--background-color-low
);
1677 border: 1px solid
#918e8c;
1678 box-shadow: 0 0 4px #918e8c;
1684 transition: max-height
.125s ease-in
;
1688 .cbi-dropdown
> ul
> li
[display
],
1689 .cbi-dropdown
[open
] > ul
.preview
,
1690 .cbi-dropdown
[open
] > ul
.dropdown
> li
,
1691 .cbi-dropdown
[multiple
] > ul
> li
> label
,
1692 .cbi-dropdown
[multiple
][open
] > ul
.dropdown
> li
,
1693 .cbi-dropdown
[multiple
][more
] > .more
,
1694 .cbi-dropdown[multiple][empty] > .more {
1696 display: flex
!important
;
1699 .cbi-dropdown
[empty
] > ul
> li
,
1700 .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder] {
1701 display: block
!important
;
1704 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1705 display: flex
!important
;
1708 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none
; }
1709 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block
; display: initial
; }
1711 .cbi-dropdown[open] > ul.dropdown > li {
1712 border-bottom: 1px solid var
(--border-color-high
);
1715 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1716 background: var
(--primary-color-medium
);
1717 color: var
(--on-primary-color
);
1720 .cbi-dropdown
[open
] > ul
.dropdown
> li
.focus
,
1721 .cbi-dropdown[open] > ul.dropdown > li:hover {
1722 background: var
(--primary-color-low
);
1723 color: var
(--on-primary-color
);
1726 .cbi-dropdown
[open
] > ul
.dropdown
> li
[selected
].focus
,
1727 .cbi-dropdown[open] > ul.dropdown > li[selected]:hover {
1728 background: linear-gradient
(90deg, var
(--primary-color-medium
) 50%, var
(--primary-color-low
));
1731 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1733 border-bottom: none
;
1736 .cbi-dropdown[open] > ul.dropdown > li[unselectable] {
1740 .cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
1748 .cbi-title-ref::after {
1752 .cbi-tooltip-container {
1760 box-shadow: 0 0 2px var
(--border-color-high
);
1762 background: var
(--background-color-high
);
1766 transition: opacity
.25s ease-in
;
1769 .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
1772 transition: opacity
.25s ease-in
;
1776 border: 1px solid var
(--border-color-high
);
1781 margin: 1.4em 0 4px 0;
1782 background: var
(--background-color-medium
);
1785 .cbi-progressbar > div {
1786 background: var
(--primary-color-medium
);
1788 transition: width
.25s ease-in
;
1793 .cbi-progressbar::before {
1797 content: attr
(title
);
1800 text-overflow: ellipsis
;
1803 .zonebadge .cbi-tooltip {
1805 background: inherit
;
1806 margin: -1.6em 0 0 -5px;
1808 pointer-events: none
;
1809 box-shadow: 0 0 3px #444;
1812 .zonebadge .cbi-tooltip > * {
1823 .zone-forwards > * {
1828 .zone-forwards > span {
1833 .zone-forwards
.zone-src
,
1834 .zone-forwards .zone-dest {
1836 flex-direction: column
;
1839 .btn.active, .btn:active {
1840 box-shadow: inset
0 2px 4px hsla
(var
(--border-color-low-hsl
), .25), 0 1px 2px rgba
(0, 0, 0, 0.05);
1846 opacity: var
(--disabled-opacity
);
1852 line-height: normal
;
1853 padding: 9px 14px 9px;
1858 padding: 7px 9px 7px;
1862 button
.btn::-moz-focus-inner
, input
[type
=submit
].btn::-moz-focus-inner
{
1872 line-height: 13.5px;
1873 text-shadow: 0 1px 0 #fff;
1879 text-decoration: none
;
1885 padding: .5em .5em .25em .5em;
1886 margin-bottom: .5em;
1887 color: var
(--on-warn-color
);
1888 background: linear-gradient
(#fceec1, #eedc94);
1889 border: 1px solid var
(--border-color-low
);
1890 border-color: var
(--border-color-high
) var
(--border-color-high
) var
(--border-color-low
);
1892 box-shadow: 1px 1px 1px var
(--border-color-low
);
1896 .alert-message .close {
1908 line-height: inherit
;
1909 background: transparent
;
1914 .alert-message button {
1919 header
[data-indicator
] {
1920 padding: 3px 3px 2px;
1923 color: var
(--text-color-high
);
1924 text-transform: uppercase
;
1925 white-space: nowrap
;
1926 background-color: var
(--background-color-low
);
1929 margin: .125em 0 .125em .4em;
1932 header
[data-indicator
][data-clickable
] {
1942 text-decoration: none
;
1946 background-color: var
(--primary-color-high
);
1947 color: var
(--on-primary-color
);
1951 background-color: var
(--warn-color-high
);
1952 color: var
(--on-warn-color
);
1956 background-color: var
(--success-color-high
);
1957 color: var
(--on-success-color
);
1961 header
[data-indicator
][data-style
="active"] {
1962 color: var
(--on-primary-color
);
1963 background-color: var
(--primary-color-high
);
1966 /* LuCI specific items */
1967 .hidden { display: none
}
1969 form
.inline
{ display: inline
; margin-bottom: 0; }
1971 #modemenu li:last-child span
.divider
{ display: none
}
1975 color: var
(--text-color-highest
);
1976 margin-bottom: 18px;
1977 font-family: monospace
;
1980 .cbi-section-table
.tr:hover
.td
,
1981 .cbi-section-table
.tr:hover
.th
,
1982 .cbi-section-table .tr:hover::before {
1983 background-color: var
(--background-color-low
);
1986 .cbi-section-table .tr.cbi-section-table-descr .th {
1987 font-weight: normal
;
1990 .cbi-section-table-titles
.named::before
,
1991 .cbi-section-table-descr
.named::before
,
1992 .cbi-section-table-row[data-title]::before {
1993 content: attr
(data-title
) " ";
1994 display: table-cell
;
1995 padding: 10px 10px 9px;
1998 vertical-align: middle
;
2001 .cbi-section-table-titles
.named::before
,
2002 .cbi-section-table-descr
.named::before
,
2003 .cbi-section-table-row[data-title]::before {
2004 border-top: 1px solid var
(--border-color-medium
);
2007 .left { text-align: left
!important
; }
2008 .right { text-align: right
!important
; }
2009 .center { text-align: center
!important
; }
2010 .top { vertical-align: top
!important
; }
2011 .middle { vertical-align: middle
!important
; }
2012 .bottom { vertical-align: bottom
!important
; }
2015 .cbi-value-field table td {
2019 .table
.cbi-section-table input
[type
="password"],
2020 .table
.cbi-section-table input
[type
="text"],
2021 .table
.cbi-section-table textarea
,
2022 .table
.cbi-section-table select
,
2023 .table.cbi-section-table .cbi-select {
2028 .table.cbi-section-table .td.cbi-section-table-cell {
2029 white-space: nowrap
;
2033 .table
.cbi-section-table
.td
.cbi-section-table-cell select
,
2034 .table.cbi-section-table .td.cbi-section-table-cell .cbi-select {
2038 .td.cbi-section-actions {
2040 vertical-align: middle
;
2044 .td.cbi-section-actions > * {
2048 .td
.cbi-section-actions
> :not
(.cbi-dropdown
) > *,
2049 .td.cbi-section-actions > * > form > * {
2054 .td.cbi-section-actions > * > form {
2055 display: inline-flex
;
2059 .table.valign-middle .td {
2060 vertical-align: middle
;
2065 .tr.cbi-section-table-titles {
2066 background: var
(--background-color-medium
);
2069 th
[data-sortable-row
] { cursor: pointer
; }
2070 th
[data-sort-direction
="asc"]::after
{ content: "\a0\25b2"; }
2071 th
[data-sort-direction
="desc"]::after
{ content: "\a0\25bc"; }
2073 .cbi-value-description {
2074 margin: .25em 0 0 1.25em;
2078 .cbi-value-description:not(:empty)::before {
2079 --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>");
2084 display: inline-block
;
2087 margin-right: .25em;
2088 background: var
(--primary-color-high
);
2089 mask-image: var
(--help-icon
);
2091 -webkit-mask-image: var
(--help-icon
);
2092 -webkit-mask-size: cover
;
2095 .cbi-section-error {
2096 border: 1px solid
#f00;
2098 background-color: #fce6e6;
2100 margin-bottom: 18px;
2103 .cbi-section-error ul { margin: 0 0 0 20px; }
2105 .cbi-section-error ul li {
2111 border: 1px solid var
(--border-color-high
);
2114 white-space: nowrap
;
2115 background: linear-gradient
(var
(--background-color-high
), var
(--background-color-medium
));
2117 box-shadow: inset
0 1px 0 hsla
(var
(--text-color-low-hsl
), 0.05);
2118 display: inline-flex
;
2119 flex-direction: column
;
2124 .ifacebox .ifacebox-head {
2125 border-bottom: 1px solid var
(--border-color-high
);
2126 border-radius: 3px 3px 0 0;
2129 color: var
(--text-color-high
);
2132 .ifacebox .ifacebox-head[style] {
2133 text-shadow: 0 1px 1px hsla
(var
(--background-color-high-hsl
), 0.75);
2136 .ifacebox .ifacebox-head.active {
2137 background: var
(--primary-color-high
);
2138 color: var
(--on-primary-color
);
2141 [data-darkmode
="true"] .zonebadge
[style
],
2142 [data-darkmode
="true"] .ifacebox-head
[style
] {
2143 background: linear-gradient
(rgba
(var
(--zone-color-rgb
), .4), rgba
(var
(--zone-color-rgb
), .3)) !important
;
2146 .ifacebox .ifacebox-body {
2150 #cbi-network-interface .ifacebox-body
{
2151 white-space: normal
;
2155 display: inline-block
;
2156 flex-direction: row
;
2157 white-space: nowrap
;
2158 border: 1px solid var
(--border-color-high
);
2160 background: linear-gradient
(var
(--background-color-high
), var
(--background-color-high
) 25%, var
(--background-color-medium
));
2161 color: var
(--text-color-high
);
2162 text-shadow: 0 1px 1px hsla
(var
(--background-color-high-hsl
), 0.75);
2164 box-shadow: inset
0 1px 0 hsla
(var
(--background-color-high-hsl
), 0.05);
2172 vertical-align: middle
;
2175 .ifacebadge-active {
2180 .network-status-table {
2185 .network-status-table .ifacebox {
2190 .network-status-table .ifacebox-body {
2192 flex-direction: column
;
2197 .network-status-table .ifacebox-body > * {
2201 .network-status-table .ifacebox-body > span {
2206 .network-status-table .ifacebox-body > div {
2212 #dsl_status_table .ifacebox-body span
> strong
{
2213 display: inline-block
;
2218 .network-status-table .ifacebox-body .ifacebadge {
2227 display: inline-flex
;
2230 .network-status-table .ifacebox-body .ifacebadge > span {
2232 text-overflow: ellipsis
;
2236 .ifacebadge.large > * {
2243 display: inline-block
;
2244 white-space: nowrap
;
2245 color: var
(--text-color-high
);
2246 text-shadow: 0 1px 1px hsla
(var
(--background-color-high-hsl
), 0.75);
2250 .zonebadge > strong {
2252 display: inline-block
;
2259 .zonebadge > .ifacebadge {
2264 border: 1px dashed
#aaa;
2271 .td.cbi-value-field var {
2276 div
.cbi-value var
[data-tooltip
],
2277 .td
.cbi-value-field var
[data-tooltip
],
2278 div
.cbi-value var
.cbi-tooltip-container
,
2279 .td.cbi-value-field var.cbi-tooltip-container {
2281 border-bottom: 1px dotted
#0069d6;
2284 div
.cbi-value var
.cbi-tooltip-container
,
2285 .td.cbi-value-field var.cbi-tooltip-container .cbi-tooltip {
2287 white-space: normal
;
2288 color: var
(--text-color-high
);
2291 #modal_overlay > .modal
.uci-dialog
,
2292 #modal_overlay > .modal
.cbi-modal
{
2296 #modal_overlay > .modal
.login
> button
.important
{
2297 font-size: 120% !important
;
2307 .uci-dialog div
> del
,
2308 .uci-dialog div
> ins
,
2309 .uci-dialog div > var {
2311 border: 1px solid var
(--border-color-high
);
2314 text-overflow: ellipsis
;
2317 background-color: var
(--background-color-low
);
2320 .uci-dialog div > ins {
2321 background-color: rgba
(var
(--success-color-high-rgb
), .3);
2322 border-color: rgba
(var
(--success-color-high-rgb
), .6);
2325 .uci-dialog div > del {
2326 background-color: rgba
(var
(--error-color-high-rgb
), .3);
2327 border-color: rgba
(var
(--error-color-high-rgb
), .6);
2330 .uci-dialog var > ins {
2331 background-color: rgba
(var
(--success-color-high-rgb
), .3);
2334 .uci-dialog var > del {
2335 background-color: rgba
(var
(--error-color-high-rgb
), .3);
2338 .uci-change-list > var > * {
2340 text-overflow: ellipsis
;
2346 text-decoration: none
;
2347 font-family: monospace
;
2349 color: var
(--text-color-high
);
2353 .uci-change-legend {
2358 .uci-change-legend-label {
2362 align-items: center
;
2365 .uci-change-legend-label
> ins
,
2366 .uci-change-legend-label
> del
,
2367 .uci-change-legend-label > var {
2374 .uci-change-legend-label > * > * {
2379 #applyreboot-section {
2385 50% { opacity: .5; }
2386 100% { opacity: 1; }
2390 animation: flash
.35s;
2393 #view > div
.spinning:first-child
{
2400 padding-left: 32px !important
;
2404 --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>");
2407 top: calc
(50% - 10px);
2412 background: var
(--on-color
, #000);
2413 mask: var
(--spinner-icon
) center
/cover no-repeat
;
2414 -webkit-mask: var
(--spinner-icon
) center
/cover no-repeat
;
2417 [data-darkmode
="true"] .spinning::before
{
2418 background: var
(--on-color
, #fff);
2427 [data-tab-active
="true"] {
2431 transition: opacity
.25s ease-in
;
2437 border: 1px solid
#ccc;
2440 flex-direction: column
;
2446 .cbi-filebrowser.open {
2450 transition: opacity
.25s ease-in
;
2453 .cbi-filebrowser > * {
2456 text-overflow: ellipsis
;
2457 padding: 0 0 .25em 0;
2458 margin: .25em .25em 0px .25em;
2459 white-space: nowrap
;
2460 border-bottom: 1px solid
#ccc;
2463 .cbi-filebrowser .cbi-button-positive {
2464 margin-right: .25em;
2467 .cbi-filebrowser > div {
2468 border-bottom: none
;
2471 .cbi-filebrowser > ul > li {
2473 flex-direction: row
;
2476 .cbi-filebrowser > ul > li:hover {
2477 background: #f5f5f5;
2480 .cbi-filebrowser > ul > li > div:first-child {
2483 text-overflow: ellipsis
;
2486 .cbi-filebrowser > ul > li > div:last-child {
2491 .cbi-filebrowser > ul > li > div:last-child > button {
2492 padding: .125em .25em;
2493 margin: 1px 0 1px .25em;
2496 .cbi-filebrowser .upload {
2498 flex-direction: row
;
2500 margin: 0 -.125em .25em -.125em;
2501 padding: 0 0 .125em 0px;
2502 border-bottom: 1px solid
#ccc;
2505 .cbi-filebrowser .upload > * {
2510 .cbi-filebrowser .upload > .btn {
2514 .cbi-filebrowser .upload > div {
2519 .cbi-filebrowser .upload > div > input {
2523 @keyframes fade-in
{
2525 100% { opacity: 1; }
2528 @keyframes fade-out
{
2530 100% { opacity: 0; }
2534 animation: fade-in
.4s ease
;
2538 animation: fade-out
.4s ease
;
2541 .assoclist .ifacebadge {
2543 flex-direction: column
;
2544 align-items: center
;
2545 white-space: normal
;
2549 .assoclist .ifacebadge > img {
2553 .assoclist
.td:nth-of-type
(3),
2554 .assoclist .td:nth-of-type(5) {
2558 .assoclist .td:nth-of-type(6) button {
2562 [data-darkmode
="true"] [data-page
="admin-statistics-graphs"] [data-plugin
] img
{
2563 filter: invert
(100%) hue-rotate
(150deg);
2566 [data-page
="admin-system-admin-sshkeys"] .cbi-dynlist
{
2570 [data-darkmode
="true"] [data-page
="admin-status-channel_analysis"] #view
> div
> div
> div
> div
> div
[style
],
2571 [data-darkmode
="true"] [data-page
="admin-status-realtime-load"] #view
> div
[style
],
2572 [data-darkmode
="true"] [data-page
="admin-status-realtime-bandwidth"] #view
> div
> div
> div
> div
[style
],
2573 [data-darkmode
="true"] [data-page
="admin-status-realtime-wireless"] #view
> div
> div
> div
> div
[style
],
2574 [data-darkmode
="true"] [data-page
="admin-status-realtime-connections"] #view
> div
[style
] {
2575 background-color: var
(--background-color-high
)!important
;
2578 [data-darkmode
="true"] [data-page
="admin-status-channel_analysis"] #view
> div
> div
> div
> div
> div
> svg
> line
[style
],
2579 [data-darkmode
="true"] [data-page
="admin-status-realtime-load"] #view
> div
> svg
> line
[style
],
2580 [data-darkmode
="true"] [data-page
="admin-status-realtime-bandwidth"] #view
> div
> div
> div
> div
> svg
> line
[style
],
2581 [data-darkmode
="true"] [data-page
="admin-status-realtime-wireless"] #view
> div
> div
> div
> div
> svg
> line
[style
],
2582 [data-darkmode
="true"] [data-page
="admin-status-realtime-connections"] #view
> div
> svg
> line
[style
] {
2583 stroke: #fff!important
;