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