tazpanel view styles/default/base.css @ rev 419
Bunch of changes. Development in progress, please note it have few known bugs.
| author | Aleksej Bobylev <al.bobylev@gmail.com> |
|---|---|
| date | Tue Mar 24 03:39:08 2015 +0200 (2015-03-24) |
| parents | |
| children | 7488b357abd3 |
line source
1 /**
2 * CSS style for TazPanel - (C) 2011-2015 SliTaz GNU/Linux
3 */
6 /* To always have a scroll bar */
7 /*html { min-height: 102%; } */
9 body { color: CaptionText; font: caption; margin: 72px 0 0 0; }
13 /**
14 * Header and main title
15 */
17 body > header {
18 position: fixed; top: 0; left: 0;
19 /*height: 40px;*/ width: 100%;
20 /*background: #222 url(images/logo.png) no-repeat left; padding-left: 40px;*/
21 background-color: #222;
22 }
24 body > header h1 {
25 margin: 0;
26 color: #fff;
27 font-size: 20px; line-height: 40px; /* center vertical */
28 font-style: italic;
29 white-space: nowrap; overflow: hidden;
30 vertical-align: middle;
31 }
35 /**
36 * Toolbar with menu
37 */
39 nav {
40 position: fixed; top: 40px; left: 0;
41 width: 100%;
42 display: table;
43 border: 1px solid; border-right: none; border-left: none;
44 }
48 /* menu panel */
49 #toolbarMenu { margin: 0; padding: 0; height: 100%; font: menu; }
51 /* menu items */
52 #toolbarMenu li {
53 list-style: none;
54 float: left;
55 display: block;
56 padding: 0;
57 color: inherit; background: inherit;
58 cursor: pointer;
59 outline: none;
60 }
61 #toolbarMenu > li > span {
62 display: inline-block;
63 padding: 0.2rem;
64 }
66 #toolbarMenu menu li {
67 padding: 0.2rem;
68 }
70 /* Selected menu item */
71 #toolbarMenu li:focus span,
72 #toolbarMenu li:hover span,
73 #toolbarMenu menu li:focus,
74 #toolbarMenu menu li:hover {
75 background-color: hsla(30, 100%, 50%, 0.5);
76 }
81 #toolbarMenu menu {
82 position: absolute;
83 margin: 0; padding: 0;
84 white-space: nowrap;
85 border: 1px solid;
86 display: none;
87 }
89 /* Submenus */
90 #toolbarMenu menu menu {
91 left: 100%; top: 0;
92 min-width: 100%;
93 }
95 /* Show menu list */
96 #toolbarMenu menu.opened {
97 display: block; z-index: 10;
98 }
100 /* By default hide submenus */
101 #toolbarMenu menu.opened menu {
102 display: none;
103 }
104 /* Show submenu on mouse over */
105 .opened li:hover menu { display: block !important; }
107 /* Menu items one below the other */
108 #toolbarMenu menu li {
109 position: relative;
110 float: none;
111 }
112 /* Show arrow for submenu */
113 #toolbarMenu a:after { content: "‣"; float: right; }
114 #toolbarMenu a:only-child:after { content: " "; }
116 #toolbarMenu a { display: block; color: inherit; text-decoration: none; }
118 #noMenu {
119 position: fixed;
120 background-color: transparent; /*hsla(40, 100%, 60%, 0.5);*/
121 display: none;
122 height: 100%; width: 100%;
123 }
126 /**
127 * Panes, sections
128 */
130 section {
131 display: block;
132 border: 1pt solid; border-radius: 0.3rem;
133 padding: 0; margin: 0.5rem 0 0 0;
134 }
136 section header {
137 padding: 0.2rem 0.3rem; margin: 0;
138 display: table; width: 100%;
139 border-radius: 0.3rem 0.3rem 0 0;
140 font-weight: bold; font-size: 1.1rem;/* line-height: 0;*/
141 text-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.5);
142 overflow: auto; /* provide break after floated objects */
143 vertical-align: baseline;
144 }
145 section header form, section footer form {
146 display: table-cell; vertical-align: baseline; line-height: 0; width: 1px; white-space: nowrap;
147 }
148 section header button, section footer button { margin: 0; }
150 section footer {
151 padding: 0 0.3rem 0.2rem; margin: 0;
152 display: block;
153 overflow: auto; /* provide break after floated objects */
154 vertical-align: baseline;
155 }
157 section > pre,
158 section div { padding: 0.3rem 0.3rem 0.2rem 0.3rem; margin: 0; }
159 section td:nth-child(1) { padding-left: 0.3rem; }
160 section table { margin-bottom: 0.3rem; }
161 .nogap { word-spacing: 0; } /* remove gap between buttons in line */
172 #actions {
173 display: block;
174 margin: 0; padding: 0.2rem 0.3rem;
175 overflow: auto; /* provide break after floated objects */
176 }
177 .float-left, .float-right { display: table-cell; padding: 0; margin: 0; }
178 .float-left { float: left; }
179 .float-right { float: right; }
183 fieldset { border: 1pt solid; border-radius: 0.3rem; margin-bottom: 0.2rem; }
190 /* Icons on the right of the toolbar */
191 #icons {
192 display: table-cell; vertical-align: middle; /* center vertical */
193 padding: 0.1rem 0.3rem;
194 white-space: nowrap; width: 1rem; /* minimal width */
195 }
196 #icons img { vertical-align: middle; }
200 /* Loading notification bar */
201 #loading {
202 position: fixed; top: 76px; right: 140px; width: 248px;
203 padding: 4px 4px 2px;
204 background-color: #f8f8f8; color: #666;
205 border: 1px solid #ddd;
206 cursor: progress;
207 }
211 /* Page content container */
212 #content { margin: 1ex; }
215 /* Page first header */
216 h2 { font-size: 1.5rem; padding: 0.5rem 0 0 0; margin: 0; }
219 /* Additional headers (obsolete) */
220 h3 { font-size: 1.3rem; margin: 0; }
221 h4 { font-size: 1.1rem; margin: 0; }
224 /* Plain paragraph */
225 p { margin: 1ex 0; }
228 #actions p { margin: 6px 0; }
234 button img { padding: 0 3px 0 0; margin: 0; }
235 button, input, select {
236 /*color: ButtonText;*/
237 vertical-align: middle; }
238 button:before, input:before, select:before {
239 padding: 3px; }
241 ul { list-style-type: square; }
242 li { padding: 4px 0; }
245 /* Blocks */
247 #block { float: left; }
249 #wrapper, .wrapper { margin: 20px 0; }
251 .box {
252 margin: 10px 0;
253 padding: 12px;
254 background: #f8f8f8;
255 border: 1px solid #ddd;
256 }
258 .box ul { list-style-type: none; padding: 0; }
260 .debug {
261 position: fixed;
262 bottom: 0px;
263 right: 10px;
264 left: 10px;
265 margin: 5px;
266 padding: 4px 10px;
267 background-color: #111;
268 color: #fff;
269 border: 0;
270 /*font-size: 12px;*/
271 opacity: 0.9;
272 }
277 /**********
278 * Tables *
279 **********/
281 /* Base style */
282 table { margin: 0; padding: 0; border: 0 none; border-collapse: collapse; }
284 /* Bold header */
285 thead { font-weight: bold; }
287 /* Wide table */
288 .wide { width: 100%; }
290 /* Center content excluding first column */
291 .center tr td { text-align: center; }
292 .center tr td:nth-child(1) { text-align: left; padding-left: 0.3rem; }
294 /* Table Zebra */
295 .zebra thead td { line-height: 1.5em; text-align: center; vertical-align: middle; border: 1pt solid; }
299 .borders.zebra td + td { border-left: 1px solid; }
303 .outbox { box-shadow: 0 0 2px 4px #ddd; }
304 .fixed { table-layout: fixed; }
307 .borders tr { border-bottom: 1pt solid; }
309 .hborders thead tr { border-top: 1.5pt solid; border-bottom: 1.5pt solid; }
311 td.small { min-width: 60px; }
312 td.pct { min-width: 200px; background: #eee; }
313 div.pct { background: #ccc; }
314 td.pct, div.pct { border-radius: 2px; }
315 td img {vertical-align: middle; }
317 table.daemons td:nth-child(4), table.daemons td:nth-child(5) { text-align: center; }
323 /* Misc */
325 a { text-decoration: none; color: #268bd2; cursor: pointer; }
326 a:not([data-img]):hover { text-decoration: underline; }
329 form { display: inline-block; padding: 0; margin: 0; }
331 pre { margin: 0; padding: 0; color: CaptionText; }
333 .pre-main { margin: 16px 0; }
335 .scroll { height: 12rem; overflow: auto; border: 1px solid; }
336 .scroll table { border: 0px solid #fff; }
339 /* Round corner */
341 #loading, .debug, .box, div.scroll, .outbox, section {
342 -moz-border-radius: 4px;
343 -webkit-border-radius: 4px;
344 border-radius: 4px;
345 }
347 /* Help page */
349 #help { text-align: justify; }
350 #help a { text-decoration: underline; }
351 #help a:hover { text-decoration: none; }
355 /*
356 * Page footer
357 */
359 body > footer {
360 border-top: 1px solid;
361 text-align: center;
362 padding: 0.5em;
363 font-size: smaller;
364 }
367 /***************
368 * HTML5 Meter *
369 ***************/
371 .meter {
372 height: 1.2rem;
373 min-width: 150px;
374 color: #222;
375 /*cursor: default;*/
376 }
377 .meter meter {
378 height: inherit;
379 width: 100%;
380 display: block;
381 border: 1px solid #ddd;
382 border-radius: 4px;
383 }
384 .meter span {
385 display: block;
386 white-space: nowrap;
387 position: absolute;
388 margin: -1.1rem auto 0 0.3rem;
389 }
393 /**************
394 * Animations *
395 **************/
397 a.button {
398 -webkit-transition: all 0.3s ease-in-out;
399 -moz-transition: all 0.3s ease-in-out;
400 -o-transition: all 0.3s ease-in-out;
401 -ms-transition: all 0.3s ease-in-out;
402 transition: all 0.3s ease-in-out;
403 }
405 /*section {
406 margin: 20pt -0.7em;
407 padding: 0.8em 0.7em 1.2em;
408 background-color: #fdfdfd;
409 border: 1px solid #ddd;
410 border-radius: 1em;
411 box-shadow: 0 0 3pt 2pt #eee;
412 }
413 section h4 {
414 margin: 0 0 0.5em 0;
415 }
416 section h3 {
417 margin: 0 0 0.5em 0; }
418 */
420 #tabs {
421 font-weight: bold;
422 /*font-size: 14px;*/
423 list-style-type: none;
424 padding-bottom: 25px;
425 border-bottom: 1px solid #aaa;
426 }
428 #tabs li {
429 float: left;
430 height: 16px;
431 background-color: #eee;
432 margin: 0 40px 0 -40px;
433 border: 1px solid #aaa;
434 text-align: center;
435 min-width: 100px;
436 -webkit-border-radius: 4px 4px 0 0;
437 -moz-border-radius: 4px 4px 0 0;
438 border-radius: 4px 4px 0 0;
439 -webkit-appearance: tab;
440 appearance: tab;
441 }
443 #tabs li.active {
444 border-bottom: 1px solid #fff;
445 background-color: #fff;
446 }
448 #tabs a {
449 padding: 8px;
450 }
454 /****************
455 * Search block *
456 ****************/
457 .search {
458 display: block; white-space: nowrap;
459 position: fixed; right: 7px; top: 7px;
460 margin: 0; padding: 0; border: none;
461 }
462 .search input {
463 display: inline-block;
464 width: 200px; height: 24px;
465 }
466 .search button {
467 -webkit-appearance: button;
468 height: 100%; margin: 0;
469 }
473 /**********************
474 * Buttons with icons *
475 **********************/
476 @font-face {
477 font-family: TazPanelWeb;
478 src: url('/styles/default/tazpanel.ttf');
479 }
481 [data-icon]:before, [data-img] {
482 vertical-align: baseline;
483 padding: 0;
484 margin: 0 /*0 0 -0.5em*/;
485 font-size: 1.2em;
486 font-family: TazPanel, TazPanelWeb;
488 font-style: normal;
489 font-weight: normal;
490 font-variant: normal;
491 text-transform: none;
492 line-height: 1.2em;
493 display: inline-block;
494 text-decoration: none;
495 width: 1.2em; text-align: center;
497 -webkit-font-feature-settings: "liga", "dlig";
498 -moz-font-feature-settings: "liga=1, dlig=1";
499 -o-font-feature-settings: "liga", "dlig";
500 font-feature-settings: "liga", "dlig";
502 -webkit-text-rendering: optimizeLegibility;
503 -moz-text-rendering: optimizeLegibility;
504 -o-text-rendering: optimizeLegibility;
505 text-rendering: optimizeLegibility;
507 -webkit-font-smoothing: antialiased;
508 -moz-font-smoothing: antialiased;
509 -o-font-smoothing: antialiased;
510 font-smoothing: antialiased;
511 }
512 button[data-icon]::before { font-size: 16px; line-height: 16px; width: 16px; }
514 [data-icon]::before { content: attr(data-icon); }
515 [data-img]::before { content: attr(data-img); }
517 [data-icon], [data-img] { display: inline-block; }
520 /* Solarized:
521 red #dc322f
522 orange #cb4b16
523 yellow #b58900
524 green #859900
525 cyan #2aa198
526 blue #268bd2
527 magenta #d33682
528 */
531 [data-icon="tazpanel"]::before {
532 display: inline-block;
533 content: '\f13d';
534 color: #EBEBEB;
535 border: 1pt solid hsl(5, 85%, 35%); border-radius: 0.2rem;
536 font-size: 32px; line-height: 32px;
538 height: 32px; width: 32px;
539 margin: 0.2rem;
540 padding: 0;
541 vertical-align: top;
542 background-image: -webkit-linear-gradient(top, hsl(10, 100%, 40%), hsl(0, 70%, 30%));
543 }
544 .light [data-icon="tazpanel"]::before {
545 text-shadow: 0 1pt 2pt hsla(0, 0%, 0%, 0.9), 0 0 2pt hsla(0, 0%, 0%, 0.6);
546 }
550 /*******************
551 * Terminal colors *
552 *******************/
554 /* Using color palettes from Sakura terminal source */
556 .term {
557 padding: 0.3rem;
558 height: 24rem; max-height: 24rem;
559 white-space: pre-wrap;
560 overflow: auto;
561 z-index: 4;
562 background: transparent;
563 }
565 /* SliTaz Spider on background */
566 /*.term_ { display: block; position: relative; z-index: 2; }
567 .term_::after {
568 display: block; border: 1pt solid;
569 font-family: TazPanel;
570 font-size: 16rem;
571 position: absolute; right: 0; bottom: 0;
572 content: '\f13f';
573 opacity: 1;
574 color: orange;
575 z-index: 1;
576 }*/
578 .term.log { white-space: pre; }
579 /*.term input[type="text"] {
580 width: 100%!important; padding: 0; margin: 0; vertical-align: middle;
581 -webkit-appearance: none!important; -moz-appearance: none; appearance: none;
582 display: inline;
583 background-color: transparent; color: inherit; border: none; outline: none;
584 font: inherit; line-height: 1rem;
585 }*/
586 .term .cmdline {
587 /*position: relative; float: left; display: inline-block; white-space: pre-wrap;
588 width: 100%; overflow: hidden; left: 0;
589 vertical-align: middle;*/
590 padding: 0;
591 }
592 #typeField {
593 outline-style: none !important;
594 -webkit-user-modify: read-write;
595 word-wrap: break-word;
596 -webkit-nbsp-mode: space;
597 -webkit-line-break: after-white-space;
598 }
599 #num_hist {
600 display: inline-block;
601 position: absolute; right: 0.5rem; float: right;
602 height: 0;
603 color: #FFF; background: #FFF;
604 }
606 /* Tango palette (default) */
607 .color30{color:#2E3436} .color1.color30{color:#555753} .color40{background:#2E3436}
608 .color31{color:#CC0000} .color1.color31{color:#EF2929} .color41{background:#CC0000}
609 .color32{color:#4E9A06} .color1.color32{color:#8AE234} .color42{background:#4E9A06}
610 .color33{color:#C4A000} .color1.color33{color:#FCE94F} .color43{background:#C4A000}
611 .color34{color:#3465A4} .color1.color34{color:#729FCF} .color44{background:#3465A4}
612 .color35{color:#75507B} .color1.color35{color:#AD7FA8} .color45{background:#75507B}
613 .color36{color:#06989A} .color1.color36{color:#34E2E2} .color46{background:#06989A}
614 .color37{color:#D3D7CF} .color1.color37{color:#EEEEEC} .color47{background:#D3D7CF}
615 .term {color:#D3D7CF; background:#2E3436}
617 /* Linux palette */
618 .linux .color30{color:#000} .linux .color1.color30{color:#555} .linux .color40{background:#000}
619 .linux .color31{color:#A00} .linux .color1.color31{color:#F55} .linux .color41{background:#A00}
620 .linux .color32{color:#0A0} .linux .color1.color32{color:#5F5} .linux .color42{background:#0A0}
621 .linux .color33{color:#A50} .linux .color1.color33{color:#FF5} .linux .color43{background:#A50}
622 .linux .color34{color:#00A} .linux .color1.color34{color:#55F} .linux .color44{background:#00A}
623 .linux .color35{color:#A0A} .linux .color1.color35{color:#F5F} .linux .color45{background:#A0A}
624 .linux .color36{color:#0AA} .linux .color1.color36{color:#5FF} .linux .color46{background:#0AA}
625 .linux .color37{color:#AAA} .linux .color1.color37{color:#FFF} .linux .color47{background:#AAA}
626 .linux.term {color:#AAA; background:#000}
628 /* Xterm palette */
629 .xterm .color30{color:#000000} .xterm .color1.color30{color:#4C4C4C} .xterm .color40{background:#000000}
630 .xterm .color31{color:#CD0000} .xterm .color1.color31{color:#FF0000} .xterm .color41{background:#CD0000}
631 .xterm .color32{color:#00CD00} .xterm .color1.color32{color:#00FFFF} .xterm .color42{background:#00CD00}
632 .xterm .color33{color:#CDCD00} .xterm .color1.color33{color:#FFFF00} .xterm .color43{background:#CDCD00}
633 .xterm .color34{color:#1E90FF} .xterm .color1.color34{color:#4682B4} .xterm .color44{background:#1E90FF}
634 .xterm .color35{color:#CD00CD} .xterm .color1.color35{color:#FF00FF} .xterm .color45{background:#CD00CD}
635 .xterm .color36{color:#00CDCD} .xterm .color1.color36{color:#00FFFF} .xterm .color46{background:#00CDCD}
636 .xterm .color37{color:#E5E5E5} .xterm .color1.color37{color:#FFFFFF} .xterm .color47{background:#E5E5E5}
637 .xterm.term {color:#E5E5E5; background:#000000}
639 /* Rxvt palette */
640 .rxvt .color30{color:#000000} .rxvt .color1.color30{color:#404040} .rxvt .color40{background:#000000}
641 .rxvt .color31{color:#CD0000} .rxvt .color1.color31{color:#FF0000} .rxvt .color41{background:#CD0000}
642 .rxvt .color32{color:#00CD00} .rxvt .color1.color32{color:#00FFFF} .rxvt .color42{background:#00CD00}
643 .rxvt .color33{color:#CDCD00} .rxvt .color1.color33{color:#FFFF00} .rxvt .color43{background:#CDCD00}
644 .rxvt .color34{color:#0000CD} .rxvt .color1.color34{color:#0000FF} .rxvt .color44{background:#0000CD}
645 .rxvt .color35{color:#CD00CD} .rxvt .color1.color35{color:#FF00FF} .rxvt .color45{background:#CD00CD}
646 .rxvt .color36{color:#00CDCD} .rxvt .color1.color36{color:#00FFFF} .rxvt .color46{background:#00CDCD}
647 .rxvt .color37{color:#FAEBD7} .rxvt .color1.color37{color:#FFFFFF} .rxvt .color47{background:#FAEBD7}
648 .rxvt.term {color:#FAEBD7; background:#000000}
650 /* Echo palette (http://mso-chronicles.blogspot.com/2013/02/xfce-terminal-and-xchat-colour-scheme.html) */
651 .echo .color30{color:#000000} .echo .color1.color30{color:#5E5E5E} .echo .color40{background:#000000}
652 .echo .color31{color:#B40000} .echo .color1.color31{color:#FF5200} .echo .color41{background:#B40000}
653 .echo .color32{color:#00AA00} .echo .color1.color32{color:#93DA00} .echo .color42{background:#00AA00}
654 .echo .color33{color:#CB7C00} .echo .color1.color33{color:#FFE139} .echo .color43{background:#CB7C00}
655 .echo .color34{color:#003F68} .echo .color1.color34{color:#0073A2} .echo .color44{background:#003F68}
656 .echo .color35{color:#BF00EF} .echo .color1.color35{color:#DB81FF} .echo .color45{background:#BF00EF}
657 .echo .color36{color:#00A6D0} .echo .color1.color36{color:#81E3FF} .echo .color46{background:#00A6D0}
658 .echo .color37{color:#C6C6C6} .echo .color1.color37{color:#FFFFFF} .echo .color47{background:#C6C6C6}
659 .echo.term {color:#C6C6C6; background:#000000}
661 .color1 { font-weight: bold; }
663 /* History table for terminal */
664 .history { width: 100%; }
665 .history td:nth-child(1), .history td:nth-child(2), .history td:nth-child(3) {
666 white-space: nowrap;
667 width: 1px;
668 }
672 /**********
673 * Inputs *
674 **********/
676 :default { outline: 1px dotted hsla(240, 100%, 50%, 0.5); outline-offset: -4px; }
677 :required { outline: 1px solid hsla( 30, 100%, 50%, 0.7); outline-offset: -3px; }
678 :invalid { outline: 2px solid hsla( 0, 100%, 50%, 0.7); outline-offset: -3px; }
681 /* HACK for Tazweb (as clean Webkit browser): remove 1px white border around textfield */
682 input[type="text"], input[type="password"], input[type="number"], textarea { -webkit-appearance: searchfield; }
684 textarea { display: block; color: CaptionText; font-family: monospace; box-sizing: border-box; }
690 /***********************
691 * System memory gauge *
692 ***********************/
694 .sysmem {
695 margin: 0.2rem; padding: 0;
696 border: 1pt solid;
697 border-radius: 0.2rem;
698 box-shadow: inset 0 0 0 1pt hsla(0, 0%, 100%, 0.05);
699 width: 100%; margin: 0; padding: 0;
700 }
702 .sysmem_used, .sysmem_buff, .sysmem_free {
703 display: inline-block;
704 padding: 0.2rem 0; margin: 0;
705 height: 120%;
706 text-align: center; vertical-align: middle;
707 text-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.5);
708 text-align: center;
709 }
711 .sysmem_used {
712 background-color: #f28f68;
713 background-image: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0.25), hsla(0, 0%, 0%, 0.2));
714 border-radius: 0.2rem 0 0 0.2rem;
715 }
716 .sysmem_buff {
717 background-color: #f28f68;
718 background-image:
719 -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0.25), hsla(0, 0%, 0%, 0.2)),
720 -webkit-linear-gradient(135deg,
721 transparent, transparent 25%,
722 #719fd1 25%, #719fd1 50%,
723 transparent 50%, transparent 75%,
724 #719fd1 75%);
725 background-size: 100% 100%;
726 }
727 .sysmem_free {
728 background-color: #719fd1;
729 background-image: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0.25), hsla(0, 0%, 0%, 0.2));
730 border-radius: 0 0.2rem 0.2rem 0;
731 }