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