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