themes/luci-theme-material/htdocs/css/style.css

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