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