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