themes/luci-theme-rosy/htdocs/luci-static/rosy/cascade.css

   1 /**
   2  *  Rosy is a theme for LuCI. It is based on luci-theme-bootstrap
   3  *
   4  *  luci-theme-rosy
   5  *     Copyright 2018 Rosy Song <rosysong@rosinson.com>
   6  *     Copyright 2018 Yan Lan Shen <yanlan.shen@rosinson.com>
   7  *
   8  *   Have a bug? Please create an issue here on GitHub!
   9  *       https://github.com/rosywrt/luci-theme-rosy/issues
  10  *
  11  *  luci-theme-bootstrap:
  12  *      Copyright 2008 Steven Barth <steven@midlink.org>
  13  *      Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
  14  *      Copyright 2012 David Menting <david@nut-bolt.nl>
  15  *
  16  *  Licensed to the public under the Apache License 2.0
  17  */
  18
  19 @font-face {
  20     font-family: 'icomoon';
  21     src: url('fonts/font.eot');
  22     src: url('fonts/font.eot') format('embedded-opentype'), url('fonts/font.ttf') format('truetype'), url('fonts/font.woff') format('woff'), url('fonts/font.svg') format('svg');
  23     font-weight: normal;
  24     font-style: normal;
  25 }
  26
  27 strong {
  28     font-weight: normal;
  29 }
  30
  31 .table {
  32     display: table;
  33     position: relative;
  34 }
  35
  36 .tr {
  37     display: table-row;
  38 }
  39
  40 .thead {
  41     display: table-header-group;
  42 }
  43
  44 .tbody {
  45     display: table-row-group;
  46 }
  47
  48 .tfoot {
  49     display: table-footer-group;
  50 }
  51
  52 .td,
  53 .th {
  54     vertical-align: middle;
  55     text-align: center;
  56     display: table-cell;
  57     padding: .8em;
  58 }
  59
  60 .th {
  61     font-weight: normal;
  62 }
  63
  64 .tr.placeholder {
  65     height: 4em;
  66     background-color: #f9f9f9;
  67 }
  68
  69 .tr.placeholder>.td {
  70     position: absolute;
  71     left: 0;
  72     right: 0;
  73     bottom: 0;
  74     text-align: center;
  75     line-height: 3em;
  76     background: #f9f9f9;
  77 }
  78
  79 .table[width="33%"],
  80 .th[width="33%"],
  81 .td[width="33%"] {
  82     width: 33%;
  83 }
  84
  85 .table[width="100%"],
  86 .th[width="100%"],
  87 .td[width="100%"] {
  88     width: 100%;
  89 }
  90
  91 .col-1 {
  92     flex: 1 1 30px !important;
  93     -webkit-flex: 1 1 30px !important;
  94 }
  95
  96 .col-2 {
  97     flex: 2 2 60px !important;
  98     -webkit-flex: 2 2 60px !important;
  99 }
 100
 101 .col-3 {
 102     flex: 3 3 90px !important;
 103     -webkit-flex: 3 3 90px !important;
 104 }
 105
 106 .col-4 {
 107     flex: 4 4 120px !important;
 108     -webkit-flex: 4 4 120px !important;
 109 }
 110
 111 .col-5 {
 112     flex: 5 5 150px !important;
 113     -webkit-flex: 5 5 150px !important;
 114 }
 115
 116 .col-6 {
 117     flex: 6 6 180px !important;
 118     -webkit-flex: 6 6 180px !important;
 119 }
 120
 121 .col-7 {
 122     flex: 7 7 210px !important;
 123     -webkit-flex: 7 7 210px !important;
 124 }
 125
 126 .col-8 {
 127     flex: 8 8 240px !important;
 128     -webkit-flex: 8 8 240px !important;
 129 }
 130
 131 .col-9 {
 132     flex: 9 9 270px !important;
 133     -webkit-flex: 9 9 270px !important;
 134 }
 135
 136 .col-10 {
 137     flex: 10 10 300px !important;
 138     -webkit-flex: 10 10 300px !important;
 139 }
 140
 141 .cbi-button-up,
 142 .cbi-button-down,
 143 .cbi-value-helpicon,
 144 .main>.loading>span {
 145     font-family: 'icomoon' !important;
 146     speak: none;
 147     font-style: normal !important;
 148     font-weight: normal !important;
 149     font-variant: normal !important;
 150     text-transform: none !important;
 151     line-height: 1;
 152     -webkit-font-smoothing: antialiased;
 153     -moz-osx-font-smoothing: grayscale;
 154 }
 155
 156 * {
 157     margin: 0;
 158     padding: 0;
 159     box-sizing: border-box;
 160 }
 161
 162 .h1,
 163 .h2,
 164 .h3,
 165 .h4,
 166 .h5,
 167 .h6,
 168 h1,
 169 h2,
 170 h3,
 171 h4,
 172 h5,
 173 h6 {
 174     font-family: inherit;
 175     font-weight: normal;
 176     line-height: 1.1;
 177     color: inherit;
 178 }
 179
 180 html {
 181     -webkit-text-size-adjust: 100%;
 182     -ms-text-size-adjust: 100%;
 183     position: relative;
 184 }
 185
 186 body {
 187     font-size: 0.8rem;
 188     background-color: #EEE;
 189 }
 190
 191 html,
 192 body {
 193     margin: 0px;
 194     padding: 0px;
 195     height: auto;
 196     min-height: 100%;
 197     font-family: Microsoft Yahei, WenQuanYi Micro Hei, sans-serif, "Helvetica Neue", Helvetica, Hiragino Sans GB;
 198 }
 199
 200 select {
 201     padding: 0.36rem 0.8rem;
 202     color: #555;
 203     background-color: #fff;
 204     background-image: none;
 205     border: 1px solid #ccc;
 206 }
 207
 208 select,
 209 input,
 210 .cbi-dropdown {
 211     background-color: transparent;
 212     color: rgba(0, 0, 0, .87);
 213     border: none;
 214     border-bottom: 2px solid rgba(0, 0, 0, .26);
 215     outline: 0;
 216     padding: 0;
 217     box-shadow: none;
 218     border-radius: 0;
 219     background-image: none;
 220     height: auto;
 221     font-size: 0.8rem;
 222 }
 223
 224 select:not([multiple="multiple"]):focus,
 225 input:focus {
 226     border-color: #0099CC;
 227 }
 228
 229 select[multiple="multiple"] {
 230     height: auto;
 231 }
 232
 233 code {
 234     color: #0099CC;
 235 }
 236
 237 abbr {
 238     color: #005470;
 239     text-decoration: underline;
 240     cursor: help;
 241 }
 242
 243 hr {
 244     margin: 1rem 0;
 245     border-color: #EEE;
 246     opacity: 0.1;
 247 }
 248
 249 footer>a {
 250     color: #aaa;
 251     text-decoration: none;
 252 }
 253
 254 .main>.loading {
 255     position: fixed;
 256     width: 100%;
 257     height: 100%;
 258     z-index: 2000;
 259     display: block;
 260     background-color: #354057;
 261     top: 0;
 262 }
 263
 264 .main>.loading>span {
 265     display: block;
 266     text-align: center;
 267     margin-top: 2rem;
 268     color: #888;
 269     font-size: 1.2rem;
 270     line-height: 45px;
 271 }
 272
 273 .main>.loading>span>.loading-img {
 274     margin-right: 0.2rem;
 275     display: inline-block;
 276 }
 277
 278 .main>.loading>span>.loading-img img {
 279     vertical-align: middle;
 280 }
 281
 282 .pull-right {
 283     float: right;
 284 }
 285
 286 .pull-left {
 287     float: left;
 288 }
 289
 290 li {
 291     list-style-type: none;
 292 }
 293
 294 h1 {
 295     font-size: 2rem;
 296     padding-bottom: 10px;
 297     border-bottom: 1px solid #eee;
 298 }
 299
 300 h2 {
 301     margin: 2rem 0 0 0;
 302     color: #354057;
 303     font-size: 1.8rem;
 304     padding-bottom: 10px;
 305     border-bottom: 1px solid #eee;
 306 }
 307
 308 h3 {
 309     margin: 2rem 0 0 0;
 310     font-size: 1.4rem;
 311     padding-bottom: 10px;
 312 }
 313
 314 h4 {
 315     margin: 2rem 0 0 0;
 316     font-size: 1.2rem;
 317     padding-bottom: 10px;
 318 }
 319
 320 .mobile-hide {
 321     display: inline-block;
 322 }
 323
 324 .PC-hide {
 325     width: 100%;
 326     display: none;
 327 }
 328
 329 .cbi-section {
 330     margin: 1rem 0 0 0;
 331     padding: 2rem;
 332     border: 0;
 333     font-weight: normal;
 334     font-style: normal;
 335     line-height: 1;
 336     font-family: inherit;
 337     min-width: inherit;
 338     border-radius: 20px;
 339     background-color: #FFF;
 340     -webkit-overflow-scrolling: touch;
 341 }
 342
 343 .cbi-section>legend {
 344     display: none !important;
 345 }
 346
 347 .cbi-section>h3:first-child,
 348 .panel-title {
 349     width: 100%;
 350     display: block;
 351     line-height: 1;
 352     color: #354057;
 353     font-size: 1.4rem;
 354     padding-bottom: 1rem;
 355     margin: 0;
 356 }
 357
 358 .table {
 359     width: 100%;
 360     border-radius: 20px;
 361 }
 362
 363 .table>.tbody>.tr>.td,
 364 .table>.tbody>.tr>.th,
 365 .table>.tfoot>.tr>.td,
 366 .table>.tfoot>.tr>.th,
 367 .table>.thead>.tr>.td,
 368 .table>.thead>.tr>.th {
 369     padding: .5rem;
 370     border-top: 1px solid #ddd;
 371     white-space: nowrap;
 372 }
 373
 374 .cbi-section-table-cell {
 375     white-space: nowrap;
 376     align-self: flex-end;
 377     flex: 1 1 auto;
 378 }
 379
 380 .cbi-section-table {
 381     border: none;
 382 }
 383
 384 .cbi-section-table-row {
 385     text-align: center;
 386     margin-bottom: 1rem;
 387     background: #f4f4f4;
 388 }
 389
 390 .cbi-section-table-row:last-child {
 391     margin-bottom: 0;
 392 }
 393
 394 .cbi-section-table-row>.cbi-value-field .cbi-input-select,
 395 .cbi-section-table-row>.cbi-value-field .cbi-input-text,
 396 .cbi-section-table-row>.cbi-value-field .cbi-input-password,
 397 .cbi-section-table-row>.cbi-value-field .cbi-dropdown {
 398     width: 100%;
 399 }
 400
 401 .cbi-section-table-row>.cbi-value-field [data-dynlist]>input,
 402 .cbi-section-table-row>.cbi-value-field input.cbi-input-password {
 403     width: calc(100% - 1.5rem);
 404 }
 405
 406 .table .tr:first-child .td:first-child,
 407 .table .tr:first-child::before,
 408 .table .tr:first-child .th:first-child {
 409     border-top-left-radius: 10px;
 410 }
 411
 412 .table .tr:first-child .td:last-child,
 413 .table .tr:first-child .th:last-child {
 414     border-top-right-radius: 10px;
 415 }
 416
 417 .table .tr:last-child .td:first-child,
 418 .table .tr:last-child::before {
 419     border-bottom-left-radius: 10px;
 420 }
 421
 422 .table .tr:last-child .td:last-child {
 423     border-bottom-right-radius: 10px;
 424 }
 425
 426 .table .tr.placeholder:last-child {
 427     background-color: transparent;
 428 }
 429
 430 /* fix progress bar */
 431 .cbi-progressbar {
 432     background-color: #9bc1cc;
 433     border-radius: 20px;
 434     overflow: hidden;
 435     position: relative;
 436 }
 437
 438 .cbi-progressbar div {
 439     background-color: #468ea4;
 440     height: 20px;
 441     border-radius: 20px;
 442 }
 443
 444 .cbi-progressbar::after {
 445     content: attr(title);
 446     position: absolute;
 447     top: 0;
 448     left: 0;
 449     right: 0;
 450     bottom: 0;
 451     text-align: center;
 452     line-height: 1.2rem;
 453     color: #fff;
 454 }
 455
 456 /* fix multiple table */
 457 table table,
 458 .table .table {
 459     border: none;
 460 }
 461
 462 .cbi-value-field table,
 463 .cbi-value-field .table {
 464     border: none;
 465 }
 466
 467 td>table>tbody>tr>td,
 468 .td>.table>.tbody>.tr>.td {
 469     border: none;
 470 }
 471
 472 .cbi-value-field>table>tbody>tr>td,
 473 .cbi-value-field>.table>.tbody>.tr>.td {
 474     border: none;
 475 }
 476
 477 /* button style */
 478 .btn,
 479 .cbi-button {
 480     margin: 0 .8rem .5rem 0;
 481     -webkit-appearance: none;
 482     color: rgba(0, 0, 0, 0.87);
 483     background-color: #F0F0F0;
 484     transition: all 0.2s ease-in-out;
 485     display: inline-block;
 486     padding: .5rem .8rem;
 487     border: none;
 488     border-radius: 25px;
 489     cursor: pointer;
 490     -ms-touch-action: manipulation;
 491     touch-action: manipulation;
 492     background-image: none;
 493     text-align: center;
 494     vertical-align: middle;
 495     white-space: nowrap;
 496     -webkit-user-select: none;
 497     -moz-user-select: none;
 498     -ms-user-select: none;
 499     user-select: none;
 500     font-size: 0.8rem;
 501     width: auto;
 502     display: inline-block;
 503     text-decoration: none;
 504 }
 505
 506 .btn:disabled,
 507 .cbi-button:disabled {
 508     cursor: not-allowed;
 509     pointer-events: none;
 510     opacity: 0.60;
 511     box-shadow: none;
 512 }
 513
 514 .cbi-page-actions .cbi-button-apply,
 515 .cbi-section-actions .cbi-button-edit,
 516 .cbi-button-edit.important,
 517 .cbi-button-apply.important,
 518 .cbi-button-reload.important,
 519 .cbi-button-apply,
 520 .cbi-page-actions .cbi-button-save {
 521     color: #fff;
 522     background-color: #337ab7;
 523     border: none;
 524 }
 525
 526 .cbi-button-add.important,
 527 .cbi-button-save.important,
 528 .cbi-button-positive.important,
 529 .cbi-button-action.important,
 530 .cbi-section-actions .cbi-button-edit {
 531     color: #337ab7;
 532     background-color: transparent;
 533     border: 1px solid #337ab7;
 534 }
 535
 536 .cbi-button-remove.important,
 537 .cbi-button-reset.important,
 538 .cbi-button-negative.important {
 539     color: #fff;
 540     background-color: #d9534f;
 541     border: none;
 542 }
 543
 544 .cbi-button-find,
 545 .cbi-button-link,
 546 .cbi-button-up,
 547 .cbi-button-down,
 548 .cbi-button-neutral {
 549     color: #468ea4;
 550     background-color: transparent;
 551     border: 1px solid #468ea4;
 552 }
 553
 554 .cbi-button-edit,
 555 .cbi-button-reload,
 556 .cbi-button-action {
 557     color: #468ea4;
 558     background-color: transparent;
 559     border: 1px solid #468ea4;
 560 }
 561
 562 .cbi-page-actions .cbi-button-apply+.cbi-button-save,
 563 .cbi-button-add,
 564 .cbi-button-save,
 565 .cbi-button-positive {
 566     color: #354057;
 567     background-color: transparent;
 568     border: 1px solid #354057;
 569 }
 570
 571 .cbi-section-remove>.cbi-button,
 572 .cbi-button-remove,
 573 .cbi-button-reset,
 574 .cbi-button-negative {
 575     color: #F24C7C;
 576     background-color: transparent;
 577     border: 1px solid #F24C7C;
 578 }
 579
 580 .cbi-page-actions .cbi-button-link:first-child {
 581     float: left;
 582 }
 583
 584 .a-to-btn {
 585     text-decoration: none;
 586 }
 587
 588 /* table */
 589 .container>.tabs,
 590 .container>.tabs>li[class~="active"],
 591 .container>.tabs>li:hover,
 592 .container>.cbi-tabmenu,
 593 .container>.cbi-tabmenu>li[class~="cbi-tab"],
 594 .container>.cbi-tabmenu>li:hover {
 595     border-radius: 20px;
 596 }
 597
 598 .container .cbi-map .cbi-tabmenu,
 599 .container .cbi-map .cbi-tabmenu>li[class~="cbi-tab"],
 600 .container .cbi-map .cbi-tabmenu>li:hover {
 601     border-top-left-radius: 10px;
 602     border-top-right-radius: 10px;
 603 }
 604
 605 .container .cbi-map .cbi-tabmenu,
 606 .container>.tabs,
 607 .container>.cbi-tabmenu {
 608     overflow: hidden;
 609 }
 610
 611 .container .cbi-map .cbi-tabmenu+div {
 612     border-radius: 0;
 613     border-bottom-left-radius: 10px;
 614     border-bottom-right-radius: 10px;
 615 }
 616
 617 .tabs {
 618     background-color: #FFFFFF;
 619     margin-top: 1rem;
 620 }
 621
 622 .cbi-tabmenu>li,
 623 .tabs>li {
 624     margin-right: .4rem;
 625     display: inline-block;
 626     padding: 0.6rem 0rem;
 627 }
 628
 629 .cbi-tabmenu>li>a,
 630 .tabs>li>a {
 631     text-decoration: none;
 632     color: #404040;
 633     padding: 0.5rem 0.8rem;
 634 }
 635
 636 .tabs>li[class~="active"],
 637 .tabs>li:hover {
 638     cursor: pointer;
 639     background-color: #337ab7;
 640 }
 641
 642 .tabs>li[class~="active"]>a,
 643 .tabs>li:hover>a {
 644     color: #fff;
 645 }
 646
 647 .cbi-tabmenu {
 648     border-top: 1px solid #D4D4D4;
 649     border-left: 1px solid #D4D4D4;
 650     border-right: 1px solid #D4D4D4;
 651 }
 652
 653 .cbi-tabmenu>li:hover {
 654     background-color: #F1F1F1;
 655 }
 656
 657 .cbi-tabmenu>li[class~="cbi-tab"] {
 658     background-color: #fff;
 659 }
 660
 661 .cbi-tabmenu {
 662     background-color: #D4D4D4;
 663 }
 664
 665 [data-tab-title] {
 666     height: 0;
 667     opacity: 0;
 668     overflow: hidden;
 669 }
 670
 671 [data-tab-active="true"] {
 672     opacity: 1;
 673     height: auto;
 674     overflow: visible;
 675     transition: opacity .25s ease-in;
 676 }
 677
 678 .cbi-section-remove:nth-of-type(2n) {
 679     background-color: #f9f9f9;
 680 }
 681
 682 .cbi-section-node-tabbed {
 683     padding: 0;
 684     margin-top: 0;
 685     border-bottom: 1px solid #D4D4D4;
 686     border-left: 1px solid #D4D4D4;
 687     border-right: 1px solid #D4D4D4;
 688 }
 689
 690 .cbi-tabcontainer>.cbi-value:nth-of-type(2n) {
 691     background-color: #f9f9f9;
 692 }
 693
 694 .cbi-value-field,
 695 .cbi-value-description {
 696     display: table-cell;
 697     line-height: 1.25;
 698 }
 699
 700 .cbi-value-helpicon>img {
 701     display: none;
 702 }
 703
 704 .cbi-value-helpicon:before {
 705     content: "\f059";
 706 }
 707
 708 .cbi-value-description {
 709     font-size: small;
 710     opacity: 0.5;
 711     padding: 0.5rem 0 0 0;
 712 }
 713
 714 .cbi-value-title {
 715     word-wrap: break-word;
 716     padding: 0.6rem 2rem .6rem 0;
 717     width: 23rem;
 718     float: left;
 719     text-align: right;
 720     display: table-cell;
 721 }
 722
 723 .cbi-value {
 724     padding: 6px 0;
 725     display: inline-block;
 726     width: 100%;
 727 }
 728
 729 .cbi-section-table-descr>.cbi-section-table-cell,
 730 .cbi-section-table-titles>.cbi-section-table-cell {
 731     border: none;
 732 }
 733
 734 .td[data-title]::before {
 735     content: attr(data-title) ":\20";
 736     font-weight: bold;
 737     text-align: left;
 738     display: none;
 739     padding: .25rem 0;
 740     white-space: nowrap;
 741 }
 742
 743 .tr.placeholder .td[data-title]::before {
 744     display: none;
 745 }
 746
 747 .tr[data-title]::before,
 748 .tr.cbi-section-table-titles.named::before {
 749     content: attr(data-title) "\20";
 750     font-weight: bold;
 751     text-align: center;
 752     display: table-cell;
 753     align-self: center;
 754     flex: 1 1 5%;
 755     padding: .25rem;
 756     white-space: normal;
 757     word-wrap: break-word;
 758     vertical-align: middle;
 759 }
 760
 761 .table .tr.cbi-rowstyle-2,
 762 .table .tr:nth-child(n) {
 763     background-color: #eee;
 764 }
 765
 766 .table .tr.cbi-rowstyle-1,
 767 .table .tr:nth-child(2n) {
 768     background-color: #f9f9f9;
 769 }
 770
 771 .table .tr.table-titles,
 772 .table .tr.cbi-section-table-titles {
 773     background-color: #ddd;
 774 }
 775
 776 .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
 777     width: auto !important;
 778 }
 779
 780 .td.cbi-section-actions {
 781     text-align: right;
 782     vertical-align: middle;
 783 }
 784
 785 .td.cbi-section-actions>* {
 786     display: flex;
 787 }
 788
 789 .td.cbi-section-actions>*>*,
 790 .td.cbi-section-actions>*>form>* {
 791     flex: 1 1 4em;
 792     margin: 0 1px;
 793 }
 794
 795 .td.cbi-section-actions>*>form {
 796     display: inline-flex;
 797     margin: 0;
 798 }
 799
 800 /* desc */
 801
 802 .cbi-section-descr,
 803 .cbi-map-descr {
 804     padding: 0.5rem;
 805     color: #999;
 806     font-size: small;
 807 }
 808
 809 .cbi-dropdown {
 810     display: inline-flex;
 811     cursor: pointer;
 812     position: relative;
 813     padding: 0;
 814     height: auto;
 815 }
 816
 817 .cbi-dropdown:focus {
 818     outline: 2px solid #4b6e9b;
 819 }
 820
 821 .cbi-dropdown>ul {
 822     margin: 0 !important;
 823     padding: 0;
 824     list-style: none;
 825     overflow-x: hidden;
 826     overflow-y: auto;
 827     display: flex;
 828     width: 100%;
 829 }
 830
 831 .cbi-dropdown>ul.preview {
 832     display: none;
 833 }
 834
 835 .cbi-dropdown>.open {
 836     border: 2px outset #eee;
 837     flex-basis: 15px;
 838     background: #eee;
 839 }
 840
 841 .cbi-dropdown>.open,
 842 .cbi-dropdown>.more {
 843     flex-grow: 0;
 844     flex-shrink: 0;
 845     display: flex;
 846     flex-direction: column;
 847     justify-content: center;
 848     text-align: center;
 849     line-height: 2em;
 850     padding: 0 .25em;
 851 }
 852
 853 .cbi-dropdown>.more,
 854 .cbi-dropdown>ul>li[placeholder] {
 855     color: #777;
 856     font-weight: bold;
 857     text-shadow: 1px 1px 0px #fff;
 858     display: none;
 859 }
 860
 861 .cbi-dropdown>ul>li {
 862     display: none;
 863     padding: .25em;
 864     white-space: nowrap;
 865     overflow: hidden;
 866     text-overflow: ellipsis;
 867     flex-shrink: 1;
 868     flex-grow: 1;
 869     align-items: center;
 870     align-self: center;
 871     min-height: 20px;
 872 }
 873
 874 .cbi-dropdown>ul>li .hide-open {
 875     display: initial;
 876 }
 877
 878 .cbi-dropdown>ul>li .hide-close {
 879     display: none;
 880 }
 881
 882 .cbi-dropdown>ul>li[display]:not([display="0"]) {
 883     border-left: 1px solid #ccc;
 884 }
 885
 886 .cbi-dropdown[empty]>ul {
 887     max-width: 1px;
 888 }
 889
 890 .cbi-dropdown>ul>li>form {
 891     display: none;
 892     margin: 0;
 893     padding: 0;
 894     pointer-events: none;
 895 }
 896
 897 .cbi-dropdown>ul>li img {
 898     vertical-align: middle;
 899     margin-right: .25em;
 900 }
 901
 902 .cbi-dropdown>ul>li>form>input[type="checkbox"] {
 903     margin: 0;
 904     height: auto;
 905 }
 906
 907 .cbi-dropdown>ul>li input[type="text"] {
 908     height: 20px;
 909 }
 910
 911 .cbi-dropdown[open] {
 912     position: relative;
 913 }
 914
 915 .cbi-dropdown[open]>ul.dropdown {
 916     display: block;
 917     background: #f6f6f5;
 918     border: 1px solid #918e8c;
 919     position: absolute;
 920     z-index: 1000;
 921     max-width: none;
 922     min-width: 100%;
 923     width: auto;
 924 }
 925
 926 .cbi-dropdown>ul>li[display],
 927 .cbi-dropdown[open]>ul.preview,
 928 .cbi-dropdown[open]>ul.dropdown>li,
 929 .cbi-dropdown[multiple]>ul>li>label,
 930 .cbi-dropdown[multiple][open]>ul.dropdown>li,
 931 .cbi-dropdown[multiple][more]>.more,
 932 .cbi-dropdown[multiple][empty]>.more {
 933     flex-grow: 1;
 934     display: flex;
 935     align-items: center;
 936 }
 937
 938 .cbi-dropdown[empty]>ul>li,
 939 .cbi-dropdown[optional][open]>ul.dropdown>li[placeholder],
 940 .cbi-dropdown[multiple][open]>ul.dropdown>li>form {
 941     display: block;
 942 }
 943
 944 .cbi-dropdown[open]>ul.dropdown>li .hide-open {
 945     display: none;
 946 }
 947
 948 .cbi-dropdown[open]>ul.dropdown>li .hide-close {
 949     display: initial;
 950 }
 951
 952 .cbi-dropdown[open]>ul.dropdown>li {
 953     border-bottom: 1px solid #ccc;
 954 }
 955
 956 .cbi-dropdown[open]>ul.dropdown>li[selected] {
 957     background: #b0d0f0;
 958 }
 959
 960 .cbi-dropdown[open]>ul.dropdown>li.focus {
 961     background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
 962 }
 963
 964 .cbi-dropdown[open]>ul.dropdown>li:last-child {
 965     margin-bottom: 0;
 966     border-bottom: none;
 967 }
 968
 969 .cbi-dropdown[disabled] {
 970     pointer-events: none;
 971     opacity: .6;
 972 }
 973
 974 .cbi-dropdown .zonebadge {
 975     width: 100%;
 976     border-radius: 20px;
 977     background-color: #468ea4 !important;
 978 }
 979
 980 .cbi-dropdown[open] .zonebadge {
 981     width: auto;
 982 }
 983
 984 /* luci */
 985
 986 .hidden {
 987     display: none
 988 }
 989
 990 .left,
 991 .left::before {
 992     text-align: left !important;
 993 }
 994
 995 .right,
 996 .right::before {
 997     text-align: right !important;
 998 }
 999
