6b5a0bae311a0f75b19baf07c1c98216f3c32593
[project/luci.git] / themes / luci-theme-material / htdocs / luci-static / material / css / style.css
1 /**
2  *  Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
3  *
4  *  luci-theme-material
5  *      Copyright 2015 Lutty Yang <lutty@wcan.in>
6  *
7  *  Have a bug? Please create an issue here on GitHub!
8  *      https://github.com/LuttyYang/luci-theme-material/issues
9  *
10  *  luci-theme-bootstrap:
11  *      Copyright 2008 Steven Barth <steven@midlink.org>
12  *      Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
13  *      Copyright 2012 David Menting <david@nut-bolt.nl>
14  *
15  *  MUI:
16  *      https://github.com/muicss/mui
17  *
18  *  Licensed to the public under the Apache License 2.0
19  */
20
21 /*
22  *  Font generate by Icomoon<icomoon.io>
23  */
24 @font-face {
25     font-family: 'icomoon';
26     src: url('../fonts/font.eot');
27     src: url('../fonts/font.eot') format('embedded-opentype'),
28     url('../fonts/font.ttf') format('truetype'),
29     url('../fonts/font.woff') format('woff'),
30     url('../fonts/font.svg') format('svg');
31     font-weight: normal;
32     font-style: normal;
33 }
34
35 .cbi-button-up,
36 .cbi-button-down,
37 .cbi-value-helpicon,
38 .showSide,
39 .main > .loading > span {
40     font-family: 'icomoon' !important;
41     speak: none;
42     font-style: normal !important;
43     font-weight: normal !important;
44     font-variant: normal !important;
45     text-transform: none !important;
46     line-height: 1;
47
48     -webkit-font-smoothing: antialiased;
49     -moz-osx-font-smoothing: grayscale;
50 }
51
52 * {
53     margin: 0;
54     padding: 0;
55     box-sizing: border-box;
56 }
57
58 .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
59     font-family: inherit;
60     font-weight: 500;
61     line-height: 1.1;
62     color: inherit;
63 }
64
65 html {
66     -webkit-text-size-adjust: 100%;
67     -ms-text-size-adjust: 100%;
68 }
69
70 html, body {
71     margin: 0px;
72     padding: 0px;
73     height: 100%;
74     font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
75 }
76
77 select {
78     padding: 0.36rem 0.8rem;
79     color: #555;
80     background-color: #fff;
81     background-image: none;
82     border: 1px solid #ccc;
83 }
84
85 select,
86 input {
87     background-color: transparent;
88     color: rgba(0, 0, 0, .87);
89     border: none;
90     border-bottom: 1px solid rgba(0, 0, 0, .26);
91     outline: 0;
92     padding: 0;
93     box-shadow: none;
94     border-radius: 0;
95     background-image: none;
96     height: 2rem;
97     font-size: 1.1rem;
98 }
99
100 select:not([multiple="multiple"]):focus,
101 input:focus {
102     height: 2rem;
103     height: calc(2rem + 1px);
104     margin-bottom: -1px;
105     border-color: #0099CC;
106     border-width: 2px;
107 }
108
109 select[multiple="multiple"] {
110     height: auto;
111 }
112
113 code {
114     color: #0099CC;
115 }
116
117 abbr {
118     color: #005470;
119     text-decoration: underline;
120     cursor: help;
121 }
122
123 hr{
124     margin: 1rem 0;
125     border-color: #EEE;
126     opacity: 0.1;
127 }
128
129 header, .main {
130     width: 100%;
131     position: absolute;
132 }
133
134 header {
135     height: 4rem;
136     box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
137     transition: box-shadow .2s;
138     float: left;
139     position: fixed;
140     z-index: 101;
141 }
142
143 footer {
144     text-align: right;
145     padding: 1rem;
146     color: #aaa;
147     font-size: 0.8rem;
148     text-shadow: 0px 0px 2px #BBB;
149 }
150
151 footer > a {
152     color: #aaa;
153     text-decoration: none;
154 }
155
156 .main {
157     top: 4rem;
158     bottom: 0rem;
159     position: relative;
160     height: 100%;
161     height: calc(100% - 4rem);
162 }
163
164 .main > .loading {
165     position: fixed;
166     width: 100%;
167     height: 100%;
168     z-index: 1000;
169     display: block;
170     background-color: rgb(240, 240, 240);
171     top: 0;
172 }
173
174 .main > .loading > span {
175     display: block;
176     text-align: center;
177     margin-top: 2rem;
178     color: #888;
179     font-size: 1.3rem;
180 }
181
182 .main > .loading > span > .loading-img:before {
183     content: "\e603";
184 }
185
186 .main > .loading > span > .loading-img {
187     animation: anim-rotate 2s infinite linear;
188     margin-right: 0.2rem;
189     display: inline-block;
190 }
191
192 @keyframes anim-rotate {
193     0% {
194         -webkit-transform: rotate(0);
195         -ms-transform: rotate(0);
196         transform: rotate(0);
197     }
198     100% {
199         -webkit-transform: rotate(360deg);
200         -ms-transform: rotate(360deg);
201         transform: rotate(360deg)
202     }
203 }
204
205 .main-left {
206     float: left;
207     top: 4rem;
208     width: 15%;
209     width: calc(0% + 17rem);
210     height: 100%;
211     height: calc(100% - 4rem);
212     background-color: white;
213
214     overflow-x: auto;
215     position: fixed;
216 }
217
218 .main-right {
219     width: 85%;
220     width: calc(100% - 17rem);
221     float: right;
222     height: 100%;
223     background-color: #EEE;
224 }
225
226 .main-right > #maincontent {
227     background-color: #EEE;
228 }
229
230 .pull-right {
231     float: right;
232 }
233
234 .pull-left {
235     float: left;
236 }
237
238 header {
239     background: #0099CC;
240     color: white;
241 }
242
243 header > .container {
244     margin-top: 0.5rem;
245     padding: 0.5rem 1rem 0 1rem;
246 }
247
248 header > .container > .brand {
249     font-size: 1.5rem;
250     color: white;
251     text-decoration: none;
252     cursor: default;
253     vertical-align: text-bottom;
254 }
255
256 .warning {
257     background-color: #FF7D60 !important;
258     color: #FFF;
259 }
260
261 .errorbox,
262 .alert-message {
263     margin: 2rem 0 0 0;
264     padding: 2rem;
265     border: 0;
266     font-weight: normal;
267     font-style: normal;
268     line-height: 1;
269     font-family: inherit;
270     min-width: inherit;
271     overflow: auto;
272     border-radius: 0;
273     background-color: #FFF;
274     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
275 }
276
277 .errorbox {
278     color: #fff;
279     background-color: #f0ad4e;
280     border-color: #eea236;
281 }
282
283 .error {
284     color: red;
285 }
286
287 #maincontent > .container > div:nth-child(1).alert-message.warning > a {
288     font: inherit;
289     overflow: visible;
290     text-transform: none;
291     display: inline-block;
292     margin-bottom: 0;
293     font-weight: 400;
294     text-align: center;
295     white-space: nowrap;
296     vertical-align: middle;
297     touch-action: manipulation;
298     cursor: pointer;
299     -webkit-user-select: none;
300     -moz-user-select: none;
301     -ms-user-select: none;
302     user-select: none;
303     background-image: none;
304     min-width: 6rem;
305     padding: 0.5rem 1rem;
306     font-size: 1.1rem;
307     line-height: 1.42857143;
308     color: #fff;
309     background-color: #5bc0de;
310     border-color: #46b8da;
311     margin-top: 2rem;
312     text-decoration: inherit;
313 }
314
315 .main > .main-left > .nav {
316     margin-top: 0.5rem;
317 }
318
319 .main > .main-left > .nav > li a {
320     color: #404040;
321     display: block;
322 }
323
324 .main > .main-left > .nav > li:nth-last-child(1) {
325     margin-top: 2rem;
326     font-size: 1.2rem;
327 }
328
329 .main > .main-left > .nav > li {
330     padding: 0.5rem 1rem;
331     cursor: pointer;
332 }
333
334 .main > .main-left > .nav > .slide {
335     padding: 0;
336 }
337
338 .main > .main-left > .nav > .slide > ul {
339     display: none;
340 }
341
342 .main > .main-left > .nav > .slide > .menu {
343     display: block;
344     padding: 0.5rem 1rem;
345     text-decoration: none;
346     cursor: default;
347     font-size: 1.2rem;
348 }
349
350 .main > .main-left > .nav > li:hover,
351 .main > .main-left > .nav > .slide > .menu:hover {
352     background: #D4D4D4;
353 }
354
355 .main > .main-left > .nav > .slide:hover {
356     background: none;
357 }
358
359 .main > .main-left > .nav > .slide > .slide-menu > li {
360     padding: 0.4rem 2rem;
361 }
362
363 .main > .main-left > .nav > .slide > .slide-menu > .active {
364     background-color: #0099CC;
365 }
366
367 .main > .main-left > .nav > .slide > .slide-menu > li > a {
368     text-decoration: none;
369     white-space: nowrap;
370 }
371
372 .main > .main-left > .nav > .slide > .slide-menu > .active > a {
373     color: white;
374 }
375
376 .main > .main-left > .nav > .slide > .slide-menu > li:hover {
377     background: #D4D4D4;
378 }
379
380 .main > .main-left > .nav > .slide > .slide-menu > .active:hover {
381     background-color: #0099CC;
382     cursor: hand;
383 }
384
385 li {
386     list-style-type: none;
387 }
388
389 #maincontent > .container {
390     margin: 0 2rem 1rem 2rem;
391 }
392
393 h1 {
394     font-size: 4rem;
395     padding-bottom: 10px;
396     border-bottom: 1px solid #eee;
397 }
398
399 h2 {
400     margin: 2rem 0 0 0;
401     font-size: 2.5rem;
402     padding-bottom: 10px;
403     border-bottom: 1px solid #eee;
404 }
405
406 h3 {
407     margin: 2rem 0 0 0;
408     font-size: 2rem;
409     padding-bottom: 10px;
410 }
411
412 h4 {
413
414 }
415
416 fieldset {
417     margin: 2rem 0 0 0;
418     padding: 2rem;
419     border: 0;
420     font-weight: normal;
421     font-style: normal;
422     line-height: 1;
423     font-family: inherit;
424
425     min-width: inherit;
426     overflow-x: auto;
427     overflow-y: hidden;
428
429     border-radius: 0;
430     background-color: #FFF;
431     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
432
433     -webkit-overflow-scrolling: touch;
434 }
435
436 fieldset > legend {
437     display: none !important;
438 }
439
440 fieldset > fieldset {
441     margin: 0;
442     padding: 0;
443     border: none;
444     box-shadow: none;
445 }
446
447 .panel-title {
448     width: 100%;
449     display: block;
450     line-height: 1;
451     color: #404040;
452     font-size: 1.9rem;
453     padding-bottom: 2rem;
454     border-bottom: 1px solid #eee;
455 }
456
457 table {
458     border-spacing: 0;
459     border-collapse: collapse;
460     width: 100%;
461     border: 1px solid #eee;
462 }
463
464 table > tbody > tr > td, table > tbody > tr > th, table > tfoot > tr > td, table > tfoot > tr > th, table > thead > tr > td, table > thead > tr > th {
465     padding: 8px;
466     line-height: 1.42857143;
467     border-top: 1px solid #ddd;
468
469     white-space: nowrap;
470 }
471
472 .cbi-section-table-cell {
473     text-align: center;
474 }
475
476 .cbi-section-table-row {
477     text-align: center;
478 }
479
480 fieldset > table > tbody > tr:nth-of-type(odd) {
481     background-color: #f9f9f9;
482 }
483
484 /* fix progress bar */
485 #swaptotal > div,
486 #swapfree > div,
487 #memfree > div,
488 #membuff > div,
489 #conns > div,
490 #memtotal > div {
491     width: 100% !important;
492     height: 1.4rem !important;
493 }
494
495 #swaptotal > div > div,
496 #swapfree > div > div,
497 #memfree > div > div,
498 #membuff > div > div,
499 #conns > div > div,
500 #memtotal > div > div {
501     height: 1.4rem !important;
502     background-color: #0099CC !important;
503 }
504
505 /* fix multiple table */
506
507 table table {
508     border: none;
509 }
510
511 .cbi-value-field table {
512     border: none;
513 }
514
515 td > table > tbody > tr > td {
516     border: none;
517 }
518
519 .cbi-value-field > table > tbody > tr > td {
520     border: none;
521 }
522
523 /* button style */
524
525 .cbi-button {
526     -webkit-appearance: none;
527     text-transform: uppercase;
528     color: rgba(0, 0, 0, 0.87);
529     background-color: #F0F0F0;
530     transition: all 0.2s ease-in-out;
531     display: inline-block;
532     padding: 0.5rem 1rem;
533     border: none;
534     border-radius: 0.2rem;
535     cursor: pointer;
536     -ms-touch-action: manipulation;
537     touch-action: manipulation;
538     background-image: none;
539     text-align: center;
540     vertical-align: middle;
541     white-space: nowrap;
542     -webkit-user-select: none;
543     -moz-user-select: none;
544     -ms-user-select: none;
545     user-select: none;
546     font-size: 1rem;
547     width: auto !important;
548 }
549
550 .cbi-button:hover,
551 .cbi-button:focus,
552 .cbi-button:active {
553     color: rgba(0, 0, 0, 0.87);
554     outline: 0;
555     text-decoration: none;
556     color: rgba(0, 0, 0, 0.87);
557 }
558
559 .cbi-button:hover,
560 .cbi-button:focus {
561     box-shadow: 0 0px 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
562 }
563
564 .cbi-button:active {
565     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
566 }
567
568 .cbi-button:disabled {
569     cursor: not-allowed;
570     pointer-events: none;
571     opacity: 0.60;
572     box-shadow: none;
573 }
574
575 form.inline + form.inline,
576 .cbi-button + .cbi-button {
577     margin-left: 0.6rem;
578 }
579
580 .cbi-button-reset,
581 .cbi-input-remove {
582     color: #fff !important;
583     background-color: #f0ad4e !important;
584     border-color: #eea236 !important;
585 }
586
587 .cbi-input-find,
588 .cbi-input-save,
589 .cbi-button-add,
590 .cbi-button-save,
591 .cbi-button-find,
592 .cbi-input-reload,
593 .cbi-button-reload {
594     color: #fff !important;
595     background-color: #337ab7 !important;
596     border-color: #2e6da4 !important;
597 }
598
599 .cbi-input-apply,
600 .cbi-button-apply,
601 .cbi-button-edit {
602     color: #fff !important;
603     background-color: #5bc0de !important;
604     border-color: #46b8da !important;
605 }
606
607 .cbi-input-reset,
608 .cbi-button-remove {
609     color: #fff !important;
610     background-color: #d9534f !important;
611     border-color: #d43f3a !important;
612 }
613
614 .a-to-btn {
615     text-decoration: none;
616 }
617
618 /* table */
619
620 .tabs {
621     margin: 0 -2rem;
622     padding-left: 0.5rem;
623     background-color: #FFFFFF;
624 }
625
626 .cbi-tabmenu > li,
627 .tabs > li {
628     display: inline-block;
629     padding: 0.9rem 0rem;
630 }
631
632 .cbi-tabmenu > li > a,
633 .tabs > li > a {
634     text-decoration: none;
635     color: #404040;
636     padding: 0.9rem 1.5rem;
637 }
638
639 .tabs > li[class~="active"],
640 .tabs > li:hover {
641     cursor: pointer;
642     border-bottom: 0.2rem solid #0099CC;
643     color: #0099CC;
644     margin-bottom: -0.18751rem;
645 }
646
647 .tabs > li[class~="active"] > a {
648     color: #0099cc;
649 }
650
651 .tabs > li:hover {
652     border-bottom: 0.18751rem solid #C9C9C9;
653 }
654
655 .cbi-tabmenu {
656     border-top: 1px solid #D4D4D4;
657     border-left: 1px solid #D4D4D4;
658     border-right: 1px solid #D4D4D4;
659 }
660
661 .cbi-tabmenu > li:hover {
662     background-color: #F1F1F1;
663 }
664
665 .cbi-tabmenu > li[class~="cbi-tab"] {
666     background-color: white;
667 }
668
669 .cbi-tabmenu {
670     background-color: #D4D4D4;
671 }
672
673 .cbi-section-node-tabbed {
674     padding: 0;
675     margin-top: 0;
676     border-bottom: 1px solid #D4D4D4;
677     border-left: 1px solid #D4D4D4;
678     border-right: 1px solid #D4D4D4;
679 }
680
681 .cbi-tabcontainer > .cbi-value:nth-of-type(2n) {
682     background-color: #f9f9f9;
683 }
684
685 .cbi-value-field,
686 .cbi-value-description {
687     display: table-cell;
688 }
689
690 .cbi-value-helpicon > img {
691     display: none;
692 }
693
694 .cbi-value-helpicon:before {
695     content: "\f059";
696 }
697
698 .cbi-value-description {
699     font-size: small;
700     opacity: 0.5;
701     padding: 0.5rem 0 0 0;
702 }
703
704 .cbi-value-title {
705     word-wrap: break-word;
706     padding-top: 0.6rem;
707     width: 23rem;
708     float: left;
709     text-align: right;
710     padding-right: 2rem;
711     display: table-cell;
712 }
713
714 .cbi-value {
715     padding: 1rem;
716     display: inline-block;
717     width: 100%;
718 }
719
720 .cbi-section-table-descr > .cbi-section-table-cell,
721 .cbi-section-table-titles > .cbi-section-table-cell {
722     border: none;
723 }
724
725 .cbi-rowstyle-2 {
726     background-color: #eee;
727 }
728
729 .cbi-rowstyle-2 .cbi-button-up,
730 .cbi-rowstyle-2 .cbi-button-down{
731     background-color: #FFF !important;
732 }
733
734 .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
735     width: auto !important;
736 }
737
738 /* desc */
739 .cbi-section-descr,
740 .cbi-map-descr {
741     padding: 0.5rem;
742     color: #999;
743     font-size: small;
744 }
745
746 /* luci */
747
748 .hidden {
749     display: none
750 }
751
752 .left {
753     text-align: left !important;
754 }
755
756 .right {
757     text-align: right !important;
758 }
759
760 .inline {
761     display: inline;
762 }
763
764 .cbi-page-actions {
765     border-top: 1px solid #eee;
766     padding-top: 2rem;
767     text-align: right;
768 }
769
770 /* input */
771 .cbi-value input[type="password"],
772 .cbi-value input[type="text"] {
773     min-width: 15rem;
774 }
775
776 /* select */
777 .cbi-value-field .cbi-input-select {
778     min-width: 15rem;
779 }
780
781 .ifacebadge {
782     display: inline-flex;
783     border-bottom: 1px solid #CCCCCC;
784     padding: 0.5rem 1rem;
785     -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
786     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
787     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
788 }
789
790 .ifacebadge > img {
791     float: right;
792     margin-left: 0.3rem;
793 }
794
795 /*textarea*/
796
797 .cbi-input-textarea {
798     width: 100%;
799     min-height: 16rem;
800     padding: 1rem;
801     font-size: 0.9rem;
802     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
803     color: black;
804 }
805
806 #syslog {
807     width: 100%;
808     min-height: 15rem;
809     padding: 1rem;
810     font-size: smaller;
811     color: #5F5F5F;
812
813     margin-bottom: 20px;
814     border-radius: 0;
815     background-color: #FFF;
816     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
817     border: none;
818 }
819
820 /* change */
821
822 .uci-change-list {
823     font-family: monospace;
824 }
825
826 .uci-change-list ins,
827 .uci-change-legend-label ins {
828     text-decoration: none;
829     border: 1px solid #00FF00;
830     background-color: #CCFFCC;
831     display: block;
832     padding: 2px;
833 }
834
835 .uci-change-list del,
836 .uci-change-legend-label del {
837     text-decoration: none;
838     border: 1px solid #FF0000;
839     background-color: #FFCCCC;
840     display: block;
841     font-style: normal;
842     padding: 2px;
843 }
844
845 .uci-change-list var,
846 .uci-change-legend-label var {
847     text-decoration: none;
848     border: 1px solid #CCCCCC;
849     background-color: #EEEEEE;
850     display: block;
851     font-style: normal;
852     padding: 2px;
853 }
854
855 .uci-change-list var ins,
856 .uci-change-list var del {
857     border: none;
858     white-space: pre;
859     font-style: normal;
860     padding: 0px;
861 }
862
863 .uci-change-legend {
864     padding: 5px;
865 }
866
867 .uci-change-legend-label {
868     width: 150px;
869     float: left;
870 }
871
872 .uci-change-legend-label > ins,
873 .uci-change-legend-label > del,
874 .uci-change-legend-label > var {
875     float: left;
876     margin-right: 4px;
877     width: 10px;
878     height: 10px;
879     display: block;
880 }
881
882 .uci-change-legend-label var ins,
883 .uci-change-legend-label var del {
884     line-height: 6px;
885     border: none;
886 }
887
888 .uci-change-list var,
889 .uci-change-list del,
890 .uci-change-list ins {
891     padding: 0.5rem;
892 }
893
894 /* other fix */
895 #iwsvg,
896 #iwsvg2,
897 #bwsvg {
898     border: 1px solid #D4D4D4 !important;
899     border-top: none !important;
900 }
901
902 .ifacebox {
903     border: 1px solid #999;
904     background-color: #f9f9f9;
905 }
906
907 .cbi-image-button {
908     margin-left: 0.5rem;
909 }
910
911 .zonebadge {
912     padding: 0.2rem 0.5rem;
913     display: inline-block;
914     cursor: pointer;
915 }
916
917 .zonebadge > .ifacebadge {
918     padding: 0.2rem 1rem;
919     margin: 0.3rem;
920     border: 1px solid #6C6C6C;
921 }
922
923 .zonebadge > input[type="text"] {
924     padding: 0.16rem 1rem;
925     min-width: 10rem;
926     margin-top: 0.3rem;
927 }
928
929 .cbi-value-field .cbi-input-checkbox,
930 .cbi-value-field .cbi-input-radio {
931     margin-top: 0.3rem;
932 }
933
934 .cbi-section-table-row > .cbi-value-field .cbi-input-select {
935     min-width: 7rem;
936 }
937
938 .cbi-section-create > .cbi-button-add {
939     margin: 0.5rem;
940 }
941
942 div.cbi-value var, td.cbi-value-field var {
943     font-style: italic;
944     color: #0069D6;
945 }
946
947 small {
948     font-size: smaller;
949     white-space: normal;
950 }
951
952 .cbi-button-up,
953 .cbi-button-down {
954     display: inline-block;
955     min-width: 0;
956     padding: 0.2rem 0.3rem;
957     font-size: 1.3rem;
958 }
959
960 .cbi-optionals {
961     padding: 1rem 1rem 0 1rem;
962     border-top: 1px solid #CCC;
963 }
964
965 #diag-rc-output > pre {
966     background-color: #f5f5f5;
967     display: block;
968     padding: 8.5px;
969     margin: 0 0 18px;
970     line-height: 1.5rem;
971     -moz-border-radius: 3px;
972     white-space: pre-wrap;
973     word-wrap: break-word;
974     font-size: 1.5rem;
975     color: #404040;
976 }
977
978 input[name="ping"],
979 input[name="traceroute"],
980 input[name="nslookup"] {
981     width: 80%;
982 }
983
984 header > .container > .pull-right > * {
985     position: relative;
986     top: 0.45rem;
987     cursor: pointer;
988 }
989
990 #xhr_poll_status > .label.success {
991     background-color: #14CE14;
992 }
993
994 .label {
995     padding: 0.3rem 0.8rem;
996     font-size: 1rem;
997     font-weight: bold;
998     color: #ffffff !important;
999     text-transform: uppercase;
1000     white-space: nowrap;
1001     background-color: #bfbfbf;
1002     -webkit-border-radius: 3px;
1003     -moz-border-radius: 3px;
1004     border-radius: 3px;
1005     text-shadow: none;
1006     text-decoration: none;
1007 }
1008
1009 .notice {
1010     background-color: #5BC0DE;
1011 }
1012
1013 .showSide {
1014     display: none;
1015 }
1016
1017 .darkMask {
1018     width: 100%;
1019     height: 100%;
1020     position: fixed;
1021     background-color: rgba(0, 0, 0, 0.56);
1022     content: "";
1023     z-index: 99;
1024     display: none;
1025 }
1026
1027 /* fix Main Login*/
1028 .node-main-login > .main > .main-left {
1029     display: none;
1030 }
1031
1032 .node-main-login > .main > .main-right {
1033     width: 100%;
1034 }
1035
1036 .node-main-login > .main fieldset {
1037     padding: 0.5rem;
1038     margin-bottom: 1rem;
1039     display: inline;
1040     background: none;
1041     border: none;
1042     box-shadow: none;
1043     overflow: hidden;
1044 }
1045
1046 .node-main-login > .main .cbi-value-title {
1047     width: 7rem;
1048 }
1049
1050 .node-main-login > .main #maincontent {
1051
1052     text-align: center;
1053 }
1054
1055 .node-main-login > .main .container {
1056     display: inline-block;
1057     padding: 2rem 4rem;
1058     margin-top: 2rem !important;
1059     background-color: #FFF;
1060     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
1061     text-align: left;
1062 }
1063
1064 .node-main-login > .main form > div:nth-last-child(1) {
1065     float: right;
1066 }
1067
1068 .node-main-login > .main .cbi-value {
1069     display: block;
1070 }
1071
1072 .node-main-login > .main .cbi-value > * {
1073     display: inline-block !important;
1074 }
1075
1076 .node-main-login > .main .cbi-input-user,
1077 .node-main-login > .main .cbi-input-password {
1078     min-width: 15rem;
1079 }
1080
1081 .node-main-login footer {
1082     bottom: 0;
1083     position: absolute;
1084     width: 100%;
1085 }
1086
1087 /* fix status overview */
1088
1089 .node-status-overview > .main fieldset:nth-child(4) td:nth-child(2) {
1090     white-space: normal;
1091 }
1092
1093 /* fix status processes */
1094
1095 .node-status-processes > .main table tr td:nth-child(3) {
1096     white-space: normal;
1097 }
1098
1099 .node-status-iptables > .main div > .cbi-map > form {
1100     margin: 2rem 2rem 0 0;
1101 }
1102
1103 /* fix system reboot */
1104
1105 .node-system-reboot > .main > .main-right p,
1106 .node-system-reboot > .main > .main-right h3 {
1107     padding-left: 2rem;
1108 }
1109
1110 /* fix Services  Network Shares*/
1111 .node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-title {
1112     margin-bottom: 1rem;
1113 }
1114
1115 .node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-field {
1116     display: list-item;
1117 }
1118
1119 .node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-description {
1120     padding-top: 1rem;
1121 }
1122
1123 /* fix System Software*/
1124 .node-system-packages > .main table tr td:nth-child(1) {
1125     width: auto !important;
1126 }
1127
1128 .node-system-packages > .main table tr td:nth-last-child(1) {
1129     white-space: normal;
1130     font-size: small;
1131     color: #404040;
1132 }
1133
1134 .node-system-packages > .main .cbi-tabmenu > li > a, .tabs > li > a {
1135     padding: 0.5rem 1rem;
1136 }
1137
1138 .node-system-packages > .main .cbi-value > pre {
1139     background-color: #eee;
1140     padding: 0.5rem;
1141     overflow: auto;
1142 }
1143
1144 .cbi-tabmenu + .cbi-section {
1145     margin-top: 0;
1146 }
1147
1148 /* fix network firewall*/
1149 .node-network-firewall > .main .cbi-section-table-row > .cbi-value-field .cbi-input-select {
1150     min-width: 4rem;
1151 }
1152
1153 .node-status-iptables fieldset,
1154 .node-system-packages fieldset,
1155 .node-system-flashops fieldset {
1156     margin-top: 0;
1157 }
1158
1159 .node-status-iptables .cbi-tabmenu,
1160 .node-system-packages .cbi-tabmenu,
1161 .node-system-flashops .cbi-tabmenu {
1162     border: none;
1163     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
1164 }
1165
1166 #cbi-firewall-redirect table *,
1167 #cbi-network-switch_vlan table *,
1168 #cbi-firewall-zone table *{
1169     font-size: smaller;
1170 }
1171
1172 #cbi-firewall-redirect table input[type="text"],
1173 #cbi-network-switch_vlan table input[type="text"],
1174 #cbi-firewall-zone table input[type="text"]{
1175     width: 5rem;
1176 }
1177
1178 #cbi-firewall-redirect table select,
1179 #cbi-network-switch_vlan table select,
1180 #cbi-firewall-zone table select{
1181     min-width: 3.5rem;
1182 }
1183
1184
1185 /* language fix */
1186 body.lang_pl.node-main-login .cbi-value-title {
1187     width: 12rem;
1188 }
1189
1190 @media screen and (max-width: 1600px) {
1191     .main-left {
1192         width: calc(0% + 15rem);
1193     }
1194
1195     .main-right {
1196         width: calc(100% - 15rem);
1197     }
1198
1199     .cbi-button {
1200         padding: 0.3rem 0.6rem;
1201         font-size: 1rem;
1202         line-height: 1.5;
1203     }
1204
1205     header > .container > .pull-right > * {
1206         top: 0.35rem;
1207     }
1208
1209     .label {
1210         padding: 0.2rem 0.6rem;
1211     }
1212
1213     .cbi-value-title {
1214         width: 15rem;
1215         padding-right: 0.6rem;
1216     }
1217
1218     fieldset {
1219         padding: 1rem;
1220     }
1221
1222     .cbi-input-textarea {
1223         font-size: smaller;
1224     }
1225
1226     .node-status-iptables > .main fieldset li > a {
1227         padding: 0.3rem 0.6rem;
1228     }
1229 }
1230
1231 @media screen and (max-width: 1280px) {
1232     header {
1233         height: 3.5rem;
1234     }
1235
1236     header > .container {
1237         margin-top: 0.25rem;
1238     }
1239
1240     .main {
1241         top: 3.5rem;
1242         height: calc(100% - 3.5rem);
1243     }
1244
1245     .main-left {
1246         width: calc(0% + 13rem);
1247         top: 3.5rem;
1248         height: calc(100% - 3.5rem);
1249     }
1250
1251     .main-right {
1252         width: calc(100% - 13rem);
1253     }
1254
1255     .cbi-tabmenu > li > a, .tabs > li > a {
1256         padding: 0.2rem 0.5rem;
1257     }
1258
1259     .panel-title {
1260         font-size: 1.3rem;
1261         padding-bottom: 1rem;
1262     }
1263
1264     table {
1265         font-size: 0.8rem !important;
1266         width: 100% !important;
1267     }
1268
1269     .main > .main-left > .nav > li,
1270     .main > .main-left > .nav > li a,
1271     .main > .main-left > .nav > .slide > .menu {
1272         font-size: 1.1rem;
1273     }
1274
1275     .main > .main-left > .nav > .slide > .slide-menu > li > a {
1276         font-size: 0.9rem;
1277     }
1278 }
1279
1280 @media screen and (max-width: 992px) {
1281     .main-left {
1282         width: 0;
1283         position: fixed;
1284         z-index: 100;
1285     }
1286
1287     .main-right {
1288         width: 100%;
1289     }
1290
1291     .showSide {
1292         padding: 0.1rem;
1293         margin-right: 0.5rem;
1294         display: inline-block;
1295     }
1296
1297     .showSide:before {
1298         content: "\e20e";
1299         font-size: 1.7rem;
1300     }
1301
1302     .node-main-login .showSide {
1303         display: none !important;
1304     }
1305
1306     .cbi-value-title {
1307         width: 9rem;
1308         padding-right: 1rem;
1309     }
1310
1311     .node-network-diagnostics > .main .cbi-map fieldset > div * {
1312         width: 100% !important;
1313     }
1314
1315     .node-network-diagnostics > .main .cbi-map fieldset > div input[type="text"] {
1316         margin: 3rem 0 0 0 !important;
1317     }
1318
1319     .node-network-diagnostics > .main .cbi-map fieldset > div:nth-child(4) input[type="text"] {
1320         margin: 0 !important;
1321     }
1322
1323     .node-network-diagnostics > .main .cbi-map fieldset > div select,
1324     .node-network-diagnostics > .main .cbi-map fieldset > div input[type="button"] {
1325         margin: 1rem 0 0 0;
1326     }
1327
1328     .node-network-diagnostics > .main .cbi-map fieldset > div {
1329         width: 100% !important;
1330     }
1331
1332     #diag-rc-output > pre {
1333         font-size: 1.2rem;
1334     }
1335
1336     .node-main-login > .main .cbi-value-title {
1337         text-align: left;
1338     }
1339 }
1340
1341 @media screen and (max-width: 480px) {
1342     fieldset {
1343         padding: 1rem;
1344         margin: 1rem 0 0 0;
1345     }
1346
1347     .tabs {
1348         margin: 0 -1rem;
1349     }
1350
1351     #maincontent > .container {
1352         margin: 0 1rem 1.5rem 1rem;
1353     }
1354
1355     .main > .main-left > .nav > .slide > .menu {
1356         font-size: 1.3rem;
1357     }
1358
1359     .main > .main-left > .nav > .slide > .slide-menu > li > a {
1360         font-size: 1.1rem;
1361     }
1362
1363     .cbi-value-title {
1364         width: 100%;
1365         min-width: 0rem !important;
1366         display: block;
1367         margin-top: 1rem;
1368         margin-bottom: 0.5rem;
1369         text-align: left;
1370     }
1371
1372     .cbi-value-field, .cbi-value-description {
1373         width: 100%;
1374     }
1375
1376     .cbi-value > .cbi-value-field {
1377         display: inline-block;
1378     }
1379
1380     .cbi-tabmenu > li, .tabs > li {
1381         padding: 0.6rem 0rem;
1382     }
1383
1384     .cbi-tabmenu > li > a, .tabs > li > a {
1385         padding: 0.2rem 0.3rem;
1386         font-size: 0.9rem;
1387     }
1388
1389     .cbi-page-actions > div > input {
1390         display: none;
1391     }
1392
1393     .node-main-login > .main .container {
1394         padding: 0.5rem 1rem 2rem 1rem;
1395     }
1396
1397     .node-main-login > .main .cbi-value {
1398         padding: 0;
1399     }
1400
1401     .node-main-login > .main form > div:nth-last-child(1) {
1402         margin-top: 2rem;
1403     }
1404
1405     .node-main-login > .main .cbi-value-title {
1406         width: 100% !important;
1407         font-size: 1.2rem;
1408     }
1409
1410     .node-main-login > .main fieldset {
1411         margin: 0;
1412         padding: 0.5rem;
1413     }
1414
1415     h2 {
1416         font-size: 2rem;
1417     }
1418
1419     .tabs > li > a {
1420         font-size: 0.9rem;
1421     }
1422
1423     select,
1424     input {
1425         font-size: 0.9rem;
1426     }
1427
1428     .mobile-hide {
1429         display: none;
1430     }
1431
1432     .panel-title {
1433         font-size: 1.4rem;
1434         padding-bottom: 1rem;
1435     }
1436
1437     .node-system-packages > .main .cbi-value.cbi-value-last > div {
1438         width: 100% !important;
1439     }
1440
1441     .node-system-packages > .main .cbi-value .cbi-value-field input {
1442         width: 100%;
1443     }
1444
1445     .node-status-iptables > .main div > .cbi-map > form {
1446         position: static !important;
1447         margin: 0 0 2rem 0;
1448         padding: 2rem;
1449         border: 0;
1450         font-weight: normal;
1451         font-style: normal;
1452         line-height: 1;
1453         font-family: inherit;
1454         min-width: inherit;
1455         overflow-x: auto;
1456         overflow-y: hidden;
1457         border-radius: 0;
1458         background-color: #FFF;
1459         box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
1460         -webkit-overflow-scrolling: touch;
1461     }
1462
1463     .node-status-iptables > .main div > .cbi-map > form input[type="submit"]{
1464         width: 100% !important;
1465         margin: 0;
1466     }
1467
1468     .node-status-iptables > .main div > .cbi-map > form input[type="submit"] + input[type="submit"]{
1469         margin-top: 1rem;
1470     }
1471 }
1472
1473 @media screen and (min-width: 992px) {
1474     .cbi-value input[type="password"],
1475     .cbi-value input[type="text"] {
1476         min-width: 20rem;
1477     }
1478
1479     .cbi-value-field .cbi-input-select {
1480         min-width: 20rem;
1481     }
1482 }
1483
1484 @media screen and (min-width: 1280px) {
1485     .cbi-value input[type="password"],
1486     .cbi-value input[type="text"] {
1487         min-width: 22rem;
1488     }
1489
1490     .cbi-value-field .cbi-input-select {
1491         min-width: 22rem;
1492     }
1493 }
1494
1495 @media screen and (min-width: 1600px) {
1496     .cbi-value input[type="password"],
1497     .cbi-value input[type="text"] {
1498         min-width: 25rem;
1499     }
1500
1501     .cbi-value-field .cbi-input-select {
1502         min-width: 25rem;
1503     }
1504 }