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