tazpanel view styles/default/base.css @ rev 543

base.css: fix header buttons in Firefox etc
author Aleksej Bobylev <al.bobylev@gmail.com>
date Sat Nov 07 02:53:29 2015 +0200 (2015-11-07)
parents 4f619f973b88
children a15373a181ff
line source
1 /**
2 * CSS style for TazPanel - (C) 2011-2015 SliTaz GNU/Linux
3 */
4
5
6 /* To always have a scroll bar */
7 /*html { min-height: 102%; } */
8
9 body { color: CaptionText; font: caption; margin: 72px 0 0 0; }
10
11
12
13 /**
14 * Header and main title
15 */
16
17 body > header {
18 position: fixed; top: 0; left: 0;
19 width: 100%; height: 40px;
20 background-color: #222;
21 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEUXFxciIygUb+JNAAAAEUlEQVQIHWNkYGDMFQYhDAYAJbADCjwbCYUAAAAASUVORK5CYII=');
22 }
23
24 body > header h1 {
25 margin: 0;
26 color: #CCC;
27 font-size: 18px; line-height: 21px;
28 font-weight: 300;
29 white-space: nowrap; overflow: hidden;
30 vertical-align: middle;
31 }
32
33 body > header div {
34 position: absolute; left: 40px; top: 21px;
35 color: #FFF; background: transparent;
36 font-size: 14px; line-height: 19px;
37 font-weight: 300;
38 white-space: nowrap; overflow: hidden;
39 vertical-align: middle;
40 }
41
42
43 /**
44 * Toolbar with menu
45 */
46
47 nav {
48 position: fixed; top: 40px; left: 0;
49 width: 100%;
50 display: table;
51 border: 1px solid; border-right: none; border-left: none;
52 }
53
54
55
56 /* menu panel */
57 #toolbarMenu { margin: 0; padding: 0; height: 100%; font: menu; }
58
59 /* shadows */
60 #toolbar { z-index: 10; box-shadow: 0 0 8px #000; }
61 menu.opened, menu.opened li:hover menu { z-index: 9; box-shadow: 2px 2px 8px hsla(0, 0%, 0%, 0.3); }
62
63 /* menu items */
64 #toolbarMenu li {
65 list-style: none;
66 float: left;
67 display: block;
68 padding: 0;
69 color: inherit; background: inherit;
70 outline: none;
71 }
72 #toolbarMenu > li > span {
73 display: inline-block;
74 padding: 0.2rem;
75 cursor: pointer;
76 }
77
78 #toolbarMenu menu li a {
79 padding: 0.2rem;
80 }
81
82 /* Selected menu item */
83 #toolbarMenu li:focus span,
84 #toolbarMenu li:hover span,
85 #toolbarMenu menu li:focus,
86 .user #toolbarMenu menu li:hover > a:not([data-root]),
87 .root #toolbarMenu menu li:hover {
88 background-color: hsla(30, 100%, 50%, 0.5);
89 }
90
91
92
93
94 #toolbarMenu menu {
95 position: absolute;
96 margin: 0; padding: 0;
97 white-space: nowrap;
98 border: 1px solid;
99 display: none;
100 }
101
102 /* Submenus */
103 #toolbarMenu menu menu {
104 left: 100%; top: 0;
105 min-width: 100%;
106 }
107
108 /* Show menu list */
109 #toolbarMenu menu.opened {
110 display: block; z-index: 10;
111 }
112
113 /* By default hide submenus */
114 #toolbarMenu menu.opened menu {
115 display: none;
116 }
117 /* Show submenu on mouse over */
118 .opened li:hover menu { display: block !important; }
119
120 /* Menu items one below the other */
121 #toolbarMenu menu li {
122 position: relative;
123 float: none;
124 }
125 /* Show arrow for submenu */
126 #toolbarMenu a:after { content: "‣"; float: right; }
127 #toolbarMenu a:only-child:after { content: " "; }
128
129 #toolbarMenu a { display: block; color: inherit; text-decoration: none; }
130
131 /* Clicking this layer close menu */
132 #noMenu {
133 position: absolute; top: 63px; bottom: 0; left: 0; right: 0;
134 background-color: transparent;
135 display: none;
136 z-index: 9;
137 }
138
139
140 /**
141 * Panes, sections
142 */
143
144 section {
145 display: block;
146 border: 1pt solid; border-radius: 0.3rem;
147 padding: 0; margin: 0.5rem 0 0 0;
148 }
149
150 section header {
151 padding: 0.2rem 0.3rem; margin: 0;
152 display: table; width: 100%;
153 border-radius: 0.3rem 0.3rem 0 0;
154 font-weight: bold; font-size: 1.1rem;/* line-height: 0;*/
155 text-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.2);
156 overflow: auto; /* provide break after floated objects */
157 vertical-align: baseline;
158 box-sizing: border-box;
159 }
160 section header form, section footer form {
161 display: table-cell; vertical-align: baseline; line-height: 0; width: 1px; white-space: nowrap;
162 }
163 section header button, section header input, section footer button, section footer input { margin: 0; }
164
165 section header a { float: right; }
166
167 section footer {
168 padding: 0 0.3rem 0.2rem; margin: 0;
169 display: block;
170 overflow: auto; /* provide break after floated objects */
171 vertical-align: baseline;
172 }
173
174 section > pre,
175 section div { padding: 0.3rem 0.3rem 0.2rem 0.3rem; margin: 0; }
176 section td:nth-child(1) { padding-left: 0.3rem; }
177 section table { margin-bottom: 0.3rem; }
178 .nogap { word-spacing: 0; } /* remove gap between buttons in line */
179
180 .scroll { max-height: 12rem; overflow: auto; }
181 section .scroll { padding: 0; margin: 0; border: 1pt solid; }
182 section pre.scroll { margin: 0.1rem; padding: 0.1rem; }
183
184
185
186
187
188
189
190
191 #actions {
192 display: block;
193 margin: 0; padding: 0.2rem 0.3rem;
194 overflow: auto; /* provide break after floated objects */
195 }
196 .float-left, .float-right { display: table-cell; padding: 0; margin: 0; }
197 .float-left { float: left; }
198 .float-right { float: right; }
199
200
201
202 fieldset { border: 1pt solid; border-radius: 0.3rem; margin-bottom: 0.2rem; }
203 fieldset[disabled] { background-color: hsla(0, 0%, 50%, 0.1);}
204
205
206
207
208
209 /* Icons on the right of the toolbar */
210 #icons {
211 display: table-cell; vertical-align: middle; /* center vertical */
212 padding: 0.1rem 0.3rem;
213 white-space: nowrap; width: 1rem; /* minimal width */
214 }
215
216
217
218 /* Loading notification bar */
219 #loading {
220 position: fixed; top: 76px; right: 140px; width: 248px;
221 padding: 4px 4px 2px;
222 background-color: #f8f8f8; color: #666;
223 border: 1px solid #ddd;
224 cursor: progress;
225 }
226
227
228
229 /* Page content container */
230 #content { margin: 0; padding: 1ex; }
231
232
233 /* Page first header */
234 h2 { font-size: 1.5rem; height: 1.5rem; padding: 0; margin: 0; }
235
236
237 /* Additional headers (obsolete) */
238 h3 { font-size: 1.3rem; margin: 0; }
239 h4 { font-size: 1.1rem; margin: 0; }
240
241
242 /* Plain paragraph */
243 p { margin: 0.5ex 0; }
244
245
246 #actions p { margin: 6px 0; }
247
248
249
250
251
252 button img { padding: 0 3px 0 0; margin: 0; }
253 button, input, select {
254 /*color: ButtonText;*/
255 vertical-align: middle; }
256 button:before, input:before, select:before {
257 padding: 3px; }
258
259 ul { list-style-type: square; }
260 li { padding: 4px 0; }
261
262
263 /* Blocks */
264
265 #block { float: left; }
266
267 #wrapper, .wrapper { margin: 20px 0; }
268
269 .box {
270 display: table;
271 padding: 1em;
272 width: 50%; margin: 0.5em auto;
273 }
274 .box span { display: inline-block; margin-right: 0.5rem; float: left; }
275
276 .box ul { list-style-type: none; padding: 0; }
277
278 .debug {
279 position: fixed;
280 bottom: 0px;
281 right: 10px;
282 left: 10px;
283 margin: 5px;
284 padding: 4px 10px;
285 background-color: #111;
286 color: #fff;
287 border: 0;
288 /*font-size: 12px;*/
289 opacity: 0.9;
290 }
291
292
293
294
295 /**********
296 * Tables *
297 **********/
298
299 /* Base style */
300 table { margin: 0; padding: 0; border: 0 none; border-collapse: collapse; }
301
302 /* Bold header */
303 thead { font-weight: bold; }
304
305 /* Wide table */
306 .wide { width: 100%; }
307
308 /* Center content excluding first column */
309 .center tr td { text-align: center; }
310 .center tr td:nth-child(1) { text-align: left; padding-left: 0.3rem; }
311
312 /* Table Zebra */
313 .zebra thead td { line-height: 1.5em; text-align: center; vertical-align: middle; border: 1pt solid; }
314
315
316
317 .borders.zebra td + td { border-left: 1px solid; }
318
319
320
321 .outbox { box-shadow: 0 0 2px 4px #ddd; }
322 .fixed { table-layout: fixed; }
323
324
325 .borders tr { border-bottom: 1pt solid; }
326
327 .hborders thead tr { border-top: 1.5pt solid; border-bottom: 1.5pt solid; }
328
329 td.small { min-width: 60px; }
330 td.pct { min-width: 200px; background: #eee; }
331 div.pct { background: #ccc; }
332 td.pct, div.pct { border-radius: 2px; }
333 td img {vertical-align: middle; }
334
335 table.daemons td:nth-child(4), table.daemons td:nth-child(5) { text-align: center; }
336
337
338
339
340
341 /**
342 * Misc
343 */
344
345 /* Links */
346
347 a { text-decoration: none; color: #268bd2; cursor: pointer; }
348 a:not([data-img]):hover { text-decoration: underline; }
349
350
351 form { display: inline-block; padding: 0; margin: 0; }
352
353 pre { margin: 0; padding: 0; color: CaptionText; }
354
355 .pre-main { margin: 16px 0; }
356 .pre-wrap { white-space: pre-wrap; }
357
358
359
360 /* Round corner */
361
362 #loading, .debug, .box, .outbox, section {
363 -moz-border-radius: 4px;
364 -webkit-border-radius: 4px;
365 border-radius: 4px;
366 }
367
368 /* Help page */
369
370 #help { text-align: justify; }
371 #help a { text-decoration: underline; }
372 #help a:hover { text-decoration: none; }
373
374
375
376 /*
377 * Page footer
378 */
379
380 body > footer {
381 border-top: 1px solid;
382 text-align: center;
383 height: 19px; margin: 0; padding: 0;
384 line-height: 16px; vertical-align: middle;
385 z-index: 10;
386 overflow: hidden;
387 }
388 #defaultStatus, #statusBar { font-size: smaller; vertical-align: middle; }
389
390 #content { z-index: 5; }
391
392 #ajaxStatus {
393 position: absolute; right: 0; top: -4px;
394 display: inline-block;
395 font-size: 16px!important; line-height: 16px!important; vertical-align: middle;
396 padding: 0; margin: 0;
397 height: 16px;
398 }
399
400 /***************
401 * HTML5 Meter *
402 ***************/
403
404 .meter {
405 height: 1.2rem;
406 min-width: 150px;
407 color: #222;
408 /*cursor: default;*/
409 }
410 .meter meter {
411 height: inherit;
412 width: 100%;
413 display: block;
414 border: 1px solid #ddd;
415 border-radius: 4px;
416 }
417 .meter span {
418 display: block;
419 white-space: nowrap;
420 position: absolute;
421 margin: -1.1rem auto 0 0.3rem;
422 }
423
424
425
426 /**************
427 * Animations *
428 **************/
429
430 a.button {
431 -webkit-transition: all 0.3s ease-in-out;
432 -moz-transition: all 0.3s ease-in-out;
433 -o-transition: all 0.3s ease-in-out;
434 -ms-transition: all 0.3s ease-in-out;
435 transition: all 0.3s ease-in-out;
436 }
437
438 /*section {
439 margin: 20pt -0.7em;
440 padding: 0.8em 0.7em 1.2em;
441 background-color: #fdfdfd;
442 border: 1px solid #ddd;
443 border-radius: 1em;
444 box-shadow: 0 0 3pt 2pt #eee;
445 }
446 section h4 {
447 margin: 0 0 0.5em 0;
448 }
449 section h3 {
450 margin: 0 0 0.5em 0; }
451 */
452
453 #tabs {
454 font-weight: bold;
455 /*font-size: 14px;*/
456 list-style-type: none;
457 padding-bottom: 25px;
458 border-bottom: 1px solid #aaa;
459 }
460
461 #tabs li {
462 float: left;
463 height: 16px;
464 background-color: #eee;
465 margin: 0 40px 0 -40px;
466 border: 1px solid #aaa;
467 text-align: center;
468 min-width: 100px;
469 -webkit-border-radius: 4px 4px 0 0;
470 -moz-border-radius: 4px 4px 0 0;
471 border-radius: 4px 4px 0 0;
472 -webkit-appearance: tab;
473 appearance: tab;
474 }
475
476 #tabs li.active {
477 border-bottom: 1px solid #fff;
478 background-color: #fff;
479 }
480
481 #tabs a {
482 padding: 8px;
483 }
484
485
486
487 /****************
488 * Search block *
489 ****************/
490 .search {
491 display: block; white-space: nowrap;
492 position: fixed; right: 7px; top: 7px;
493 margin: 0; padding: 0; border: none;
494 }
495 .search input {
496 display: inline-block;
497 width: 200px; height: 24px;
498 }
499 .search button {
500 -webkit-appearance: button;
501 height: 100%; margin: 0;
502 }
503
504
505
506 /**********************
507 * Buttons with icons *
508 **********************/
509 @font-face {
510 font-family: TazPanelWeb;
511 src: url('/styles/default/tazpanel.ttf');
512 }
513
514 [data-icon]:before, [data-img] {
515 vertical-align: baseline;
516 padding: 0;
517 margin: 0 /*0 0 -0.5em*/;
518 font-size: 1.2em;
519 font-family: TazPanel, TazPanelWeb;
520
521 font-style: normal;
522 font-weight: normal;
523 font-variant: normal;
524 text-transform: none;
525 line-height: 1.2em;
526 display: inline-block;
527 text-decoration: none;
528 width: 1.2em; text-align: center;
529
530 -webkit-font-feature-settings: "liga", "dlig";
531 -moz-font-feature-settings: "liga=1, dlig=1";
532 -o-font-feature-settings: "liga", "dlig";
533 font-feature-settings: "liga", "dlig";
534
535 -webkit-text-rendering: optimizeLegibility;
536 -moz-text-rendering: optimizeLegibility;
537 -o-text-rendering: optimizeLegibility;
538 text-rendering: optimizeLegibility;
539
540 -webkit-font-smoothing: antialiased;
541 -moz-font-smoothing: antialiased;
542 -o-font-smoothing: antialiased;
543 font-smoothing: antialiased;
544 }
545 button[data-icon]::before { font-size: 16px; line-height: 16px; width: 16px; }
546
547 [data-icon]::before { content: attr(data-icon); }
548 [data-img]::before { content: attr(data-img); }
549
550 [data-icon], [data-img] { display: inline-block; }
551
552
553 /* Solarized:
554 red #dc322f
555 orange #cb4b16
556 yellow #b58900
557 green #859900
558 cyan #2aa198
559 blue #268bd2
560 magenta #d33682
561 */
562
563
564 [data-icon="tazpanel"]::before {
565 display: inline-block;
566 content: '\f151';
567 border: 1pt solid; border-radius: 0.2rem;
568 font-size: 32px; line-height: 32px;
569
570 height: 32px; width: 32px;
571 margin: 0.2rem;
572 padding: 0;
573 vertical-align: top;
574 }
575
576 [data-icon^=msg]::before { height: 32px; width: 32px; font-size: 32px; line-height: 32px; }
577
578
579 /*******************
580 * Terminal colors *
581 *******************/
582
583 /* Using color palettes from Sakura terminal source */
584
585 .term {
586 padding: 0.3rem;
587 height: 24rem; max-height: 24rem;
588 white-space: pre-wrap;
589 overflow: auto;
590 z-index: 4;
591 background: transparent;
592 }
593
594 /* SliTaz Spider on background */
595 /*.term_ { display: block; position: relative; z-index: 2; }
596 .term_::after {
597 display: block; border: 1pt solid;
598 font-family: TazPanel;
599 font-size: 16rem;
600 position: absolute; right: 0; bottom: 0;
601 content: '\f13f';
602 opacity: 1;
603 color: orange;
604 z-index: 1;
605 }*/
606
607 .term.log { white-space: pre; }
608 /*.term input[type="text"] {
609 width: 100%!important; padding: 0; margin: 0; vertical-align: middle;
610 -webkit-appearance: none!important; -moz-appearance: none; appearance: none;
611 display: inline;
612 background-color: transparent; color: inherit; border: none; outline: none;
613 font: inherit; line-height: 1rem;
614 }*/
615 .term .cmdline {
616 /*position: relative; float: left; display: inline-block; white-space: pre-wrap;
617 width: 100%; overflow: hidden; left: 0;
618 vertical-align: middle;*/
619 padding: 0;
620 }
621 #typeField {
622 outline-style: none !important;
623 -webkit-user-modify: read-write;
624 word-wrap: break-word;
625 -webkit-nbsp-mode: space;
626 -webkit-line-break: after-white-space;
627 }
628 #num_hist {
629 display: inline-block;
630 position: absolute; right: 0.5rem; float: right;
631 height: 0;
632 color: #FFF; background: #FFF;
633 }
634
635 /* Tango palette (default) */
636 .color30{color:#2E3436} .color1.color30{color:#555753} .color40{background:#2E3436}
637 .color31{color:#CC0000} .color1.color31{color:#EF2929} .color41{background:#CC0000}
638 .color32{color:#4E9A06} .color1.color32{color:#8AE234} .color42{background:#4E9A06}
639 .color33{color:#C4A000} .color1.color33{color:#FCE94F} .color43{background:#C4A000}
640 .color34{color:#3465A4} .color1.color34{color:#729FCF} .color44{background:#3465A4}
641 .color35{color:#75507B} .color1.color35{color:#AD7FA8} .color45{background:#75507B}
642 .color36{color:#06989A} .color1.color36{color:#34E2E2} .color46{background:#06989A}
643 .color37{color:#D3D7CF} .color1.color37{color:#EEEEEC} .color47{background:#D3D7CF}
644 .term {color:#D3D7CF; background:#2E3436}
645
646 /* Linux palette */
647 .linux .color30{color:#000} .linux .color1.color30{color:#555} .linux .color40{background:#000}
648 .linux .color31{color:#A00} .linux .color1.color31{color:#F55} .linux .color41{background:#A00}
649 .linux .color32{color:#0A0} .linux .color1.color32{color:#5F5} .linux .color42{background:#0A0}
650 .linux .color33{color:#A50} .linux .color1.color33{color:#FF5} .linux .color43{background:#A50}
651 .linux .color34{color:#00A} .linux .color1.color34{color:#55F} .linux .color44{background:#00A}
652 .linux .color35{color:#A0A} .linux .color1.color35{color:#F5F} .linux .color45{background:#A0A}
653 .linux .color36{color:#0AA} .linux .color1.color36{color:#5FF} .linux .color46{background:#0AA}
654 .linux .color37{color:#AAA} .linux .color1.color37{color:#FFF} .linux .color47{background:#AAA}
655 .linux.term {color:#AAA; background:#000}
656
657 /* Xterm palette */
658 .xterm .color30{color:#000000} .xterm .color1.color30{color:#4C4C4C} .xterm .color40{background:#000000}
659 .xterm .color31{color:#CD0000} .xterm .color1.color31{color:#FF0000} .xterm .color41{background:#CD0000}
660 .xterm .color32{color:#00CD00} .xterm .color1.color32{color:#00FFFF} .xterm .color42{background:#00CD00}
661 .xterm .color33{color:#CDCD00} .xterm .color1.color33{color:#FFFF00} .xterm .color43{background:#CDCD00}
662 .xterm .color34{color:#1E90FF} .xterm .color1.color34{color:#4682B4} .xterm .color44{background:#1E90FF}
663 .xterm .color35{color:#CD00CD} .xterm .color1.color35{color:#FF00FF} .xterm .color45{background:#CD00CD}
664 .xterm .color36{color:#00CDCD} .xterm .color1.color36{color:#00FFFF} .xterm .color46{background:#00CDCD}
665 .xterm .color37{color:#E5E5E5} .xterm .color1.color37{color:#FFFFFF} .xterm .color47{background:#E5E5E5}
666 .xterm.term {color:#E5E5E5; background:#000000}
667
668 /* Rxvt palette */
669 .rxvt .color30{color:#000000} .rxvt .color1.color30{color:#404040} .rxvt .color40{background:#000000}
670 .rxvt .color31{color:#CD0000} .rxvt .color1.color31{color:#FF0000} .rxvt .color41{background:#CD0000}
671 .rxvt .color32{color:#00CD00} .rxvt .color1.color32{color:#00FFFF} .rxvt .color42{background:#00CD00}
672 .rxvt .color33{color:#CDCD00} .rxvt .color1.color33{color:#FFFF00} .rxvt .color43{background:#CDCD00}
673 .rxvt .color34{color:#0000CD} .rxvt .color1.color34{color:#0000FF} .rxvt .color44{background:#0000CD}
674 .rxvt .color35{color:#CD00CD} .rxvt .color1.color35{color:#FF00FF} .rxvt .color45{background:#CD00CD}
675 .rxvt .color36{color:#00CDCD} .rxvt .color1.color36{color:#00FFFF} .rxvt .color46{background:#00CDCD}
676 .rxvt .color37{color:#FAEBD7} .rxvt .color1.color37{color:#FFFFFF} .rxvt .color47{background:#FAEBD7}
677 .rxvt.term {color:#FAEBD7; background:#000000}
678
679 /* Echo palette (http://mso-chronicles.blogspot.com/2013/02/xfce-terminal-and-xchat-colour-scheme.html) */
680 .echo .color30{color:#000000} .echo .color1.color30{color:#5E5E5E} .echo .color40{background:#000000}
681 .echo .color31{color:#B40000} .echo .color1.color31{color:#FF5200} .echo .color41{background:#B40000}
682 .echo .color32{color:#00AA00} .echo .color1.color32{color:#93DA00} .echo .color42{background:#00AA00}
683 .echo .color33{color:#CB7C00} .echo .color1.color33{color:#FFE139} .echo .color43{background:#CB7C00}
684 .echo .color34{color:#003F68} .echo .color1.color34{color:#0073A2} .echo .color44{background:#003F68}
685 .echo .color35{color:#BF00EF} .echo .color1.color35{color:#DB81FF} .echo .color45{background:#BF00EF}
686 .echo .color36{color:#00A6D0} .echo .color1.color36{color:#81E3FF} .echo .color46{background:#00A6D0}
687 .echo .color37{color:#C6C6C6} .echo .color1.color37{color:#FFFFFF} .echo .color47{background:#C6C6C6}
688 .echo.term {color:#C6C6C6; background:#000000}
689
690 .color1 { font-weight: bold; }
691
692 /* History table for terminal */
693 .history { width: 100%; }
694 .history td:nth-child(1), .history td:nth-child(2), .history td:nth-child(3) {
695 white-space: nowrap;
696 width: 1px;
697 }
698
699
700
701 /**********
702 * Inputs *
703 **********/
704
705 /*:default { outline: 1px dotted hsla(240, 100%, 50%, 0.5); outline-offset: -4px; }*/
706 :required { outline: 1px solid hsla( 30, 100%, 50%, 0.7); outline-offset: -3px; }
707 :invalid { outline: 2px solid hsla( 0, 100%, 50%, 0.7); outline-offset: -3px; }
708
709
710 /* HACK for Tazweb (as clean Webkit browser): remove 1px white border around textfield */
711 input[type="text"], input[type="password"], input[type="number"], textarea { -webkit-appearance: searchfield; }
712
713 textarea { display: block; color: CaptionText; font-family: monospace; box-sizing: border-box; }
714
715
716
717
718
719 /***********************
720 * System memory gauge *
721 ***********************/
722
723 .sysmem {
724 margin: 0.2rem; padding: 0;
725 border: 1pt solid;
726 border-radius: 0.2rem;
727 box-shadow: inset 0 0 0 1pt hsla(0, 0%, 100%, 0.05);
728 width: 100%; margin: 0; padding: 0;
729 }
730
731 .sysmem_used, .sysmem_buff, .sysmem_free {
732 display: inline-block;
733 padding: 0.2rem 0; margin: 0;
734 height: 120%;
735 text-align: center; vertical-align: middle;
736 text-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.5);
737 text-align: center;
738 }
739
740 .sysmem_used {
741 background-color: #f28f68;
742 background-image: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0.25), hsla(0, 0%, 0%, 0.2));
743 border-radius: 0.2rem 0 0 0.2rem;
744 }
745 .sysmem_buff {
746 background-color: #f28f68;
747 background-image:
748 -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0.25), hsla(0, 0%, 0%, 0.2)),
749 -webkit-linear-gradient(135deg,
750 transparent, transparent 25%,
751 #719fd1 25%, #719fd1 50%,
752 transparent 50%, transparent 75%,
753 #719fd1 75%);
754 background-size: 100% 100%;
755 }
756 .sysmem_free {
757 background-color: #719fd1;
758 background-image: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0.25), hsla(0, 0%, 0%, 0.2));
759 border-radius: 0 0.2rem 0.2rem 0;
760 }
761
762
763
764 /* Disable some links to root actions */
765 button:not([disabled]) { cursor: pointer; }
766 .user [data-root] { pointer-events: none; cursor: default !important; }
767
768
769 html,body { height: 100%; width: 100%; margin: 0; padding: 0; }
770 body > header { position: absolute; top: 0; }
771 body > footer { position: absolute; bottom: 0; left: 0; right: 0; }
772 #content, #content-sidebar {
773 position: absolute; top: 63px; bottom: 20px; left: 0; right: 0;
774 overflow-y: auto; overflow-x: hidden;
775 }
776
777 .bigNoScrollable { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; }
778 section.bigNoScrollable { margin: 0.5rem; }
779
780 .bigScrollable { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: auto; }
781 #fileContent.bigScrollable { margin: 0.2rem; top: 2.5rem; }
782
783 section section { margin: 0.2rem; }
784
785
786 /* Styles for network.cgi: Wi-Fi sub-page */
787
788 #connection input[type="text"], #connection input[type="password"] { width: 14rem; }
789 #connection select { width: 14.4rem; }
790
791 #connection td { padding: 0; margin: 0; }
792 #connection [class] div {
793 max-height: 0; overflow: hidden; padding: 0; margin: 0;
794 -webkit-transition: all 0.5s ease-in-out;
795 -moz-transition: all 0.5s ease-in-out;
796 transition: all 0.5s ease-in-out;
797 }
798 .wep .wep div, .wpa .wpa div, .eap .eap div,
799 .eap.peap .eap1 div, .eap.tls .eap1 div, .eap.ttls .eap1 div {
800 max-height: 2em !important;
801 }
802
803 #shader {
804 z-index: 100;
805 position: fixed; top: 0; left: 0; width: 100%; height: 100%;
806 background-color: #000;
807 opacity: 0.6;
808 }
809 #shader.hidden {
810 display: none;
811 opacity: 0;
812 }
813
814 #popup_qr {
815 z-index: 101;
816 position: fixed;
817 width: 100%;
818 bottom: 2em;
819 transition: all 0.5s;
820 -webkit-transition: all 0.5s;
821 -webkit-transition-delay: 0.3s;
822 }
823 #popup_qr_inner {
824 display: inline-block;
825 text-align: center;
826 margin: 0.5em;
827 background: #fff; color: #222;
828 border: 0.16em solid ; border-radius: 0.5em;
829
830 padding: 0.5em;
831 }
832 #popup_qr.hidden {bottom: -30em; }
833
834 #qrimg { margin: 3em 1.5em 2em 3em; }
835
836 /* END: Styles for network.cgi: Wi-Fi sub-page */
837