1000 .center,
1001 .center::before {
1002     text-align: center !important;
1003 }
1004
1005 .top {
1006     align-self: flex-start !important;
1007     vertical-align: top !important;
1008 }
1009
1010 .bottom {
1011     align-self: flex-end !important;
1012     vertical-align: bottom !important;
1013 }
1014
1015 .inline {
1016     display: inline;
1017 }
1018
1019 .cbi-page-actions {
1020     border-top: 1px solid #eee;
1021     padding-top: 1rem;
1022     text-align: right;
1023 }
1024
1025 /* select */
1026
1027 .cbi-value-field .cbi-dropdown {
1028     min-width: 15rem;
1029 }
1030
1031 .cbi-value-field .cbi-input-select {
1032     width: 15rem;
1033 }
1034
1035 .th[data-type="button"],
1036 .td[data-type="button"],
1037 .th[data-type="fvalue"],
1038 .td[data-type="fvalue"] {
1039     flex: 1 1 2em;
1040     text-align: center;
1041 }
1042
1043 .ifacebadge {
1044     display: inline-flex;
1045     border: 1px solid #CCCCCC;
1046     padding: 0.5rem 1rem;
1047     background: #fff;
1048     border-radius: 20px;
1049 }
1050
1051 td>.ifacebadge,
1052 .td>.ifacebadge {
1053     background-color: #F0F0F0;
1054     font-size: 0.9rem;
1055 }
1056
1057 .ifacebadge>em,
1058 .ifacebadge>img {
1059     display: inline-block;
1060     margin: 0 .2rem;
1061     align-self: flex-start;
1062 }
1063
1064 .ifacebadge>img+img {
1065     margin: 0 .2rem 0 0;
1066 }
1067
1068 .network-status-table {
1069     display: flex;
1070     flex-wrap: wrap;
1071 }
1072
1073 .network-status-table .ifacebox {
1074     margin: .5em .8rem;
1075     flex-grow: 1;
1076 }
1077
1078 .network-status-table .ifacebox-body {
1079     display: flex;
1080     flex-direction: column;
1081     height: 100%;
1082 }
1083
1084 .network-status-table .ifacebox-body>span {
1085     flex: 10 10 auto;
1086 }
1087
1088 .network-status-table .ifacebox-body>div {
1089     display: flex;
1090     flex-wrap: wrap;
1091 }
1092
1093 .network-status-table .ifacebox-body .ifacebadge {
1094     flex: 1 1 auto;
1095     margin: .5em .25em 0 .25em;
1096     padding: .5em;
1097     min-width: 220px;
1098     background-color: #fff;
1099     align-items: center;
1100 }
1101
1102 /*textarea*/
1103
1104 .cbi-input-textarea {
1105     width: 100%;
1106     min-height: 14rem;
1107     padding: 0.8rem;
1108     font-size: 0.8rem;
1109     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
1110     color: black;
1111     resize: unset;
1112     border-radius: 20px;
1113 }
1114
1115 #syslog {
1116     width: 100%;
1117     min-height: 15rem;
1118     padding: 1rem;
1119     font-size: small;
1120     color: #5F5F5F;
1121     margin-bottom: 20px;
1122     border-radius: 20px;
1123     background-color: #FFF;
1124     border: none;
1125     resize: unset;
1126 }
1127
1128 /* change */
1129
1130 .uci-change-list {
1131     font-family: monospace;
1132 }
1133
1134 .uci-change-list ins,
1135 .uci-change-legend-label ins {
1136     text-decoration: none;
1137     border: 1px solid #00FF00;
1138     background-color: #CCFFCC;
1139     display: block;
1140     padding: 2px;
1141 }
1142
1143 .uci-change-list del,
1144 .uci-change-legend-label del {
1145     text-decoration: none;
1146     border: 1px solid #FF0000;
1147     background-color: #FFCCCC;
1148     display: block;
1149     font-style: normal;
1150     padding: 2px;
1151 }
1152
1153 .uci-change-list var,
1154 .uci-change-legend-label var {
1155     text-decoration: none;
1156     border: 1px solid #CCCCCC;
1157     background-color: #EEEEEE;
1158     display: block;
1159     font-style: normal;
1160     padding: 2px;
1161 }
1162
1163 .uci-change-list var ins,
1164 .uci-change-list var del {
1165     border: none;
1166     white-space: pre;
1167     font-style: normal;
1168     padding: 0px;
1169 }
1170
1171 .uci-change-legend {
1172     padding: 5px;
1173 }
1174
1175 .uci-change-legend-label {
1176     width: 150px;
1177     float: left;
1178 }
1179
1180 .uci-change-legend-label>ins,
1181 .uci-change-legend-label>del,
1182 .uci-change-legend-label>var {
1183     float: left;
1184     margin-right: 4px;
1185     width: 10px;
1186     height: 10px;
1187     display: block;
1188 }
1189
1190 .uci-change-legend-label var ins,
1191 .uci-change-legend-label var del {
1192     line-height: 6px;
1193     border: none;
1194 }
1195
1196 .uci-change-list var,
1197 .uci-change-list del,
1198 .uci-change-list ins {
1199     padding: 0.5rem;
1200 }
1201
1202 /* other fix */
1203
1204 #iwsvg,
1205 #iwsvg2,
1206 #bwsvg {
1207     border: 1px solid #D4D4D4 !important;
1208     overflow: hidden;
1209     border-radius: 20px;
1210 }
1211
1212 #iwsvg,
1213 #bwsvg {
1214     margin-top: 1rem;
1215 }
1216
1217 .ifacebox {
1218     background-color: #f9f9f9;
1219     display: inline-flex;
1220     flex-direction: column;
1221     line-height: 1.2em;
1222     min-width: 100px;
1223     border-radius: 20px;
1224     overflow: hidden;
1225 }
1226
1227 .ifacebox-head {
1228     padding: .5em .8em;
1229     background: #eee;
1230 }
1231
1232 .ifacebox-head.active {
1233     background: #eee;
1234 }
1235
1236 .ifacebox-body {
1237     padding: .5em .8em;
1238 }
1239
1240 .cbi-image-button {
1241     margin-left: 0.5rem;
1242 }
1243
1244 .zonebadge {
1245     padding: 0.2rem 0.5rem;
1246     display: inline-block;
1247     border-radius: 20px;
1248 }
1249
1250 .zonebadge .ifacebadge {
1251     padding: .2rem .3rem;
1252     margin: 0.1rem 0.2rem;
1253     border: none;
1254 }
1255
1256 .zonebadge>input[type="text"] {
1257     padding: 0.16rem 1rem;
1258     min-width: 10rem;
1259     margin-top: 0.3rem;
1260 }
1261
1262 .zonebadge>em,
1263 .zonebadge>strong {
1264     margin: 0 0.2rem;
1265     display: inline-block;
1266 }
1267
1268 .cbi-value-field .cbi-input-checkbox,
1269 .cbi-value-field .cbi-input-radio {
1270     margin-top: 0.5rem;
1271     height: 1rem;
1272 }
1273
1274 .td .cbi-input-checkbox,
1275 .td .cbi-input-radio {
1276     margin-top: 0;
1277 }
1278
1279 .cbi-value-field>input+.cbi-value-description {
1280     padding: 0;
1281 }
1282
1283 .cbi-value-field>ul>li {
1284     display: flex;
1285 }
1286
1287 .cbi-value-field>ul>li>label {
1288     margin-top: 0.5rem;
1289 }
1290
1291 .cbi-value-field>ul>li .ifacebadge {
1292     background-color: #eee;
1293     margin-left: 0.4rem;
1294     margin-top: -0.5rem;
1295 }
1296
1297 .cbi-section-table-row>.cbi-value-field .cbi-dropdown {
1298     min-width: 7rem;
1299 }
1300
1301 .cbi-section-create {
1302     margin: .5rem -3px;
1303     display: inline-flex;
1304     align-items: center;
1305 }
1306
1307 .cbi-section-create>* {
1308     margin: 0.5rem;
1309 }
1310
1311 .cbi-section-remove {
1312     padding: 0.5rem;
1313 }
1314
1315 div.cbi-value var,
1316 td.cbi-value-field var,
1317 .td.cbi-value-field var {
1318     font-style: italic;
1319     color: #0069D6;
1320 }
1321
1322 small {
1323     font-size: 90%;
1324     white-space: normal;
1325     line-height: 1.42857143;
1326 }
1327
1328 .cbi-button-up,
1329 .cbi-button-down {
1330     display: inline-block;
1331     min-width: 0;
1332     padding: 0.2rem 0.3rem;
1333     font-size: 1.2rem;
1334 }
1335
1336 .cbi-optionals {
1337     padding: 1rem 1rem 0 1rem;
1338     border-top: 1px solid #CCC;
1339 }
1340
1341 .cbi-dropdown-container {
1342     position: relative;
1343 }
1344
1345 .cbi-tooltip-container {
1346     cursor: help;
1347 }
1348
1349 .cbi-tooltip {
1350     position: absolute;
1351     z-index: 1000;
1352     left: -1000px;
1353     opacity: 0;
1354     transition: opacity .25s ease-out;
1355     pointer-events: none;
1356 }
1357
1358 .cbi-tooltip-container:hover .cbi-tooltip {
1359     left: auto;
1360     opacity: 1;
1361     transition: opacity .25s ease-in;
1362     border-radius: 20px;
1363 }
1364
1365 .zonebadge .cbi-tooltip {
1366     padding: .25rem;
1367     background: inherit;
1368     margin: -1.5rem 0 0 -.5rem;
1369 }
1370
1371 .zonebadge-empty {
1372     background: repeating-linear-gradient(45deg, rgba(204, 204, 204, 0.5), rgba(204, 204, 204, 0.5) 5px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.5) 10px);
1373     color: #404040;
1374 }
1375
1376 .zone-forwards {
1377     display: flex;
1378     min-width: 10rem;
1379 }
1380
1381 .zone-forwards>* {
1382     flex: 1 1 45%;
1383 }
1384
1385 .zone-forwards>span {
1386     flex-basis: 10%;
1387     text-align: center;
1388     padding: 0 .25rem;
1389 }
1390
1391 .zone-forwards .zone-src,
1392 .zone-forwards .zone-dest {
1393     display: flex;
1394     flex-direction: column;
1395 }
1396
1397 #diag-rc-output>pre {
1398     background-color: #f5f5f5;
1399     display: block;
1400     padding: 8.5px;
1401     margin: 0 0 18px;
1402     line-height: 1.5rem;
1403     -moz-border-radius: 3px;
1404     white-space: pre-wrap;
1405     word-wrap: break-word;
1406     font-size: 1.4rem;
1407     color: #404040;
1408 }
1409
1410 input[name="ping"],
1411 input[name="traceroute"],
1412 input[name="nslookup"] {
1413     width: 80%;
1414 }
1415
1416 header>.container>.pull-right>* {
1417     position: relative;
1418     top: 0.45rem;
1419     cursor: pointer;
1420 }
1421
1422 #xhr_poll_status>.label.success {
1423     background-color: #F24C7C;
1424 }
1425
1426 .label {
1427     padding: 0.3rem 0.8rem;
1428     font-size: 0.8rem;
1429     font-weight: bold;
1430     color: #ffffff !important;
1431     white-space: nowrap;
1432     background-color: #bfbfbf;
1433     -webkit-border-radius: 3px;
1434     -moz-border-radius: 3px;
1435     border-radius: 50px;
1436     text-shadow: none;
1437     text-decoration: none;
1438 }
1439
1440 .notice {
1441     background-color: #468EA4;
1442 }
1443
1444 .showSide {
1445     background: url(./menu-logo.png) no-repeat center center / 100%;
1446     display: none;
1447     height: 26px;
1448     width: 26px;
1449 }
1450
1451 .darkMask {
1452     width: 100%;
1453     height: 100%;
1454     position: fixed;
1455     background-color: rgba(0, 0, 0, 0.56);
1456     content: "";
1457     z-index: 99;
1458     display: none;
1459 }
1460
1461 /* fix status processes */
1462
1463 .node-status-processes>.main .table .tr .td:nth-child(3) {
1464     white-space: normal;
1465 }
1466
1467 .node-status-iptables>.main div>.cbi-map>form {
1468     margin: 2rem 2rem 0 0;
1469 }
1470
1471 .node-status-iptables>.main div>.cbi-map>form input {
1472     padding: .8em;
1473     border-radius: 20px;
1474 }
1475
1476 .node-status-processes .cbi-section {
1477     overflow-x: scroll;
1478 }
1479
1480 /* fix status realtime traffic and wireless */
1481
1482 .node-status-realtime.lang_enTraffic .cbi-tabmenu,
1483 .node-status-realtime.lang_enWireless .cbi-tabmenu {
1484     background-color: #d4d4d4;
1485 }
1486
1487 .node-status-realtime.lang_enTraffic .cbi-tabmenu>li[class~="cbi-tab"],
1488 .node-status-realtime.lang_enTraffic .cbi-tabmenu>li:hover,
1489 .node-status-realtime.lang_enWireless .cbi-tabmenu>li[class~="cbi-tab"],
1490 .node-status-realtime.lang_enWireless .cbi-tabmenu>li:hover {
1491     background-color: #F1F1F1;
1492 }
1493
1494 .node-status-realtime.lang_enTraffic #bwsvg,
1495 .node-status-realtime.lang_enWireless #iwsvg,
1496 .node-system-packages .cbi-map>.cbi-section,
1497 .node-system-packages form .cbi-section {
1498     border-top-right-radius: 0;
1499     border-top-left-radius: 0;
1500 }
1501
1502 /* fix system system */
1503
1504 .node-system-system .cbi-tabmenu {
1505     background-color: #d4d4d4;
1506 }
1507
1508 .node-system-system .cbi-tabmenu>li[class~="cbi-tab"] {
1509     background-color: #fff;
1510 }
1511
1512 /* fix system reboot */
1513
1514 .node-system-reboot>.main>.main-right p,
1515 .node-system-reboot>.main>.main-right h3 {
1516     padding-left: 2rem;
1517 }
1518
1519 /* fix Services  Network Shares*/
1520 .node-services-samba.lang_enNetwork #cbi-samba-sambashare .table-container {
1521     overflow-x: scroll;
1522 }
1523
1524 .node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-title {
1525     margin-bottom: 1rem;
1526     width: auto;
1527 }
1528
1529 .node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-field {
1530     display: list-item;
1531 }
1532
1533 .node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-description {
1534     padding-top: 1rem;
1535 }
1536
1537 /* fix System Software*/
1538
1539 .node-system-packages #swfreespace {
1540     background-color: #468ea4 !important;
1541     border: none !important;
1542     border-radius: 20px
1543 }
1544
1545 .node-system-packages #swfreespace>div {
1546     background-color: #f24c7c !important;
1547     border: none !important;
1548     border-radius: 20px
1549 }
1550
1551 .node-system-packages>.main table tr td:nth-child(1) {
1552     width: auto !important;
1553 }
1554
1555 .node-system-packages>.main table tr td:nth-last-child(1) {
1556     white-space: normal;
1557     font-size: small;
1558     color: #404040;
1559 }
1560
1561 .node-system-packages>.main .cbi-tabmenu>li>a,
1562 .tabs>li>a {
1563     padding: 0.5rem 0.8rem;
1564 }
1565
1566 .node-system-packages>.main .cbi-value>pre {
1567     background-color: #eee;
1568     padding: 0.5rem;
1569     overflow: auto;
1570 }
1571
1572 .node-system-packages .cbi-section .cbi-section-node-tabbed {
1573     border: none;
1574 }
1575
1576 .node-system-packages form .cbi-section {
1577     margin: 0;
1578 }
1579
1580 .cbi-tabmenu+.cbi-section {
1581     margin-top: 0;
1582 }
1583
1584 .node-status-iptables .cbi-tabmenu,
1585 .node-system-flashops .cbi-tabmenu {
1586     border: none;
1587 }
1588
1589 .node-system-flashops form.inline+form.inline {
1590     margin-left: 0;
1591 }
1592
1593 .lang_zh-cnBackup .cbi-tabmenu {
1594     margin-bottom: 1rem;
1595 }
1596
1597 #cbi-firewall-redirect table *,
1598 #cbi-network-switch_vlan table *,
1599 #cbi-firewall-zone table * {
1600     font-size: small;
1601 }
1602
1603 #cbi-firewall-redirect table input[type="text"],
1604 #cbi-network-switch_vlan table input[type="text"],
1605 #cbi-firewall-zone table input[type="text"] {
1606     width: 5rem;
1607 }
1608
1609 #cbi-firewall-redirect table select,
1610 #cbi-network-switch_vlan table select,
1611 #cbi-firewall-zone table select {
1612     min-width: 3.5rem;
1613 }
1614
1615 #cbi-network-switch_vlan .th,
1616 #cbi-network-switch_vlan .td {
1617     flex-basis: 12%;
1618 }
1619
1620 /* fix Network Network*/
1621
1622 .node-network-network .cbi-rowstyle-2 .ifacebox-body {
1623     background-color: #fff;
1624 }
1625
1626 .lang_zh-cnInterfaces .container .cbi-map .cbi-tabmenu+div {
1627     overflow: inherit;
1628 }
1629
1630 /* fix Network Wireless*/
1631
1632 .node-network-wireless .cbi-section-node {
1633     margin-bottom: 1rem;
1634 }
1635
1636 /* applyreboot fix */
1637
1638 #maincontainer {
1639     text-align: center;
1640 }
1641
1642 #maincontainer>#maincontent {
1643     padding: 1rem;
1644     margin: 0 auto;
1645     border-radius: 10px;
1646     display: inline-block;
1647     max-width: 800px;
1648     width: 40%;
1649 }
1650
1651 #applyreboot-container {
1652     margin-bottom: 1rem;
1653 }
1654
1655 #applyreboot-section {
1656     text-align: left;
1657     background: #fff;
1658     padding: 1rem;
1659     border-radius: 10px;
1660 }
1661
1662 #applyreboot-section>div {
1663     margin: 1rem 0;
1664     line-height: 1.5rem;
1665 }
1666
1667 #applyreboot-container {
1668     margin: 90px 2rem 2rem 2rem;
1669 }
1670
1671 #applyreboot-section {
1672     margin: 2rem;
1673     line-height: 300%;
1674 }
1675
1676 /* Shared style */
1677
1678 header {
1679     height: 0;
1680     position: fixed;
1681     top: 0;
1682     left: 0;
1683     right: 0;
1684     z-index: 100;
1685     overflow: hidden;
1686 }
1687
1688 header {
1689     padding-right: 1rem;
1690     background: #fff;
1691     color: white;
1692     border-bottom: 1px solid #dadada;
1693 }
1694
1695 header .fill,
1696 header .container {
1697     height: 100%;
1698 }
1699
1700 header .brand {
1701     padding-left: .8rem;
1702     color: #354057;
1703     font-size: 24px;
1704     text-decoration: none;
1705     display: inline-block;
1706     height: 100%;
1707     line-height: 70px;
1708     width: 10%;
1709     text-align: center;
1710 }
1711
1712 header .btn-con {
1713     line-height: 70px;
1714 }
1715
1716 header .logout {
1717     background-color: #354057;
1718 }
1719
1720 header .logout a {
1721     text-decoration: none;
1722     color: #fff;
1723 }
1724
1725 .main {
1726     height: auto;
1727     min-height: 100%;
1728 }
1729
1730 .main-right {
1731     height: auto;
1732 }
1733
1734 .main-left {
1735     top: 10px;
1736     bottom: 10px;
1737     left: 10px;
1738     width: 15%;
1739     background-color: #636569;
1740     position: fixed;
1741     z-index: 1000;
1742     border-radius: 20px;
1743     min-width: 170px;
1744 }
1745
1746 .main>.main-left .navbar-container {
1747     margin-top: 0.5rem;
1748     float: right;
1749     width: calc(100% + 10px);
1750     height: calc(100% - 110px);
1751     overflow: hidden;
1752 }
1753
1754 .main>.main-left .nav {
1755     height: auto;
1756 }
1757
1758 .main>.main-left .nav>li a {
1759     color: #fff;
1760     display: block;
1761 }
1762
1763 .main>.main-left .nav>li {
1764     padding: 0.5rem 1.7rem;
1765     cursor: pointer;
1766 }
1767
1768 .main>.main-left .nav>.slide {
1769     padding: 0 15px 0 0;
1770     margin-bottom: 8px;
1771     overflow: hidden;
1772 }
1773
1774 .main>.main-left .nav>.slide>ul {
1775     display: none;
1776     float: right;
1777     width: calc(100% - 10px);
1778 }
1779
1780 .main>.main-left .nav>.slide>.menu {
1781     display: block;
1782     padding: 0.5rem 1.7rem;
1783     text-decoration: none;
1784     cursor: default;
1785     font-size: 1.15rem;
1786     width: 100%;
1787     float: right;
1788 }
1789
1790 .main>.main-left .nav>li>a.active,
1791 .main>.main-left .nav>.slide>.menu:hover,
1792 .main>.main-left .nav>.slide>.menu.active {
1793     background: #485267;
1794     float: right;
1795     border-top-right-radius: 50px;
1796     border-bottom-right-radius: 50px;
1797 }
1798
1799 .main>.main-left .nav>.slide:hover {
1800     background: none;
1801 }
1802
1803 .main>.main-left .nav>.slide>.slide-menu>li {
1804     padding: 0.6rem 2rem;
1805     margin: 8px 0;
1806 }
1807
1808 .main>.main-left .nav>.slide>.slide-menu>.active {
1809     background-color: #F24C7C;
1810     border-top-right-radius: 50px;
1811     border-bottom-right-radius: 50px;
1812 }
1813
1814 .main>.main-left .nav>.slide>.slide-menu>li>a {
1815     text-decoration: none;
1816     white-space: nowrap;
1817 }
1818
1819 .main>.main-left .nav>.slide>.slide-menu>.active>a {
1820     color: white;
1821 }
1822
1823 .main>.main-left .nav>.slide>.slide-menu>li:hover {
1824     background: #F24C7C;
1825     border-top-right-radius: 50px;
1826     border-bottom-right-radius: 50px;
1827 }
1828
1829 .main>.main-left .nav>.slide>.slide-menu>.active:hover {
1830     background-color: #F24C7C;
1831     cursor: hand;
1832 }
1833
1834 /* The scroll bar of the navigation bar is compatible with each browser. */
1835
1836 /* Google */
1837
1838 .main>.main-left .navbar-container::-webkit-scrollbar {
1839     width: 6px;
1840     background: transparent;
1841 }
1842
1843 .main>.main-left .navbar-container::-webkit-scrollbar-button {
1844     display: none;
1845 }
1846
1847 .main>.main-left .navbar-container::-webkit-scrollbar-thumb {
1848     background-color: #ffffff61;
1849     border-radius: 10px;
1850 }
1851
1852 .main>.main-left .navbar-container::-webkit-scrollbar-thumb {
1853     background-color: #839dd67a;
1854     border-radius: 10px;
1855 }
1856
1857 .main>.main-left .navbar-container:hover::-webkit-scrollbar-thumb {
1858     background-color: #839dd67a;
1859 }
1860
1861 /* IE */
1862
1863 .main>.main-left .navbar-container {
1864     scrollbar-track-color: transparent;
1865     scrollbar-face-color: #839dd67a;
1866     scrollbar-arrow-color: transparent;
1867     scrollbar-3dlight-color: transparent;
1868     scrollbar-highlight-color: transparent;
1869     scrollbar-shadow-color: transparent;
1870     scrollbar-darkshadow-color: transparent;
1871     scrollbar-base-color: transparent;
1872 }
1873
1874 .main>.main-left .navbar-container:hover {
1875     scrollbar-face-color: #839dd67a;
1876 }
1877
1878 footer {
1879     text-align: right;
1880     padding-right: 1rem;
1881     color: #aaa;
1882     font-size: 0.8rem;
1883     text-shadow: 0px 0px 2px #BBB;
1884     position: absolute;
1885     bottom: 0;
1886     right: 0;
1887 }
1888
1889 /* The style of the prompt message */
1890
1891 .alert-message {
1892     padding: 13px 11%;
1893     border-radius: 10px;
1894     background-color: #FFF;
1895 }
1896
1897 .danger {
1898     background-color: #FA8072;
1899     color: black;
1900 }
1901
1902 .success {
1903     background-color: #90EE90;
1904     color: black;
1905 }
1906
1907 .error {
1908     color: red;
1909 }
1910
1911 .alert-message>h4 {
1912     padding: 7px 0 7px 36px;
1913     margin: 0;
1914     font-weight: normal;
1915     font-size: 18px;
1916     background: url(./no-pwd.png) no-repeat left 43%/ 28px;
1917     display: inline-block;
1918 }
1919
1920 .alert-message>p {
1921     font-size: 14px;
1922     line-height: 1.5rem;
1923 }
1924
1925 .alert-message a {
1926     padding: 4px 0;
1927     margin-top: 12px;
1928     width: 100%;
1929     background-color: transparent;
1930     color: #fff;
1931     font-size: 16px;
1932     border: 1px solid #fff;
1933     border-radius: 50px;
1934 }
1935
1936 /* All styles of the login interface */
1937 .node-main-login {
1938     height: auto;
1939     min-height: 100%;
1940     background: #fff url(./loginBG.png) no-repeat center center / cover;
1941 }
1942
1943 .node-main-login header {
1944     display: none;
1945 }
1946
1947 .node-main-login .main {
1948     height: auto;
1949 }
1950
1951 .node-main-login>.main>.main-left {
1952     display: none;
1953 }
1954
1955 .node-main-login>.main>.main-right {
1956     width: 100%;
1957     height: auto;
1958     min-height: 100%;
1959 }
1960
1961 .node-main-login>.main #maincontent {
1962     position: absolute;
1963     min-width: 492px;
1964     width: 100%;
1965     top: 47%;
1966     left: 50%;
1967     transform: translateX(-50%) translateY(-50%);
1968     height: auto;
1969     text-align: center;
1970 }
1971
1972 .node-main-login>.main .container {
1973     padding: 0;
1974     width: 30%;
1975     max-width: 492px;
1976     display: inline-block;
1977 }
1978
1979 .node-main-login>.main .logoImg a {
1980     margin: 0 0 18px 0;
1981     display: block;
1982     font-size: 30px;
1983     color: #fff;
1984     text-decoration: none;
1985 }
1986
1987 .node-main-login>.main .logoImg img:first-child {
1988     width: 72px;
1989 }
1990
1991 .node-main-login .warning {
1992     background-color: #3E4A62;
1993     color: #fff;
1994 }
1995
1996 .node-main-login>.main form h2 {
1997     margin: 17px 0;
1998     padding: 0;
1999     font-size: 24px;
2000     color: #fff;
2001     font-weight: normal;
2002     border: 0;
2003 }
2004
2005 .node-main-login>.main form .cbi-map-descr {
2006     margin: 0 0 12px;
2007     padding: 0;
2008     font-size: 12px;
2009     color: #B1B6BB;
2010 }
2011
2012 .node-main-login>.main form .cbi-section {
2013     margin: 0;
2014     padding: 0;
2015     background-color: transparent;
2016     box-shadow: none;
2017 }
2018
2019 .node-main-login>.main form .cbi-value {
2020     display: block;
2021 }
2022
2023 .node-main-login>.main form .cbi-value-title {
2024     margin: 0;
2025     padding: 0;
2026     display: none;
2027 }
2028
2029 .node-main-login>.main form .cbi-value .cbi-value-field {
2030     margin-bottom: 16px;
2031     display: block;
2032     width: 100%;
2033     position: relative;
2034 }
2035
2036 .node-main-login>.main form .cbi-value-field input {
2037     padding-left: 48px;
2038     width: 100%;
2039     border: 1px solid #556270;
2040     height: 42px;
2041     border-radius: 50px;
2042     font-size: 20px;
2043     color: #9c9fa1;
2044 }
2045
2046 .node-main-login form .cbi-value-field .iconpwd,
2047 .node-main-login form .cbi-value-field .iconuser,
2048 .node-main-login form .cbi-value-field .iconeye {
2049     height: 24px;
2050     width: 20px;
2051     position: absolute;
2052     top: 50%;
2053     left: 16px;
2054     transform: translateY(-50%);
2055 }
2056
2057 .node-main-login form .cbi-value-field .iconpwd {
2058     background: transparent url(./pwd.png) no-repeat center center / 100%;
2059 }
2060
2061 .node-main-login form .cbi-value-field .iconuser {
2062     background: transparent url(./user.png) no-repeat center center / 100%;
2063 }
2064
2065 .node-main-login form .cbi-value-field .iconeye {
2066     left: auto;
2067     right: 16px;
2068     background: transparent url(./op-eye.png) no-repeat center center / 100%;
2069 }
2070
2071 .node-main-login form .cbi-value-field .cleye {
2072     background-image: url(./cl-eye.png);
2073 }
2074
2075 .node-main-login form .cbi-value-field .opeye {
2076     background-image: url(./op-eye.png);
2077 }
2078
2079 .node-main-login form .cbi-page-actions {
2080     padding: 0;
2081     border: 0;
2082     text-align: center;
2083 }
2084
2085 .node-main-login form .cbi-page-actions input {
2086     margin: 0 0 0 -4px;
2087     padding: 9px 0;
2088     border: 0;
2089     display: inline-block;
2090     border-radius: 0;
2091     width: 50%;
2092     font-size: 18px;
2093 }
2094
2095 .node-main-login form .cbi-page-actions .cbi-button-apply {
2096     background-color: #F24C7C;
2097     border-top-left-radius: 50px;
2098     border-bottom-left-radius: 50px;
2099 }
2100
2101 .node-main-login form .cbi-page-actions .cbi-button-reset {
2102     background-color: #8a4568;
2103     color: #fff;
2104     border-top-right-radius: 50px;
2105     border-bottom-right-radius: 50px;
2106 }
2107
2108 .node-main-login input.cbi-input-text {
2109     box-shadow: 0 0 0 1000px white inset;
2110 }
2111
2112 /* Interface after login */
2113 .logged-in {
2114     background-color: #EBF1F6;
2115 }
2116
2117 .logged-in header {
2118     height: 70px;
2119 }
2120
2121 .logged-in .main {
2122     overflow: hidden;
2123 }
2124
2125 .logged-in .main-right {
2126     padding: 0 1rem 3rem 0;
2127     margin-top: 90px;
2128     float: right;
2129 }
2130
2131 .logged-in .main .logoImg {
2132     display: none;
2133 }
2134
2135 .logged-in .main .main-left .nav-container {
2136     background-color: #354057;
2137     border-radius: 20px;
2138     position: absolute;
2139     top: 10px;
2140     left: 10px;
2141     right: -10px;
2142     bottom: 10px;
2143 }
2144
2145 .logged-in .main .main-left .brand {
2146     margin: 0 auto;
2147     padding: 44px 0 23px;
2148     width: 85%;
2149     color: #fff;
2150     display: block;
2151     font-size: 18px;
2152     text-align: center;
2153     text-decoration: none;
2154     border-bottom: 2px solid #ffffff42;
2155     /* Single line text omitted */
2156     white-space: nowrap;
2157     overflow: hidden;
2158     text-overflow: ellipsis;
2159     -webkit-text-overflow: ellipsis;
2160     -o-text-overflow: ellipsis;
2161 }
2162
2163 .logged-in .alert-message {
2164     padding: 20px 2rem;
2165     border: none;
2166     background-color: #fff;
2167 }
2168
2169 .logged-in .alert-message a {
2170     padding: 8px 2rem;
2171     width: auto;
2172     border: none;
2173     background-color: #468EA4;
2174     color: #fff;
2175 }
2176
2177 @media screen and (max-width: 1600px) {
2178     .main-left {
2179         width: calc(0% + 13rem);
2180     }
2181
2182     .btn,
2183     .cbi-button {
2184         padding: 0.3rem 0.6rem;
2185         font-size: 0.8rem;
2186     }
2187
2188     header>.container>.pull-right>* {
2189         top: 0.35rem;
2190     }
2191
2192     .label {
2193         padding: 0.2rem 0.6rem;
2194     }
2195
2196     .cbi-value-title {
2197         width: 15rem;
2198         padding-right: 0.6rem;
2199     }
2200
2201     .cbi-input-textarea {
2202         font-size: small;
2203     }
2204 }
2205
2206 @media screen and (max-width: 1280px) {
2207     .node-main-login>.main .container {
2208         width: 50%;
2209     }
2210
2211     .cbi-tabmenu>li>a,
2212     .tabs>li>a {
2213         padding: 0.2rem 0.5rem;
2214     }
2215
2216     .panel-title {
2217         font-size: 1.1rem;
2218         padding-bottom: 1rem;
2219     }
2220
2221     table {
2222         font-size: 0.7rem !important;
2223         width: 100% !important;
2224     }
2225
2226     .main>.main-left .nav>li,
2227     .main>.main-left .nav>li a,
2228     .main>.main-left .nav>.slide>.menu {
2229         font-size: 0.9rem;
2230     }
2231
2232     .main>.main-left .nav>.slide>.slide-menu>li>a {
2233         font-size: 0.7rem;
2234     }
2235 }
2236
2237 @media screen and (max-width: 992px) {
2238     .logged-in header {
2239         padding: 0 .8rem;
2240         height: 45px;
2241     }
2242
2243     header .brand {
2244         display: none;
2245     }
2246
2247     header .btn-con {
2248         line-height: 45px;
2249     }
2250
2251     .main-left {
2252         width: auto;
2253         height: auto;
2254         position: fixed;
2255         z-index: 100;
2256         right: 100%;
2257         left: 0;
2258         top: 0;
2259         bottom: 0;
2260         background: #0000007d;
2261         border-radius: 0;
2262         min-width: 0;
2263         overflow: hidden;
2264     }
2265
2266     .main>.main-left .navbar-container {
2267         overflow-y: scroll;
2268         overflow-x: hidden;
2269     }
2270
2271     .main>.main-left .nav>.slide>.slide-menu>li {
2272         width: 90%;
2273     }
2274
2275     header .container {
2276         line-height: 43px;
2277     }
2278
2279     .main-right {
2280         width: 100%;
2281     }
2282
2283     .node-main-login>.main .container {
2284         width: 60%;
2285     }
2286
2287     .showSide {
2288         padding: 0.1rem;
2289         display: inline-block;
2290         vertical-align: middle;
2291     }
2292
2293     .cbi-value-title {
2294         width: 9rem;
2295         padding-right: 1rem;
2296     }
2297
2298     #diag-rc-output>pre {
2299         font-size: 1rem;
2300     }
2301
2302     .tr {
2303         display: flex;
2304         flex-direction: row;
2305         flex-wrap: wrap;
2306     }
2307
2308     .th,
2309     .td {
2310         flex: 2 2 25%;
2311         align-self: flex-start;
2312         text-overflow: ellipsis;
2313         word-wrap: break-word;
2314         display: inline-block;
2315     }
2316
2317     .td select,
2318     .td input[type="text"] {
2319         word-wrap: normal;
2320         width: 100%;
2321     }
2322
2323     .td [data-dynlist]>input,
2324     .td input.cbi-input-password {
2325         width: calc(100% - 1.5rem);
2326     }
2327
2328     .td[data-type="button"],
2329     .td[data-type="fvalue"] {
2330         flex: 1 1 12.5%;
2331         text-align: left;
2332     }
2333
2334     .th.cbi-value-field,
2335     .td.cbi-value-field,
2336     .th.cbi-section-table-cell,
2337     .td.cbi-section-table-cell {
2338         flex-basis: auto;
2339     }
2340
2341     .cbi-section-table-row {
2342         display: flex;
2343         flex-wrap: wrap;
2344         flex-direction: row;
2345         justify-content: space-between;
2346     }
2347
2348     .td.cbi-value-field,
2349     .cbi-section-table-cell {
2350         text-align: center;
2351         display: inline-block;
2352         flex: 10 10 auto;
2353     }
2354
2355     .td.cbi-section-actions {
2356         text-align: right;
2357         align-self: flex-end;
2358         vertical-align: bottom;
2359     }
2360
2361     .tr.table-titles,
2362     .tr.cbi-section-table-titles,
2363     .tr.cbi-section-table-descr {
2364         display: none;
2365     }
2366
2367     .tr[data-title]::before,
2368     .tr.cbi-section-table-titles.named::before {
2369         display: block;
2370         flex: 1 1 100%;
2371         background: #eef;
2372         font-size: .9rem;
2373         border-bottom: 1px solid rgba(0, 0, 0, .26);
2374     }
2375
2376     .td[data-title] {
2377         text-align: left;
2378         font-size: 12px;
2379     }
2380
2381     .td[data-title]::before {
2382         display: block;
2383     }
2384
2385     .hide-sm,
2386     .hide-xs {
2387         display: none;
2388     }
2389
2390     /* All styles of the login interface */
2391     .node-main-login .showSide {
2392         display: none !important;
2393     }
2394
2395     .logged-in .main {
2396         padding-bottom: .8rem;
2397     }
2398
2399     .logged-in .main .main-left .nav-container {
2400         background-color: #354057;
2401         border-radius: 0;
2402         position: absolute;
2403         top: 0;
2404         left: 0;
2405         right: 20%;
2406         bottom: 0;
2407     }
2408
2409     .logged-in .main-right {
2410         padding: 0 .8rem;
2411         margin-top: calc(45px + .8rem);
2412         width: 100%;
2413         max-width: unset;
2414         float: unset;
2415     }
2416
2417     .logged-in .alert-message {
2418         padding: 8px .8rem;
2419     }
2420
2421     .cbi-section {
2422         margin: .8rem 0 0 0;
2423         padding: .8rem;
2424     }
2425
2426     small {
2427         font-size: 10px;
2428         line-height: 0;
2429     }
2430
2431     .cbi-section>h3:first-child,
2432     .panel-title {
2433         font-size: 1rem;
2434     }
2435
2436     .network-status-table .ifacebox-body>span {
2437         font-size: 12px;
2438     }
2439
2440     .cbi-section .ifacebox-body .ifacebadge>span {
2441         font-size: 12px;
2442     }
2443
2444     .table .tr.cbi-rowstyle-1:nth-child(n),
2445     .table .tr:nth-child(n) {
2446         font-size: 12px;
2447     }
2448
2449     .node-network-firewall .table .tr.cbi-rowstyle-1:nth-child(n),
2450     .node-network-firewall .table .tr:nth-child(n) {
2451         border-radius: 20px;
2452         overflow: hidden;
2453     }
2454
2455     h2 {
2456         margin: 1rem 0 0 0;
2457         font-size: 1.4rem;
2458         padding-bottom: 0;
2459         border-bottom: none;
2460     }
2461
2462     h4 {
2463         font-size: 1rem;
2464     }
2465
2466     .cbi-section-node-tabbed {
2467         padding: 0 .5rem;
2468     }
2469
2470     .cbi-button,
2471     .cbi-button-action.important {
2472         margin-right: .3rem;
2473     }
2474
2475     select {
2476         border-bottom: 1px solid rgba(0, 0, 0, .26);
2477     }
2478
2479     .node-status-processes .table .tr.cbi-rowstyle-1:nth-child(n),
2480     .node-status-processes .table .tr:nth-child(n) {
2481         border-radius: 20px;
2482     }
2483 }
2484
2485 @media screen and (max-width: 768px) {
2486     .node-main-login {
2487         background: none;
2488     }
2489
2490     .node-main-login>.main .logoImg a {
2491         font-size: 30px;
2492         margin: 12px 0 22px 0;
2493         color: #354057;
2494     }
2495
2496     .node-main-login>.main #maincontent {
2497         padding-top: 0;
2498         padding-bottom: 1rem;
2499         min-width: 100%;
2500         top: 0;
2501         transform: translateY(0) translateX(-50%);
2502     }
2503
2504     .alert-message {
2505         padding: 8px 15%;
2506     }
2507
2508     .alert-message>h4 {
2509         font-size: 14px;
2510     }
2511
2512     .alert-message>p,
2513     .alert-message a {
2514         font-size: 12px;
2515     }
2516
2517     .a lert-message>h4 {
2518         padding: 8px 0 8px 36px;
2519     }
2520
2521     .alert-message a {
2522         padding: 8px 0;
2523         margin-top: 8px;
2524     }
2525
2526     .node-main-login .warning {
2527         background-color: #F5F5F6;
2528         color: #354057;
2529     }
2530
2531     .alert-message a {
2532         color: #f24c7c;
2533         background: #fff;
2534     }
2535
2536     .node-main-login>.main form h2 {
2537         font-size: 16px;
2538         margin: 20px 0 16px;
2539         color: #354057;
2540     }
2541
2542     .node-main-login>.main form .cbi-value-field input {
2543         padding-left: 34px;
2544         height: 36px;
2545         background-size: 16px;
2546         font-size: 16px;
2547     }
2548
2549     .node-main-login>.main form .cbi-value-field {
2550         margin-bottom: 20px;
2551     }
2552
2553     .node-main-login form .cbi-page-actions input {
2554         padding: 6px 0;
2555         font-size: 16px;
2556     }
2557
2558     .node-main-login form .cbi-value-field .iconpwd,
2559     .node-main-login form .cbi-value-field .iconuser,
2560     .node-main-login form .cbi-value-field .iconeye {
2561         height: 20px;
2562         width: 16px;
2563         left: 12px;
2564     }
2565
2566     .node-main-login form .cbi-value-field .iconeye {
2567         left: auto;
2568         right: 12px;
2569     }
2570
2571     .mobile-hide {
2572         display: none;
2573     }
2574
2575     .PC-hide {
2576         display: inline-block;
2577     }
2578 }
2579
2580 @media screen and (max-width: 480px) {
2581     body {
2582         font-size: 1rem;
2583     }
2584
2585     .cbi-value-title {
2586         width: 100%;
2587         min-width: 0rem !important;
2588         display: block;
2589         margin-top: 1rem;
2590         margin-bottom: 0.5rem;
2591         text-align: left;
2592     }
2593
2594     .cbi-value-field,
2595     .cbi-value-description {
2596         width: 100%;
2597     }
2598
2599     .cbi-value>.cbi-value-field {
2600         display: inline-block;
2601     }
2602
2603     .cbi-tabmenu>li,
2604     .tabs>li {
2605         padding: 0.6rem 0rem;
2606     }
2607
2608     .cbi-tabmenu>li>a,
2609     .tabs>li>a {
2610         padding: 0.2rem 0.3rem;
2611         font-size: 0.9rem;
2612     }
2613
2614     .cbi-page-actions>div>input {
2615         display: none;
2616     }
2617
2618     .tabs>li>a {
2619         font-size: 0.9rem;
2620     }
2621
2622     select,
2623     input {
2624         font-size: 10px;
2625     }
2626
2627     .panel-title {
2628         font-size: 1.4rem;
2629         padding-bottom: 1rem;
2630     }
2631
2632     .node-system-packages>.main .cbi-value.cbi-value-last>div {
2633         width: 100% !important;
2634     }
2635
2636     .node-system-packages>.main .cbi-value .cbi-value-field input {
2637         width: 100%;
2638     }
2639
2640     .node-status-iptables>.main div>.cbi-map>form {
2641         position: static !important;
2642         margin: 0 0 2rem 0;
2643         padding: 2rem;
2644         border: 0;
2645         font-weight: normal;
2646         font-style: normal;
2647         line-height: 1;
2648         font-family: inherit;
2649         min-width: inherit;
2650         background-color: #FFF;
2651         border-radius: 20px;
2652         -webkit-overflow-scrolling: touch;
2653     }
2654
2655     .node-status-iptables>.main div>.cbi-map>form input[type="submit"] {
2656         width: 100% !important;
2657         margin: 0;
2658     }
2659
2660     .node-status-iptables>.main div>.cbi-map>form input[type="submit"]+input[type="submit"] {
2661         margin-top: 1rem;
2662     }
2663
2664     .node-main-login>.main .container {
2665         min-width: 90%;
2666     }
2667
2668     .th,
2669     .td {
2670         flex-basis: 50%;
2671     }
2672
2673     .td.cbi-value-field {
2674         flex-basis: 100%;
2675     }
2676
2677     .td.cbi-value-field[data-type="dvalue"] {
2678         flex-basis: 50%;
2679     }
2680
2681     .td.cbi-value-field[data-type="button"],
2682     .td.cbi-value-field[data-type="fvalue"] {
2683         flex-basis: 25%;
2684         text-align: left;
2685     }
2686
2687     .tr[data-title]::before,
2688     .tr.cbi-section-table-titles.named::before {
2689         font-size: 1rem;
2690     }
2691
2692     .hide-xs {
2693         display: none;
2694     }
2695
2696     /* All styles of the login interface */
2697     .node-main-login>.main .cbi-value {
2698         padding: 0;
2699     }
2700
2701     .alert-message {
2702         padding: 8px 10%;
2703     }
2704 }
2705
2706 @media screen and (min-width: 992px) {
2707     .cbi-value-field .cbi-input-select {
2708         width: 20rem;
2709     }
2710
2711     .cbi-value-field .cbi-dropdown {
2712         min-width: 20rem;
2713     }
2714 }
2715
2716 @media screen and (min-width: 1280px) {
2717     .cbi-value-field .cbi-input-select {
2718         width: 22rem;
2719     }
2720
2721     .cbi-value-field .cbi-dropdown {
2722         min-width: 22rem;
2723     }
2724 }
2725
2726 @media screen and (min-width: 1600px) {
2727     .cbi-value-field .cbi-input-select {
2728         width: 25rem;
2729     }
2730
2731     .cbi-value-field .cbi-dropdown {
2732         min-width: 25rem;
2733     }
2734 }