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