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