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