themes/openwrt: add an AJAX activity indicator toggle to turn refreshes on and off
[project/luci.git] / themes / openwrt / htdocs / luci-static / openwrt.org / cascade.css
1 @charset "utf-8";
2
3 @media all {
4
5 html {
6 min-height: 100%;
7 height: auto;
8 position:relative;
9 }
10
11 body {
12 color: #ffffff;
13 background-color: #4a6b7c;
14 background-position: bottom center;
15 background-repeat: repeat-x;
16 font-family: Verdana, Arial, sans-serif;
17 font-size: 11pt;
18 line-height: 100%;
19 padding-bottom: 1.5em;
20 }
21
22 * {
23 margin: 0;
24 padding: 0;
25 }
26
27 a img {
28 border: none;
29 text-decoration: none;
30 }
31
32 small {
33 white-space: nowrap;
34 }
35
36 ul.tabmenu {
37 margin: 0;
38 clear: both;
39 display: block;
40 vertical-align: bottom;
41 font-size: 10pt;
42 padding: 5px 0 0 5px;
43 }
44
45 div.tabmenu2 {
46 background-color: #AAAAAA;
47 background-image: url(tabbg.png);
48 background-repeat: repeat-x;
49 margin-top: -1px;
50 border: 1px solid #444444;
51 border-bottom: none;
52 }
53
54 div.tabmenu3,
55 div.tabmenu4,
56 div.tabmenu5 {
57 background-color: #AAAAAA;
58 background-image: url(tabbg.png);
59 background-repeat: repeat-x;
60 border: none;
61 }
62
63 ul.tabmenu li {
64 float: left;
65 display: block;
66 overflow: hidden;
67 }
68
69 ul.tabmenu li a {
70 text-decoration: none;
71 color: #444444;
72 display: block;
73 padding: 3px 8px;
74 margin: 0 2px;
75 line-height: 1.3em;
76 border: 1px solid transparent;
77 border-bottom: none;
78 font-size: 85%;
79 }
80
81 ul.tabmenu li.active a {
82 font-weight: bold;
83 color: #000000;
84 background: #f5f5f5;
85 border: 1px solid #AAAAAA;
86 border-bottom: none;
87 }
88
89 ul.tabmenu li a:hover {
90 color: #444444;
91 border-color: #444444;
92 }
93
94 ul.l1 li a {
95 background-color: #AAAAAA;
96 background-image: url(tabbg.png);
97 background-repeat: repeat-x;
98 border-color: #444444;
99 }
100
101 ul.l1 li.tabmenu-item-logout a {
102 margin-left: 30px;
103 }
104
105 abbr,
106 acronym {
107 font-style: normal;
108 font-variant: normal;
109 }
110
111 abbr[title],
112 acronym[title] {
113 border-bottom: 1px dotted;
114 cursor: help;
115 }
116
117 a:link abbr[title],
118 a:visited abbr[title],
119 a:link acronym[title],
120 a:visited acronym[title] {
121 cursor: pointer;
122 }
123
124 code {
125 font-family: monospace;
126 white-space: pre;
127 }
128
129 #maincontent ul {
130 margin-left: 2em;
131 }
132
133 .warning {
134 color: red;
135 background-color: white;
136 font-weight: bold;
137 }
138
139 .clear {
140 clear: both;
141 }
142
143 .skiplink,
144 .navigation,
145 .hidden {
146 position: absolute;
147 left: -1000px;
148 top: -1000px;
149 width: 0px;
150 height: 0px;
151 overflow: hidden;
152 display: inline;
153 }
154
155 .error {
156 color: #ff0000;
157 background-color: white;
158 }
159
160 div.hostinfo {
161 float: left;
162 margin: 0;
163 padding: 0;
164 width: auto;
165 font-size: 80%;
166 padding: 0.5em;
167 }
168
169 #xhr_poll_status {
170 cursor: pointer;
171 }
172
173 #xhr_poll_status #xhr_poll_status_off {
174 font-weight: bold;
175 color: #FF0000;
176 }
177
178 #xhr_poll_status #xhr_poll_status_on {
179 font-weight: bold;
180 color: #00FF00;
181 }
182
183 #menubar {
184 position: relative;
185 width: 100%;
186 background: #000000;
187 color: #ffffff;
188 }
189
190 #menubar .warning {
191 color: red;
192 background-color: #557788;
193 }
194
195 html #menubar a:link,
196 html #menubar a:visited {
197 position: relative;
198 display: block;
199 padding: 0.5em;
200 background: #000000;
201 color: #ffffff;
202 text-decoration: none;
203 font-size: 80%;
204 font-weight: normal;
205 }
206
207
208 html #menubar a:link:hover,
209 html #menubar a:visited:hover,
210 html #menubar a:link:active,
211 html #menubar a:visited:active,
212 #menubar a:link:focus,
213 #menubar a:visited:focus {
214 background: #000000;
215 color: #ffff00;
216 font-weight: bold;
217 }
218
219 html #menubar a:link.active,
220 html #menubar a:visited.active,
221 html #menubar a:link.preactive,
222 html #menubar a:visited.preactive {
223 background: #000000;
224 color: #ffff00;
225 font-weight: bold;
226 }
227
228 html #menubar a:link.warning,
229 html #menubar a:visited.warning {
230 background: #000000;
231 color: red;
232 font-weight: bold;
233 }
234
235 #modemenu {
236 width: auto;
237 background: #000000;
238 color: #ffffff;
239 list-style: none;
240 margin-right: 1px;
241 }
242
243 #modemenu li {
244 float: right;
245 list-style: none;
246 }
247
248 #savemenu {
249 float: right;
250 margin-right: 2em;
251 }
252
253 .lang_de #submenu_admin_uci {
254 width: 12em;
255 }
256
257 .lang_ru #submenu_admin_uci {
258 width: 11.5em;
259 }
260
261 textarea#syslog {
262 width: 98%;
263 min-height: 500px;
264 border: 3px solid #cccccc;
265 padding: 5px;
266 font-family: monospace;
267 }
268
269 #maincontainer {
270 clear: both;
271 width: 96%;
272 margin: 0 auto;
273 height:100%;
274 }
275
276 #maincontent {
277 padding: 0.5em;
278 background: #f5f5f5;
279 color: #000000;
280 font-size: 80%;
281 border-width: 0 1px 1px 1px;
282 border-style: solid;
283 border-color: #444444;
284 }
285
286 #maincontent h2 {
287 font-size: 150%;
288 font-family: Trebuchet MS, Verdana, sans-serif;
289 font-weight: bold;
290 margin: 0.25em 0 0.7em 0;
291 border-bottom: 1px solid;
292 padding-top: 10px;
293 padding-bottom: 4px;
294 }
295
296 #maincontent h3 {
297 margin: 0.5em 0 1.1em 0;
298 font-size: 125%;
299 font-weight: bold;
300 font-style: italic;
301 font-family: Trebuchet MS, Verdana, sans-serif;
302 color: #27408B;
303 }
304
305 #maincontent p {
306 margin-bottom: 1em;
307 }
308
309 .cbi-section {
310 margin-bottom: 0.5em;
311 padding: 0.5em 1em;
312 border: 1px dotted #555555;
313 background-color: #ffffff;
314 color: #000000;
315 }
316
317 .cbi-section legend {
318 font-size: 110%;
319 font-weight: bold;
320 height: 1em;
321 padding: 0 0.25em;
322 background-color: transparent;
323 color: #555555;
324 }
325
326 .cbi-section h2 {
327 margin: 0em 0 0.5em -0.5em !important;
328 }
329
330 .cbi-section h3 {
331 text-decoration: none !important;
332 font-weight: bold !important;
333 color: #555555 !important;
334 margin: 0.25em !important;
335 font-size: 100% !important;
336 }
337
338 .cbi-section-descr {
339 margin-bottom: 0.5em;
340 font-size: 95%;
341 }
342
343 .cbi-title-ref {
344 color: inherit;
345 text-decoration: none;
346 padding-right: 18px;
347 background: url('../resources/cbi/link.gif') no-repeat scroll right center;
348 background-color: inherit;
349 }
350
351 ul.cbi-apply {
352 font-size: 90%;
353 }
354
355 input:-webkit-input-placeholder {
356 color: #AAAAAA;
357 }
358
359 input:-moz-input-placeholder {
360 color: #AAAAAA;
361 }
362
363 input[type=submit],
364 input[type=reset],
365 input[type=image],
366 input[type=button] {
367 cursor: pointer;
368 }
369
370 select,
371 input,
372 textarea {
373 background: #eeeeee;
374 color: #000000;
375 border-width: 1px;
376 border-color: #000000;
377 }
378
379 input[type=image] {
380 border: none;
381 }
382
383 input:focus,
384 input:hover,
385 select:focus,
386 select:hover {
387 background-color: #ffffff;
388 color: #000000;
389 }
390
391 select,
392 input[type=text],
393 input[type=password] {
394 width: 20em;
395 }
396
397 td select,
398 td input[type=text],
399 td input[type=password] {
400 width: 99%;
401 }
402
403 img.cbi-image-button {
404 cursor: pointer;
405 margin: 0 2px;
406 vertical-align: middle;
407 }
408
409 input.cbi-button {
410 background-color: #EEEEEE;
411 background-repeat: no-repeat;
412 background-position: 1px center;
413 border: 1px solid #CCCCCC;
414 border-radius: 3px;
415 }
416
417 input.cbi-button:hover {
418 border-color: #4A6B7C;
419 background-color: #FFFFFF;
420 }
421
422 input.cbi-input-user {
423 background-image: url('../resources/cbi/user.gif');
424 background-repeat: no-repeat;
425 background-position: 1px center;
426 color: #000000;
427 text-indent: 17px;
428 }
429
430 input.cbi-input-password {
431 background-image: url('../resources/cbi/key.gif');
432 background-repeat: no-repeat;
433 background-position: 1px center;
434 color: #000000;
435 text-indent: 17px;
436 }
437
438 input.cbi-input-find {
439 background-image: url('../resources/cbi/find.gif');
440 color: #000000;
441 padding-left: 17px;
442 }
443
444 input.cbi-input-reload {
445 background-image: url('../resources/cbi/reload.gif');
446 color: #000000;
447 padding-left: 17px;
448 }
449
450 input.cbi-input-add,
451 input.cbi-button-add {
452 background-image: url('../resources/cbi/add.gif');
453 color: #000000;
454 padding-left: 17px;
455 padding-right: 1px;
456 }
457
458 input.cbi-input-fieldadd,
459 input.cbi-button-fieldadd {
460 background-image: url(../resources/cbi/fieldadd.gif);
461 color: #000000;
462 padding-left: 17px;
463 padding-right: 1px;
464 }
465
466 input.cbi-input-reset,
467 input.cbi-button-reset {
468 background-image: url('../resources/cbi/reset.gif');
469 color: #000000;
470 padding-left: 17px;
471 padding-right: 1px;
472 }
473
474 input.cbi-input-save,
475 input.cbi-button-save {
476 background-image: url('../resources/cbi/save.gif');
477 color: #000000;
478 padding-left: 17px;
479 padding-right: 1px;
480 }
481
482 input.cbi-input-apply,
483 input.cbi-button-apply {
484 background-image: url('../resources/cbi/apply.gif');
485 color: #000000;
486 padding-left: 17px;
487 padding-right: 1px;
488 }
489
490 input.cbi-input-link,
491 input.cbi-button-link {
492 background-image: url('../resources/cbi/link.gif');
493 color: #000000;
494 padding-left: 17px;
495 padding-right: 1px;
496 }
497
498 input.cbi-input-remove,
499 div.cbi-section-remove input {
500 background-image: url('../resources/cbi/remove.gif');
501 color: #000000;
502 padding-left: 17px;
503 padding-right: 1px;
504 }
505
506 .cbi-input-invalid {
507 background-image: url('../resources/cbi/reset.gif');
508 background-repeat: no-repeat;
509 background-position: right;
510 color: #FF0000 !important;
511 border-color: #FF0000;
512 }
513
514 div.cbi-section-remove input {
515 border-bottom: none;
516 }
517
518 textarea {
519 margin-left: -1px;
520 margin-bottom: 0.5em;
521 }
522
523 form > div > input[type=submit],
524 form > div > input[type=reset] {
525 float: right;
526 margin-left: 0.5em;
527 }
528
529 table td,
530 table th {
531 color: #000000;
532 }
533
534 table.smalltext {
535 background: #f5f5f5;
536 color: #000000;
537 border-top: 1px solid #666666;
538 border-right: 1px solid #666666;
539 border-bottom: 1px solid #666666;
540 font-size: 90%;
541 width: 80%;
542 margin-left: auto;
543 margin-right: auto;
544 border-collapse: collapse;
545 }
546
547 table.smalltext tr:hover td {
548 background-color: #bbddee;
549 color: #000000;
550 }
551
552 table.smalltext tr th {
553 padding: 0 0.25em;
554 border-left: 1px solid #666666;
555 text-align: left;
556 }
557
558 table.smalltext tr td {
559 padding: 0 0.25em;
560 border-top: 1px solid #666666;
561 border-left: 1px solid #666666;
562 }
563
564 table.cbi-section-table .cbi-rowstyle-1 {
565 background-color: #eeeeff;
566 color: #000000;
567 }
568
569 table.cbi-section-table .cbi-rowstyle-1:hover,
570 table.cbi-section-table .cbi-rowstyle-2:hover {
571 background-color: #b2c8d4;
572 color: #000000;
573 }
574
575 .cbi-section .cbi-rowstyle-1 h3 {
576 background-color: #eeeeff;
577 color: #555555;
578 }
579
580 .cbi-rowstyle-2 {
581 color: #000000;
582 }
583
584 div.cbi-value {
585 clear: left;
586 vertical-align: middle;
587 padding: 0.25em 0.6em;
588 border-bottom: 1px dotted #bbbbbb;
589 }
590
591 div.cbi-value:hover {
592 background: #f8f8f8;
593 color: #000000;
594 }
595
596 .cbi-value-title {
597 float: left;
598 width: 40%;
599 line-height: 1.8em;
600 }
601
602 div.cbi-value-field {
603 width: 58%;
604 margin-left: 40%;
605 padding: 0.25em 0;
606 }
607
608 div.cbi-value-description {
609 font-size: 90%;
610 display: inline;
611 }
612
613 div.cbi-section-create {
614 clear: left;
615 white-space: nowrap;
616 vertical-align: top;
617 }
618
619 div.cbi-section-create .cbi-button {
620 margin: 0.25em;
621 }
622
623 input.cbi-section-create-name {
624 margin-right: -0.25em;
625 }
626
627 div.cbi-map-descr {
628 margin-bottom: 1em;
629 }
630
631 div.cbi-optionals {
632 padding: 0.25em;
633 border-bottom: 1px dotted #bbbbbb;
634 }
635
636 div.cbi-section-remove {
637 float: right;
638 }
639
640 .cbi-section-node {
641 clear: both;
642 border: 1px solid #BBBBBB;
643 border-radius: 3px;
644 padding-bottom: 0;
645 position: relative;
646 }
647
648 .cbi-section-node-tabbed {
649 border-top-left-radius: 0;
650 }
651
652 .cbi-section-node .cbi-value-last {
653 border-bottom: none;
654 }
655
656 .cbi-section-node table div {
657 padding-bottom: 0;
658 border-bottom: none;
659 }
660
661 .cbi-section-node div.cbi-section-table-row {
662 margin: 0.25em;
663 }
664
665 table.cbi-section-table {
666 width: 100%;
667 font-size: 95%;
668 }
669
670 table.cbi-section-table th,
671 table.cbi-section-table td {
672 text-align: center;
673 }
674
675 tr.cbi-section-table-descr th {
676 font-weight: normal;
677 font-size: 90%;
678 }
679
680 td.cbi-section-table-optionals {
681 text-align: left !important;
682 padding-top: 1em;
683 }
684
685 .cbi-value-helpicon img {
686 vertical-align: bottom;
687 }
688
689 div.cbi-error {
690 font-size: 95%;
691 font-weight: bold;
692 color: #ff0000;
693 background-color: #ffffff;
694 }
695
696 td.cbi-value-error {
697 border-color: red;
698 }
699
700 .cbi-value-error input,
701 .cbi-value-error select {
702 color: red;
703 background-color: #ffcccc;
704 }
705
706 .cbi-section-error {
707 color: red;
708 background-color: white;
709 font-size: 95%;
710 border: 1px dotted red;
711 margin: 3px;
712 padding: 3px;
713 }
714
715 ul.cbi-tabmenu {
716 padding: 3px 0;
717 margin-left: 0 !important;
718 list-style-type: none;
719 position: relative;
720 z-index: 10;
721 top: 1px;
722 }
723
724 ul.cbi-tabmenu li.cbi-tab,
725 ul.cbi-tabmenu li.cbi-tab-disabled {
726 display: inline;
727 margin: 0;
728 }
729
730 ul.cbi-tabmenu li.cbi-tab a,
731 ul.cbi-tabmenu li.cbi-tab-disabled a {
732 text-decoration: none;
733 padding: 3px 7px;
734 margin-right: 3px;
735 border: 1px solid #BBBBBB;
736 border-bottom: none;
737 border-radius: 3px 3px 0 0;
738 background-color: #EEEEEE;
739 color: #BBBBBB;
740 }
741
742 ul.cbi-tabmenu li.cbi-tab-highlighted a {
743 color: #000000;
744 background-color: #FFEEAA;
745 }
746
747 ul.cbi-tabmenu li a:hover {
748 color: #000000;
749 }
750
751 ul.cbi-tabmenu li.cbi-tab a {
752 padding-top: 4px;
753 color: #000000;
754 background-color: #FFFFFF;
755 }
756
757 div.cbi-tab-descr {
758 background-image: url(/luci-static/resources/cbi/help.gif);
759 background-position: 0.25em 50%;
760 background-repeat: no-repeat;
761 border-bottom: 1px solid #CCCCCC;
762 margin: 0.25em 0.25em 2em;
763 padding: 0.5em 0.5em 0.5em 2em;
764 }
765
766 .right {
767 text-align: right;
768 }
769
770 .luci {
771 position: absolute;
772 bottom: 0;
773 left: 1em;
774 height: 1.5em;
775 font-size: 80%;
776 }
777
778 .luci a:link,
779 .luci a:visited {
780 background-color: transparent;
781 color: #666666;
782 text-decoration: none;
783 font-size: 70%;
784 }
785
786 .inline {
787 display: inline;
788 }
789
790 .error500 {
791 white-space: normal;
792 border: 1px dotted #ff0000;
793 background-color: #ffffff;
794 color: #000000;
795 padding: 0.5em;
796 }
797
798 .errorbox {
799 border: 1px solid #FF0000;
800 background-color: #FFCCCC;
801 padding: 5px;
802 margin-bottom: 5px;
803 }
804
805 .uci-change-list {
806 font-family: monospace;
807 }
808
809 .uci-change-list ins,
810 .uci-change-legend-label ins {
811 text-decoration: none;
812 border: 1px solid #00FF00;
813 background-color: #CCFFCC;
814 display: block;
815 padding: 2px;
816 }
817
818 .uci-change-list del,
819 .uci-change-legend-label del {
820 text-decoration: none;
821 border: 1px solid #FF0000;
822 background-color: #FFCCCC;
823 display: block;
824 font-style: normal;
825 padding: 2px;
826 }
827
828 .uci-change-list var,
829 .uci-change-legend-label var {
830 text-decoration: none;
831 border: 1px solid #CCCCCC;
832 background-color: #EEEEEE;
833 display: block;
834 font-style: normal;
835 padding: 2px;
836 }
837
838 .uci-change-list var ins,
839 .uci-change-list var del {
840 /*display: inline;*/
841 border: none;
842 white-space: pre;
843 font-style: normal;
844 padding: 0px;
845 }
846
847 .uci-change-legend {
848 padding: 5px;
849 }
850
851 .uci-change-legend-label {
852 width: 150px;
853 float: left;
854 font-size: 80%;
855 }
856
857 .uci-change-legend-label>ins,
858 .uci-change-legend-label>del,
859 .uci-change-legend-label>var {
860 float: left;
861 margin-right: 4px;
862 width: 10px;
863 height: 10px;
864 display: block;
865 }
866
867 .uci-change-legend-label var ins,
868 .uci-change-legend-label var del {
869 line-height: 6px;
870 border: none;
871 }
872
873
874 }