themes/luci-theme-material/htdocs/luci-static/material/css/style.css

   1 /**
   2  *  Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
   3  *
   4  *  luci-theme-material
   5  *      Copyright 2015 Lutty Yang <lutty@wcan.in>
   6  *
   7  *  Have a bug? Please create an issue here on GitHub!
   8  *      https://github.com/LuttyYang/luci-theme-material/issues
   9  *
  10  *  luci-theme-bootstrap:
  11  *      Copyright 2008 Steven Barth <steven@midlink.org>
  12  *      Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
  13  *      Copyright 2012 David Menting <david@nut-bolt.nl>
  14  *
  15  *  MUI:
  16  *      https://github.com/muicss/mui
  17  *
  18  *  Licensed to the public under the Apache License 2.0
  19  */
  20
  21 /*
  22  *  Font generate by Icomoon<icomoon.io>
  23  */
  24 @font-face {
  25     font-family: 'icomoon';
  26     src: url('../fonts/font.eot');
  27     src: url('../fonts/font.eot') format('embedded-opentype'),
  28     url('../fonts/font.ttf') format('truetype'),
  29     url('../fonts/font.woff') format('woff'),
  30     url('../fonts/font.svg') format('svg');
  31     font-weight: normal;
  32     font-style: normal;
  33 }
  34
  35 .cbi-button-up,
  36 .cbi-button-down,
  37 .cbi-value-helpicon,
  38 .showSide,
  39 [class^="icon-"], [class*=" icon-"] {
  40     font-family: 'icomoon' !important;
  41     speak: none;
  42     font-style: normal !important;
  43     font-weight: normal !important;
  44     font-variant: normal !important;
  45     text-transform: none !important;
  46     line-height: 1;
  47
  48     -webkit-font-smoothing: antialiased;
  49     -moz-osx-font-smoothing: grayscale;
  50 }
  51
  52 * {
  53     margin: 0;
  54     padding: 0;
  55     font-size: 1rem;
  56     font-size: 100%;
  57     box-sizing: border-box;
  58 }
  59
  60 .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  61     font-family: inherit;
  62     font-weight: 500;
  63     line-height: 1.1;
  64     color: inherit;
  65 }
  66
  67 html, body {
  68     margin: 0px;
  69     padding: 0px;
  70     height: 100%;
  71     font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
  72 }
  73
  74 select {
  75     padding: 0.36rem 0.8rem;
  76     color: #555;
  77     background-color: #fff;
  78     background-image: none;
  79     border: 1px solid #ccc;
  80 }
  81
  82 input {
  83     padding: 0.36rem 0.5rem;
  84 }
  85
  86 code {
  87     color: #0099CC;
  88 }
  89
  90 abbr {
  91     color: #0099CC;
  92     text-decoration: underline;
  93     cursor: help;
  94 }
  95
  96 header, footer, .main {
  97     width: 100%;
  98     position: absolute;
  99 }
 100
 101 header {
 102     height: 4rem;
 103     box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
 104     transition: box-shadow .2s;
 105     float: left;
 106     position: fixed;
 107     z-index: 101;
 108 }
 109
 110 .main {
 111     top: 4rem;
 112     bottom: 0rem;
 113 }
 114
 115 .main-left {
 116     float: left;
 117     width: 15%;
 118     width: calc(0% + 17rem);
 119     height: 100%;
 120     overflow-y: auto;
 121     background-color: white;
 122 }
 123
 124 .main-right {
 125     width: 85%;
 126     width: calc(100% - 17rem);
 127     float: right;
 128     overflow-y: auto;
 129     height: 100%;
 130     background-color: #EEE;
 131 }
 132
 133 .pull-right {
 134     float: right;
 135 }
 136
 137 .pull-left {
 138     float: left;
 139 }
 140
 141 header {
 142     background: #0099CC;
 143     color: white;
 144 }
 145
 146 header > .container {
 147     margin-top: 0.5rem;
 148     padding: 0.5rem 1rem 0 1rem;
 149 }
 150
 151 header > .container > .brand {
 152     font-size: 1.5rem;
 153     color: white;
 154     text-decoration: none;
 155     cursor: default;
 156     vertical-align: text-bottom;
 157 }
 158
 159 .warning {
 160     background-color: #FF7D60 !important;
 161     color: #FFF;
 162 }
 163
 164 .errorbox,
 165 .alert-message {
 166     margin: 2rem 0 0 0;
 167     padding: 2rem;
 168     border: 0;
 169     font-weight: normal;
 170     font-style: normal;
 171     font-size: 100%;
 172     line-height: 1;
 173     font-family: inherit;
 174     min-width: inherit;
 175     overflow: auto;
 176     border-radius: 0;
 177     background-color: #FFF;
 178     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
 179 }
 180
 181 .errorbox{
 182     color: #fff;
 183     background-color: #f0ad4e;
 184     border-color: #eea236;
 185 }
 186
 187 #maincontent > .container > div:nth-child(1).alert-message.warning > a {
 188     box-sizing: border-box;
 189     font: inherit;
 190     overflow: visible;
 191     text-transform: none;
 192     display: inline-block;
 193     margin-bottom: 0;
 194     font-weight: 400;
 195     text-align: center;
 196     white-space: nowrap;
 197     vertical-align: middle;
 198     touch-action: manipulation;
 199     cursor: pointer;
 200     -webkit-user-select: none;
 201     -moz-user-select: none;
 202     -ms-user-select: none;
 203     user-select: none;
 204     background-image: none;
 205     min-width: 6rem;
 206     padding: 0.5rem 1rem;
 207     font-size: 1.1rem;
 208     line-height: 1.42857143;
 209     color: #fff;
 210     background-color: #5bc0de;
 211     border-color: #46b8da;
 212     margin-top: 2rem;
 213     text-decoration: inherit;
 214 }
 215
 216 .main > .main-left > .nav {
 217     margin-top: 0.5rem;
 218 }
 219
 220 .main > .main-left > .nav > li a {
 221     color: #404040;
 222     display: block;
 223 }
 224
 225 .main > .main-left > .nav > li:nth-last-child(1) {
 226     margin-top: 2rem;
 227     font-size: 1.2rem;
 228 }
 229
 230 .main > .main-left > .nav > li {
 231     padding: 0.5rem 1rem;
 232     cursor: pointer;
 233 }
 234
 235 .main > .main-left > .nav > .slide {
 236     padding: 0;
 237 }
 238
 239 .main > .main-left > .nav > .slide > ul {
 240     display: none;
 241 }
 242
 243 .main > .main-left > .nav > .slide > .menu {
 244     display: block;
 245     padding: 0.5rem 1rem;
 246     text-decoration: none;
 247     cursor: default;
 248     font-size: 1.2rem;
 249 }
 250
 251 .main > .main-left > .nav > li:hover,
 252 .main > .main-left > .nav > .slide > .menu:hover {
 253     background: #D4D4D4;
 254 }
 255
 256 .main > .main-left > .nav > .slide:hover {
 257     background: none;
 258 }
 259
 260 .main > .main-left > .nav > .slide > .slide-menu > li {
 261     padding: 0.4rem 2rem;
 262 }
 263
 264 .main > .main-left > .nav > .slide > .slide-menu > .active {
 265     background-color: #0099CC;
 266 }
 267
 268 .main > .main-left > .nav > .slide > .slide-menu > li > a {
 269     text-decoration: none;
 270     white-space: nowrap;
 271 }
 272
 273 .main > .main-left > .nav > .slide > .slide-menu > .active > a {
 274     color: white;
 275 }
 276
 277 .main > .main-left > .nav > .slide > .slide-menu > li:hover {
 278     background: #D4D4D4;
 279 }
 280
 281 .main > .main-left > .nav > .slide > .slide-menu > .active:hover {
 282     background-color: #0099CC;
 283     cursor: hand;
 284 }
 285
 286 li {
 287     list-style-type: none;
 288 }
 289
 290 #maincontent > .container {
 291     margin: 0 2rem 3rem 2rem;
 292 }
 293
 294 h1 {
 295     font-size: 4rem;
 296     padding-bottom: 10px;
 297     border-bottom: 1px solid #eee;
 298 }
 299
 300 h2 {
 301     margin: 2rem 0 0 0;
 302     font-size: 2.5rem;
 303     padding-bottom: 10px;
 304     border-bottom: 1px solid #eee;
 305 }
 306
 307 h3 {
 308     margin: 2rem 0 0 0;
 309     font-size: 2rem;
 310     padding-bottom: 10px;
 311 }
 312
 313 h4 {
 314
 315 }
 316
 317 fieldset {
 318     margin: 2rem 0 0 0;
 319     padding: 2rem;
 320     border: 0;
 321     font-weight: normal;
 322     font-style: normal;
 323     font-size: 100%;
 324     line-height: 1;
 325     font-family: inherit;
 326
 327     min-width: inherit;
 328     overflow: auto;
 329
 330     border-radius: 0;
 331     background-color: #FFF;
 332     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
 333 }
 334
 335 fieldset > legend {
 336     display: none !important;
 337 }
 338
 339 fieldset > fieldset {
 340     margin: 0;
 341     padding: 0;
 342     border: none;
 343     box-shadow: none;
 344 }
 345
 346 .panel-title {
 347     width: 100%;
 348     display: block;
 349     line-height: 1;
 350     color: #404040;
 351     font-size: 1.9rem;
 352     padding-bottom: 2rem;
 353     border-bottom: 1px solid #eee;
 354 }
 355
 356 table {
 357     border-spacing: 0;
 358     border-collapse: collapse;
 359     width: 100%;
 360     border: 1px solid #eee;
 361 }
 362
 363 table > tbody > tr > td, table > tbody > tr > th, table > tfoot > tr > td, table > tfoot > tr > th, table > thead > tr > td, table > thead > tr > th {
 364     padding: 8px;
 365     line-height: 1.42857143;
 366     border-top: 1px solid #ddd;
 367
 368     white-space: nowrap;
 369 }
 370
 371 .cbi-section-table-cell {
 372     text-align: center;
 373 }
 374
 375 .cbi-section-table-row {
 376     text-align: center;
 377 }
 378
 379 fieldset > table > tbody > tr:nth-of-type(odd) {
 380     background-color: #f9f9f9;
 381 }
 382
 383 footer {
 384     position: fixed;
 385     z-index: 1000;
 386     bottom: 0;
 387     left: 0;
 388 }
 389
 390 /* fix progress bar */
 391 #memfree > div,
 392 #membuff > div,
 393 #conns > div,
 394 #memtotal > div {
 395     width: 100% !important;
 396     height: 1.4rem !important;
 397 }
 398
 399 #memfree > div > div,
 400 #membuff > div > div,
 401 #conns > div > div,
 402 #memtotal > div > div {
 403     height: 1.4rem !important;
 404     background-color: #0099CC !important;
 405 }
 406
 407 /* fix multiple table */
 408
 409 table table {
 410     border: none;
 411 }
 412
 413 .cbi-value-field table {
 414     border: none;
 415 }
 416
 417 td > table > tbody > tr > td {
 418     border: none;
 419 }
 420
 421 .cbi-value-field > table > tbody > tr > td {
 422     border: none;
 423 }
 424
 425 /* button style */
 426
 427 .cbi-button {
 428     box-sizing: border-box;
 429     font: inherit;
 430     overflow: visible;
 431     text-transform: none;
 432     display: inline-block;
 433     margin-bottom: 0;
 434     font-weight: 400;
 435     text-align: center;
 436     white-space: nowrap;
 437     vertical-align: middle;
 438     touch-action: manipulation;
 439     cursor: pointer;
 440     -webkit-user-select: none;
 441     -moz-user-select: none;
 442     -ms-user-select: none;
 443     user-select: none;
 444     background-image: none;
 445     border: 1px solid transparent;
 446     color: #333;
 447     background-color: #fff;
 448     border-color: #ccc;
 449     min-width: 6rem;
 450     padding: 0.5rem 1rem;
 451     font-size: 1.1rem;
 452     line-height: 1.42857143;
 453 }
 454
 455 .cbi-button-reset,
 456 .cbi-input-remove {
 457     color: #fff;
 458     background-color: #f0ad4e;
 459     border-color: #eea236;
 460 }
 461
 462 .cbi-input-save,
 463 .cbi-button-add,
 464 .cbi-button-save,
 465 .cbi-button-find,
 466 .cbi-input-reload,
 467 .cbi-button-reload {
 468     color: #fff !important;
 469     background-color: #337ab7 !important;
 470     border-color: #2e6da4 !important;
 471 }
 472
 473 .cbi-input-apply,
 474 .cbi-button-apply,
 475 .cbi-button-edit {
 476     color: #fff !important;
 477     background-color: #5bc0de !important;
 478     border-color: #46b8da !important;
 479 }
 480
 481 .cbi-input-reset,
 482 .cbi-button-remove {
 483     color: #fff !important;
 484     background-color: #d9534f !important;
 485     border-color: #d43f3a !important;
 486 }
 487
 488 /* table */
 489
 490 .tabs {
 491     margin: 0 -2rem;
 492     padding-left: 0.5rem;
 493     background-color: #FFFFFF;
 494 }
 495
 496 .cbi-tabmenu > li,
 497 .tabs > li {
 498     display: inline-block;
 499     padding: 0.9rem 0rem;
 500 }
 501
 502 .cbi-tabmenu > li > a,
 503 .tabs > li > a {
 504     text-decoration: none;
 505     color: #404040;
 506     padding: 0.9rem 1.5rem;
 507 }
 508
 509 .tabs > li[class~="active"],
 510 .tabs > li:hover {
 511     cursor: pointer;
 512     background-color: white;
 513     border-bottom: 0.2rem solid #0099CC;
 514     color: #0099CC;
 515 }
 516
 517 .tabs > li[class~="active"] > a {
 518     color: #0099cc;
 519 }
 520
 521 .tabs > li:hover {
 522     border-bottom: 0.2rem solid #C9C9C9;
 523 }
 524
 525 .cbi-tabmenu {
 526     border-top: 1px solid #D4D4D4;
 527     border-left: 1px solid #D4D4D4;
 528     border-right: 1px solid #D4D4D4;
 529 }
 530
 531 .cbi-tabmenu > li:hover {
 532     background-color: #F1F1F1;
 533 }
 534
 535 .cbi-tabmenu > li[class~="cbi-tab"] {
 536     background-color: white;
 537 }
 538
 539 .cbi-tabmenu {
 540     background-color: #D4D4D4;
 541 }
 542
 543 .cbi-section-node-tabbed {
 544     padding: 0;
 545     margin-top: 0;
 546     border-bottom: 1px solid #D4D4D4;
 547     border-left: 1px solid #D4D4D4;
 548     border-right: 1px solid #D4D4D4;
 549 }
 550
 551 .cbi-tabcontainer > .cbi-value:nth-of-type(2n) {
 552     background-color: #f9f9f9;
 553 }
 554
 555 .cbi-value-field,
 556 .cbi-value-description {
 557     display: table-cell;
 558 }
 559
 560 .cbi-value-helpicon > img {
 561     display: none;
 562 }
 563
 564 .cbi-value-helpicon:before {
 565     content: "\f059";
 566 }
 567
 568 .cbi-value-description {
 569     font-size: small;
 570     opacity: 0.5;
 571     padding: 0.5rem 0 0 0;
 572 }
 573
 574 .cbi-value-title {
 575     word-wrap: break-word;
 576     padding-top: 0.6rem;
 577     width: 23rem;
 578     float: left;
 579     text-align: right;
 580     padding-right: 2rem;
 581     display: table-cell;
 582 }
 583
 584 .cbi-value {
 585     padding: 1rem;
 586 }
 587
 588 .cbi-section-table-descr > .cbi-section-table-cell,
 589 .cbi-section-table-titles > .cbi-section-table-cell {
 590     border: none;
 591 }
 592
 593 .cbi-rowstyle-2 {
 594     background-color: #eee;
 595 }
 596
 597 .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
 598     width: auto !important;
 599 }
 600
 601 /* desc */
 602 .cbi-section-descr,
 603 .cbi-map-descr {
 604     padding: 0.5rem;
 605     color: #999;
 606 }
 607
 608 /* luci */
 609
 610 .hidden {
 611     display: none
 612 }
 613
 614 .left {
 615     text-align: left !important;
 616 }
 617
 618 .right {
 619     text-align: right !important;
 620 }
 621
 622 .inline {
 623     display: inline-block;
 624 }
 625
 626 .cbi-page-actions {
 627     border-top: 1px solid #eee;
 628     padding-top: 2rem;
 629     text-align: right;
 630 }
 631
 632 /* input */
 633 .cbi-value input[type="password"],
 634 .cbi-value input[type="text"] {
 635     box-sizing: border-box;
 636     padding: 0.36rem 1rem;
 637     color: #555;
 638     min-width: 15rem;
 639     background-color: #fff;
 640     background-image: none;
 641     border: 1px solid #ccc;
 642     margin-bottom: 0.3rem;
 643 }
 644
 645 .cbi-value-field input[type="password"],
 646 .cbi-value-field input[type="text"] {
 647     box-sizing: border-box;
 648     padding: 0.36rem 1rem;
 649     color: #555;
 650     background-color: #fff;
 651     background-image: none;
 652     border: 1px solid #ccc;
 653 }
 654
 655 /* select */
 656 .cbi-value-field .cbi-input-select {
 657     width: 95%;
 658     min-width: 15rem;
 659     padding: 0.36rem 0.8rem;
 660     color: #555;
 661     background-color: #fff;
 662     background-image: none;
 663     border: 1px solid #ccc;
 664 }
 665
 666 .ifacebadge {
 667     display: inline-block;
 668     min-width: 8rem;
 669     border: 1px solid #CCCCCC;
 670     padding: 0.5rem 1rem;
 671     -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
 672     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
 673     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
 674 }
 675
 676 .ifacebadge > img {
 677     float: right;
 678     margin-left: 0.3rem;
 679 }
 680
 681 /*textarea*/
 682
 683 .cbi-input-textarea {
 684     box-sizing: border-box;
 685     width: 100%;
 686     min-height: 16rem;
 687     padding: 1rem;
 688     font-size: 0.9rem;
 689     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 690     color: black;
 691 }
 692
 693 #syslog {
 694     width: 100%;
 695     min-height: 15rem;
 696     padding: 1rem;
 697     font-size: smaller;
 698     color: #5F5F5F;
 699
 700     margin-bottom: 20px;
 701     border-radius: 0;
 702     background-color: #FFF;
 703     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
 704     border: none;
 705 }
 706
 707 /* change */
 708
 709 .uci-change-list {
 710     font-family: monospace;
 711 }
 712
 713 .uci-change-list ins,
 714 .uci-change-legend-label ins {
 715     text-decoration: none;
 716     border: 1px solid #00FF00;
 717     background-color: #CCFFCC;
 718     display: block;
 719     padding: 2px;
 720 }
 721
 722 .uci-change-list del,
 723 .uci-change-legend-label del {
 724     text-decoration: none;
 725     border: 1px solid #FF0000;
 726     background-color: #FFCCCC;
 727     display: block;
 728     font-style: normal;
 729     padding: 2px;
 730 }
 731
 732 .uci-change-list var,
 733 .uci-change-legend-label var {
 734     text-decoration: none;
 735     border: 1px solid #CCCCCC;
 736     background-color: #EEEEEE;
 737     display: block;
 738     font-style: normal;
 739     padding: 2px;
 740 }
 741
 742 .uci-change-list var ins,
 743 .uci-change-list var del {
 744     border: none;
 745     white-space: pre;
 746     font-style: normal;
 747     padding: 0px;
 748 }
 749
 750 .uci-change-legend {
 751     padding: 5px;
 752 }
 753
 754 .uci-change-legend-label {
 755     width: 150px;
 756     float: left;
 757 }
 758
 759 .uci-change-legend-label > ins,
 760 .uci-change-legend-label > del,
 761 .uci-change-legend-label > var {
 762     float: left;
 763     margin-right: 4px;
 764     width: 10px;
 765     height: 10px;
 766     display: block;
 767 }
 768
 769 .uci-change-legend-label var ins,
 770 .uci-change-legend-label var del {
 771     line-height: 6px;
 772     border: none;
 773 }
 774
 775 .uci-change-list var,
 776 .uci-change-list del,
 777 .uci-change-list ins {
 778     padding: 0.5rem;
 779 }
 780
 781 /* other fix */
 782 #iwsvg,
 783 #iwsvg2,
 784 #bwsvg {
 785     border: 1px solid #D4D4D4 !important;
 786     border-top: none !important;
 787 }
 788
 789 .ifacebox {
 790     border: 1px solid #999;
 791     background-color: #f9f9f9;
 792 }
 793
 794 .cbi-image-button {
 795     margin-left: 0.5rem;
 796 }
 797
 798 .zonebadge {
 799     padding: 0.2rem 0.5rem;
 800     display: inline-block;
 801     cursor: pointer;
 802 }
 803
 804 .zonebadge > .ifacebadge {
 805     padding: 0.2rem 1rem;
 806     margin: 0.3rem;
 807     border: 1px solid #6C6C6C;
 808 }
 809
 810 .zonebadge > input[type="text"] {
 811     padding: 0.16rem 1rem;
 812     min-width: 10rem;
 813     margin-top: 0.3rem;
 814 }
 815
 816 .cbi-value-field .cbi-input-checkbox,
 817 .cbi-value-field .cbi-input-radio {
 818     margin-top: 1rem;
 819 }
 820
 821 .cbi-section-table-row > .cbi-value-field .cbi-input-select {
 822     min-width: 7rem;
 823 }
 824
 825 .cbi-section-create > .cbi-button-add {
 826     margin: 0.5rem;
 827 }
 828
 829 div.cbi-value var, td.cbi-value-field var {
 830     font-style: italic;
 831     color: #0069D6;
 832 }
 833
 834 small {
 835     font-size: smaller;
 836     white-space: normal;
 837 }
 838
 839 .cbi-button-up,
 840 .cbi-button-down {
 841     display: inline-block;
 842     min-width: 0;
 843     padding: 0.2rem 0.3rem;
 844     font-size: 1.3rem;
 845 }
 846
 847 #diag-rc-output > pre {
 848     background-color: #f5f5f5;
 849     display: block;
 850     padding: 8.5px;
 851     margin: 0 0 18px;
 852     line-height: 1.5rem;
 853     -moz-border-radius: 3px;
 854     white-space: pre-wrap;
 855     word-wrap: break-word;
 856     font-size: 1.5rem;
 857     color: #404040;
 858 }
 859
 860 input[name="ping"],
 861 input[name="traceroute"],
 862 input[name="nslookup"] {
 863     width: 80%;
 864 }
 865
 866 header > .container > .pull-right > *{
 867     position: relative;
 868     top: 0.45rem;
 869     cursor: pointer;
 870 }
 871
 872 #xhr_poll_status > .label.success {
 873     background-color: #14CE14;
 874 }
 875
 876 .label {
 877     padding: 0.3rem 0.8rem;
 878     font-size: 1rem;
 879     box-sizing: border-box;
 880     font-weight: bold;
 881     color: #ffffff !important;
 882     text-transform: uppercase;
 883     white-space: nowrap;
 884     background-color: #bfbfbf;
 885     -webkit-border-radius: 3px;
 886     -moz-border-radius: 3px;
 887     border-radius: 3px;
 888     text-shadow: none;
 889     text-decoration: none;
 890 }
 891
 892 .notice{
 893     background-color: #5BC0DE;
 894 }
 895
 896 .showSide {
 897     display: none;
 898 }
 899
 900 .darkMask {
 901     width: 100%;
 902     height: 100%;
 903     position: fixed;
 904     background-color: rgba(0, 0, 0, 0.56);
 905     content: "";
 906     z-index: 99;
 907     display: none;
 908 }
 909
 910 /* fix Main Login*/
 911 .node-main-login > .main > .main-left {
 912     display: none;
 913 }
 914
 915 .node-main-login > .main > .main-right {
 916     width: 100%;
 917 }
 918
 919 .node-main-login > .main fieldset {
 920     padding: 0;
 921     margin-bottom: 1rem;
 922     display: inline;
 923     background: none;
 924     border: none;
 925     box-shadow: none;
 926 }
 927
 928 .node-main-login > .main .cbi-value-title {
 929     width: 7rem;
 930 }
 931
 932 .node-main-login > .main #maincontent {
 933
 934     text-align: center;
 935 }
 936
 937 .node-main-login > .main .container {
 938     display: inline-block;
 939     padding: 2rem 4rem;
 940     margin-top: 2rem !important;
 941     background-color: #FFF;
 942     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
 943     text-align: left;
 944 }
 945
 946 .node-main-login > .main form > div:nth-last-child(1) {
 947     float: right;
 948 }
 949
 950 /* fix status processes */
 951
 952 .node-status-processes > .main table tr td:nth-child(3) {
 953     white-space: normal;
 954 }
 955
 956 .node-status-firewall > .main fieldset li {
 957     display: inline-block;
 958 }
 959
 960 .node-status-firewall > .main fieldset li > a {
 961     box-sizing: border-box;
 962     font: inherit;
 963     overflow: visible;
 964     text-transform: none;
 965     margin-bottom: 0;
 966     font-weight: 400;
 967     text-align: center;
 968     white-space: nowrap;
 969     vertical-align: middle;
 970     touch-action: manipulation;
 971     cursor: pointer;
 972     -webkit-user-select: none;
 973     -moz-user-select: none;
 974     -ms-user-select: none;
 975     user-select: none;
 976     background-image: none;
 977     border: 1px solid transparent;
 978     color: #333;
 979     min-width: 6rem;
 980     padding: 0.5rem 1rem;
 981     font-size: 1.1rem;
 982     line-height: 1.42857143;
 983     background-color: #f0ad4e;
 984     border-color: #eea236;
 985
 986     color: #fff;
 987     text-decoration: none;
 988 }
 989
 990 /* fix system reboot */
 991
 992 .node-system-reboot > .main > .main-right p,
 993 .node-system-reboot > .main > .main-right h3 {
 994     padding-left: 2rem;
 995 }
 996
 997 .node-system-reboot > .main > .main-right p > a {
 998     margin-top: 2rem;
 999     text-decoration: none;
1000     box-sizing: border-box;
1001     font: inherit;
1002     overflow: visible;
1003     text-transform: none;
1004     display: inline-block;
1005     margin-bottom: 0;
1006     font-weight: 400;
1007     text-align: center;
1008     white-space: nowrap;
1009     vertical-align: middle;
1010     touch-action: manipulation;
1011     cursor: pointer;
1012     -webkit-user-select: none;
1013     -moz-user-select: none;
1014     -ms-user-select: none;
1015     user-select: none;
1016     background-image: none;
1017     border: 1px solid transparent;
1018     min-width: 6rem;
1019     padding: 0.5rem 1rem;
1020     font-size: 1.1rem;
1021     line-height: 1.42857143;
1022     text-decoration: none;
1023     color: #fff;
1024     background-color: #d9534f !important;
1025     border-color: #d43f3a !important;
1026 }
1027
1028 /* fix Services  Network Shares*/
1029 .node-services-network_shares > .main .cbi-tabcontainer:nth-child(3) .cbi-value-title {
1030     margin-bottom: 1rem;
1031 }
1032
1033 .node-services-network_shares > .main .cbi-tabcontainer:nth-child(3) .cbi-value-field {
1034     display: list-item;
1035 }
1036
1037 .node-services-network_shares > .main .cbi-tabcontainer:nth-child(3) .cbi-value-description {
1038     padding-top: 1rem;
1039 }
1040
1041 /* fix System Software*/
1042 .node-system-software > .main table tr td:nth-child(4) {
1043     white-space: normal;
1044     font-size: small;
1045     color: #404040;
1046 }
1047
1048 .node-system-software > .main .cbi-tabmenu > li > a, .tabs > li > a {
1049     padding: 0.5rem 1rem;
1050 }
1051
1052 .node-system-software > .main .cbi-value > pre{
1053     background-color: #eee;
1054     padding: 0.5rem;
1055     overflow: auto;
1056 }
1057
1058 .node-status-firewall fieldset,
1059 .node-system-software fieldset,
1060 .node-system-backup_flash_firmware fieldset {
1061     margin-top: 0;
1062 }
1063
1064 .node-status-firewall .cbi-tabmenu,
1065 .node-system-software .cbi-tabmenu,
1066 .node-system-backup_flash_firmware .cbi-tabmenu {
1067     border: none;
1068     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
1069 }
1070
1071 /* language fix */
1072 body.lang_pl.node-main-login .cbi-value-title{
1073     width: 12rem;
1074 }
1075
1076 @media screen and (max-width: 1600px) {
1077     .main-left {
1078         width: calc(0% + 15rem);
1079     }
1080
1081     .main-right {
1082         width: calc(100% - 15rem);
1083     }
1084
1085     .cbi-button {
1086         padding: 0.3rem 0.6rem;
1087         font-size: 1rem;
1088         line-height: 1.5;
1089     }
1090
1091     header > .container > .pull-right > * {
1092         top: 0.35rem;
1093     }
1094
1095     .label {
1096         padding: 0.2rem 0.6rem;
1097     }
1098
1099     .cbi-value-title {
1100         width: 15rem;
1101     }
1102
1103     fieldset {
1104         padding: 1rem;
1105     }
1106
1107     .cbi-input-textarea{
1108         font-size: smaller;
1109     }
1110 }
1111
1112 @media screen and (max-width: 1280px) {
1113     .cbi-tabmenu > li > a, .tabs > li > a {
1114         padding: 0.2rem 0.5rem;
1115     }
1116 }
1117
1118 @media screen and (max-width: 992px) {
1119     * {
1120         font-size: 100%;
1121     }
1122
1123     .main-left {
1124         width: 0;
1125         position: fixed;
1126         z-index: 100;
1127     }
1128
1129     .main-right {
1130         width: 100%;
1131     }
1132
1133     .showSide {
1134         padding: 0.1rem;
1135         margin-right: 0.5rem;
1136         display: inline-block;
1137     }
1138
1139     .showSide:before {
1140         content: "\e20e";
1141         font-size: 1.7rem;
1142     }
1143
1144     .node-main-login .showSide {
1145         display: none !important;
1146     }
1147
1148     .cbi-value-title {
1149         width: 9rem;
1150         padding-right: 1rem;
1151     }
1152
1153
1154     .node-network-diagnostics > .main .cbi-map fieldset > div *{
1155         width: 100% !important;
1156     }
1157
1158     .node-network-diagnostics > .main .cbi-map fieldset > div input[type="text"]{
1159         margin: 3rem 0 0 0 !important;
1160     }
1161
1162     .node-network-diagnostics > .main .cbi-map fieldset > div:nth-child(4) input[type="text"]{
1163         margin: 0 !important;
1164     }
1165
1166     .node-network-diagnostics > .main .cbi-map fieldset > div select,
1167     .node-network-diagnostics > .main .cbi-map fieldset > div input[type="button"]{
1168         margin: 1rem 0 0 0;
1169     }
1170
1171     .node-network-diagnostics > .main .cbi-map fieldset > div{
1172         width: 100% !important;
1173     }
1174
1175
1176     #diag-rc-output > pre {
1177         font-size: 1.2rem;
1178     }
1179
1180     .node-main-login > .main .cbi-value-title{
1181         text-align: left;
1182     }
1183 }
1184
1185 @media screen and (max-width: 480px) {
1186     * {
1187         font-size: 90%;
1188     }
1189
1190     fieldset {
1191         padding: 1rem;
1192         margin: 1rem 0 0 0;
1193     }
1194
1195     .tabs {
1196         margin: 0 -1rem;
1197     }
1198
1199     #maincontent > .container {
1200         margin: 0 1rem 1.5rem 1rem;
1201     }
1202
1203     .main > .main-left > .nav > .slide > .menu {
1204         font-size: 1.3rem;
1205     }
1206
1207     .main > .main-left > .nav > .slide > .slide-menu > li > a {
1208         font-size: 1.1rem;
1209     }
1210
1211     .cbi-value-title {
1212         width: 100%;
1213         min-width: 0rem !important;
1214         display: block;
1215         margin-top: 1rem;
1216         margin-bottom: 0.5rem;
1217         text-align: left;
1218     }
1219
1220     .cbi-value-field, .cbi-value-description {
1221         width: 100%;
1222         box-sizing: border-box;
1223     }
1224
1225     .cbi-value > .cbi-value-field {
1226         display: inline-block;
1227     }
1228
1229     .cbi-tabmenu > li, .tabs > li {
1230         padding: 0.6rem 0rem;
1231     }
1232
1233     .cbi-tabmenu > li > a, .tabs > li > a {
1234         padding: 0.2rem 0.7rem;
1235     }
1236
1237     .cbi-page-actions > div > input {
1238         display: none;
1239     }
1240
1241     .node-main-login > .main .container {
1242         padding: 0.5rem 1rem 2rem 1rem;
1243     }
1244
1245     .node-main-login > .main .cbi-value {
1246         padding: 0;
1247     }
1248
1249     .node-main-login > .main form > div:nth-last-child(1) {
1250         margin-top: 2rem;
1251     }
1252
1253     .node-main-login > .main .cbi-value-title {
1254         width: 100% !important;
1255         font-size: 1.2rem;
1256     }
1257
1258     .node-main-login > .main fieldset {
1259         margin: 0;
1260         padding: 0.5rem;
1261     }
1262
1263     h2 {
1264         font-size: 2rem;
1265     }
1266
1267     .tabs > li > a {
1268         font-size: 1.2rem;
1269     }
1270
1271     header {
1272         height: 3.5rem;
1273     }
1274
1275     header > .container {
1276         margin-top: 0.25rem;
1277     }
1278
1279     .main {
1280         top: 3.5rem;
1281     }
1282
1283     select,
1284     input {
1285         font-size: 1.2rem;
1286     }
1287
1288     .mobile-hide{
1289         display: none;
1290     }
1291
1292     .panel-title{
1293         font-size: 1.4rem;
1294         padding-bottom: 1rem;
1295     }
1296
1297     .node-system-software > .main .cbi-value.cbi-value-last > div{
1298         width: 100% !important;
1299     }
1300
1301     .node-system-software > .main .cbi-value .cbi-value-field input{
1302         width: 100%;
1303     }
1304 }