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