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