luci-theme-bootstrap: fix ifacebox cutoff on OS X Safari
[project/luci.git] / themes / luci-theme-bootstrap / htdocs / luci-static / bootstrap / cascade.css
1 /*!
2 * LuCI Bootstrap Theme
3 * Copyright 2012 Nut & Bolt
4 * By David Menting <david@nut-bolt.nl>
5 * Based on Bootstrap v1.4.0
6 *
7 * Copyright 2011 Twitter, Inc
8 * Licensed under the Apache License v2.0
9 * http://www.apache.org/licenses/LICENSE-2.0
10 *
11 * Designed and built with all the love in the world @twitter by @mdo and @fat.
12 */
13 /* Reset.less
14 * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
15 * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
16
17 * {
18 margin: 0;
19 padding: 0;
20 border: 0;
21 box-sizing: border-box;
22 }
23
24 abbr[title], acronym[title] {
25 border-bottom: 1px dotted;
26 font-weight: inherit;
27 cursor: help;
28 }
29
30 table {
31 border-collapse: collapse;
32 border-spacing: 0;
33 }
34
35 ol, ul {
36 list-style: none;
37 }
38
39 html {
40 font-size: 100%;
41 -webkit-text-size-adjust: 100%;
42 -ms-text-size-adjust: 100%;
43 }
44
45 a:focus {
46 outline: thin dotted;
47 }
48
49 a:hover, a:active {
50 outline: 0;
51 }
52
53 footer,
54 header,
55 nav,
56 section {
57 display: block;
58 }
59
60 sub, sup {
61 font-size: 75%;
62 line-height: 0;
63 position: relative;
64 vertical-align: baseline;
65 }
66
67 sup {
68 top: -0.5em;
69 }
70
71 sub {
72 bottom: -0.25em;
73 }
74
75 img {
76 -ms-interpolation-mode: bicubic;
77 }
78
79 button,
80 input,
81 select,
82 option,
83 textarea {
84 font-size: 100%;
85 margin: 0;
86 box-sizing: border-box;
87 vertical-align: baseline;
88 line-height: normal;
89 }
90
91 button::-moz-focus-inner, input::-moz-focus-inner {
92 border: 0;
93 padding: 0;
94 }
95
96 button,
97 input[type="button"],
98 input[type="reset"],
99 input[type="submit"] {
100 cursor: pointer;
101 -webkit-appearance: button;
102 word-break: break-all;
103 }
104
105 button[disabled],
106 input[type="button"][disabled],
107 input[type="reset"][disabled],
108 input[type="submit"][disabled] {
109 opacity: 0.7;
110 }
111
112 input[type="search"] {
113 -webkit-appearance: textfield;
114 box-sizing: content-box;
115 }
116
117 input[type="search"]::-webkit-search-decoration {
118 -webkit-appearance: none;
119 }
120
121 textarea {
122 overflow: auto;
123 vertical-align: top;
124 }
125
126 /*
127 * Scaffolding
128 * Basic and global styles for generating a grid system, structural layout, and page templates
129 * ------------------------------------------------------------------------------------------- */
130 body {
131 background-color: #fff;
132 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
133 font-size: 13px;
134 font-weight: normal;
135 line-height: 18px;
136 color: #404040;
137 padding: 58px 5px 5px 5px;
138 }
139
140 .container {
141 width: 100%;
142 max-width: 940px;
143 margin-left: auto;
144 margin-right: auto;
145 zoom: 1;
146 }
147
148 .container:before, .container:after {
149 display: table;
150 content: "";
151 zoom: 1;
152 }
153
154 .container:after {
155 clear: both;
156 }
157
158 a {
159 color: #0069d6;
160 text-decoration: none;
161 line-height: inherit;
162 font-weight: inherit;
163 }
164
165 a:hover {
166 color: #00438a;
167 text-decoration: underline;
168 }
169
170 .pull-right {
171 float: right;
172 }
173
174 .pull-left {
175 float: left;
176 }
177
178 .nowrap {
179 white-space: nowrap;
180 }
181
182 /* Typography.less
183 * Headings, body text, lists, code, and more for a versatile and durable typography system
184 * ---------------------------------------------------------------------------------------- */
185 p,
186 .cbi-map-descr,
187 .cbi-section-descr,
188 .table .tr.cbi-section-table-descr .th {
189 font-size: 13px;
190 font-weight: normal;
191 line-height: 18px;
192 margin-bottom: 9px;
193 }
194
195 p small {
196 font-size: 11px;
197 color: #bfbfbf;
198 }
199
200 h1,
201 h2,
202 h3, legend,
203 h4,
204 h5,
205 h6 {
206 font-weight: bold;
207 color: #404040;
208 }
209
210 h1 small,
211 h2 small,
212 h3 small,
213 h4 small,
214 h5 small,
215 h6 small {
216 color: #bfbfbf;
217 }
218
219 h1 {
220 margin-bottom: 18px;
221 font-size: 30px;
222 line-height: 36px;
223 }
224
225 h1 small {
226 font-size: 18px;
227 }
228
229 h2 {
230 font-size: 24px;
231 line-height: 36px;
232 }
233
234 h2 small {
235 font-size: 14px;
236 }
237
238 h3, legend,
239 h4,
240 h5,
241 h6 {
242 line-height: 36px;
243 }
244
245 h3, legend {
246 font-size: 18px;
247 }
248
249 h3 small {
250 font-size: 14px;
251 }
252
253 h4 {
254 font-size: 16px;
255 }
256
257 h4 small {
258 font-size: 12px;
259 }
260
261 h5 {
262 font-size: 14px;
263 }
264
265 h6 {
266 font-size: 13px;
267 color: #bfbfbf;
268 text-transform: uppercase;
269 }
270
271 ul, ol {
272 margin: 0 0 18px 25px;
273 }
274
275 ul ul,
276 ul ol,
277 ol ol,
278 ol ul {
279 margin-bottom: 0;
280 }
281
282 ul {
283 list-style: disc;
284 }
285
286 ol {
287 list-style: decimal;
288 }
289
290 li {
291 line-height: 18px;
292 color: #808080;
293 }
294
295 ul.unstyled {
296 list-style: none;
297 margin-left: 0;
298 }
299
300 dl {
301 margin-bottom: 18px;
302 }
303
304 dl dt, dl dd {
305 line-height: 18px;
306 }
307
308 dl dt {
309 font-weight: bold;
310 }
311
312 dl dd {
313 margin-left: 9px;
314 }
315
316 hr {
317 margin: 20px 0 19px;
318 border: 0;
319 border-bottom: 1px solid #eee;
320 }
321
322 strong {
323 font-style: inherit;
324 font-weight: bold;
325 }
326
327 em {
328 font-style: italic;
329 font-weight: inherit;
330 line-height: inherit;
331 }
332
333 small { font-size: 0.9em }
334
335 address {
336 display: block;
337 line-height: 18px;
338 margin-bottom: 18px;
339 }
340
341 code, pre {
342 padding: 0 3px 2px;
343 font-family: Monaco, Andale Mono, Courier New, monospace;
344 font-size: 12px;
345 border-radius: 3px;
346 }
347
348 code {
349 background-color: #fee9cc;
350 color: rgba(0, 0, 0, 0.75);
351 padding: 1px 3px;
352 }
353
354 pre {
355 background-color: #f5f5f5;
356 display: block;
357 padding: 8.5px;
358 margin: 0 0 18px;
359 line-height: 18px;
360 font-size: 12px;
361 border: 1px solid #ccc;
362 border: 1px solid rgba(0, 0, 0, 0.15);
363 border-radius: 3px;
364 white-space: pre;
365 white-space: pre-wrap;
366 word-wrap: break-word;
367 }
368
369 /* Forms.less
370 * Base styles for various input types, form layouts, and states
371 * ------------------------------------------------------------- */
372 form {
373 margin-bottom: 18px;
374 }
375
376 fieldset {
377 margin-bottom: 9px;
378 padding-top: 9px;
379 }
380
381 fieldset legend {
382 display: block;
383 font-size: 19.5px;
384 line-height: 1;
385 color: #404040;
386 padding-top: 20px;
387
388 }
389 form .cbi-tab-descr {
390 line-height: 18px;
391 margin-bottom: 18px;
392 }
393
394 form .clearfix,
395 .cbi-value {
396 margin-bottom: 18px;
397 zoom: 1;
398 }
399
400 form .clearfix:before, form .clearfix:after,
401 .cbi-value:before, .cbi-value:after {
402 display: table;
403 content: "";
404 zoom: 1;
405 }
406
407 form .clearfix:after,
408 .cbi-value:after {
409 clear: both;
410 }
411
412 label,
413 input,
414 button,
415 select,
416 textarea {
417 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
418 font-size: 13px;
419 font-weight: normal;
420 line-height: normal;
421 }
422
423 form .input,
424 .cbi-value-field {
425 margin-left: 200px;
426 }
427
428 .cbi-value label.cbi-value-title {
429 padding-top: 6px;
430 font-size: 13px;
431 line-height: 18px;
432 float: left;
433 width: 180px;
434 text-align: right;
435 color: #404040;
436 }
437
438 input[type=checkbox], input[type=radio] {
439 cursor: pointer;
440 }
441
442 label > input[type="checkbox"],
443 label > input[type="radio"] {
444 vertical-align: bottom;
445 margin: 0;
446 }
447
448 input,
449 textarea,
450 select,
451 .cbi-dropdown,
452 .uneditable-input {
453 display: inline-block;
454 width: 210px;
455 height: 30px;
456 padding: 4px;
457 font-size: 13px;
458 line-height: 18px;
459 border: 1px solid #ccc;
460 border-radius: 3px;
461 }
462
463 .uneditable-input {
464 color: #808080;
465 }
466
467 .cbi-dropdown,
468 .cbi-dynlist {
469 min-width: 210px;
470 max-width: 400px;
471 width: auto;
472 }
473
474 .cbi-dynlist {
475 height: auto;
476 min-height: 30px;
477 display: inline-flex;
478 flex-direction: column;
479 }
480
481 .cbi-dynlist > .item {
482 margin-bottom: 4px;
483 box-shadow: 0 0 2px #ccc;
484 background: #fff;
485 padding: 2px 2em 2px 4px;
486 border: 1px solid #ccc;
487 border-radius: 3px;
488 position: relative;
489 pointer-events: none;
490 }
491
492 .cbi-dynlist > .item::after {
493 content: "×";
494 position: absolute;
495 display: inline-flex;
496 align-items: center;
497 top: -1px;
498 right: -1px;
499 bottom: -1px;
500 padding: 0 6px;
501 border: 1px solid #ccc;
502 border-radius: 0 3px 3px 0;
503 font-weight: bold;
504 color: #c44;
505 pointer-events: auto;
506 }
507
508 .cbi-dynlist > .add-item {
509 display: flex;
510 }
511
512 .cbi-dynlist > .add-item > input,
513 .cbi-dynlist > .add-item > button {
514 flex: 1 1 auto;
515 overflow: hidden;
516 text-overflow: ellipsis;
517 white-space: nowrap;
518 }
519
520 select {
521 padding: initial;
522 background: #fff;
523 box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.1);
524 }
525
526 input[type=checkbox], input[type=radio] {
527 width: auto;
528 height: auto;
529 padding: 0;
530 margin: 3px 0;
531 *margin-top: 0;
532 /* IE6-7 */
533
534 line-height: normal;
535 border: none;
536 }
537
538 input[type=file] {
539 background-color: #fff;
540 padding: initial;
541 border: initial;
542 line-height: initial;
543 box-shadow: none;
544 width: auto !important;
545 }
546
547 input[type=button], input[type=reset], input[type=submit] {
548 width: auto;
549 height: auto;
550 }
551
552 select[multiple] {
553 height: inherit;
554 background-color: #fff;
555 }
556
557 textarea {
558 height: auto !important;
559 }
560
561 .td > input[type=text],
562 .td > input[type=password],
563 .td > select,
564 .td > .cbi-dropdown,
565 .cbi-dynlist > .add-item > .cbi-dropdown {
566 width: 100%;
567 }
568
569 .uneditable-input {
570 background-color: #fff;
571 display: block;
572 border-color: #eee;
573 box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
574 cursor: not-allowed;
575 }
576
577 ::-moz-placeholder {
578 color: #bfbfbf;
579 }
580
581 ::-webkit-input-placeholder {
582 color: #bfbfbf;
583 }
584
585 .item::after, .btn, .cbi-button, input, button, textarea {
586 transition: border linear 0.2s, box-shadow linear 0.2s;
587 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
588 }
589
590 .item:hover::after,
591 .btn:hover, .cbi-button:hover, button:hover,
592 input:focus, textarea:focus {
593 outline: 0;
594 border-color: rgba(82, 168, 236, 0.8) !important;
595 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
596 text-decoration: none;
597 }
598
599 input[type=file]:focus, input[type=checkbox]:focus, select:focus {
600 box-shadow: none;
601 outline: 1px dotted #666;
602 }
603
604 input[disabled],
605 button[disabled],
606 select[disabled],
607 textarea[disabled],
608 input[readonly],
609 button[readonly],
610 select[readonly],
611 textarea[readonly] {
612 background-color: #f5f5f5;
613 border-color: #ddd;
614 pointer-events: none;
615 cursor: default;
616 }
617
618 select[readonly],
619 textarea[readonly] {
620 pointer-events: auto;
621 cursor: auto;
622 }
623
624 .cbi-optionals,
625 .cbi-section-create {
626 padding: 0 0 10px 10px;
627 }
628
629 .cbi-section-create {
630 margin: -3px;
631 display: inline-flex;
632 align-items: center;
633 }
634
635 .cbi-section-create > * {
636 margin: 3px;
637 flex: 1 1 auto;
638 }
639
640 .cbi-section-create > * > input {
641 width: 100%;
642 }
643
644 .actions,
645 .cbi-page-actions {
646 background: #f5f5f5;
647 margin-bottom: 18px;
648 padding: 17px 20px 18px 17px;
649 border-top: 1px solid #ddd;
650 border-radius: 0 0 3px 3px;
651 text-align: right;
652 }
653
654 .actions .secondary-action,
655 .cbi-page-actions .secondary-action{
656 float: right;
657 }
658
659 .actions .secondary-action a,
660 .cbi-page-actions .secondary-action a {
661 line-height: 30px;
662 }
663
664 .actions .secondary-action a:hover,
665 .cbi-page-actions .secondary-action a:hover {
666 text-decoration: underline;
667 }
668
669 .cbi-page-actions > form {
670 display: inline;
671 margin: 0;
672 }
673
674 .help-inline, .help-block {
675 font-size: 13px;
676 line-height: 18px;
677 color: #bfbfbf;
678 }
679
680 .help-inline {
681 padding-left: 5px;
682 *position: relative;
683 /* IE6-7 */
684
685 *top: -5px;
686 /* IE6-7 */
687
688 }
689
690 .help-block {
691 display: block;
692 max-width: 600px;
693 }
694
695 /*
696 * Tables.less
697 * Tables for, you guessed it, tabular data
698 * ---------------------------------------- */
699 .tr { display: table-row; }
700 .table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
701 .table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
702
703 .table {
704 display: table;
705 width: 100%;
706 margin-bottom: 18px;
707 padding: 0;
708 font-size: 13px;
709 border-collapse: collapse;
710 position: relative;
711 }
712
713 .table .th, .table .td {
714 display: table-cell;
715 vertical-align: middle; /* Fixme */
716 padding: 10px 10px 9px;
717 line-height: 18px;
718 text-align: left;
719 }
720
721 .table .tr:first-child .th {
722 padding-top: 9px;
723 font-weight: bold;
724 vertical-align: top;
725 }
726
727 .table .td, .table .th {
728 border-top: 1px solid #ddd;
729 }
730
731 .tr.placeholder {
732 height: calc(3em + 20px);
733 }
734
735 .tr.placeholder > .td {
736 position: absolute;
737 left: 0;
738 right: 0;
739 bottom: 0;
740 text-align: center;
741 line-height: 3em;
742 }
743
744 .tr.drag-over-above,
745 .tr.drag-over-below {
746 border: 2px solid #0069d6;
747 border-width: 2px 0 0 0;
748 }
749
750 .tr.drag-over-below {
751 border-width: 0 0 2px 0;
752 }
753
754 /* Patterns.less
755 * Repeatable UI elements outside the base styles provided from the scaffolding
756 * ---------------------------------------------------------------------------- */
757 header {
758 height: 40px;
759 position: fixed;
760 top: 0;
761 left: 0;
762 right: 0;
763 z-index: 800;
764 overflow: visible;
765 color: #BFBFBF;
766 }
767
768 header a {
769 color: #bfbfbf;
770 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
771 }
772
773 header h3 a:hover, header .brand:hover, header ul .active > a {
774 background-color: #333;
775 background-color: rgba(255, 255, 255, 0.05);
776 color: #fff;
777 text-decoration: none;
778 }
779
780 header h3 {
781 position: relative;
782 }
783
784 header h3 a, header .brand {
785 float: left;
786 display: block;
787 padding: 8px 20px 12px;
788 margin-left: -20px;
789 color: #fff;
790 font-size: 20px;
791 font-weight: 200;
792 line-height: 1;
793 }
794
795 header p {
796 margin: 0;
797 line-height: 40px;
798 }
799
800 header .fill {
801 background-color: #222;
802 background-repeat: repeat-x;
803 background-image: linear-gradient(to bottom, #333333, #222222);
804 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
805 padding: 0 5px;
806 }
807
808 header div > ul, .nav {
809 display: block;
810 float: left;
811 margin: 0 10px 0 0;
812 position: relative;
813 left: 0;
814 }
815
816 header div > ul > li, .nav > li {
817 display: block;
818 float: left;
819 }
820
821 header div > ul a, .nav a {
822 display: block;
823 float: none;
824 padding: 10px 10px 11px;
825 line-height: 19px;
826 text-decoration: none;
827 }
828
829 header div > ul a:hover, .nav a:hover {
830 color: #fff;
831 text-decoration: none;
832 }
833
834 header div > ul .active > a, .nav .active > a {
835 background-color: #222;
836 background-color: rgba(0, 0, 0, 0.5);
837 }
838
839 header div > ul.secondary-nav, .nav.secondary-nav {
840 float: right;
841 margin-left: 10px;
842 margin-right: 0;
843 }
844
845 header div > ul.secondary-nav .menu-dropdown,
846 .nav.secondary-nav .menu-dropdown,
847 header div > ul.secondary-nav .dropdown-menu,
848 .nav.secondary-nav .dropdown-menu {
849 right: 0;
850 border: 0;
851 }
852
853 header div > ul a.menu:hover,
854 .nav a.menu:hover,
855 header div > ul li.open .menu,
856 .nav li.open .menu,
857 header div > ul .dropdown-toggle:hover,
858 .nav .dropdown-toggle:hover,
859 header div > ul .dropdown.open .dropdown-toggle,
860 .nav .dropdown.open .dropdown-toggle {
861 background: #444;
862 background: rgba(255, 255, 255, 0.05);
863 }
864
865 header div > ul .menu-dropdown,
866 .nav .menu-dropdown,
867 header div > ul .dropdown-menu,
868 .nav .dropdown-menu {
869 background-color: #333;
870 }
871
872 header div > ul .menu-dropdown a.menu,
873 .nav .menu-dropdown a.menu,
874 header div > ul .dropdown-menu a.menu,
875 .nav .dropdown-menu a.menu,
876 header div > ul .menu-dropdown .dropdown-toggle,
877 .nav .menu-dropdown .dropdown-toggle,
878 header div > ul .dropdown-menu .dropdown-toggle,
879 .nav .dropdown-menu .dropdown-toggle {
880 color: #fff;
881 }
882
883 header div > ul .menu-dropdown a.menu.open,
884 .nav .menu-dropdown a.menu.open,
885 header div > ul .dropdown-menu a.menu.open,
886 .nav .dropdown-menu a.menu.open,
887 header div > ul .menu-dropdown .dropdown-toggle.open,
888 .nav .menu-dropdown .dropdown-toggle.open,
889 header div > ul .dropdown-menu .dropdown-toggle.open,
890 .nav .dropdown-menu .dropdown-toggle.open {
891 background: #444;
892 background: rgba(255, 255, 255, 0.05);
893 }
894
895 header div > ul .menu-dropdown li a,
896 .nav .menu-dropdown li a,
897 header div > ul .dropdown-menu li a,
898 .nav .dropdown-menu li a {
899 color: #999;
900 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
901 }
902
903 header div > ul .menu-dropdown li a:hover,
904 .nav .menu-dropdown li a:hover,
905 header div > ul .dropdown-menu li a:hover,
906 .nav .dropdown-menu li a:hover {
907 background-color: #191919;
908 background-repeat: repeat-x;
909 background-image: linear-gradient(to bottom, #292929, #191919);
910 color: #fff;
911 }
912
913 header div > ul .menu-dropdown .active a,
914 .nav .menu-dropdown .active a,
915 header div > ul .dropdown-menu .active a,
916 .nav .dropdown-menu .active a {
917 color: #fff;
918 }
919
920 header div > ul .menu-dropdown .divider,
921 .nav .menu-dropdown .divider,
922 header div > ul .dropdown-menu .divider,
923 .nav .dropdown-menu .divider {
924 background-color: #222;
925 border-color: #444;
926 }
927
928 header ul .menu-dropdown li a, header ul .dropdown-menu li a {
929 padding: 4px 15px;
930 }
931
932 li.menu, .dropdown {
933 position: relative;
934 }
935
936 a.menu:after, .dropdown-toggle:after {
937 width: 0;
938 height: 0;
939 display: inline-block;
940 content: "&darr;";
941 text-indent: -99999px;
942 vertical-align: top;
943 margin-top: 8px;
944 margin-left: 4px;
945 border-left: 4px solid transparent;
946 border-right: 4px solid transparent;
947 border-top: 4px solid #fff;
948 opacity: 0.5;
949 }
950
951 .menu-dropdown, .dropdown-menu {
952 background-color: #fff;
953 float: left;
954 position: absolute;
955 top: 40px;
956 left: -9999px;
957 z-index: 900;
958 min-width: 160px;
959 max-width: 220px;
960 _width: 160px;
961 margin-left: 0;
962 margin-right: 0;
963 padding: 6px 0;
964 zoom: 1;
965 border-color: #999;
966 border-color: rgba(0, 0, 0, 0.2);
967 border-style: solid;
968 border-width: 0 1px 1px;
969 border-radius: 0 0 6px 6px;
970 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
971 background-clip: padding-box;
972 }
973
974 .menu-dropdown li, .dropdown-menu li {
975 float: none;
976 display: block;
977 background-color: transparent;
978 }
979
980 .menu-dropdown .divider, .dropdown-menu .divider {
981 height: 1px;
982 margin: 5px 0;
983 overflow: hidden;
984 background-color: #eee;
985 border-bottom: 1px solid #fff;
986 }
987
988 header .dropdown-menu a, .dropdown-menu a {
989 display: block;
990 padding: 4px 15px;
991 clear: both;
992 font-weight: normal;
993 line-height: 18px;
994 color: #808080;
995 text-shadow: 0 1px 0 #fff;
996 }
997
998 header .dropdown-menu a:hover,
999 .dropdown-menu a:hover,
1000 header .dropdown-menu a.hover,
1001 .dropdown-menu a.hover {
1002 background-color: #ddd;
1003 background-repeat: repeat-x;
1004 background-image: linear-gradient(to bottom, #eee, #ddd);
1005 color: #404040;
1006 text-decoration: none;
1007 box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025);
1008 }
1009
1010 .open .menu,
1011 .dropdown.open .menu,
1012 .open .dropdown-toggle,
1013 .dropdown.open .dropdown-toggle {
1014 color: #fff;
1015 background: #ccc;
1016 background: rgba(0, 0, 0, 0.3);
1017 }
1018
1019 .open .menu-dropdown,
1020 .dropdown.open .menu-dropdown,
1021 .open .dropdown-menu,
1022 .dropdown.open .dropdown-menu {
1023 left: 0;
1024 }
1025
1026 .dropdown:hover ul.dropdown-menu {
1027 left: 0;
1028 }
1029
1030 .dropdown-menu .dropdown-menu {
1031 position: absolute;
1032 left: 159px;
1033 }
1034
1035 .dropdown-menu li {
1036 position: relative;
1037 }
1038
1039 .tabs, .cbi-tabmenu {
1040 margin: 0 -5px 18px;
1041 padding: 0 2px;
1042 list-style: none;
1043 display: flex;
1044 flex-wrap: wrap;
1045 background: linear-gradient(#fff 28px, #ddd 28px);
1046 background-size: 1px 29px;
1047 background-position: left bottom;
1048 }
1049
1050 .tabs > li, .cbi-tabmenu > li {
1051 flex: 0 1 auto;
1052 display: flex;
1053 align-items: center;
1054 height: 25px;
1055 max-width: 48%;
1056 margin: 4px 2px 0 2px;
1057 background: #fff;
1058 border: 1px solid #ddd;
1059 border-bottom: none;
1060 border-radius: 4px 4px 0 0;
1061 color: #0069d6;
1062 }
1063
1064 .tabs > li > a, .cbi-tabmenu > li > a {
1065 padding: 4px 6px;
1066 white-space: nowrap;
1067 overflow: hidden;
1068 text-overflow: ellipsis;
1069 color: inherit;
1070 text-decoration: none;
1071 border-radius: 4px 4px 0 0;
1072 line-height: 25px;
1073 outline: none;
1074 }
1075
1076 .tabs > li:not(.active):hover, .cbi-tabmenu > .cbi-tab-disabled:hover {
1077 background: linear-gradient(#fff 90%, #ddd 100%);
1078 }
1079
1080 .tabs > li:not(.active), .cbi-tabmenu > .cbi-tab-disabled {
1081 color: #999;
1082 background: linear-gradient(#eee 90%, #ddd 100%);
1083 }
1084
1085 .cbi-tab-disabled[data-errors]::after {
1086 content: attr(data-errors);
1087 background: #c43c35;
1088 color: #fff;
1089 min-width: 12px;
1090 line-height: 14px;
1091 border-radius: 7px;
1092 text-align: center;
1093 margin: 0 5px 0 0;
1094 padding: 1px 2px;
1095 }
1096
1097 .cbi-tabmenu.map {
1098 margin: 0;
1099 }
1100
1101 .cbi-tabmenu.map > li {
1102 font-size: 16.5px;
1103 font-weight: bold;
1104 }
1105
1106 .cbi-tabcontainer > fieldset.cbi-section[id] > legend {
1107 display: none;
1108 }
1109
1110 .tabs .menu-dropdown, .tabs .dropdown-menu {
1111 top: 35px;
1112 border-width: 1px;
1113 border-radius: 0 6px 6px 6px;
1114 }
1115
1116 .tabs a.menu:after, .tabs .dropdown-toggle:after {
1117 border-top-color: #999;
1118 margin-top: 15px;
1119 margin-left: 5px;
1120 }
1121
1122 .tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle {
1123 border-color: #999;
1124 }
1125
1126 .tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after {
1127 border-top-color: #555;
1128 }
1129
1130 .tab-content > .tab-pane,
1131 .tab-content > div {
1132 display: none;
1133 }
1134
1135 .tab-content > .active {
1136 display: block;
1137 }
1138
1139 .breadcrumb {
1140 padding: 7px 14px;
1141 margin: 0 0 18px;
1142 background-color: #f5f5f5;
1143 background-repeat: repeat-x;
1144 background-image: linear-gradient(to bottom, #fff, #f5f5f5);
1145 border: 1px solid #ddd;
1146 border-radius: 3px;
1147 box-shadow: inset 0 1px 0 #fff;
1148 }
1149
1150 .breadcrumb li {
1151 display: inline;
1152 text-shadow: 0 1px 0 #fff;
1153 }
1154
1155 .breadcrumb .divider {
1156 padding: 0 5px;
1157 color: #bfbfbf;
1158 }
1159
1160 .breadcrumb .active a {
1161 color: #404040;
1162 }
1163
1164 footer {
1165 margin-top: 17px;
1166 padding-top: 17px;
1167 border-top: 1px solid #eee;
1168 }
1169
1170 #modal_overlay {
1171 position: fixed;
1172 top: 0;
1173 bottom: 0;
1174 left: -10000px;
1175 right: 10000px;
1176 background: rgba(0, 0, 0, 0.7);
1177 z-index: 900;
1178 overflow-y: scroll;
1179 -webkit-overflow-scrolling: touch;
1180 transition: opacity .125s ease-in;
1181 opacity: 0;
1182 visibility: hidden;
1183 }
1184
1185 .modal {
1186 width: 90%;
1187 margin: 5em auto;
1188 display: flex;
1189 flex-wrap: wrap;
1190 min-height: 32px;
1191 max-width: 600px;
1192 align-items: center;
1193 border-radius: 3px;
1194 background: #fff;
1195 box-shadow: 0 0 3px #444;
1196 padding: 1em 1em .5em 1em;
1197 max-height: 2400px;
1198 min-width: 270px;
1199 }
1200
1201 .modal > * {
1202 flex-basis: 100%;
1203 line-height: normal;
1204 margin-bottom: .5em;
1205 max-width: 100%;
1206 }
1207
1208 .modal > pre,
1209 .modal > textarea {
1210 white-space: pre-wrap;
1211 overflow: auto;
1212 }
1213
1214 body.modal-overlay-active {
1215 overflow: hidden;
1216 height: 100vh;
1217 }
1218
1219 body.modal-overlay-active #modal_overlay {
1220 left: 0;
1221 right: 0;
1222 opacity: 1;
1223 visibility: visible;
1224 }
1225
1226 .btn.danger,
1227 .alert-message.danger,
1228 .btn.danger:hover,
1229 .alert-message.danger:hover,
1230 .btn.error,
1231 .alert-message.error,
1232 .btn.error:hover,
1233 .alert-message.error:hover,
1234 .btn.success,
1235 .alert-message.success,
1236 .btn.success:hover,
1237 .alert-message.success:hover,
1238 .btn.info,
1239 .alert-message.info,
1240 .btn.info:hover,
1241 .alert-message.info:hover,
1242 .cbi-tooltip.error, .cbi-tooltip.success, .cbi-tooltip.info {
1243 color: #fff;
1244 }
1245
1246 .btn .close, .alert-message .close {
1247 font-family: Arial, sans-serif;
1248 line-height: 18px;
1249 }
1250
1251 .btn.danger,
1252 .alert-message.danger,
1253 .btn.error,
1254 .alert-message.error,
1255 .cbi-tooltip.error {
1256 background: linear-gradient(to bottom, #ee5f5b, #c43c35) repeat-x;
1257 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1258 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1259 }
1260
1261 .btn.success, .alert-message.success, .cbi-tooltip.success {
1262 background: linear-gradient(to bottom, #62c462, #57a957) repeat-x;
1263 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1264 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1265 }
1266
1267 .btn.info, .alert-message.info, .cbi-tooltip.info {
1268 background: linear-gradient(to bottom, #5bc0de, #339bb9) repeat-x;
1269 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1270 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1271 }
1272
1273 .alert-message.notice, .cbi-tooltip.notice {
1274 background: linear-gradient(to bottom, #efefef, #fefefe) repeat-x;
1275 text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
1276 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1277 }
1278
1279 .item::after,
1280 .btn,
1281 .cbi-button {
1282 cursor: pointer;
1283 display: inline-block;
1284 background: linear-gradient(#fff, #fff 25%, #e6e6e6) no-repeat;
1285 padding: 5px 14px 6px;
1286 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1287 color: #333;
1288 font-size: 13px;
1289 line-height: normal;
1290 border: 1px solid #ccc;
1291 border-bottom-color: #bbb;
1292 border-radius: 4px;
1293 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1294 }
1295
1296 .btn:focus,
1297 .cbi-button:focus {
1298 outline: 1px dotted #666;
1299 }
1300
1301 .cbi-input-invalid,
1302 .cbi-input-invalid.cbi-dropdown,
1303 .cbi-input-invalid.cbi-dropdown:not([open]) > ul > li,
1304 .cbi-value-error input {
1305 color: #f00;
1306 border-color: #f00;
1307 }
1308
1309 .cbi-button-positive,
1310 .cbi-button-fieldadd,
1311 .cbi-button-add,
1312 .cbi-button-save {
1313 border-color: #4a4;
1314 color: #4a4;
1315 }
1316
1317 .cbi-button-neutral,
1318 .cbi-button-download,
1319 .cbi-button-find,
1320 .cbi-button-link,
1321 .cbi-button-up,
1322 .cbi-button-down {
1323 color: #444;
1324 }
1325
1326 .btn.primary,
1327 .cbi-button-action,
1328 .cbi-button-apply,
1329 .cbi-button-reload,
1330 .cbi-button-edit {
1331 border-color: #0069d6;
1332 color: #0069d6;
1333 }
1334
1335 .cbi-button-negative,
1336 .cbi-section-remove .cbi-button,
1337 .cbi-button-reset,
1338 .cbi-button-remove {
1339 border-color: #c44;
1340 color: #c44;
1341 }
1342
1343 .cbi-page-actions::after {
1344 display: table;
1345 content: "";
1346 clear: both;
1347 }
1348
1349 .cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-save):not(.cbi-button-reset) {
1350 float: left;
1351 margin-right: .4em;
1352 }
1353
1354 .btn.primary,
1355 .cbi-button-action.important,
1356 .cbi-page-actions .cbi-button-apply,
1357 .cbi-section-actions .cbi-button-edit {
1358 color: #fff;
1359 background: linear-gradient(to bottom, #0069d6, #0049d6) no-repeat;
1360 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1361 }
1362
1363 .cbi-button-positive.important,
1364 .cbi-page-actions .cbi-button-save {
1365 color: #fff;
1366 background: linear-gradient(to bottom, #4a4, #484) no-repeat;
1367 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1368 }
1369
1370 .cbi-button-negative.important {
1371 color: #fff;
1372 background: linear-gradient(to bottom, #c44, #c00) no-repeat;
1373 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1374 }
1375
1376 .cbi-page-actions .cbi-button-apply + .cbi-button-save {
1377 background: linear-gradient(#fff, #fff 25%, #e6e6e6);
1378 text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.75);
1379 color: #4a4;
1380 }
1381
1382 .cbi-dropdown {
1383 border: 1px solid #ccc;
1384 border-radius: 3px;
1385 display: inline-flex;
1386 padding: 0;
1387 cursor: pointer;
1388 height: auto;
1389 background: linear-gradient(#fff 0%, #e9e8e6 100%);
1390 position: relative;
1391 color: #404040;
1392 }
1393
1394 .cbi-dynlist > .item:focus,
1395 .cbi-dropdown:focus {
1396 outline: 2px solid #4b6e9b;
1397 }
1398
1399 .cbi-dropdown > ul {
1400 margin: 0 !important;
1401 padding: 0;
1402 list-style: none;
1403 overflow-x: hidden;
1404 overflow-y: auto;
1405 display: flex;
1406 width: 100%;
1407 }
1408
1409 .cbi-dropdown > ul.preview {
1410 display: none;
1411 }
1412
1413 .cbi-dropdown > .open,
1414 .cbi-dropdown > .more {
1415 flex-grow: 0;
1416 flex-shrink: 0;
1417 display: flex;
1418 flex-direction: column;
1419 justify-content: center;
1420 text-align: center;
1421 line-height: 2em;
1422 padding: 0 .25em;
1423 }
1424
1425 .cbi-dropdown > .more,
1426 .cbi-dropdown > ul > li[placeholder] {
1427 color: #777;
1428 font-weight: bold;
1429 text-shadow: 1px 1px 0px #fff;
1430 display: none;
1431 justify-content: center;
1432 }
1433
1434 .cbi-dropdown > ul > li {
1435 display: none;
1436 padding: .25em;
1437 white-space: nowrap;
1438 overflow: hidden;
1439 text-overflow: ellipsis;
1440 flex-shrink: 1;
1441 flex-grow: 1;
1442 align-items: center;
1443 align-self: center;
1444 color: #404040;
1445 min-height: 20px;
1446 }
1447
1448 .cbi-dropdown > ul > li .hide-open { display: block; display: initial; }
1449 .cbi-dropdown > ul > li .hide-close { display: none; }
1450
1451 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1452 border-left: 1px solid #ccc;
1453 }
1454
1455 .cbi-dropdown[empty] > ul {
1456 max-width: 1px;
1457 }
1458
1459 .cbi-dropdown > ul > li > form {
1460 display: none;
1461 margin: 0;
1462 padding: 0;
1463 pointer-events: none;
1464 }
1465
1466 .cbi-dropdown > ul > li img {
1467 vertical-align: middle;
1468 margin-right: .25em;
1469 }
1470
1471 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1472 margin: 0;
1473 }
1474
1475 .cbi-dropdown > ul > li input[type="text"] {
1476 height: 20px;
1477 }
1478
1479 .cbi-dropdown[open] {
1480 position: relative;
1481 }
1482
1483 .cbi-dropdown[open] > ul.dropdown {
1484 display: block;
1485 background: #f6f6f5;
1486 border: 1px solid #918e8c;
1487 box-shadow: 0 0 4px #918e8c;
1488 position: absolute;
1489 z-index: 1100;
1490 max-width: none;
1491 min-width: 100%;
1492 width: auto;
1493 transition: max-height .125s ease-in;
1494 }
1495
1496 .cbi-dropdown > ul > li[display],
1497 .cbi-dropdown[open] > ul.preview,
1498 .cbi-dropdown[open] > ul.dropdown > li,
1499 .cbi-dropdown[multiple] > ul > li > label,
1500 .cbi-dropdown[multiple][open] > ul.dropdown > li,
1501 .cbi-dropdown[multiple][more] > .more,
1502 .cbi-dropdown[multiple][empty] > .more {
1503 flex-grow: 1;
1504 display: flex;
1505 }
1506
1507 .cbi-dropdown[empty] > ul > li,
1508 .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
1509 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1510 display: block;
1511 }
1512
1513 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
1514 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block; display: initial; }
1515
1516 .cbi-dropdown[open] > ul.dropdown > li {
1517 border-bottom: 1px solid #ccc;
1518 }
1519
1520 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1521 background: #b0d0f0;
1522 }
1523
1524 .cbi-dropdown[open] > ul.dropdown > li.focus {
1525 background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
1526 }
1527
1528 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1529 margin-bottom: 0;
1530 border-bottom: none;
1531 }
1532
1533 .cbi-dropdown[open] > ul.dropdown > li[unselectable] {
1534 opacity: 0.7;
1535 }
1536
1537 .cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
1538 width: 100%;
1539 }
1540
1541 .cbi-dropdown[disabled] {
1542 pointer-events: none;
1543 opacity: .6;
1544 }
1545
1546 input[type="text"] + .cbi-button,
1547 input[type="password"] + .cbi-button,
1548 select + .cbi-button {
1549 border-radius: 0 3px 3px 0;
1550 border-color: #ccc;
1551 margin-left: -2px;
1552 padding: 0 6px;
1553 vertical-align: top;
1554 height: 30px;
1555 font-size: 14px;
1556 line-height: 28px;
1557 }
1558
1559 select + .cbi-button {
1560 border-left-color: transparent;
1561 }
1562
1563 .cbi-title-ref {
1564 color: #37c;
1565 }
1566
1567 .cbi-title-ref::after {
1568 content: "âž™";
1569 }
1570
1571 .cbi-tooltip-container {
1572 cursor: help;
1573 }
1574
1575 .cbi-tooltip {
1576 position: absolute;
1577 z-index: 1000;
1578 left: -1000px;
1579 box-shadow: 0 0 2px #ccc;
1580 border-radius: 3px;
1581 background: #fff;
1582 white-space: pre;
1583 padding: 2px 5px;
1584 opacity: 0;
1585 transition: opacity .25s ease-in;
1586 }
1587
1588 .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
1589 left: auto;
1590 opacity: 1;
1591 transition: opacity .25s ease-in;
1592 }
1593
1594 .cbi-progressbar {
1595 border: 1px solid #ccc;
1596 border-radius: 3px;
1597 position: relative;
1598 min-width: 170px;
1599 height: 20px;
1600 margin: 4px 0;
1601 background: #f9f9f9;
1602 }
1603
1604 .cbi-progressbar > div {
1605 background: #90c0e0;
1606 height: 100%;
1607 transition: width .25s ease-in;
1608 width: 0%;
1609 }
1610
1611 .cbi-progressbar::after {
1612 position: absolute;
1613 bottom: 0;
1614 top: 0;
1615 right: 0;
1616 left: 0;
1617 text-align: center;
1618 text-shadow: 0 0 2px #fff;
1619 content: attr(title);
1620 white-space: pre;
1621 overflow: hidden;
1622 text-overflow: ellipsis;
1623 }
1624
1625 .zonebadge .cbi-tooltip {
1626 padding: 1px;
1627 background: inherit;
1628 margin: -1.6em 0 0 -5px;
1629 border-radius: 3px;
1630 pointer-events: none;
1631 box-shadow: 0 0 3px #444;
1632 }
1633
1634 .zonebadge .cbi-tooltip > * {
1635 margin: 1px;
1636 }
1637
1638 .zone-forwards {
1639 display: flex;
1640 flex-wrap: wrap;
1641 }
1642
1643 .zone-forwards > * {
1644 flex: 1 1 40%;
1645 padding: 1px;
1646 }
1647
1648 .zone-forwards > span {
1649 flex-basis: 10%;
1650 text-align: center;
1651 }
1652
1653 .zone-forwards .zone-src,
1654 .zone-forwards .zone-dest {
1655 display: flex;
1656 flex-direction: column;
1657 }
1658
1659 .btn.active, .btn:active {
1660 box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
1661 }
1662
1663 .btn.disabled {
1664 cursor: default;
1665 background-image: none;
1666 opacity: 0.65;
1667 box-shadow: none;
1668 }
1669
1670 .btn[disabled] {
1671 cursor: default;
1672 background-image: none;
1673 opacity: 0.65;
1674 box-shadow: none;
1675 }
1676
1677 .btn.large {
1678 font-size: 15px;
1679 line-height: normal;
1680 padding: 9px 14px 9px;
1681 border-radius: 6px;
1682 }
1683
1684 .btn.small {
1685 padding: 7px 9px 7px;
1686 font-size: 11px;
1687 }
1688
1689 button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
1690 padding: 0;
1691 border: 0;
1692 }
1693
1694 .close {
1695 float: right;
1696 color: #000;
1697 font-size: 20px;
1698 font-weight: bold;
1699 line-height: 13.5px;
1700 text-shadow: 0 1px 0 #fff;
1701 opacity: 0.25;
1702 }
1703
1704 .close:hover {
1705 color: #000;
1706 text-decoration: none;
1707 opacity: 0.4;
1708 }
1709
1710 .alert-message {
1711 position: relative;
1712 padding: .5em .5em .25em .5em;
1713 margin-bottom: .5em;
1714 color: #404040;
1715 background: linear-gradient(to bottom, #fceec1, #eedc94) repeat-x;
1716 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
1717 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
1718 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
1719 border-width: 1px;
1720 border-style: solid;
1721 border-radius: 4px;
1722 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
1723 }
1724
1725 .alert-message .close {
1726 margin-top: 1px;
1727 *margin-top: 0;
1728 }
1729
1730 .alert-message h4,
1731 .alert-message h5,
1732 .alert-message pre,
1733 .alert-message ul,
1734 .alert-message li,
1735 .alert-message p {
1736 color: inherit;
1737 border: none;
1738 line-height: inherit;
1739 background: transparent;
1740 padding: 0;
1741 margin: .25em 0;
1742 }
1743
1744 .alert-message button {
1745 margin: .25em 0;
1746 }
1747
1748 .label {
1749 padding: 1px 3px 2px;
1750 font-size: 9.75px;
1751 font-weight: bold;
1752 color: #fff !important;
1753 text-transform: uppercase;
1754 white-space: nowrap;
1755 background-color: #bfbfbf;
1756 border-radius: 3px;
1757 text-shadow: none;
1758 }
1759
1760 a.label:link,
1761 a.label:visited {
1762 color: #fff;
1763 }
1764
1765 a.label:hover {
1766 text-decoration: none;
1767 }
1768
1769 .label.important {
1770 background-color: #c43c35;
1771 }
1772
1773 .label.warning {
1774 background-color: #f89406;
1775 }
1776
1777 .label.success {
1778 background-color: #46a546;
1779 }
1780
1781 .label.notice {
1782 background-color: #62cffc;
1783 }
1784
1785 /* LuCI specific items */
1786 .hidden { display: none }
1787
1788 #xhr_poll_status {
1789 cursor: pointer;
1790 }
1791
1792 form.inline { display: inline; margin-bottom: 0; }
1793
1794 header .pull-right { padding-top: 8px; }
1795
1796 #modemenu li:last-child span.divider { display: none }
1797
1798 #syslog { width: 100%; }
1799
1800 .cbi-section-table .tr:hover .td,
1801 .cbi-section-table .tr:hover .th,
1802 .cbi-section-table .tr:hover::before {
1803 background-color: #f5f5f5;
1804 }
1805
1806 .cbi-section-table .tr.cbi-section-table-descr .th {
1807 font-weight: normal;
1808 }
1809
1810 .cbi-section-table-titles.named::before,
1811 .cbi-section-table-descr.named::before,
1812 .cbi-section-table-row[data-title]::before {
1813 content: attr(data-title) " ";
1814 display: table-cell;
1815 padding: 10px 10px 9px;
1816 line-height: 18px;
1817 font-weight: bold;
1818 vertical-align: middle;
1819 }
1820
1821 .cbi-section-table-titles.named::before,
1822 .cbi-section-table-descr.named::before,
1823 .cbi-section-table-row[data-title]::before {
1824 border-top: 1px solid #ddd;
1825 }
1826
1827 .left { text-align: left !important; }
1828 .right { text-align: right !important; }
1829 .center { text-align: center !important; }
1830 .top { vertical-align: top !important; }
1831 .middle { vertical-align: middle !important; }
1832 .bottom { vertical-align: bottom !important; }
1833
1834 .cbi-value-field { line-height: 1.5em; }
1835
1836 .cbi-value-field input[type=checkbox],
1837 .cbi-value-field input[type=radio] {
1838 margin-top: 8px;
1839 margin-right: 6px;
1840 }
1841
1842 table table td,
1843 .cbi-value-field table td {
1844 border: none;
1845 }
1846
1847 .table.cbi-section-table input[type="password"],
1848 .table.cbi-section-table input[type="text"],
1849 .table.cbi-section-table textarea,
1850 .table.cbi-section-table select {
1851 width: 100%;
1852 }
1853
1854 .table.cbi-section-table .td.cbi-section-table-cell {
1855 white-space: nowrap;
1856 text-align: right;
1857 }
1858
1859 .table.cbi-section-table .td.cbi-section-table-cell select {
1860 width: inherit;
1861 }
1862
1863 .td.cbi-section-actions {
1864 text-align: right;
1865 vertical-align: middle;
1866 }
1867
1868 .td.cbi-section-actions > * {
1869 display: flex;
1870 }
1871
1872 .td.cbi-section-actions > * > *,
1873 .td.cbi-section-actions > * > form > * {
1874 flex: 1 1 4em;
1875 margin: 0 1px;
1876 }
1877
1878 .td.cbi-section-actions > * > form {
1879 display: inline-flex;
1880 margin: 0;
1881 }
1882
1883 .table.valign-middle .td {
1884 vertical-align: middle;
1885 }
1886
1887 .cbi-rowstyle-2,
1888 .tr.table-titles,
1889 .tr.cbi-section-table-titles {
1890 background: #f9f9f9;
1891 }
1892
1893 .cbi-value-description {
1894 background-image: url(/luci-static/resources/cbi/help.gif);
1895 background-position: .25em .2em;
1896 background-repeat: no-repeat;
1897 margin: .25em 0 0 0;
1898 padding: 0 0 0 1.7em;
1899 }
1900
1901 .cbi-section-error {
1902 border: 1px solid #f00;
1903 border-radius: 3px;
1904 background-color: #fce6e6;
1905 padding: 5px;
1906 margin-bottom: 18px;
1907 }
1908
1909 .cbi-section-error ul { margin: 0 0 0 20px; }
1910
1911 .cbi-section-error ul li {
1912 color: #f00;
1913 font-weight: bold;
1914 }
1915
1916 .ifacebox {
1917 background-color: #fff;
1918 border: 1px solid #ccc;
1919 margin: 0 10px;
1920 text-align: center;
1921 white-space: nowrap;
1922 background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
1923 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1924 border-radius: 4px;
1925 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1926 display: inline-flex;
1927 flex-direction: column;
1928 line-height: 1.2em;
1929 min-width: 100px;
1930 }
1931
1932 .ifacebox .ifacebox-head {
1933 border-bottom: 1px solid #ccc;
1934 padding: 2px;
1935 background: #eee;
1936 }
1937
1938 .ifacebox .ifacebox-head.active {
1939 background: #90c0e0;
1940 }
1941
1942 .ifacebox .ifacebox-body {
1943 padding: .25em;
1944 }
1945
1946 .ifacebadge {
1947 display: inline-block;
1948 flex-direction: row;
1949 white-space: nowrap;
1950 background-color: #fff;
1951 border: 1px solid #ccc;
1952 padding: 2px;
1953 background-image: linear-gradient(#fff, #fff 25%, #f9f9f9);
1954 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
1955 border-radius: 4px;
1956 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
1957 cursor: default;
1958 line-height: 1.2em;
1959 }
1960
1961 .ifacebadge img {
1962 width: 16px;
1963 height: 16px;
1964 vertical-align: middle;
1965 }
1966
1967 .ifacebadge-active {
1968 border-color: #000;
1969 font-weight: bold;
1970 }
1971
1972 .network-status-table {
1973 display: flex;
1974 flex-wrap: wrap;
1975 }
1976
1977 .network-status-table .ifacebox {
1978 margin: .5em;
1979 flex-grow: 1;
1980 }
1981
1982 .network-status-table .ifacebox-body {
1983 display: flex;
1984 flex-direction: column;
1985 height: 100%;
1986 text-align: left;
1987 }
1988
1989 .network-status-table .ifacebox-body > * {
1990 margin: .25em;
1991 }
1992
1993 .network-status-table .ifacebox-body > span {
1994 flex: 10 10 auto;
1995 height: 100%;
1996 }
1997
1998 .network-status-table .ifacebox-body > div {
1999 margin: -.125em;
2000 }
2001
2002 #dsl_status_table .ifacebox-body span > strong {
2003 display: inline-block;
2004 min-width: 35%;
2005 }
2006
2007 .ifacebadge.large,
2008 .network-status-table .ifacebox-body .ifacebadge {
2009 display: flex;
2010 flex: 1;
2011 padding: .25em;
2012 min-width: 220px;
2013 margin: .125em;
2014 }
2015
2016 .ifacebadge.large {
2017 display: inline-flex;
2018 }
2019
2020 .network-status-table .ifacebox-body .ifacebadge > span {
2021 overflow: hidden;
2022 text-overflow: ellipsis;
2023 }
2024
2025 .ifacebadge > *,
2026 .ifacebadge.large > * {
2027 margin: 0 .125em;
2028 }
2029
2030 .zonebadge {
2031 padding: 2px;
2032 border-radius: 4px;
2033 display: inline-block;
2034 white-space: nowrap;
2035 color: #666;
2036 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
2037 }
2038
2039 .zonebadge > em,
2040 .zonebadge > strong {
2041 margin: 0 2px;
2042 display: inline-block;
2043 }
2044
2045 .zonebadge input {
2046 width: 6em;
2047 }
2048
2049 .zonebadge > .ifacebadge {
2050 margin-left: 2px;
2051 }
2052
2053 .zonebadge-empty {
2054 border: 1px dashed #aaa;
2055 color: #aaa;
2056 font-style: italic;
2057 font-size: smaller;
2058 }
2059
2060 div.cbi-value var,
2061 .td.cbi-value-field var {
2062 font-style: italic;
2063 color: #0069d6;
2064 }
2065
2066 #modal_overlay > .modal.uci-dialog,
2067 #modal_overlay > .modal.cbi-modal {
2068 max-width: 900px;
2069 }
2070
2071 .uci-change-list {
2072 line-height: 170%;
2073 white-space: pre;
2074 }
2075
2076 .uci-change-list del,
2077 .uci-change-list ins,
2078 .uci-change-list var,
2079 .uci-change-legend-label del,
2080 .uci-change-legend-label ins,
2081 .uci-change-legend-label var {
2082 text-decoration: none;
2083 font-family: monospace;
2084 font-style: normal;
2085 border: 1px solid #ccc;
2086 background: #eee;
2087 padding: 2px;
2088 display: block;
2089 line-height: 15px;
2090 margin-bottom: 1px;
2091 }
2092
2093 .uci-change-list ins,
2094 .uci-change-legend-label ins {
2095 border-color: #0f0;
2096 background: #cfc;
2097 }
2098
2099 .uci-change-list del,
2100 .uci-change-legend-label del {
2101 border-color: #f00;
2102 background: #fcc;
2103 }
2104
2105 .uci-change-list var,
2106 .uci-change-legend-label var {
2107 border-color: #ccc;
2108 background: #eee;
2109 }
2110
2111 .uci-change-list var ins,
2112 .uci-change-list var del {
2113 display: inline-block;
2114 border: none;
2115 width: 100%;
2116 padding: 0;
2117 }
2118
2119 .uci-change-legend {
2120 padding: 5px;
2121 }
2122
2123 .uci-change-legend-label {
2124 width: 150px;
2125 float: left;
2126 }
2127
2128 .uci-change-legend-label > ins,
2129 .uci-change-legend-label > del,
2130 .uci-change-legend-label > var {
2131 float: left;
2132 margin-right: 4px;
2133 width: 16px;
2134 height: 16px;
2135 display: block;
2136 position: relative;
2137 }
2138
2139 .uci-change-legend-label var ins,
2140 .uci-change-legend-label var del {
2141 border: none;
2142 position: absolute;
2143 top: 2px;
2144 left: 2px;
2145 right: 2px;
2146 bottom: 2px;
2147 }
2148
2149 #modal_overlay {
2150 position: fixed;
2151 top: 0;
2152 bottom: 0;
2153 left: -10000px;
2154 right: 10000px;
2155 background: rgba(0, 0, 0, 0.7);
2156 z-index: 900;
2157 overflow-y: scroll;
2158 -webkit-overflow-scrolling: touch;
2159 transition: opacity .125s ease-in;
2160 opacity: 0;
2161 }
2162
2163 #modal_overlay > .modal {
2164 width: 90%;
2165 margin: 5em auto;
2166 display: flex;
2167 flex-wrap: wrap;
2168 min-height: 32px;
2169 max-width: 600px;
2170 align-items: center;
2171 border-radius: 3px;
2172 background: #fff;
2173 box-shadow: 0 0 3px #444;
2174 padding: 1em 1em .5em 1em;
2175 max-height: 2400px;
2176 min-width: 270px;
2177 }
2178
2179 #modal_overlay .modal > * {
2180 flex-basis: 100%;
2181 line-height: normal;
2182 margin-bottom: .5em;
2183 }
2184
2185 #modal_overlay .modal > pre,
2186 #modal_overlay .modal > textarea {
2187 white-space: pre-wrap;
2188 overflow: auto;
2189 }
2190
2191 body.modal-overlay-active {
2192 overflow: hidden;
2193 height: 100vh;
2194 }
2195
2196 body.modal-overlay-active #modal_overlay {
2197 left: 0;
2198 right: 0;
2199 opacity: 1;
2200 }
2201
2202 html body.apply-overlay-active {
2203 height: calc(100vh - 63px);
2204 }
2205
2206 #applyreboot-section {
2207 line-height: 300%;
2208 }
2209
2210 [data-page="admin-network-dhcp"] [data-name="ip"] {
2211 width: 15%;
2212 }
2213
2214 @keyframes flash {
2215 0% { opacity: 1; }
2216 50% { opacity: .5; }
2217 100% { opacity: 1; }
2218 }
2219
2220 .flash {
2221 animation: flash .35s;
2222 }
2223
2224 .spinning {
2225 position: relative;
2226 padding-left: 32px !important;
2227 }
2228
2229 .spinning::before {
2230 position: absolute;
2231 top: 0;
2232 left: 0;
2233 bottom: 0;
2234 width: 32px;
2235 content: " ";
2236 background: url(../resources/icons/loading.gif) no-repeat center;
2237 background-size: 16px;
2238 }
2239
2240 [data-tab-title] {
2241 height: 0;
2242 opacity: 0;
2243 overflow: hidden;
2244 }
2245
2246 [data-tab-active="true"] {
2247 opacity: 1;
2248 height: auto;
2249 overflow: visible;
2250 transition: opacity .25s ease-in;
2251 }
2252
2253 .cbi-filebrowser {
2254 min-width: 210px;
2255 max-width: 100%;
2256 border: 1px solid #ccc;
2257 border-radius: 3px;
2258 display: flex;
2259 flex-direction: column;
2260 opacity: 0;
2261 height: 0;
2262 overflow: hidden;
2263 }
2264
2265 .cbi-filebrowser.open {
2266 opacity: 1;
2267 height: auto;
2268 overflow: visible;
2269 transition: opacity .25s ease-in;
2270 }
2271
2272 .cbi-filebrowser > * {
2273 max-width: 100%;
2274 overflow: hidden;
2275 text-overflow: ellipsis;
2276 padding: 0 0 .25em 0;
2277 margin: .25em .25em 0px .25em;
2278 white-space: nowrap;
2279 border-bottom: 1px solid #ccc;
2280 }
2281
2282 .cbi-filebrowser .cbi-button-positive {
2283 margin-right: .25em;
2284 }
2285
2286 .cbi-filebrowser > div {
2287 border-bottom: none;
2288 }
2289
2290 .cbi-filebrowser > ul > li {
2291 display: flex;
2292 flex-direction: row;
2293 }
2294
2295 .cbi-filebrowser > ul > li:hover {
2296 background: #f5f5f5;
2297 }
2298
2299 .cbi-filebrowser > ul > li > div:first-child {
2300 flex: 10;
2301 overflow: hidden;
2302 text-overflow: ellipsis;
2303 }
2304
2305 .cbi-filebrowser > ul > li > div:last-child {
2306 flex: 3;
2307 text-align: right;
2308 }
2309
2310 .cbi-filebrowser > ul > li > div:last-child > button {
2311 padding: .125em .25em;
2312 margin: 1px 0 1px .25em;
2313 }
2314
2315 .cbi-filebrowser .upload {
2316 display: flex;
2317 flex-direction: row;
2318 flex-wrap: wrap;
2319 margin: 0 -.125em .25em -.125em;
2320 padding: 0 0 .125em 0px;
2321 border-bottom: 1px solid #ccc;
2322 }
2323
2324 .cbi-filebrowser .upload > * {
2325 margin: .125em;
2326 flex: 1;
2327 }
2328
2329 .cbi-filebrowser .upload > .btn {
2330 flex-basis: 60px;
2331 }
2332
2333 .cbi-filebrowser .upload > div {
2334 flex: 10;
2335 min-width: 150px;
2336 }
2337
2338 .cbi-filebrowser .upload > div > input {
2339 width: 100%;
2340 }
2341
2342 @keyframes fade-in {
2343 0% { opacity: 0; }
2344 100% { opacity: 1; }
2345 }
2346
2347 @keyframes fade-out {
2348 0% { opacity: 1; }
2349 100% { opacity: 0; }
2350 }
2351
2352 .fade-in {
2353 animation: fade-in .4s ease;
2354 }
2355
2356 .fade-out {
2357 animation: fade-out .4s ease;
2358 }