tazpanel annotate styles/default/base.css @ rev 613

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