tazpanel view styles/default/base.css @ rev 501
*.cgi: Implement TazPanel title and sub-title; hardware.cgi: fix and improve modules search; index.cgi: complex code using awk was prevented 'make pot' to collect all messages, fix terminal history removing; tazpanel.js: disable buttons when no packages selected (pkgs.cgi: up / search / category lists); network.cgi: complex comment was prevented 'make pot' to collect all messages; powersaving.cgi: starting development; *.po: rebuild; tazpanel.ttf: add messages icons, so remove all the style/png images and change libtazpanel; *.css: title and sub-title, messages icons; test.cgi: add new icons.
| author | Aleksej Bobylev <al.bobylev@gmail.com> |
|---|---|
| date | Mon Jun 08 04:32:19 2015 +0300 (2015-06-08) |
| parents | 2a891cb47520 |
| children | aaf630cf6a8b |
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 width: 100%; height: 40px;
20 background-color: #222;
21 }
23 body > header h1 {
24 margin: 0;
25 color: #CCC;
26 font-size: 18px; line-height: 21px;
27 font-weight: 300;
28 white-space: nowrap; overflow: hidden;
29 vertical-align: middle;
30 }
32 body > header div {
33 position: absolute; left: 40px; top: 21px;
34 color: #FFF; background: transparent;
35 font-size: 14px; line-height: 19px;
36 font-weight: 300;
37 white-space: nowrap; overflow: hidden;
38 vertical-align: middle;
39 }
42 /**
43 * Toolbar with menu
44 */
46 nav {
47 position: fixed; top: 40px; left: 0;
48 width: 100%;
49 display: table;
50 border: 1px solid; border-right: none; border-left: none;
51 }
55 /* menu panel */
56 #toolbarMenu { margin: 0; padding: 0; height: 100%; font: menu; }
58 /* shadows */
59 #toolbar { z-index: 10; box-shadow: 0 0 8px #000; }
60 menu.opened, menu.opened li:hover menu { z-index: 9; box-shadow: 2px 2px 8px hsla(0, 0%, 0%, 0.3); }
62 /* menu items */
63 #toolbarMenu li {
64 list-style: none;
65 float: left;
66 display: block;
67 padding: 0;
68 color: inherit; background: inherit;
69 outline: none;
70 }
71 #toolbarMenu > li > span {
72 display: inline-block;
73 padding: 0.2rem;
74 cursor: pointer;
75 }
77 #toolbarMenu menu li a {
78 padding: 0.2rem;
79 }
81 /* Selected menu item */
82 #toolbarMenu li:focus span,
83 #toolbarMenu li:hover span,
84 #toolbarMenu menu li:focus,
85 .user #toolbarMenu menu li:hover > a:not([data-root]),
86 .root #toolbarMenu menu li:hover {
87 background-color: hsla(30, 100%, 50%, 0.5);
88 }
93 #toolbarMenu menu {
94 position: absolute;
95 margin: 0; padding: 0;
96 white-space: nowrap;
97 border: 1px solid;
98 display: none;
99 }
101 /* Submenus */
102 #toolbarMenu menu menu {
103 left: 100%; top: 0;
104 min-width: 100%;
105 }
107 /* Show menu list */
108 #toolbarMenu menu.opened {
109 display: block; z-index: 10;
110 }
112 /* By default hide submenus */
113 #toolbarMenu menu.opened menu {
114 display: none;
115 }
116 /* Show submenu on mouse over */
117 .opened li:hover menu { display: block !important; }
119 /* Menu items one below the other */
120 #toolbarMenu menu li {
121 position: relative;
122 float: none;
123 }
124 /* Show arrow for submenu */
125 #toolbarMenu a:after { content: "‣"; float: right; }
126 #toolbarMenu a:only-child:after { content: " "; }
128 #toolbarMenu a { display: block; color: inherit; text-decoration: none; }
130 /* Clicking this layer close menu */
131 #noMenu {
132 position: absolute; top: 63px; bottom: 0; left: 0; right: 0;
133 background-color: transparent;
134 display: none;
135 z-index: 9;
136 }
139 /**
140 * Panes, sections
141 */
143 section {
144 display: block;
145 border: 1pt solid; border-radius: 0.3rem;
146 padding: 0; margin: 0.5rem 0 0 0;
147 }
149 section header {
150 padding: 0.2rem 0.3rem; margin: 0;
151 display: table; width: 100%;
152 border-radius: 0.3rem 0.3rem 0 0;
153 font-weight: bold; font-size: 1.1rem;/* line-height: 0;*/
154 text-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.2);
155 overflow: auto; /* provide break after floated objects */
156 vertical-align: baseline;
157 }
158 section header form, section footer form {
159 display: table-cell; vertical-align: baseline; line-height: 0; width: 1px; white-space: nowrap;
160 }
161 section header button, section footer button { margin: 0; }
163 section footer {
164 padding: 0 0.3rem 0.2rem; margin: 0;
165 display: block;
166 overflow: auto; /* provide break after floated objects */
167 vertical-align: baseline;
168 }
170 section > pre,
171 section div { padding: 0.3rem 0.3rem 0.2rem 0.3rem; margin: 0; }
172 section td:nth-child(1) { padding-left: 0.3rem; }
173 section table { margin-bottom: 0.3rem; }
174 .nogap { word-spacing: 0; } /* remove gap between buttons in line */
176 .scroll { max-height: 12rem; overflow: auto; }
177 section .scroll { padding: 0; margin: 0; border: 1pt solid; }
178 section pre.scroll { margin: 0.1rem; padding: 0.1rem; }
187 #actions {
188 display: block;
189 margin: 0; padding: 0.2rem 0.3rem;
190 overflow: auto; /* provide break after floated objects */
191 }
192 .float-left, .float-right { display: table-cell; padding: 0; margin: 0; }
193 .float-left { float: left; }
194 .float-right { float: right; }
198 fieldset { border: 1pt solid; border-radius: 0.3rem; margin-bottom: 0.2rem; }
199 fieldset[disabled] { background-color: hsla(0, 0%, 50%, 0.1);}
205 /* Icons on the right of the toolbar */
206 #icons {
207 display: table-cell; vertical-align: middle; /* center vertical */
208 padding: 0.1rem 0.3rem;
209 white-space: nowrap; width: 1rem; /* minimal width */
210 }
214 /* Loading notification bar */
215 #loading {
216 position: fixed; top: 76px; right: 140px; width: 248px;
217 padding: 4px 4px 2px;
218 background-color: #f8f8f8; color: #666;
219 border: 1px solid #ddd;
220 cursor: progress;
221 }
225 /* Page content container */
226 #content { margin: 0; padding: 1ex; }
229 /* Page first header */
230 h2 { font-size: 1.5rem; height: 1.5rem; padding: 0; margin: 0; }
233 /* Additional headers (obsolete) */
234 h3 { font-size: 1.3rem; margin: 0; }
235 h4 { font-size: 1.1rem; margin: 0; }
238 /* Plain paragraph */
239 p { margin: 0.5ex 0; }
242 #actions p { margin: 6px 0; }
248 button img { padding: 0 3px 0 0; margin: 0; }
249 button, input, select {
250 /*color: ButtonText;*/
251 vertical-align: middle; }
252 button:before, input:before, select:before {
253 padding: 3px; }
255 ul { list-style-type: square; }
256 li { padding: 4px 0; }
259 /* Blocks */
261 #block { float: left; }
263 #wrapper, .wrapper { margin: 20px 0; }
265 .box {
266 display: table;
267 padding: 1em;
268 width: 50%; margin: 0.5em auto;
269 }
270 .box span { display: inline-block; margin-right: 0.5rem; float: left; }
272 .box ul { list-style-type: none; padding: 0; }
274 .debug {
275 position: fixed;
276 bottom: 0px;
277 right: 10px;
278 left: 10px;
279 margin: 5px;
280 padding: 4px 10px;
281 background-color: #111;
282 color: #fff;
283 border: 0;
284 /*font-size: 12px;*/
285 opacity: 0.9;
286 }
291 /**********
292 * Tables *
293 **********/
295 /* Base style */
296 table { margin: 0; padding: 0; border: 0 none; border-collapse: collapse; }
298 /* Bold header */
299 thead { font-weight: bold; }
301 /* Wide table */
302 .wide { width: 100%; }
304 /* Center content excluding first column */
305 .center tr td { text-align: center; }
306 .center tr td:nth-child(1) { text-align: left; padding-left: 0.3rem; }
308 /* Table Zebra */
309 .zebra thead td { line-height: 1.5em; text-align: center; vertical-align: middle; border: 1pt solid; }
313 .borders.zebra td + td { border-left: 1px solid; }
317 .outbox { box-shadow: 0 0 2px 4px #ddd; }
318 .fixed { table-layout: fixed; }
321 .borders tr { border-bottom: 1pt solid; }
323 .hborders thead tr { border-top: 1.5pt solid; border-bottom: 1.5pt solid; }
325 td.small { min-width: 60px; }
326 td.pct { min-width: 200px; background: #eee; }
327 div.pct { background: #ccc; }
328 td.pct, div.pct { border-radius: 2px; }
329 td img {vertical-align: middle; }
331 table.daemons td:nth-child(4), table.daemons td:nth-child(5) { text-align: center; }
337 /**
338 * Misc
339 */
341 /* Links */
343 a { text-decoration: none; color: #268bd2; cursor: pointer; }
344 a:not([data-img]):hover { text-decoration: underline; }
347 form { display: inline-block; padding: 0; margin: 0; }
349 pre { margin: 0; padding: 0; color: CaptionText; }
351 .pre-main { margin: 16px 0; }
352 .pre-wrap { white-space: pre-wrap; }
356 /* Round corner */
358 #loading, .debug, .box, .outbox, section {
359 -moz-border-radius: 4px;
360 -webkit-border-radius: 4px;
361 border-radius: 4px;
362 }
364 /* Help page */
366 #help { text-align: justify; }
367 #help a { text-decoration: underline; }
368 #help a:hover { text-decoration: none; }
372 /*
373 * Page footer
374 */
376 body > footer {
377 border-top: 1px solid;
378 text-align: center;
379 height: 19px; margin: 0; padding: 0;
380 line-height: 16px; vertical-align: middle;
381 z-index: 10;
382 overflow: hidden;
383 }
384 #defaultStatus, #statusBar { font-size: smaller; vertical-align: middle; }
386 #content { z-index: 5; }
388 #ajaxStatus {
389 position: absolute; right: 0; top: -4px;
390 display: inline-block;
391 font-size: 16px!important; line-height: 16px!important; vertical-align: middle;
392 padding: 0; margin: 0;
393 height: 16px;
394 }
396 /***************
397 * HTML5 Meter *
398 ***************/
400 .meter {
401 height: 1.2rem;
402 min-width: 150px;
403 color: #222;
404 /*cursor: default;*/
405 }
406 .meter meter {
407 height: inherit;
408 width: 100%;
409 display: block;
410 border: 1px solid #ddd;
411 border-radius: 4px;
412 }
413 .meter span {
414 display: block;
415 white-space: nowrap;
416 position: absolute;
417 margin: -1.1rem auto 0 0.3rem;
418 }
422 /**************
423 * Animations *
424 **************/
426 a.button {
427 -webkit-transition: all 0.3s ease-in-out;
428 -moz-transition: all 0.3s ease-in-out;
429 -o-transition: all 0.3s ease-in-out;
430 -ms-transition: all 0.3s ease-in-out;
431 transition: all 0.3s ease-in-out;
432 }
434 /*section {
435 margin: 20pt -0.7em;
436 padding: 0.8em 0.7em 1.2em;
437 background-color: #fdfdfd;
438 border: 1px solid #ddd;
439 border-radius: 1em;
440 box-shadow: 0 0 3pt 2pt #eee;
441 }
442 section h4 {
443 margin: 0 0 0.5em 0;
444 }
445 section h3 {
446 margin: 0 0 0.5em 0; }
447 */
449 #tabs {
450 font-weight: bold;
451 /*font-size: 14px;*/
452 list-style-type: none;
453 padding-bottom: 25px;
454 border-bottom: 1px solid #aaa;
455 }
457 #tabs li {
458 float: left;
459 height: 16px;
460 background-color: #eee;
461 margin: 0 40px 0 -40px;
462 border: 1px solid #aaa;
463 text-align: center;
464 min-width: 100px;
465 -webkit-border-radius: 4px 4px 0 0;
466 -moz-border-radius: 4px 4px 0 0;
467 border-radius: 4px 4px 0 0;
468 -webkit-appearance: tab;
469 appearance: tab;
470 }
472 #tabs li.active {
473 border-bottom: 1px solid #fff;
474 background-color: #fff;
475 }
477 #tabs a {
478 padding: 8px;
479 }
483 /****************
484 * Search block *
485 ****************/
486 .search {
487 display: block; white-space: nowrap;
488 position: fixed; right: 7px; top: 7px;
489 margin: 0; padding: 0; border: none;
490 }
491 .search input {
492 display: inline-block;
493 width: 200px; height: 24px;
494 }
495 .search button {
496 -webkit-appearance: button;
497 height: 100%; margin: 0;
498 }
502 /**********************
503 * Buttons with icons *
504 **********************/
505 @font-face {
506 font-family: TazPanelWeb;
507 src: url('/styles/default/tazpanel.ttf');
508 }
510 [data-icon]:before, [data-img] {
511 vertical-align: baseline;
512 padding: 0;
513 margin: 0 /*0 0 -0.5em*/;
514 font-size: 1.2em;
515 font-family: TazPanel, TazPanelWeb;
517 font-style: normal;
518 font-weight: normal;
519 font-variant: normal;
520 text-transform: none;
521 line-height: 1.2em;
522 display: inline-block;
523 text-decoration: none;
524 width: 1.2em; text-align: center;
526 -webkit-font-feature-settings: "liga", "dlig";
527 -moz-font-feature-settings: "liga=1, dlig=1";
528 -o-font-feature-settings: "liga", "dlig";
529 font-feature-settings: "liga", "dlig";
531 -webkit-text-rendering: optimizeLegibility;
532 -moz-text-rendering: optimizeLegibility;
533 -o-text-rendering: optimizeLegibility;
534 text-rendering: optimizeLegibility;
536 -webkit-font-smoothing: antialiased;
537 -moz-font-smoothing: antialiased;
538 -o-font-smoothing: antialiased;
539 font-smoothing: antialiased;
540 }
541 button[data-icon]::before { font-size: 16px; line-height: 16px; width: 16px; }
543 [data-icon]::before { content: attr(data-icon); }
544 [data-img]::before { content: attr(data-img); }
546 [data-icon], [data-img] { display: inline-block; }
549 /* Solarized:
550 red #dc322f
551 orange #cb4b16
552 yellow #b58900
553 green #859900
554 cyan #2aa198
555 blue #268bd2
556 magenta #d33682
557 */
560 [data-icon="tazpanel"]::before {
561 display: inline-block;
562 content: '\f151';
563 border: 1pt solid; border-radius: 0.2rem;
564 font-size: 32px; line-height: 32px;
566 height: 32px; width: 32px;
567 margin: 0.2rem;
568 padding: 0;
569 vertical-align: top;
570 }
572 [data-icon^=msg]::before { height: 32px; width: 32px; font-size: 32px; line-height: 32px; }
575 /*******************
576 * Terminal colors *
577 *******************/
579 /* Using color palettes from Sakura terminal source */
581 .term {
582 padding: 0.3rem;
583 height: 24rem; max-height: 24rem;
584 white-space: pre-wrap;
585 overflow: auto;
586 z-index: 4;
587 background: transparent;
588 }
590 /* SliTaz Spider on background */
591 /*.term_ { display: block; position: relative; z-index: 2; }
592 .term_::after {
593 display: block; border: 1pt solid;
594 font-family: TazPanel;
595 font-size: 16rem;
596 position: absolute; right: 0; bottom: 0;
597 content: '\f13f';
598 opacity: 1;
599 color: orange;
600 z-index: 1;
601 }*/
603 .term.log { white-space: pre; }
604 /*.term input[type="text"] {
605 width: 100%!important; padding: 0; margin: 0; vertical-align: middle;
606 -webkit-appearance: none!important; -moz-appearance: none; appearance: none;
607 display: inline;
608 background-color: transparent; color: inherit; border: none; outline: none;
609 font: inherit; line-height: 1rem;
610 }*/
611 .term .cmdline {
612 /*position: relative; float: left; display: inline-block; white-space: pre-wrap;
613 width: 100%; overflow: hidden; left: 0;
614 vertical-align: middle;*/
615 padding: 0;
616 }
617 #typeField {
618 outline-style: none !important;
619 -webkit-user-modify: read-write;
620 word-wrap: break-word;
621 -webkit-nbsp-mode: space;
622 -webkit-line-break: after-white-space;
623 }
624 #num_hist {
625 display: inline-block;
626 position: absolute; right: 0.5rem; float: right;
627 height: 0;
628 color: #FFF; background: #FFF;
629 }
631 /* Tango palette (default) */
632 .color30{color:#2E3436} .color1.color30{color:#555753} .color40{background:#2E3436}
633 .color31{color:#CC0000} .color1.color31{color:#EF2929} .color41{background:#CC0000}
634 .color32{color:#4E9A06} .color1.color32{color:#8AE234} .color42{background:#4E9A06}
635 .color33{color:#C4A000} .color1.color33{color:#FCE94F} .color43{background:#C4A000}
636 .color34{color:#3465A4} .color1.color34{color:#729FCF} .color44{background:#3465A4}
637 .color35{color:#75507B} .color1.color35{color:#AD7FA8} .color45{background:#75507B}
638 .color36{color:#06989A} .color1.color36{color:#34E2E2} .color46{background:#06989A}
639 .color37{color:#D3D7CF} .color1.color37{color:#EEEEEC} .color47{background:#D3D7CF}
640 .term {color:#D3D7CF; background:#2E3436}
642 /* Linux palette */
643 .linux .color30{color:#000} .linux .color1.color30{color:#555} .linux .color40{background:#000}
644 .linux .color31{color:#A00} .linux .color1.color31{color:#F55} .linux .color41{background:#A00}
645 .linux .color32{color:#0A0} .linux .color1.color32{color:#5F5} .linux .color42{background:#0A0}
646 .linux .color33{color:#A50} .linux .color1.color33{color:#FF5} .linux .color43{background:#A50}
647 .linux .color34{color:#00A} .linux .color1.color34{color:#55F} .linux .color44{background:#00A}
648 .linux .color35{color:#A0A} .linux .color1.color35{color:#F5F} .linux .color45{background:#A0A}
649 .linux .color36{color:#0AA} .linux .color1.color36{color:#5FF} .linux .color46{background:#0AA}
650 .linux .color37{color:#AAA} .linux .color1.color37{color:#FFF} .linux .color47{background:#AAA}
651 .linux.term {color:#AAA; background:#000}
653 /* Xterm palette */
654 .xterm .color30{color:#000000} .xterm .color1.color30{color:#4C4C4C} .xterm .color40{background:#000000}
655 .xterm .color31{color:#CD0000} .xterm .color1.color31{color:#FF0000} .xterm .color41{background:#CD0000}
656 .xterm .color32{color:#00CD00} .xterm .color1.color32{color:#00FFFF} .xterm .color42{background:#00CD00}
657 .xterm .color33{color:#CDCD00} .xterm .color1.color33{color:#FFFF00} .xterm .color43{background:#CDCD00}
658 .xterm .color34{color:#1E90FF} .xterm .color1.color34{color:#4682B4} .xterm .color44{background:#1E90FF}
659 .xterm .color35{color:#CD00CD} .xterm .color1.color35{color:#FF00FF} .xterm .color45{background:#CD00CD}
660 .xterm .color36{color:#00CDCD} .xterm .color1.color36{color:#00FFFF} .xterm .color46{background:#00CDCD}
661 .xterm .color37{color:#E5E5E5} .xterm .color1.color37{color:#FFFFFF} .xterm .color47{background:#E5E5E5}
662 .xterm.term {color:#E5E5E5; background:#000000}
664 /* Rxvt palette */
665 .rxvt .color30{color:#000000} .rxvt .color1.color30{color:#404040} .rxvt .color40{background:#000000}
666 .rxvt .color31{color:#CD0000} .rxvt .color1.color31{color:#FF0000} .rxvt .color41{background:#CD0000}
667 .rxvt .color32{color:#00CD00} .rxvt .color1.color32{color:#00FFFF} .rxvt .color42{background:#00CD00}
668 .rxvt .color33{color:#CDCD00} .rxvt .color1.color33{color:#FFFF00} .rxvt .color43{background:#CDCD00}
669 .rxvt .color34{color:#0000CD} .rxvt .color1.color34{color:#0000FF} .rxvt .color44{background:#0000CD}
670 .rxvt .color35{color:#CD00CD} .rxvt .color1.color35{color:#FF00FF} .rxvt .color45{background:#CD00CD}
671 .rxvt .color36{color:#00CDCD} .rxvt .color1.color36{color:#00FFFF} .rxvt .color46{background:#00CDCD}
672 .rxvt .color37{color:#FAEBD7} .rxvt .color1.color37{color:#FFFFFF} .rxvt .color47{background:#FAEBD7}
673 .rxvt.term {color:#FAEBD7; background:#000000}
675 /* Echo palette (http://mso-chronicles.blogspot.com/2013/02/xfce-terminal-and-xchat-colour-scheme.html) */
676 .echo .color30{color:#000000} .echo .color1.color30{color:#5E5E5E} .echo .color40{background:#000000}
677 .echo .color31{color:#B40000} .echo .color1.color31{color:#FF5200} .echo .color41{background:#B40000}
678 .echo .color32{color:#00AA00} .echo .color1.color32{color:#93DA00} .echo .color42{background:#00AA00}
679 .echo .color33{color:#CB7C00} .echo .color1.color33{color:#FFE139} .echo .color43{background:#CB7C00}
680 .echo .color34{color:#003F68} .echo .color1.color34{color:#0073A2} .echo .color44{background:#003F68}
681 .echo .color35{color:#BF00EF} .echo .color1.color35{color:#DB81FF} .echo .color45{background:#BF00EF}
682 .echo .color36{color:#00A6D0} .echo .color1.color36{color:#81E3FF} .echo .color46{background:#00A6D0}
683 .echo .color37{color:#C6C6C6} .echo .color1.color37{color:#FFFFFF} .echo .color47{background:#C6C6C6}
684 .echo.term {color:#C6C6C6; background:#000000}
686 .color1 { font-weight: bold; }
688 /* History table for terminal */
689 .history { width: 100%; }
690 .history td:nth-child(1), .history td:nth-child(2), .history td:nth-child(3) {
691 white-space: nowrap;
692 width: 1px;
693 }
697 /**********
698 * Inputs *
699 **********/
701 /*:default { outline: 1px dotted hsla(240, 100%, 50%, 0.5); outline-offset: -4px; }*/
702 :required { outline: 1px solid hsla( 30, 100%, 50%, 0.7); outline-offset: -3px; }
703 :invalid { outline: 2px solid hsla( 0, 100%, 50%, 0.7); outline-offset: -3px; }
706 /* HACK for Tazweb (as clean Webkit browser): remove 1px white border around textfield */
707 input[type="text"], input[type="password"], input[type="number"], textarea { -webkit-appearance: searchfield; }
709 textarea { display: block; color: CaptionText; font-family: monospace; box-sizing: border-box; }
715 /***********************
716 * System memory gauge *
717 ***********************/
719 .sysmem {
720 margin: 0.2rem; padding: 0;
721 border: 1pt solid;
722 border-radius: 0.2rem;
723 box-shadow: inset 0 0 0 1pt hsla(0, 0%, 100%, 0.05);
724 width: 100%; margin: 0; padding: 0;
725 }
727 .sysmem_used, .sysmem_buff, .sysmem_free {
728 display: inline-block;
729 padding: 0.2rem 0; margin: 0;
730 height: 120%;
731 text-align: center; vertical-align: middle;
732 text-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.5);
733 text-align: center;
734 }
736 .sysmem_used {
737 background-color: #f28f68;
738 background-image: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0.25), hsla(0, 0%, 0%, 0.2));
739 border-radius: 0.2rem 0 0 0.2rem;
740 }
741 .sysmem_buff {
742 background-color: #f28f68;
743 background-image:
744 -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0.25), hsla(0, 0%, 0%, 0.2)),
745 -webkit-linear-gradient(135deg,
746 transparent, transparent 25%,
747 #719fd1 25%, #719fd1 50%,
748 transparent 50%, transparent 75%,
749 #719fd1 75%);
750 background-size: 100% 100%;
751 }
752 .sysmem_free {
753 background-color: #719fd1;
754 background-image: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0.25), hsla(0, 0%, 0%, 0.2));
755 border-radius: 0 0.2rem 0.2rem 0;
756 }
760 /* Disable some links to root actions */
761 button:not([disabled]) { cursor: pointer; }
762 .user [data-root] { pointer-events: none; cursor: default !important; }
765 html,body { height: 100%; width: 100%; margin: 0; padding: 0; }
766 body > header { position: absolute; top: 0; }
767 body > footer { position: absolute; bottom: 0; left: 0; right: 0; }
768 #content, #content-sidebar {
769 position: absolute; top: 63px; bottom: 20px; left: 0; right: 0;
770 overflow-y: auto; overflow-x: hidden;
771 }
773 .bigNoScrollable { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; }
774 section.bigNoScrollable { margin: 0.5rem; }
776 .bigScrollable { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: auto; }
777 #fileContent.bigScrollable { margin: 0.2rem; top: 2.5rem; }
779 section section { margin: 0.2rem; }