themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css

   1 @charset "utf-8";
   2
   3 .lang_he {
   4         direction: RTL;
   5         unicode-bidi: embed;
   6 }
   7
   8 @media all {
   9
  10 html {
  11         min-height: 100%;
  12         height: auto;
  13         position:relative;
  14 }
  15
  16 body {
  17         color: #ffffff;
  18         background-color: #4a6b7c;
  19         background-position: bottom center;
  20         background-repeat: repeat-x;
  21         font-family: Arial, Verdana, sans-serif;
  22         font-size: 10pt;
  23         padding-bottom: 1.5em;
  24 }
  25
  26 * {
  27         margin: 0;
  28         padding: 0;
  29         box-sizing: border-box;
  30 }
  31
  32 .table { display: table; width: 100%; position: relative; }
  33 .tr { display: table-row; }
  34 .thead { display: table-header-group; }
  35 .tbody { display: table-row-group; }
  36 .tfoot { display: table-footer-group; }
  37 .td, .th { display: table-cell; }
  38 .th { font-weight: bold; }
  39
  40 .table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
  41 .table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
  42
  43 .col-1 { flex: 1 1 30px !important; -webkit-flex: 1 1 30px !important; }
  44 .col-2 { flex: 2 2 60px !important; -webkit-flex: 2 2 60px !important; }
  45 .col-3 { flex: 3 3 90px !important; -webkit-flex: 3 3 90px !important; }
  46 .col-4 { flex: 4 4 120px !important; -webkit-flex: 4 4 120px !important; }
  47 .col-5 { flex: 5 5 150px !important; -webkit-flex: 5 5 150px !important; }
  48 .col-6 { flex: 6 6 180px !important; -webkit-flex: 6 6 180px !important; }
  49 .col-7 { flex: 7 7 210px !important; -webkit-flex: 7 7 210px !important; }
  50 .col-8 { flex: 8 8 240px !important; -webkit-flex: 8 8 240px !important; }
  51 .col-9 { flex: 9 9 270px !important; -webkit-flex: 9 9 270px !important; }
  52 .col-10 { flex: 10 10 300px !important; -webkit-flex: 10 10 300px !important; }
  53
  54 .tr.placeholder {
  55         height: 3.5em;
  56 }
  57
  58 .tr.placeholder > .td {
  59         position: absolute;
  60         left: 0;
  61         right: 0;
  62         bottom: 0;
  63         text-align: center;
  64         line-height: 3em;
  65 }
  66
  67 .nowrap {
  68         white-space: nowrap;
  69 }
  70
  71 a img {
  72         border: none;
  73         text-decoration: none;
  74 }
  75
  76 #maincontainer {
  77         display: flex;
  78 }
  79
  80 #maincontent {
  81         flex-basis: 100%;
  82 }
  83
  84 #mainmenu {
  85         max-width: 200px;
  86         background: #f5f5f5;
  87         border: 1px solid #444;
  88         border-width: 0 0 1px 1px;
  89         font-size: 11pt;
  90         padding-bottom: 1em;
  91 }
  92
  93 #mainmenu ul {
  94         display: block;
  95         margin: 0;
  96         padding: 0;
  97 }
  98
  99 #mainmenu ul li {
 100         display: block;
 101         white-space: nowrap;
 102 }
 103
 104 #mainmenu ul li > a {
 105         display: block;
 106         color: #444;
 107         padding: .4em .5em;
 108         text-decoration: none;
 109 }
 110
 111 #mainmenu ul li.selected > a {
 112         background: #fff;
 113         color: #37c;
 114         border: 1px dotted #444;
 115         border-width: 1px 0;
 116 }
 117
 118 #mainmenu ul li.selected:first-child > a {
 119         border-top: none;
 120 }
 121
 122 #mainmenu ul li li > a {
 123         font-size: 85%;
 124         padding-left: 1.5em;
 125 }
 126
 127 #mainmenu ul li > ul {
 128         flex-basis: 100%;
 129         max-height: 0;
 130         visibility: hidden;
 131         transition: max-height .15s;
 132 }
 133
 134 #mainmenu ul:not(.active) li.selected > ul,
 135 #mainmenu ul li.active > ul {
 136         max-height: 1000px;
 137         visibility: visible;
 138         transition: max-height .25s;
 139 }
 140
 141 #mainmenu ul li.mainmenu-item-logout {
 142         margin-top: 15%;
 143 }
 144
 145 #tabmenu {
 146         padding: 0;
 147         margin: -.5em -.5em .5em -.5em;
 148         background: #bbb;
 149 }
 150
 151 #tabmenu ul {
 152         border-color: #444;
 153         padding-top: .5em;
 154         flex-wrap: wrap;
 155         background: repeating-linear-gradient(#f5f5f5, #bbb 2.4em, #f5f5f5 2.4em, #bbb);
 156         line-height: 1em;
 157 }
 158
 159 #tabmenu ul li {
 160         border-color: #444;
 161 }
 162
 163 #tabmenu ul li.cbi-tab {
 164         background: #f5f5f5;
 165 }
 166
 167 abbr,
 168 acronym {
 169         font-style: normal;
 170         font-variant: normal;
 171 }
 172
 173 abbr[title],
 174 acronym[title] {
 175         border-bottom: 1px dotted;
 176         cursor: help;
 177 }
 178
 179 a:link abbr[title],
 180 a:visited abbr[title],
 181 a:link acronym[title],
 182 a:visited acronym[title] {
 183         cursor: pointer;
 184 }
 185
 186 code {
 187         font-family: monospace;
 188         white-space: pre;
 189 }
 190
 191 hr {
 192         margin: .5em 0;
 193         padding: 0;
 194         border: 1px solid #444;
 195         border-width: 0 0 1px 0;
 196 }
 197
 198 #maincontent ul {
 199         margin-left: 2em;
 200 }
 201
 202 .warning {
 203         color: red;
 204         background-color: white;
 205         font-weight: bold;
 206 }
 207
 208 .clear {
 209         clear: both;
 210 }
 211
 212 .skiplink,
 213 .navigation,
 214 .hidden {
 215         position: absolute;
 216         left: -1000px;
 217         top: -1000px;
 218         width: 0px;
 219         height: 0px;
 220         overflow: hidden;
 221         display: inline;
 222 }
 223
 224 .error {
 225         color: #ff0000;
 226         background-color: white;
 227 }
 228
 229 .alert-message {
 230         font-weight: normal;
 231         padding: .5em;
 232         border-radius: 3px;
 233         border: 1px solid #a22;
 234         margin: 0 0 .5em 0;
 235 }
 236
 237 .alert-message, .cbi-tooltip.error {
 238         border-color: #a22;
 239         background: #fee;
 240         color: #a22;
 241 }
 242
 243 .alert-message.notice, .cbi-tooltip.notice {
 244         border-color: #15a;
 245         background: #e6f6ff;
 246         color: #15a;
 247 }
 248
 249 .alert-message.warning, .cbi-tooltip.warning {
 250         border-color: #ed5;
 251         background: #fe9;
 252         color: #650;
 253 }
 254
 255 div.hostinfo {
 256         float: left;
 257         margin: 0;
 258         padding: 0;
 259         width: auto;
 260         padding: 0.5em;
 261 }
 262
 263 .lang_he div.hostinfo {
 264         float: right;
 265 }
 266
 267 #xhr_poll_status {
 268         cursor: pointer;
 269 }
 270
 271 #xhr_poll_status #xhr_poll_status_off {
 272         font-weight: bold;
 273         color: #FF0000;
 274 }
 275
 276 #xhr_poll_status #xhr_poll_status_on {
 277         font-weight: bold;
 278         color: #00FF00;
 279 }
 280
 281 #menubar {
 282         position: relative;
 283         width: 100%;
 284         background: #000000;
 285         color: #ffffff;
 286 }
 287
 288 #menubar .warning {
 289         color: red;
 290         background-color: #557788;
 291 }
 292
 293 html #menubar a:link,
 294 html #menubar a:visited {
 295         position: relative;
 296         display: block;
 297         padding: 0.5em;
 298         background: #000000;
 299         color: #ffffff;
 300         text-decoration: none;
 301 }
 302
 303
 304 html #menubar a:link:hover,
 305 html #menubar a:visited:hover,
 306 html #menubar a:link:active,
 307 html #menubar a:visited:active,
 308 #menubar a:link:focus,
 309 #menubar a:visited:focus {
 310         background: #000000;
 311         color: #ffff00;
 312         font-weight: bold;
 313 }
 314
 315 html #menubar a:link.active,
 316 html #menubar a:visited.active,
 317 html #menubar a:link.preactive,
 318 html #menubar a:visited.preactive {
 319         background: #000000;
 320         color: #ffff00;
 321         font-weight: bold;
 322 }
 323
 324 html #menubar a:link.warning,
 325 html #menubar a:visited.warning {
 326         background: #000000;
 327         color: red;
 328         font-weight: bold;
 329 }
 330
 331 #modemenu {
 332         width: auto;
 333         background: #000000;
 334         color: #ffffff;
 335         list-style: none;
 336         margin-right: 1px;
 337         margin-left: 2em;
 338         float: right;
 339 }
 340
 341 #modemenu li {
 342         float: right;
 343         list-style: none;
 344 }
 345
 346 #savemenu {
 347         float: right;
 348 }
 349
 350 .lang_he #savemenu {
 351         float: left;
 352 }
 353
 354 .lang_de #submenu_admin_uci {
 355         width: 12em;
 356 }
 357
 358 .lang_ru #submenu_admin_uci {
 359         width: 11.5em;
 360 }
 361
 362 textarea#syslog {
 363         width: 98%;
 364         min-height: 500px;
 365         border: 3px solid #cccccc;
 366         padding: 5px;
 367         font-family: monospace;
 368 }
 369
 370 #maincontainer {
 371         clear: both;
 372         width: 96%;
 373         margin: 0 auto;
 374         height:100%;
 375 }
 376
 377 #maincontent {
 378         padding: 0.5em;
 379         background: #f5f5f5;
 380         color: #000000;
 381         border-width: 0 1px 1px 1px;
 382         border-style: solid;
 383         border-color: #444444;
 384 }
 385
 386 #applyreboot-section {
 387         margin: 2rem;
 388         line-height: 300%;
 389 }
 390
 391 .lang_he #maincontent {
 392         direction: rtl;
 393 }
 394
 395 h2, h3, h4, legend {
 396         font-size: 150%;
 397         font-family: Trebuchet MS, Verdana, sans-serif;
 398         font-weight: bold;
 399         margin: .25em 0 .5em 0;
 400         border-bottom: 1px solid;
 401         padding-bottom: 4px;
 402         display: block;
 403         width: 100%;
 404 }
 405
 406 h3, legend {
 407         font-size: 125%;
 408 }
 409
 410 h4 {
 411         font-size: 112%;
 412 }
 413
 414 fieldset { border: none; }
 415 fieldset > legend { float: left; }
 416 fieldset > legend + * { clear: both; }
 417
 418 p {
 419         margin-bottom: .5em;
 420 }
 421
 422 .cbi-section {
 423         margin: 0 0 .5em 0;
 424 }
 425
 426 .cbi-section > h3,
 427 .cbi-section > legend {
 428         margin-top: .5em;
 429 }
 430
 431 .cbi-section-descr {
 432         margin-bottom: 0.5em;
 433         font-size: 95%;
 434 }
 435
 436 .cbi-section-descr:empty {
 437         display: none;
 438 }
 439
 440 .cbi-title-ref {
 441         color: #37c;
 442 }
 443
 444 .cbi-title-ref::after {
 445         content: "➙";
 446 }
 447
 448 ul.cbi-apply {
 449         font-size: 90%;
 450 }
 451
 452 input:-webkit-input-placeholder {
 453         color: #AAAAAA;
 454 }
 455
 456 input:-moz-placeholder {
 457         color: #AAAAAA;
 458 }
 459
 460 input:-ms-input-placeholder {
 461         color: #AAAAAA;
 462 }
 463
 464 input[type=submit],
 465 input[type=reset],
 466 input[type=image],
 467 input[type=button] {
 468         cursor: pointer;
 469 }
 470
 471 select,
 472 input,
 473 textarea {
 474         background: #eeeeee;
 475         color: #000000;
 476         border-width: 1px;
 477         border-color: #000000;
 478 }
 479
 480 input[type=image] {
 481         border: none;
 482 }
 483
 484 input:focus,
 485 input:not(.btn):not(.cbi-button):hover,
 486 select:focus,
 487 select:hover {
 488         background-color: #ffffff;
 489         color: #000000;
 490 }
 491
 492 input[type=text],
 493 input[type=password] {
 494         padding: 0 3px;
 495 }
 496
 497 select,
 498 input[type=text],
 499 input[type=password] {
 500         width: 20em;
 501         font-size: inherit;
 502         line-height: 13pt;
 503         height: 14pt;
 504 }
 505
 506 select[multiple] {
 507         height: auto;
 508 }
 509
 510 input[type=radio],
 511 input[type=checkbox],
 512 [data-dynlist] > input + img,
 513 input.cbi-input-password + img {
 514         vertical-align: middle;
 515 }
 516
 517 .td select,
 518 .td .cbi-dropdown,
 519 .td input[type=text],
 520 .cbi-dynlist > .add-item > .cbi-dropdown {
 521         width: 100%;
 522 }
 523
 524 .td [data-dynlist] > input,
 525 .td input.cbi-input-password {
 526         width: calc(100% - 20px);
 527 }
 528
 529 img.cbi-image-button {
 530         cursor: pointer;
 531         margin: 0 2px;
 532         vertical-align: middle;
 533 }
 534
 535 .btn, .cbi-button, .item::after {
 536         padding: 0 .5em;
 537         border-radius: 3px;
 538         border: 1px solid #aaa;
 539         text-decoration: none;
 540         color: #000;
 541         display: inline-block;
 542         font-size: inherit;
 543         -webkit-appearance: none;
 544         background: #fff;
 545         text-align: center;
 546         font-weight: bold;
 547         line-height: 13pt;
 548         height: 16pt;
 549         box-sizing: border-box;
 550         cursor: pointer;
 551 }
 552
 553 .btn:hover, .cbi-button:hover, .item:hover::after {
 554         box-shadow: 0 0 3px #37c;
 555 }
 556
 557 .btn[disabled],
 558 .btn[disabled]:hover,
 559 .cbi-button[disabled],
 560 .cbi-button[disabled]:hover {
 561         opacity: .6;
 562         cursor: default;
 563         pointer-events: none;
 564 }
 565
 566 .cbi-button-positive,
 567 .cbi-button-fieldadd,
 568 .cbi-button-add,
 569 .cbi-button-save {
 570         border-color: #595;
 571         color: #595;
 572 }
 573
 574 .cbi-button-neutral,
 575 .cbi-button-reset,
 576 .cbi-button-download,
 577 .cbi-button-find,
 578 .cbi-button-link,
 579 .cbi-button-up,
 580 .cbi-button-down {
 581         border-color: #444;
 582         color: #444;
 583 }
 584
 585 .cbi-button-action,
 586 .cbi-button-apply,
 587 .cbi-button-reload,
 588 .cbi-button-edit {
 589         border-color: #37c;
 590         color: #37c;
 591 }
 592
 593 .cbi-button-negative,
 594 .cbi-section-remove .cbi-button,
 595 .cbi-button-remove {
 596         border-color: #a22;
 597         color: #a22;
 598 }
 599
 600 .cbi-button-action.important,
 601 .cbi-page-actions .cbi-button-apply,
 602 .cbi-section-actions .cbi-button-edit {
 603         color: #fff;
 604         background: #37c;
 605 }
 606
 607 .cbi-button-positive.important,
 608 .cbi-page-actions .cbi-button-save {
 609         color: #fff;
 610         background: #595;
 611 }
 612
 613 .cbi-button-negative.important {
 614         color: #fff;
 615         background: #a22;
 616 }
 617
 618 .cbi-page-actions .cbi-button-apply + .cbi-button-save {
 619         background: #fff;
 620         color: #595;
 621 }
 622
 623 .cbi-input-invalid {
 624         background-image: url('../resources/cbi/reset.gif');
 625         background-repeat: no-repeat;
 626         background-position: right;
 627         color: #FF0000 !important;
 628         border-color: #FF0000;
 629 }
 630
 631 table td, table th {
 632         color: #000000;
 633 }
 634
 635 .table .td, .table .th {
 636         color: #000000;
 637         padding: .25em;
 638 }
 639
 640 .table.smalltext {
 641         background: #f5f5f5;
 642         color: #000000;
 643         border-top: 1px solid #666666;
 644         border-right: 1px solid #666666;
 645         border-bottom: 1px solid #666666;
 646         font-size: 90%;
 647         width: 80%;
 648         margin-left: auto;
 649         margin-right: auto;
 650         border-collapse: collapse;
 651 }
 652
 653 .table.smalltext .tr:hover .td {
 654         background-color: #bbddee;
 655         color: #000000;
 656 }
 657
 658 .table.smalltext .tr .th {
 659         padding: 0 0.25em;
 660         border-left: 1px solid #666666;
 661         text-align: left;
 662 }
 663
 664 .table.smalltext .tr .td {
 665         padding: 0 0.25em;
 666         border-top: 1px solid #666666;
 667         border-left: 1px solid #666666;
 668 }
 669
 670 .cbi-rowstyle-1 {
 671         background-color: #eeeeff;
 672         color: #000000;
 673 }
 674
 675 .cbi-rowstyle-2 {
 676         color: #000000;
 677 }
 678
 679 .cbi-value {
 680         clear: left;
 681         vertical-align: middle;
 682         padding: 0.25em 0.6em;
 683         border-bottom: 1px dotted #bbbbbb;
 684 }
 685
 686 .cbi-value:hover {
 687         background: #f8f8f8;
 688         color: #000000;
 689 }
 690
 691 .cbi-value-title {
 692         float: left;
 693         width: 40%;
 694         line-height: 1.8em;
 695 }
 696
 697 .cbi-value-field {
 698         width: 58%;
 699         margin-left: 40%;
 700         padding: 0.25em 0;
 701 }
 702
 703 .td.cbi-value-field {
 704         width: auto;
 705         margin-left: 0;
 706         align-self: center;
 707         vertical-align: middle;
 708 }
 709
 710 .cbi-value-description {
 711         background-image: url(/luci-static/resources/cbi/help.gif);
 712         background-position: .25em .25em;
 713         background-repeat: no-repeat;
 714         margin: .25em 0 0 0;
 715         padding: .25em .25em .25em 1.75em;
 716 }
 717
 718 .cbi-section-create {
 719         padding: 0 0 .25em 0;
 720         margin: -3px;
 721         display: inline-flex;
 722         align-items: center;
 723 }
 724
 725 .cbi-section-create > * {
 726         margin: 3px;
 727         flex: 1 1 auto;
 728 }
 729
 730 .cbi-section-create > * > input {
 731         width: 100%;
 732 }
 733
 734 .cbi-section-remove > .cbi-button {
 735         margin-bottom: -1px;
 736         border-radius: 3px 3px 0 0;
 737 }
 738
 739 .cbi-section-node + .cbi-section-create {
 740         padding-top: 0;
 741 }
 742
 743 div.cbi-map-descr {
 744         margin-bottom: 1em;
 745 }
 746
 747 div.cbi-optionals {
 748         padding: 0.25em;
 749         border-bottom: 1px dotted #bbbbbb;
 750 }
 751
 752 .cbi-section-node {
 753         clear: both;
 754         padding-bottom: 0;
 755         position: relative;
 756         border: 1px dotted #555;
 757         background: #fff;
 758         margin-bottom: .5em;
 759 }
 760
 761 .cbi-section-node-tabbed {
 762         border-top: none;
 763         margin-top: -.5em;
 764 }
 765
 766 .cbi-section-node .cbi-value:last-child,
 767 .cbi-section-node .cbi-optionals:last-child {
 768         border-bottom: none;
 769 }
 770
 771 .table.cbi-section-table {
 772         width: 100%;
 773         font-size: 95%;
 774         border: 1px dotted #444;
 775         background: #fff;
 776         margin: 0 0 .5em 0;
 777 }
 778
 779 .cbi-section-node > .table.cbi-section-table {
 780         border: none;
 781         margin: 0;
 782 }
 783
 784 @keyframes flash {
 785         0% { opacity: 1; }
 786         50% { opacity: .5; }
 787         100% { opacity: 1; }
 788 }
 789
 790 .tr.cbi-section-table-row.flash {
 791         animation: flash .35s;
 792 }
 793
 794 .tr.cbi-section-table-descr .th {
 795         font-weight: normal;
 796         font-size: 90%;
 797         vertical-align: top;
 798 }
 799
 800 .td.cbi-section-table-optionals {
 801         text-align: left !important;
 802         padding-top: 1em;
 803 }
 804
 805 .th.cbi-section-actions,
 806 .td.cbi-section-actions {
 807         overflow: visible;
 808         align-self: center;
 809         vertical-align: middle;
 810 }
 811
 812 .th.cbi-section-actions > *,
 813 .td.cbi-section-actions > * {
 814         display: flex;
 815         justify-content: flex-end;
 816         flex-direction: row;
 817         flex: 1 1 150px;
 818         margin: auto -1px auto auto;
 819 }
 820
 821 .td.cbi-section-actions > * > *,
 822 .td.cbi-section-actions > * > form > * {
 823         flex: 1 1 4em;
 824         margin: 0 1px;
 825 }
 826
 827 .td.cbi-section-actions > * > form {
 828         display: flex;
 829         margin: 0;
 830 }
 831
 832 .cbi-page-actions {
 833         display: flex;
 834         justify-content: flex-end;
 835         margin: -3px;
 836 }
 837
 838 .cbi-page-actions > form {
 839         display: flex;
 840 }
 841
 842 .cbi-page-actions > * {
 843         flex: 0 1 auto;
 844         margin: 3px;
 845 }
 846
 847 .cbi-page-actions > form > * {
 848         flex: 1;
 849         margin: 0 3px 0 0;
 850 }
 851
 852 .cbi-page-actions > .cbi-button-save,
 853 .cbi-page-actions > .cbi-button-apply,
 854 .cbi-page-actions > form[method="post"] {
 855         margin-left: auto;
 856 }
 857
 858 *::-ms-backdrop,
 859 .cbi-page-actions > .cbi-button-save,
 860 .cbi-page-actions > .cbi-button-apply,
 861 .cbi-page-actions > form[method="post"] {
 862         margin-left: 50%;
 863 }
 864
 865 .cbi-page-actions > .cbi-button-apply + .cbi-button-save,
 866 .cbi-page-actions > .cbi-button-save + form[method="post"],
 867 .cbi-page-actions > form[method="post"] + form[method="post"] {
 868         margin-left: 3px;
 869 }
 870
 871 .th[data-type="button"], .td[data-type="button"],
 872 .th[data-type="fvalue"], .td[data-type="fvalue"] {
 873         flex: 1 1 2em;
 874         text-align: center;
 875 }
 876
 877 #cbi-network-switch_vlan .th,
 878 #cbi-network-switch_vlan .td {
 879         flex-basis: 12%;
 880 }
 881
 882 .td[data-title]::before {
 883         content: attr(data-title) ":\20";
 884         font-weight: bold;
 885         text-align: left;
 886         display: none;
 887         padding: 1px;
 888         white-space: nowrap;
 889 }
 890
 891 .td[data-description]::after {
 892         content: attr(data-description);
 893         font-size: 90%;
 894         text-align: left;
 895         display: none;
 896         background: url(/luci-static/resources/cbi/help.gif) left top no-repeat;
 897         padding: .125em 0 .125em 18px;
 898         margin: .125em 0;
 899 }
 900
 901 .tr.placeholder .td[data-title]::before,
 902 .tr.placeholder .td[data-description]::after {
 903         display: none;
 904 }
 905
 906 .tr[data-title]::before,
 907 .tr.cbi-section-table-titles.named::before {
 908         content: attr(data-title) "\20";
 909         font-weight: bold;
 910         text-align: left;
 911         display: table-cell;
 912         align-self: center;
 913         flex: 1 1 5%;
 914         padding: .25em;
 915         white-space: normal;
 916         word-wrap: break-word;
 917         vertical-align: middle;
 918 }
 919
 920 .cbi-value-helpicon img {
 921         vertical-align: bottom;
 922 }
 923
 924 .td.cbi-value-error {
 925         border-color: red;
 926 }
 927
 928 .cbi-value-error input,
 929 .cbi-value-error select {
 930         color: red;
 931         background-color: #ffcccc;
 932 }
 933
 934 .cbi-section-error {
 935         color: red;
 936         background-color: white;
 937         font-size: 95%;
 938         border: 1px dotted red;
 939         margin: 3px;
 940         padding: 3px;
 941 }
 942
 943 .cbi-value-field var {
 944         color: #2222FF;
 945 }
 946
 947 ul.cbi-tabmenu {
 948         list-style-type: none;
 949         display: flex;
 950         margin: 0 0 .5em 0 !important;
 951         padding: 0 0 0 5px;
 952         border-bottom: 1px solid #bbb;
 953 }
 954
 955 ul.cbi-tabmenu li {
 956         display: inline-flex;
 957         margin: 0 5px -1px 0;
 958         flex: 0 1 auto;
 959         border: 1px solid #bbb;
 960         border-bottom: none;
 961         border-radius: 3px 3px 0 0;
 962         background: linear-gradient(#ddd 90%, #aaa 100%);
 963         color: #888;
 964         overflow: hidden;
 965         text-overflow: ellipsis;
 966         word-wrap: break-word;
 967 }
 968
 969 ul.cbi-tabmenu li a,
 970 ul.cbi-tabmenu li a:hover {
 971         text-decoration: none;
 972         color: inherit;
 973         padding: 5px;
 974         flex: 1 1 auto;
 975         width: 100%;
 976         height: 100%;
 977 }
 978
 979 ul.cbi-tabmenu li.cbi-tab-highlighted {
 980         color: #000;
 981         background: #fea;
 982 }
 983
 984 ul.cbi-tabmenu li.cbi-tab {
 985         color: #000;
 986         background: #fff;
 987 }
 988
 989 .cbi-tab-descr {
 990         background-image: url(/luci-static/resources/cbi/help.gif);
 991         background-position: .25em 50%;
 992         background-repeat: no-repeat;
 993         border-bottom: 1px solid #ccc;
 994         margin: 0 .25em .25em .25em;
 995         padding: .5em .5em .5em 2em;
 996 }
 997
 998
 999 .cbi-dropdown {
1000         border: 1px inset #000;
1001         display: inline-flex;
1002         cursor: pointer;
1003         background: #eee;
1004         position: relative;
1005         padding: 0;
1006         color: #000;
1007         min-width: 20em;
1008         max-width: 100%;
1009 }
1010
1011 .cbi-dropdown:hover {
1012         background: #fff;
1013 }
1014
1015 .cbi-dropdown:focus,
1016 .cbi-dynlist > .item:focus {
1017         outline: 2px solid #4b6e9b;
1018 }
1019
1020 .cbi-dropdown > ul {
1021         margin: 0 !important;
1022         padding: 0;
1023         list-style: none;
1024         overflow-x: hidden;
1025         overflow-y: auto;
1026         display: flex;
1027         width: 100%;
1028 }
1029
1030 .cbi-dropdown > ul.preview {
1031         display: none;
1032 }
1033
1034 .cbi-dropdown > .open {
1035         border: 2px outset #eee;
1036         flex-basis: 15px;
1037 }
1038
1039 .cbi-dropdown > .open,
1040 .cbi-dropdown > .more {
1041         flex-grow: 0;
1042         flex-shrink: 0;
1043         display: flex;
1044         flex-direction: column;
1045         justify-content: center;
1046         text-align: center;
1047         line-height: 2em;
1048         padding: 0 .25em;
1049 }
1050
1051 .cbi-dropdown > .more,
1052 .cbi-dropdown > ul > li[placeholder] {
1053         color: #777;
1054         font-weight: bold;
1055         text-shadow: 1px 1px 0px #fff;
1056         display: none;
1057 }
1058
1059 .cbi-dropdown > ul > li {
1060         display: none;
1061         padding: .25em;
1062         white-space: nowrap;
1063         overflow: hidden;
1064         text-overflow: ellipsis;
1065         flex-shrink: 1;
1066         flex-grow: 1;
1067         align-items: center;
1068         align-self: center;
1069         min-height: 20px;
1070 }
1071
1072 .cbi-dropdown > ul > li .hide-open { display: initial; }
1073 .cbi-dropdown > ul > li .hide-close { display: none; }
1074
1075 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1076         border-left: 1px solid #ccc;
1077 }
1078
1079 .cbi-dropdown[empty] > ul {
1080         max-width: 1px;
1081 }
1082
1083 .cbi-dropdown > ul > li > form {
1084         display: none;
1085         margin: 0;
1086         padding: 0;
1087         pointer-events: none;
1088 }
1089
1090 .cbi-dropdown > ul > li img {
1091         vertical-align: middle;
1092         margin-right: .25em;
1093 }
1094
1095 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1096         margin: 0;
1097 }
1098
1099 .cbi-dropdown > ul > li input[type="text"] {
1100         height: 20px;
1101 }
1102
1103 .cbi-dropdown[open] {
1104         position: relative;
1105 }
1106
1107 .cbi-dropdown[open] > ul.dropdown {
1108         display: block;
1109         background: #f6f6f5;
1110         border: 1px solid #918e8c;
1111         box-shadow: 0 0 4px #918e8c;
1112         position: absolute;
1113         z-index: 1100;
1114         max-width: none;
1115         min-width: 100%;
1116         width: auto;
1117 }
1118
1119 .cbi-dropdown > ul > li[display],
1120 .cbi-dropdown[open] > ul.preview,
1121 .cbi-dropdown[open] > ul.dropdown > li,
1122 .cbi-dropdown[multiple] > ul > li > label,
1123 .cbi-dropdown[multiple][open] > ul.dropdown > li,
1124 .cbi-dropdown[multiple][more] > .more,
1125 .cbi-dropdown[multiple][empty] > .more {
1126         flex-grow: 1;
1127         display: flex;
1128         align-items: center;
1129 }
1130
1131 .cbi-dropdown[empty] > ul > li,
1132 .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
1133 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1134         display: block;
1135 }
1136
1137 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
1138 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: initial; }
1139
1140 .cbi-dropdown[open] > ul.dropdown > li {
1141         border-bottom: 1px solid #ccc;
1142 }
1143
1144 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1145         background: #b0d0f0;
1146 }
1147
1148 .cbi-dropdown[open] > ul.dropdown > li.focus {
1149         background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
1150 }
1151
1152 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1153         margin-bottom: 0;
1154         border-bottom: none;
1155 }
1156
1157 .cbi-dropdown[open] > ul.dropdown > li[unselectable] {
1158         opacity: 0.7;
1159 }
1160
1161 .cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
1162         width: 100%;
1163 }
1164
1165 .cbi-dropdown[disabled] {
1166         pointer-events: none;
1167         opacity: .6;
1168 }
1169
1170 .cbi-dynlist {
1171         height: auto;
1172         min-height: 30px;
1173         min-width: 210px;
1174         max-width: 100%;
1175         width: auto;
1176         display: inline-flex;
1177         flex-direction: column;
1178 }
1179
1180 .cbi-dynlist > .item {
1181         margin-bottom: 4px;
1182         background: #eee;
1183         padding: 2px 2em 2px 4px;
1184         border: 1px outset #000;
1185         border-radius: 3px;
1186         position: relative;
1187         pointer-events: none;
1188         overflow: hidden;
1189         text-overflow: ellipsis;
1190         white-space: nowrap;
1191 }
1192
1193 .cbi-dynlist > .item::after {
1194         content: "×";
1195         position: absolute;
1196         display: inline-flex;
1197         align-items: center;
1198         top: -1px;
1199         right: -1px;
1200         bottom: -1px;
1201         padding: 0 6px;
1202         border: 1px outset #000;
1203         background: #fff;
1204         border-radius: 0 3px 3px 0;
1205         font-weight: bold;
1206         color: #c44;
1207         pointer-events: auto;
1208         height: auto;
1209 }
1210
1211 input[type="text"] + .cbi-button,
1212 input[type="password"] + .cbi-button,
1213 select + .cbi-button {
1214         border-radius: 0 3px 3px 0;
1215         border: 1px outset #000;
1216         margin: 0 0 1px -2px;
1217         padding: 0 6px;
1218         vertical-align: top;
1219         display: inline-block;
1220         height: 14pt;
1221         font-size: 10pt;
1222         line-height: 12pt;
1223 }
1224
1225 .cbi-tooltip-container {
1226         cursor: help;
1227 }
1228
1229 .cbi-tooltip {
1230         position: absolute;
1231         z-index: 1000;
1232         left: -1000px;
1233         border-radius: 3px;
1234         background: #fff;
1235         padding: 2px 5px;
1236         white-space: pre;
1237         opacity: 0;
1238         transition: opacity .25s ease-out;
1239         pointer-events: none;
1240         box-shadow: 0 0 2px #444;
1241 }
1242
1243 .cbi-tooltip-container:hover .cbi-tooltip {
1244         left: auto;
1245         opacity: 1;
1246         transition: opacity .25s ease-in;
1247 }
1248
1249 .zonebadge .cbi-tooltip {
1250         padding: 1px;
1251         background: inherit;
1252         margin: -1.6em 0 0 -5px;
1253 }
1254
1255
1256 .zone-forwards {
1257         display: flex;
1258         flex-wrap: wrap;
1259 }
1260
1261 .zone-forwards > * {
1262         flex: 1 1 45%;
1263         padding: 1px;
1264 }
1265
1266 .zone-forwards > span {
1267         flex-basis: 10%;
1268         text-align: center;
1269 }
1270
1271 .zone-forwards .zone-src,
1272 .zone-forwards .zone-dest {
1273         display: flex;
1274         flex-direction: column;
1275 }
1276
1277
1278 .left, .left::before, .left::after { text-align: left !important; }
1279 .right, .right::before, .right::after { text-align: right !important; }
1280 .center, .center::before, .center::after { text-align: center !important; }
1281
1282 .top, .top::before, .top::after { vertical-align: top !important; }
1283 .middle, .middle::before, .middle::after { vertical-align: middle !important; }
1284 .bottom, .bottom::before, .bottom::after { vertical-align: bottom !important; }
1285
1286 .td.top { align-self: flex-start; vertical-align: top; }
1287 .td.middle { align-self: center; vertical-align: middle; }
1288 .td.bottom { align-self: flex-end; vertical-align: bottom; }
1289
1290 .luci {
1291         position: absolute;
1292         bottom: 0;
1293         left: 1em;
1294         height: 1.5em;
1295         font-size: 80%;
1296         margin-bottom: 0;
1297 }
1298
1299 .luci a:link,
1300 .luci a:visited {
1301         background-color: transparent;
1302         color: #666666;
1303         text-decoration: none;
1304         font-size: 70%;
1305 }
1306
1307 .inline {
1308         display: inline;
1309 }
1310
1311 .error500 {
1312         white-space: normal;
1313         border: 1px dotted #ff0000;
1314         background-color: #ffffff;
1315         color: #000000;
1316         padding: 0.5em;
1317 }
1318
1319
1320 .ifacebadge, .ifacebox {
1321         display: inline-flex;
1322         align-content: center;
1323         border: 1px solid #ccc;
1324         border-radius: 3px;
1325         padding: 2px;
1326         background: #fff;
1327 }
1328
1329 .ifacebox-head {
1330         background: #eee;
1331 }
1332
1333 .ifacebox-head.active {
1334         background: #90c0e0;
1335 }
1336
1337 .ifacebadge, .zonebadge {
1338         align-items: center;
1339 }
1340
1341 .ifacebadge > * {
1342         align-self: flex-start;
1343 }
1344
1345 .ifacebadge > img,
1346 .ifacebadge > em {
1347         margin-right: 5px;
1348         display: inline-block;
1349         height: 16px;
1350 }
1351
1352 .ifacebadge-active {
1353         border-color: #000000;
1354         font-weight: bold;
1355 }
1356
1357 .ifacebox {
1358         flex-direction: column;
1359         margin: 0;
1360         padding: 0;
1361         min-width: 100px;
1362         text-align: center;
1363 }
1364
1365 .ifacebox > * {
1366         padding: 2px;
1367 }
1368
1369 .td > .ifacebadge,
1370 .td > .zonebadge {
1371         margin: 0;
1372         vertical-align: top;
1373 }
1374
1375 .network-status-table {
1376         display: flex;
1377         flex-wrap: wrap;
1378         margin: -.25em -.25em .25em -.25em;
1379 }
1380
1381 .network-status-table .ifacebox {
1382         margin: .25em;
1383         font-size: 90%;
1384         flex-grow: 1;
1385 }
1386
1387 .network-status-table .ifacebox-body {
1388         display: flex;
1389         flex-direction: column;
1390         flex: 1 0 auto;
1391         padding: .5em;
1392 }
1393
1394 .network-status-table .ifacebox-body > span {
1395         flex: 10 10 auto;
1396 }
1397
1398 .network-status-table .ifacebox-body > div {
1399         display: flex;
1400         flex-wrap: wrap;
1401 }
1402
1403 .ifacebadge.large,
1404 .network-status-table .ifacebox-body .ifacebadge {
1405         flex: 1;
1406         -webkit-flex: 1 1 auto;
1407         padding: .5em;
1408         min-width: 220px;
1409         white-space: nowrap;
1410 }
1411
1412 .network-status-table .ifacebox-body .ifacebadge {
1413         margin: .5em 0 0 0;
1414 }
1415
1416 #dsl_status_table .ifacebox-body > span > strong {
1417         display: inline-block;
1418         min-width: 35%;
1419 }
1420
1421
1422 .zonebadge {
1423         padding: 2px;
1424         display: inline-block;
1425         white-space: nowrap;
1426         border-radius: 3px;
1427 }
1428
1429 .zonebadge > em,
1430 .zonebadge > strong {
1431         margin: 3px;
1432 }
1433
1434 .zonebadge input {
1435         width: 6em;
1436         height: 1.5em;
1437 }
1438
1439 .zonebadge .ifacebadge,
1440 .cbi-dropdown .ifacebadge {
1441         margin: 1px;
1442 }
1443
1444 .zonebadge .ifacebadge img,
1445 .zonebadge .ifacebadge em,
1446 .cbi-dropdown .ifacebadge img,
1447 .cbi-dropdown .ifacebadge em {
1448         margin: 0 1px;
1449 }
1450
1451 .zonebadge-empty {
1452         border: 1px dashed #AAAAAA;
1453         color: #AAAAAA;
1454         font-style: italic;
1455         font-size: smaller;
1456 }
1457
1458
1459 .uci-change-list {
1460         font-family: monospace;
1461         white-space: pre;
1462 }
1463
1464 .uci-change-list del,
1465 .uci-change-list ins,
1466 .uci-change-list var,
1467 .uci-change-legend-label del,
1468 .uci-change-legend-label ins,
1469 .uci-change-legend-label var {
1470         text-decoration: none;
1471         font-style: normal;
1472         border: 1px solid #ccc;
1473         background: #eee;
1474         padding: 2px;
1475         display: block;
1476         line-height: 15px;
1477         margin-bottom: 1px;
1478 }
1479
1480 .uci-change-list ins,
1481 .uci-change-legend-label ins {
1482         border-color: #0f0;
1483         background: #cfc;
1484 }
1485
1486 .uci-change-list del,
1487 .uci-change-legend-label del {
1488         border-color: #f00;
1489         background: #fcc;
1490 }
1491
1492 .uci-change-list var,
1493 .uci-change-legend-label var {
1494         border-color: #ccc;
1495         background: #eee;
1496 }
1497
1498 .uci-change-list var ins,
1499 .uci-change-list var del {
1500         display: inline-block;
1501         border: none;
1502         width: 100%;
1503         padding: 0;
1504 }
1505
1506 .uci-change-legend {
1507         padding: 5px;
1508 }
1509
1510 .uci-change-legend-label {
1511         width: 150px;
1512         float: left;
1513         font-size: 80%;
1514 }
1515
1516 .uci-change-legend-label>ins,
1517 .uci-change-legend-label>del,
1518 .uci-change-legend-label>var {
1519         float: left;
1520         margin-right: 4px;
1521         width: 12px;
1522         height: 12px;
1523         display: block;
1524         position: relative;
1525 }
1526
1527 .uci-change-legend-label var ins,
1528 .uci-change-legend-label var del {
1529         border: none;
1530         position: absolute;
1531         top: 1px;
1532         left: 1px;
1533         right: 1px;
1534         bottom: 1px;
1535 }
1536
1537
1538 }
1539
1540 @media screen and (max-width: 992px) {
1541         body {
1542                 -webkit-text-size-adjust: 100%;
1543         }
1544
1545         #maincontainer {
1546                 flex-direction: column;
1547                 width: 100%;
1548         }
1549
1550         #maincontent {
1551                 width: 96%;
1552                 margin: auto;
1553                 flex-basis: auto;
1554         }
1555
1556         #mainmenu {
1557                 border: none;
1558                 border-radius: 0;
1559                 max-width: none;
1560                 background: #000;
1561                 box-shadow: 0 0 2px #444;
1562                 padding: 0;
1563                 border-top: 1px solid #444;
1564                 position: relative;
1565         }
1566
1567         #mainmenu ul > li.selected > a {
1568                 background: #444;
1569                 color: #fff;
1570                 border-top: none;
1571         }
1572
1573         #mainmenu ul > li.selected:not(.active) > ul {
1574                 max-height: 0;
1575                 visibility: hidden;
1576         }
1577
1578         #mainmenu ul > li > a {
1579                 flex: 1 1 auto;
1580                 color: #fff;
1581                 border: 1px solid #444;
1582                 border-width: 0 0 1px 1px;
1583         }
1584
1585         #mainmenu ul.l1 {
1586                 display: flex;
1587                 flex-direction: row;
1588                 flex-wrap: wrap;
1589                 position: relative;
1590                 margin-left: -1px;
1591                 width: 100%;
1592         }
1593
1594         #mainmenu ul.l1 > li {
1595                 display: inline-flex;
1596                 flex: 1 1 auto;
1597                 position: relative;
1598                 height: 2em;
1599         }
1600
1601         #mainmenu ul.l1 ul.l2 {
1602                 position: absolute;
1603                 top: 2em;
1604                 right: 0;
1605                 z-index: 1000;
1606                 background: #000;
1607                 box-shadow: 0 0 2px #444;
1608                 min-width: 120px;
1609                 display: block;
1610         }
1611
1612         #mainmenu ul.l1 ul.l2.align-left {
1613                 right: auto;
1614                 left: 0;
1615         }
1616
1617         #mainmenu ul.l2 > li {
1618                 display: block;
1619         }
1620
1621         #mainmenu ul.l2 > li > a {
1622                 padding: .5em;
1623         }
1624
1625         #mainmenu ul li.mainmenu-item-logout {
1626                 margin-top: 0;
1627                 margin-left: auto;
1628         }
1629
1630         #mainmenu ul li.mainmenu-item-logout::before {
1631                 content: "\0a";
1632                 flex: 10;
1633                 border: 1px solid #444;
1634                 border-width: 0 0 1px 1px;
1635         }
1636
1637         .table {
1638                 display: flex;
1639                 flex-direction: column;
1640                 width: 100%;
1641         }
1642
1643         .tr {
1644                 display: flex;
1645                 flex-direction: row;
1646                 flex-wrap: wrap;
1647                 align-items: flex-end;
1648         }
1649
1650         .th, .td {
1651                 flex: 2 2 25%;
1652                 align-self: flex-start;
1653                 overflow: hidden;
1654                 text-overflow: ellipsis;
1655                 word-wrap: break-word;
1656                 display: inline-block;
1657         }
1658
1659         .td select {
1660                 word-wrap: normal;
1661         }
1662
1663         .td[data-type="button"],
1664         .td[data-type="fvalue"] {
1665                 flex: 1 1 12.5%;
1666                 text-align: left;
1667         }
1668
1669         .td.cbi-value-field {
1670                 align-self: flex-start;
1671         }
1672
1673         .td.cbi-value-field .cbi-button {
1674                 width: 100%;
1675         }
1676
1677         .table.cbi-section-table {
1678                 border: none;
1679                 background: none;
1680                 margin: 0;
1681         }
1682
1683         .tr.table-titles,
1684         .cbi-section-table-titles,
1685         .cbi-section-table-descr {
1686                 display: none;
1687         }
1688
1689         .cbi-section-table-row {
1690                 display: flex;
1691                 flex-direction: row;
1692                 flex-wrap: wrap;
1693                 border: 1px dotted #444;
1694                 margin: 0 0 .5em 0;
1695                 background: #fff;
1696         }
1697
1698         .cbi-section-table-row:hover {
1699                 border: 1px solid #4a6b7c;
1700         }
1701
1702         .cbi-section-table + .cbi-section-create {
1703                 padding-top: 0;
1704         }
1705
1706         .tr[data-title]::before {
1707                 display: block;
1708                 flex: 1 1 100%;
1709                 background: #eef;
1710         }
1711
1712         .td[data-title]::before,
1713         .td[data-description]::after {
1714                 display: block;
1715         }
1716
1717         .td[data-title] ~ .td.cbi-section-actions {
1718                 align-self: flex-start;
1719         }
1720
1721         .td[data-title] ~ .td.cbi-section-actions::before {
1722                 display: block;
1723                 content: "\a0";
1724         }
1725
1726         .hide-sm,
1727         .hide-xs {
1728                 display: none;
1729         }
1730
1731         #dsl_status_table .ifacebox-body > span > strong {
1732                 min-width: 50%;
1733         }
1734 }
1735
1736 @media screen and (max-width: 480px) {
1737         body {
1738                 font-size: 12pt;
1739         }
1740
1741         input, textarea, select {
1742                 font-size: 12pt !important;
1743                 line-height: 1.4em;
1744         }
1745
1746         select, input[type="text"], input[type="password"] {
1747                 width: 100%;
1748                 height: 1.4em;
1749         }
1750
1751         input.cbi-input-password {
1752                 width: calc(100% - 20px);
1753         }
1754
1755         .cbi-dynlist,
1756         .cbi-dropdown {
1757                 min-width: 100%;
1758                 display: flex;
1759         }
1760
1761         .btn, .cbi-button {
1762                 font-size: 9pt !important;
1763                 line-height: 13pt;
1764         }
1765
1766         #maincontent {
1767                 padding: .25em;
1768         }
1769
1770         #tabmenu {
1771                 margin: -.25em -.25em 1em -.25em;
1772         }
1773
1774         .th, .td {
1775                 flex: 2 2 50%;
1776         }
1777
1778         .td.cbi-value-field {
1779                 flex-basis: 100%;
1780         }
1781
1782         .td.cbi-value-field[data-type="dvalue"] {
1783                 flex-basis: 50%;
1784         }
1785
1786         .td.cbi-value-field[data-type="button"],
1787         .td.cbi-value-field[data-type="fvalue"] {
1788                 flex-basis: 25%;
1789                 text-align: left;
1790         }
1791
1792         .cbi-value-title {
1793                 float: none;
1794                 font-weight: bold;
1795         }
1796
1797         .cbi-value-field {
1798                 width: 100%;
1799                 margin: 0;
1800         }
1801
1802         .cbi-value-description {
1803                 margin-top: 5px;
1804                 display: block;
1805         }
1806
1807         .cbi-section-create {
1808                 margin-bottom: 1em;
1809         }
1810
1811         .cbi-page-actions {
1812                 flex-wrap: wrap;
1813                 margin: -2px;
1814         }
1815
1816         .cbi-page-actions > .cbi-button-link {
1817                 flex-basis: 100%;
1818                 margin-right: 2px;
1819         }
1820
1821         .cbi-page-actions > * {
1822                 flex: 1 1 auto;
1823                 margin: 2px;
1824         }
1825
1826         ul.cbi-tabmenu {
1827                 padding: 0 3px;
1828         }
1829
1830         ul.cbi-tabmenu li {
1831                 font-size: 90%;
1832                 margin: 0 1px -1px 0;
1833         }
1834
1835         .hide-xs {
1836                 display: none;
1837         }
1838
1839         #cbi-network .td[id] > strong {
1840                 display: block;
1841         }
1842
1843         #cbi-network-switch_vlan .td.cbi-section-actions {
1844                 flex-basis: 100%;
1845         }
1846
1847         #dsl_status_table .ifacebox-body > span > strong {
1848                 display: block;
1849                 width: 100%;
1850                 margin-top: .5em;
1851         }
1852 }