tazpanel view styles/default/base.css @ rev 471
base.css: fix menu hover switching, add menu shadows.
| author | Aleksej Bobylev <al.bobylev@gmail.com> |
|---|---|
| date | Wed Apr 29 00:29:46 2015 +0300 (2015-04-29) |
| parents | 098e260f32cd |
| children | 836e45b5567b |
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%;
20 background-color: #222;
21 }
23 body > header h1 {
24 margin: 0;
25 color: #fff;
26 font-size: 18px; line-height: 40px; /* center vertical */
27 font-style: italic;
28 white-space: nowrap; overflow: hidden;
29 vertical-align: middle;
30 }
34 /**
35 * Toolbar with menu
36 */
38 nav {
39 position: fixed; top: 40px; left: 0;
40 width: 100%;
41 display: table;
42 border: 1px solid; border-right: none; border-left: none;
43 }
47 /* menu panel */
48 #toolbarMenu { margin: 0; padding: 0; height: 100%; font: menu; }
50 /* shadows */
51 #toolbar { z-index: 10; box-shadow: 0 0 8px #000; }
52 menu.opened, menu.opened li:hover menu { z-index: 9; box-shadow: 2px 2px 8px hsla(0, 0%, 0%, 0.3); }
54 /* menu items */
55 #toolbarMenu li {
56 list-style: none;
57 float: left;
58 display: block;
59 padding: 0;
60 color: inherit; background: inherit;
61 outline: none;
62 }
63 #toolbarMenu > li > span {
64 display: inline-block;
65 padding: 0.2rem;
66 cursor: pointer;
67 }
69 #toolbarMenu menu li a {
70 padding: 0.2rem;
71 }
73 /* Selected menu item */
74 #toolbarMenu li:focus span,
75 #toolbarMenu li:hover span,
76 #toolbarMenu menu li:focus,
77 .user #toolbarMenu menu li:hover > a:not([data-root]),
78 .root #toolbarMenu menu li:hover {
79 background-color: hsla(30, 100%, 50%, 0.5);
80 }
85 #toolbarMenu menu {
86 position: absolute;
87 margin: 0; padding: 0;
88 white-space: nowrap;
89 border: 1px solid;
90 display: none;
91 }
93 /* Submenus */
94 #toolbarMenu menu menu {
95 left: 100%; top: 0;
96 min-width: 100%;
97 }
99 /* Show menu list */
100 #toolbarMenu menu.opened {
101 display: block; z-index: 10;
102 }
104 /* By default hide submenus */
105 #toolbarMenu menu.opened menu {
106 display: none;
107 }
108 /* Show submenu on mouse over */
109 .opened li:hover menu { display: block !important; }
111 /* Menu items one below the other */
112 #toolbarMenu menu li {
113 position: relative;
114 float: none;
115 }
116 /* Show arrow for submenu */
117 #toolbarMenu a:after { content: "‣"; float: right; }
118 #toolbarMenu a:only-child:after { content: " "; }
120 #toolbarMenu a { display: block; color: inherit; text-decoration: none; }
122 /* Clicking this layer close menu */
123 #noMenu {
124 position: fixed;
125 position: absolute; top: 63px; bottom: 0; left: 0; right: 0;
126 background-color: transparent;
127 display: none;
128 z-index: 9;
129 }
132 /**
133 * Panes, sections
134 */
136 section {
137 display: block;
138 border: 1pt solid; border-radius: 0.3rem;
139 padding: 0; margin: 0.5rem 0 0 0;
140 }
142 section header {
143 padding: 0.2rem 0.3rem; margin: 0;
144 display: table; width: 100%;
145 border-radius: 0.3rem 0.3rem 0 0;
146 font-weight: bold; font-size: 1.1rem;/* line-height: 0;*/
147 text-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.2);
148 overflow: auto; /* provide break after floated objects */
149 vertical-align: baseline;
150 }
151 section header form, section footer form {
152 display: table-cell; vertical-align: baseline; line-height: 0; width: 1px; white-space: nowrap;
153 }
154 section header button, section footer button { margin: 0; }
156 section footer {
157 padding: 0 0.3rem 0.2rem; margin: 0;
158 display: block;
159 overflow: auto; /* provide break after floated objects */
160 vertical-align: baseline;
161 }
163 section > pre,
164 section div { padding: 0.3rem 0.3rem 0.2rem 0.3rem; margin: 0; }
165 section td:nth-child(1) { padding-left: 0.3rem; }
166 section table { margin-bottom: 0.3rem; }
167 .nogap { word-spacing: 0; } /* remove gap between buttons in line */
169 .scroll { max-height: 12rem; overflow: auto; }
170 section .scroll { padding: 0; margin: 0; border: 1pt solid; }
171 section pre.scroll { margin: 0.1rem; padding: 0.1rem; }
180 #actions {
181 display: block;
182 margin: 0; padding: 0.2rem 0.3rem;
183 overflow: auto; /* provide break after floated objects */
184 }
185 .float-left, .float-right { display: table-cell; padding: 0; margin: 0; }
186 .float-left { float: left; }
187 .float-right { float: right; }
191 fieldset { border: 1pt solid; border-radius: 0.3rem; margin-bottom: 0.2rem; }
192 fieldset[disabled] { background-color: hsla(0, 0%, 50%, 0.1);}
198 /* Icons on the right of the toolbar */
199 #icons {
200 display: table-cell; vertical-align: middle; /* center vertical */
201 padding: 0.1rem 0.3rem;
202 white-space: nowrap; width: 1rem; /* minimal width */
203 }
207 /* Loading notification bar */
208 #loading {
209 position: fixed; top: 76px; right: 140px; width: 248px;
210 padding: 4px 4px 2px;
211 background-color: #f8f8f8; color: #666;
212 border: 1px solid #ddd;
213 cursor: progress;
214 }
218 /* Page content container */
219 #content { margin: 0; padding: 1ex; }
222 /* Page first header */
223 h2 { font-size: 1.5rem; height: 1.5rem; padding: 0; margin: 0; }
226 /* Additional headers (obsolete) */
227 h3 { font-size: 1.3rem; margin: 0; }
228 h4 { font-size: 1.1rem; margin: 0; }
231 /* Plain paragraph */
232 p { margin: 0.5ex 0; }
235 #actions p { margin: 6px 0; }
241 button img { padding: 0 3px 0 0; margin: 0; }
242 button, input, select {
243 /*color: ButtonText;*/
244 vertical-align: middle; }
245 button:before, input:before, select:before {
246 padding: 3px; }
248 ul { list-style-type: square; }
249 li { padding: 4px 0; }
252 /* Blocks */
254 #block { float: left; }
256 #wrapper, .wrapper { margin: 20px 0; }
258 .box {
259 display: table;
260 padding: 1em;
261 width: 50%; margin: 0.5em auto;
262 }
263 .box img { float: left; }
265 .box ul { list-style-type: none; padding: 0; }
267 .debug {
268 position: fixed;
269 bottom: 0px;
270 right: 10px;
271 left: 10px;
272 margin: 5px;
273 padding: 4px 10px;
274 background-color: #111;
275 color: #fff;
276 border: 0;
277 /*font-size: 12px;*/
278 opacity: 0.9;
279 }
284 /**********
285 * Tables *
286 **********/
288 /* Base style */
289 table { margin: 0; padding: 0; border: 0 none; border-collapse: collapse; }
291 /* Bold header */
292 thead { font-weight: bold; }
294 /* Wide table */
295 .wide { width: 100%; }
297 /* Center content excluding first column */
298 .center tr td { text-align: center; }
299 .center tr td:nth-child(1) { text-align: left; padding-left: 0.3rem; }
301 /* Table Zebra */
302 .zebra thead td { line-height: 1.5em; text-align: center; vertical-align: middle; border: 1pt solid; }
306 .borders.zebra td + td { border-left: 1px solid; }
310 .outbox { box-shadow: 0 0 2px 4px #ddd; }
311 .fixed { table-layout: fixed; }
314 .borders tr { border-bottom: 1pt solid; }
316 .hborders thead tr { border-top: 1.5pt solid; border-bottom: 1.5pt solid; }
318 td.small { min-width: 60px; }
319 td.pct { min-width: 200px; background: #eee; }
320 div.pct { background: #ccc; }
321 td.pct, div.pct { border-radius: 2px; }
322 td img {vertical-align: middle; }
324 table.daemons td:nth-child(4), table.daemons td:nth-child(5) { text-align: center; }
330 /**
331 * Misc
332 */
334 /* Links */
336 a { text-decoration: none; color: #268bd2; cursor: pointer; }
337 a:not([data-img]):hover { text-decoration: underline; }
340 form { display: inline-block; padding: 0; margin: 0; }
342 pre { margin: 0; padding: 0; color: CaptionText; }
344 .pre-main { margin: 16px 0; }
345 .pre-wrap { white-space: pre-wrap; }
349 /* Round corner */
351 #loading, .debug, .box, .outbox, section {
352 -moz-border-radius: 4px;
353 -webkit-border-radius: 4px;
354 border-radius: 4px;
355 }
357 /* Help page */
359 #help { text-align: justify; }
360 #help a { text-decoration: underline; }
361 #help a:hover { text-decoration: none; }
365 /*
366 * Page footer
367 */
369 body > footer {
370 border-top: 1px solid;
371 text-align: center;
372 height: 1rem;
373 font-size: smaller;
374 }
377 /***************
378 * HTML5 Meter *
379 ***************/
381 .meter {
382 height: 1.2rem;
383 min-width: 150px;
384 color: #222;
385 /*cursor: default;*/
386 }
387 .meter meter {
388 height: inherit;
389 width: 100%;
390 display: block;
391 border: 1px solid #ddd;
392 border-radius: 4px;
393 }
394 .meter span {
395 display: block;
396 white-space: nowrap;
397 position: absolute;
398 margin: -1.1rem auto 0 0.3rem;
399 }
403 /**************
404 * Animations *
405 **************/
407 a.button {
408 -webkit-transition: all 0.3s ease-in-out;
409 -moz-transition: all 0.3s ease-in-out;
410 -o-transition: all 0.3s ease-in-out;
411 -ms-transition: all 0.3s ease-in-out;
412 transition: all 0.3s ease-in-out;
413 }
415 /*section {
416 margin: 20pt -0.7em;
417 padding: 0.8em 0.7em 1.2em;
418 background-color: #fdfdfd;
419 border: 1px solid #ddd;
420 border-radius: 1em;
421 box-shadow: 0 0 3pt 2pt #eee;
422 }
423 section h4 {
424 margin: 0 0 0.5em 0;
425 }
426 section h3 {
427 margin: 0 0 0.5em 0; }
428 */
430 #tabs {
431 font-weight: bold;
432 /*font-size: 14px;*/
433 list-style-type: none;
434 padding-bottom: 25px;
435 border-bottom: 1px solid #aaa;
436 }
438 #tabs li {
439 float: left;
440 height: 16px;
441 background-color: #eee;
442 margin: 0 40px 0 -40px;
443 border: 1px solid #aaa;
444 text-align: center;
445 min-width: 100px;
446 -webkit-border-radius: 4px 4px 0 0;
447 -moz-border-radius: 4px 4px 0 0;
448 border-radius: 4px 4px 0 0;
449 -webkit-appearance: tab;
450 appearance: tab;
451 }
453 #tabs li.active {
454 border-bottom: 1px solid #fff;
455 background-color: #fff;
456 }
458 #tabs a {
459 padding: 8px;
460 }
464 /****************
465 * Search block *
466 ****************/
467 .search {
468 display: block; white-space: nowrap;
469 position: fixed; right: 7px; top: 7px;
470 margin: 0; padding: 0; border: none;
471 }
472 .search input {
473 display: inline-block;
474 width: 200px; height: 24px;
475 }
476 .search button {
477 -webkit-appearance: button;
478 height: 100%; margin: 0;
479 }
483 /**********************
484 * Buttons with icons *
485 **********************/
486 @font-face {
487 font-family: TazPanelWeb;
488 src: url('/styles/default/tazpanel.ttf');
489 }
491 [data-icon]:before, [data-img] {
492 vertical-align: baseline;
493 padding: 0;
494 margin: 0 /*0 0 -0.5em*/;
495 font-size: 1.2em;
496 font-family: TazPanel, TazPanelWeb;
498 font-style: normal;
499 font-weight: normal;
500 font-variant: normal;
501 text-transform: none;
502 line-height: 1.2em;
503 display: inline-block;
504 text-decoration: none;
505 width: 1.2em; text-align: center;
507 -webkit-font-feature-settings: "liga", "dlig";
508 -moz-font-feature-settings: "liga=1, dlig=1";
509 -o-font-feature-settings: "liga", "dlig";
510 font-feature-settings: "liga", "dlig";
512 -webkit-text-rendering: optimizeLegibility;
513 -moz-text-rendering: optimizeLegibility;
514 -o-text-rendering: optimizeLegibility;
515 text-rendering: optimizeLegibility;
517 -webkit-font-smoothing: antialiased;
518 -moz-font-smoothing: antialiased;
519 -o-font-smoothing: antialiased;
520 font-smoothing: antialiased;
521 }
522 button[data-icon]::before { font-size: 16px; line-height: 16px; width: 16px; }
524 [data-icon]::before { content: attr(data-icon); }
525 [data-img]::before { content: attr(data-img); }
527 [data-icon], [data-img] { display: inline-block; }
530 /* Solarized:
531 red #dc322f
532 orange #cb4b16
533 yellow #b58900
534 green #859900
535 cyan #2aa198
536 blue #268bd2
537 magenta #d33682
538 */
541 [data-icon="tazpanel"]::before {
542 display: inline-block;
543 content: '\f13d';
544 color: #EBEBEB;
545 border: 1pt solid hsl(5, 85%, 35%); border-radius: 0.2rem;
546 font-size: 32px; line-height: 32px;
548 height: 32px; width: 32px;
549 margin: 0.2rem;
550 padding: 0;
551 vertical-align: top;
552 background-image: -webkit-linear-gradient(top, hsl(10, 100%, 40%), hsl(0, 70%, 30%));
553 }
554 .light [data-icon="tazpanel"]::before {
555 text-shadow: 0 1pt 2pt hsla(0, 0%, 0%, 0.9), 0 0 2pt hsla(0, 0%, 0%, 0.6);
556 }
560 /*******************
561 * Terminal colors *
562 *******************/
564 /* Using color palettes from Sakura terminal source */
566 .term {
567 padding: 0.3rem;
568 height: 24rem; max-height: 24rem;
569 white-space: pre-wrap;
570 overflow: auto;
571 z-index: 4;
572 background: transparent;
573 }
575 /* SliTaz Spider on background */
576 /*.term_ { display: block; position: relative; z-index: 2; }
577 .term_::after {
578 display: block; border: 1pt solid;
579 font-family: TazPanel;
580 font-size: 16rem;
581 position: absolute; right: 0; bottom: 0;
582 content: '\f13f';
583 opacity: 1;
584 color: orange;
585 z-index: 1;
586 }*/
588 .term.log { white-space: pre; }
589 /*.term input[type="text"] {
590 width: 100%!important; padding: 0; margin: 0; vertical-align: middle;
591 -webkit-appearance: none!important; -moz-appearance: none; appearance: none;
592 display: inline;
593 background-color: transparent; color: inherit; border: none; outline: none;
594 font: inherit; line-height: 1rem;
595 }*/
596 .term .cmdline {
597 /*position: relative; float: left; display: inline-block; white-space: pre-wrap;
598 width: 100%; overflow: hidden; left: 0;
599 vertical-align: middle;*/
600 padding: 0;
601 }
602 #typeField {
603 outline-style: none !important;
604 -webkit-user-modify: read-write;
605 word-wrap: break-word;
606 -webkit-nbsp-mode: space;
607 -webkit-line-break: after-white-space;
608 }
609 #num_hist {
610 display: inline-block;
611 position: absolute; right: 0.5rem; float: right;
612 height: 0;
613 color: #FFF; background: #FFF;
614 }
616 /* Tango palette (default) */
617 .color30{color:#2E3436} .color1.color30{color:#555753} .color40{background:#2E3436}
618 .color31{color:#CC0000} .color1.color31{color:#EF2929} .color41{background:#CC0000}
619 .color32{color:#4E9A06} .color1.color32{color:#8AE234} .color42{background:#4E9A06}
620 .color33{color:#C4A000} .color1.color33{color:#FCE94F} .color43{background:#C4A000}
621 .color34{color:#3465A4} .color1.color34{color:#729FCF} .color44{background:#3465A4}
622 .color35{color:#75507B} .color1.color35{color:#AD7FA8} .color45{background:#75507B}
623 .color36{color:#06989A} .color1.color36{color:#34E2E2} .color46{background:#06989A}
624 .color37{color:#D3D7CF} .color1.color37{color:#EEEEEC} .color47{background:#D3D7CF}
625 .term {color:#D3D7CF; background:#2E3436}
627 /* Linux palette */
628 .linux .color30{color:#000} .linux .color1.color30{color:#555} .linux .color40{background:#000}
629 .linux .color31{color:#A00} .linux .color1.color31{color:#F55} .linux .color41{background:#A00}
630 .linux .color32{color:#0A0} .linux .color1.color32{color:#5F5} .linux .color42{background:#0A0}
631 .linux .color33{color:#A50} .linux .color1.color33{color:#FF5} .linux .color43{background:#A50}
632 .linux .color34{color:#00A} .linux .color1.color34{color:#55F} .linux .color44{background:#00A}
633 .linux .color35{color:#A0A} .linux .color1.color35{color:#F5F} .linux .color45{background:#A0A}
634 .linux .color36{color:#0AA} .linux .color1.color36{color:#5FF} .linux .color46{background:#0AA}
635 .linux .color37{color:#AAA} .linux .color1.color37{color:#FFF} .linux .color47{background:#AAA}
636 .linux.term {color:#AAA; background:#000}
638 /* Xterm palette */
639 .xterm .color30{color:#000000} .xterm .color1.color30{color:#4C4C4C} .xterm .color40{background:#000000}
640 .xterm .color31{color:#CD0000} .xterm .color1.color31{color:#FF0000} .xterm .color41{background:#CD0000}
641 .xterm .color32{color:#00CD00} .xterm .color1.color32{color:#00FFFF} .xterm .color42{background:#00CD00}
642 .xterm .color33{color:#CDCD00} .xterm .color1.color33{color:#FFFF00} .xterm .color43{background:#CDCD00}
643 .xterm .color34{color:#1E90FF} .xterm .color1.color34{color:#4682B4} .xterm .color44{background:#1E90FF}
644 .xterm .color35{color:#CD00CD} .xterm .color1.color35{color:#FF00FF} .xterm .color45{background:#CD00CD}
645 .xterm .color36{color:#00CDCD} .xterm .color1.color36{color:#00FFFF} .xterm .color46{background:#00CDCD}
646 .xterm .color37{color:#E5E5E5} .xterm .color1.color37{color:#FFFFFF} .xterm .color47{background:#E5E5E5}
647 .xterm.term {color:#E5E5E5; background:#000000}
649 /* Rxvt palette */
650 .rxvt .color30{color:#000000} .rxvt .color1.color30{color:#404040} .rxvt .color40{background:#000000}
651 .rxvt .color31{color:#CD0000} .rxvt .color1.color31{color:#FF0000} .rxvt .color41{background:#CD0000}
652 .rxvt .color32{color:#00CD00} .rxvt .color1.color32{color:#00FFFF} .rxvt .color42{background:#00CD00}
653 .rxvt .color33{color:#CDCD00} .rxvt .color1.color33{color:#FFFF00} .rxvt .color43{background:#CDCD00}
654 .rxvt .color34{color:#0000CD} .rxvt .color1.color34{color:#0000FF} .rxvt .color44{background:#0000CD}
655 .rxvt .color35{color:#CD00CD} .rxvt .color1.color35{color:#FF00FF} .rxvt .color45{background:#CD00CD}
656 .rxvt .color36{color:#00CDCD} .rxvt .color1.color36{color:#00FFFF} .rxvt .color46{background:#00CDCD}
657 .rxvt .color37{color:#FAEBD7} .rxvt .color1.color37{color:#FFFFFF} .rxvt .color47{background:#FAEBD7}
658 .rxvt.term {color:#FAEBD7; background:#000000}
660 /* Echo palette (http://mso-chronicles.blogspot.com/2013/02/xfce-terminal-and-xchat-colour-scheme.html) */
661 .echo .color30{color:#000000} .echo .color1.color30{color:#5E5E5E} .echo .color40{background:#000000}
662 .echo .color31{color:#B40000} .echo .color1.color31{color:#FF5200} .echo .color41{background:#B40000}
663 .echo .color32{color:#00AA00} .echo .color1.color32{color:#93DA00} .echo .color42{background:#00AA00}
664 .echo .color33{color:#CB7C00} .echo .color1.color33{color:#FFE139} .echo .color43{background:#CB7C00}
665 .echo .color34{color:#003F68} .echo .color1.color34{color:#0073A2} .echo .color44{background:#003F68}
666 .echo .color35{color:#BF00EF} .echo .color1.color35{color:#DB81FF} .echo .color45{background:#BF00EF}
667 .echo .color36{color:#00A6D0} .echo .color1.color36{color:#81E3FF} .echo .color46{background:#00A6D0}
668 .echo .color37{color:#C6C6C6} .echo .color1.color37{color:#FFFFFF} .echo .color47{background:#C6C6C6}
669 .echo.term {color:#C6C6C6; background:#000000}
671 .color1 { font-weight: bold; }
673 /* History table for terminal */
674 .history { width: 100%; }
675 .history td:nth-child(1), .history td:nth-child(2), .history td:nth-child(3) {
676 white-space: nowrap;
677 width: 1px;
678 }
682 /**********
683 * Inputs *
684 **********/
686 /*:default { outline: 1px dotted hsla(240, 100%, 50%, 0.5); outline-offset: -4px; }*/
687 :required { outline: 1px solid hsla( 30, 100%, 50%, 0.7); outline-offset: -3px; }
688 :invalid { outline: 2px solid hsla( 0, 100%, 50%, 0.7); outline-offset: -3px; }
691 /* HACK for Tazweb (as clean Webkit browser): remove 1px white border around textfield */
692 input[type="text"], input[type="password"], input[type="number"], textarea { -webkit-appearance: searchfield; }
694 textarea { display: block; color: CaptionText; font-family: monospace; box-sizing: border-box; }
700 /***********************
701 * System memory gauge *
702 ***********************/
704 .sysmem {
705 margin: 0.2rem; padding: 0;
706 border: 1pt solid;
707 border-radius: 0.2rem;
708 box-shadow: inset 0 0 0 1pt hsla(0, 0%, 100%, 0.05);
709 width: 100%; margin: 0; padding: 0;
710 }
712 .sysmem_used, .sysmem_buff, .sysmem_free {
713 display: inline-block;
714 padding: 0.2rem 0; margin: 0;
715 height: 120%;
716 text-align: center; vertical-align: middle;
717 text-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.5);
718 text-align: center;
719 }
721 .sysmem_used {
722 background-color: #f28f68;
723 background-image: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0.25), hsla(0, 0%, 0%, 0.2));
724 border-radius: 0.2rem 0 0 0.2rem;
725 }
726 .sysmem_buff {
727 background-color: #f28f68;
728 background-image:
729 -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0.25), hsla(0, 0%, 0%, 0.2)),
730 -webkit-linear-gradient(135deg,
731 transparent, transparent 25%,
732 #719fd1 25%, #719fd1 50%,
733 transparent 50%, transparent 75%,
734 #719fd1 75%);
735 background-size: 100% 100%;
736 }
737 .sysmem_free {
738 background-color: #719fd1;
739 background-image: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0.25), hsla(0, 0%, 0%, 0.2));
740 border-radius: 0 0.2rem 0.2rem 0;
741 }
745 /* Disable some links to root actions */
746 button:not([disabled]) { cursor: pointer; }
747 .user [data-root] { pointer-events: none; cursor: default !important; }
750 html,body { height: 100%; width: 100%; margin: 0; padding: 0; }
751 body > header { position: absolute; top: 0; }
752 body > footer { position: absolute; bottom: 0; left: 0; right: 0; }
753 #content, #content-sidebar {
754 position: absolute; top: 63px; bottom: 1rem; left: 0; right: 0;
755 overflow-y: auto; overflow-x: hidden;
756 }
758 .bigNoScrollable { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; }
759 section.bigNoScrollable { margin: 0.5rem; }
761 .bigScrollable { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: auto; }
762 #fileContent.bigScrollable { margin: 0.2rem; top: 2.5rem; }