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:not([open]) {
 624         color: #FF0000 !important;
 625         border-color: #FF0000;
 626 }
 627
 628 table td, table th {
 629         color: #000000;
 630 }
 631
 632 .table .td, .table .th {
 633         color: #000000;
 634         padding: .25em;
 635 }
 636
 637 .table.smalltext {
 638         background: #f5f5f5;
 639         color: #000000;
 640         border-top: 1px solid #666666;
 641         border-right: 1px solid #666666;
 642         border-bottom: 1px solid #666666;
 643         font-size: 90%;
 644         width: 80%;
 645         margin-left: auto;
 646         margin-right: auto;
 647         border-collapse: collapse;
 648 }
 649
 650 .table.smalltext .tr:hover .td {
 651         background-color: #bbddee;
 652         color: #000000;
 653 }
 654
 655 .table.smalltext .tr .th {
 656         padding: 0 0.25em;
 657         border-left: 1px solid #666666;
 658         text-align: left;
 659 }
 660
 661 .table.smalltext .tr .td {
 662         padding: 0 0.25em;
 663         border-top: 1px solid #666666;
 664         border-left: 1px solid #666666;
 665 }
 666
 667 .cbi-rowstyle-1 {
 668         background-color: #eeeeff;
 669         color: #000000;
 670 }
 671
 672 .cbi-rowstyle-2 {
 673         color: #000000;
 674 }
 675
 676 .cbi-value {
 677         clear: left;
 678         vertical-align: middle;
 679         padding: 0.25em 0.6em;
 680         border-bottom: 1px dotted #bbbbbb;
 681 }
 682
 683 .cbi-value:hover {
 684         background: #f8f8f8;
 685         color: #000000;
 686 }
 687
 688 .cbi-value-title {
 689         float: left;
 690         width: 40%;
 691         line-height: 1.8em;
 692 }
 693
 694 .cbi-value-field {
 695         width: 58%;
 696         margin-left: 40%;
 697         padding: 0.25em 0;
 698 }
 699
 700 .td.cbi-value-field {
 701         width: auto;
 702         margin-left: 0;
 703         align-self: center;
 704         vertical-align: middle;
 705 }
 706
 707 .cbi-value-description {
 708         background-image: url(/luci-static/resources/cbi/help.gif);
 709         background-position: .25em .25em;
 710         background-repeat: no-repeat;
 711         margin: .25em 0 0 0;
 712         padding: .25em .25em .25em 1.75em;
 713 }
 714
 715 .cbi-section-create {
 716         padding: 0 0 .25em 0;
 717         margin: -3px;
 718         display: inline-flex;
 719         align-items: center;
 720 }
 721
 722 .cbi-section-create > * {
 723         margin: 3px;
 724         flex: 1 1 auto;
 725 }
 726
 727 .cbi-section-create > * > input {
 728         width: 100%;
 729 }
 730
 731 .cbi-section-remove > .cbi-button {
 732         margin-bottom: -1px;
 733         border-radius: 3px 3px 0 0;
 734 }
 735
 736 .cbi-section-node + .cbi-section-create {
 737         padding-top: 0;
 738 }
 739
 740 div.cbi-map-descr {
 741         margin-bottom: 1em;
 742 }
 743
 744 div.cbi-optionals {
 745         padding: 0.25em;
 746         border-bottom: 1px dotted #bbbbbb;
 747 }
 748
 749 .cbi-section-node {
 750         clear: both;
 751         padding-bottom: 0;
 752         position: relative;
 753         border: 1px dotted #555;
 754         background: #fff;
 755         margin-bottom: .5em;
 756 }
 757
 758 .cbi-section-node-tabbed {
 759         border-top: none;
 760         margin-top: -.5em;
 761 }
 762
 763 .cbi-section-node .cbi-value:last-child,
 764 .cbi-section-node .cbi-optionals:last-child {
 765         border-bottom: none;
 766 }
 767
 768 .table.cbi-section-table {
 769         width: 100%;
 770         font-size: 95%;
 771         border: 1px dotted #444;
 772         background: #fff;
 773         margin: 0 0 .5em 0;
 774 }
 775
 776 .cbi-section-node > .table.cbi-section-table {
 777         border: none;
 778         margin: 0;
 779 }
 780
 781 @keyframes flash {
 782         0% { opacity: 1; }
 783         50% { opacity: .5; }
 784         100% { opacity: 1; }
 785 }
 786
 787 .tr.cbi-section-table-row.flash {
 788         animation: flash .35s;
 789 }
 790
 791 .tr.cbi-section-table-descr .th {
 792         font-weight: normal;
 793         font-size: 90%;
 794         vertical-align: top;
 795 }
 796
 797 .td.cbi-section-table-optionals {
 798         text-align: left !important;
 799         padding-top: 1em;
 800 }
 801
 802 .th.cbi-section-actions,
 803 .td.cbi-section-actions {
 804         overflow: visible;
 805         align-self: center;
 806         vertical-align: middle;
 807 }
 808
 809 .th.cbi-section-actions > *,
 810 .td.cbi-section-actions > * {
 811         display: flex;
 812         justify-content: flex-end;
 813         flex-direction: row;
 814         flex: 1 1 150px;
 815         margin: auto -1px auto auto;
 816 }
 817
 818 .td.cbi-section-actions > * > *,
 819 .td.cbi-section-actions > * > form > * {
 820         flex: 1 1 4em;
 821         margin: 0 1px;
 822 }
 823
 824 .td.cbi-section-actions > * > form {
 825         display: flex;
 826         margin: 0;
 827 }
 828
 829 .cbi-page-actions {
 830         display: flex;
 831         justify-content: flex-end;
 832         margin: -3px;
 833 }
 834
 835 .cbi-page-actions > form {
 836         display: flex;
 837 }
 838
 839 .cbi-page-actions > * {
 840         flex: 0 1 auto;
 841         margin: 3px;
 842 }
 843
 844 .cbi-page-actions > form > * {
 845         flex: 1;
 846         margin: 0 3px 0 0;
 847 }
 848
 849 .cbi-page-actions > .cbi-button-save,
 850 .cbi-page-actions > .cbi-button-apply,
 851 .cbi-page-actions > form[method="post"] {
 852         margin-left: auto;
 853 }
 854
 855 *::-ms-backdrop,
 856 .cbi-page-actions > .cbi-button-save,
 857 .cbi-page-actions > .cbi-button-apply,
 858 .cbi-page-actions > form[method="post"] {
 859         margin-left: 50%;
 860 }
 861
 862 .cbi-page-actions > .cbi-button-apply + .cbi-button-save,
 863 .cbi-page-actions > .cbi-button-save + form[method="post"],
 864 .cbi-page-actions > form[method="post"] + form[method="post"] {
 865         margin-left: 3px;
 866 }
 867
 868 .th[data-type="button"], .td[data-type="button"],
 869 .th[data-type="fvalue"], .td[data-type="fvalue"] {
 870         flex: 1 1 2em;
 871         text-align: center;
 872 }
 873
 874 #cbi-network-switch_vlan .th,
 875 #cbi-network-switch_vlan .td {
 876         flex-basis: 12%;
 877 }
 878
 879 .td[data-title]::before {
 880         content: attr(data-title) ":\20";
 881         font-weight: bold;
 882         text-align: left;
 883         display: none;
 884         padding: 1px;
 885         white-space: nowrap;
 886 }
 887
 888 .td[data-description]::after {
 889         content: attr(data-description);
 890         font-size: 90%;
 891         text-align: left;
 892         display: none;
 893         background: url(/luci-static/resources/cbi/help.gif) left top no-repeat;
 894         padding: .125em 0 .125em 18px;
 895         margin: .125em 0;
 896 }
 897
 898 .tr.placeholder .td[data-title]::before,
 899 .tr.placeholder .td[data-description]::after {
 900         display: none;
 901 }
 902
 903 .tr[data-title]::before,
 904 .tr.cbi-section-table-titles.named::before {
 905         content: attr(data-title) "\20";
 906         font-weight: bold;
 907         text-align: left;
 908         display: table-cell;
 909         align-self: center;
 910         flex: 1 1 5%;
 911         padding: .25em;
 912         white-space: normal;
 913         word-wrap: break-word;
 914         vertical-align: middle;
 915 }
 916
 917 .cbi-value-helpicon img {
 918         vertical-align: bottom;
 919 }
 920
 921 .td.cbi-value-error {
 922         border-color: red;
 923 }
 924
 925 .cbi-value-error input,
 926 .cbi-value-error select {
 927         color: red;
 928         background-color: #ffcccc;
 929 }
 930
 931 .cbi-section-error {
 932         color: red;
 933         background-color: white;
 934         font-size: 95%;
 935         border: 1px dotted red;
 936         margin: 3px;
 937         padding: 3px;
 938 }
 939
 940 .cbi-value-field var {
 941         color: #2222FF;
 942 }
 943
 944 ul.cbi-tabmenu {
 945         list-style-type: none;
 946         display: flex;
 947         margin: 0 0 .5em 0 !important;
 948         padding: 0 0 0 5px;
 949         border-bottom: 1px solid #bbb;
 950 }
 951
 952 ul.cbi-tabmenu li {
 953         display: inline-flex;
 954         margin: 0 5px -1px 0;
 955         flex: 0 1 auto;
 956         border: 1px solid #bbb;
 957         border-bottom: none;
 958         border-radius: 3px 3px 0 0;
 959         background: linear-gradient(#ddd 90%, #aaa 100%);
 960         color: #888;
 961         overflow: hidden;
 962         text-overflow: ellipsis;
 963         word-wrap: break-word;
 964 }
 965
 966 ul.cbi-tabmenu li a,
 967 ul.cbi-tabmenu li a:hover {
 968         text-decoration: none;
 969         color: inherit;
 970         padding: 5px;
 971         flex: 1 1 auto;
 972         width: 100%;
 973         height: 100%;
 974 }
 975
 976 ul.cbi-tabmenu li.cbi-tab-highlighted {
 977         color: #000;
 978         background: #fea;
 979 }
 980
 981 ul.cbi-tabmenu li.cbi-tab {
 982         color: #000;
 983         background: #fff;
 984 }
 985
 986 .cbi-tab-descr {
 987         background-image: url(/luci-static/resources/cbi/help.gif);
 988         background-position: .25em 50%;
 989         background-repeat: no-repeat;
 990         border-bottom: 1px solid #ccc;
 991         margin: 0 .25em .25em .25em;
 992         padding: .5em .5em .5em 2em;
 993 }
 994
 995
 996 .cbi-dropdown {
 997         border: 1px inset #000;
 998         display: inline-flex;
 999         cursor: pointer;
1000         background: #eee;
1001         position: relative;
1002         padding: 0;
1003         color: #000;
1004         min-width: 20em;
1005         max-width: 100%;
1006 }
1007
1008 .cbi-dropdown:hover {
1009         background: #fff;
1010 }
1011
1012 .cbi-dropdown:focus,
1013 .cbi-dynlist > .item:focus {
1014         outline: 2px solid #4b6e9b;
1015 }
1016
1017 .cbi-dropdown > ul {
1018         margin: 0 !important;
1019         padding: 0;
1020         list-style: none;
1021         overflow-x: hidden;
1022         overflow-y: auto;
1023         display: flex;
1024         width: 100%;
1025 }
1026
1027 .cbi-dropdown > ul.preview {
1028         display: none;
1029 }
1030
1031 .cbi-dropdown > .open {
1032         border: 2px outset #eee;
1033         flex-basis: 15px;
1034 }
1035
1036 .cbi-dropdown > .open,
1037 .cbi-dropdown > .more {
1038         flex-grow: 0;
1039         flex-shrink: 0;
1040         display: flex;
1041         flex-direction: column;
1042         justify-content: center;
1043         text-align: center;
1044         padding: 0 .25em;
1045 }
1046
1047 .cbi-dropdown > .more,
1048 .cbi-dropdown > ul > li[placeholder] {
1049         color: #777;
1050         font-weight: bold;
1051         text-shadow: 1px 1px 0px #fff;
1052         display: none;
1053 }
1054
1055 .cbi-dropdown > ul > li {
1056         display: none;
1057         padding: .25em;
1058         white-space: nowrap;
1059         overflow: hidden;
1060         text-overflow: ellipsis;
1061         flex-shrink: 1;
1062         flex-grow: 1;
1063         align-items: center;
1064         align-self: center;
1065         min-height: 20px;
1066 }
1067
1068 .cbi-dropdown > ul > li .hide-open { display: initial; }
1069 .cbi-dropdown > ul > li .hide-close { display: none; }
1070
1071 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1072         border-left: 1px solid #ccc;
1073 }
1074
1075 .cbi-dropdown[empty] > ul {
1076         max-width: 1px;
1077 }
1078
1079 .cbi-dropdown > ul > li > form {
1080         display: none;
1081         margin: 0;
1082         padding: 0;
1083         pointer-events: none;
1084 }
1085
1086 .cbi-dropdown > ul > li img {
1087         vertical-align: middle;
1088         margin-right: .25em;
1089 }
1090
1091 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1092         margin: 0;
1093 }
1094
1095 .cbi-dropdown > ul > li input[type="text"] {
1096         height: 20px;
1097 }
1098
1099 .cbi-dropdown[open] {
1100         position: relative;
1101 }
1102
1103 .cbi-dropdown[open] > ul.dropdown {
1104         display: block;
1105         background: #f6f6f5;
1106         border: 1px solid #918e8c;
1107         box-shadow: 0 0 4px #918e8c;
1108         position: absolute;
1109         z-index: 1100;
1110         max-width: none;
1111         min-width: 100%;
1112         width: auto;
1113 }
1114
1115 .cbi-dropdown > ul > li[display],
1116 .cbi-dropdown[open] > ul.preview,
1117 .cbi-dropdown[open] > ul.dropdown > li,
1118 .cbi-dropdown[multiple] > ul > li > label,
1119 .cbi-dropdown[multiple][open] > ul.dropdown > li,
1120 .cbi-dropdown[multiple][more] > .more,
1121 .cbi-dropdown[multiple][empty] > .more {
1122         flex-grow: 1;
1123         display: flex;
1124         align-items: center;
1125 }
1126
1127 .cbi-dropdown[empty] > ul > li,
1128 .cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
1129 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1130         display: block;
1131 }
1132
1133 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
1134 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: initial; }
1135
1136 .cbi-dropdown[open] > ul.dropdown > li {
1137         border-bottom: 1px solid #ccc;
1138 }
1139
1140 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1141         background: #b0d0f0;
1142 }
1143
1144 .cbi-dropdown[open] > ul.dropdown > li.focus {
1145         background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
1146 }
1147
1148 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1149         margin-bottom: 0;
1150         border-bottom: none;
1151 }
1152
1153 .cbi-dropdown[open] > ul.dropdown > li[unselectable] {
1154         opacity: 0.7;
1155 }
1156
1157 .cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
1158         width: 100%;
1159 }
1160
1161 .cbi-dropdown[disabled] {
1162         pointer-events: none;
1163         opacity: .6;
1164 }
1165
1166 .cbi-dynlist {
1167         height: auto;
1168         min-height: 30px;
1169         min-width: 210px;
1170         max-width: 100%;
1171         width: auto;
1172         display: inline-flex;
1173         flex-direction: column;
1174 }
1175
1176 .cbi-dynlist > .item {
1177         margin-bottom: 4px;
1178         background: #eee;
1179         padding: 2px 2em 2px 4px;
1180         border: 1px outset #000;
1181         border-radius: 3px;
1182         position: relative;
1183         pointer-events: none;
1184         overflow: hidden;
1185         text-overflow: ellipsis;
1186         white-space: nowrap;
1187 }
1188
1189 .cbi-dynlist > .item::after {
1190         content: "×";
1191         position: absolute;
1192         display: inline-flex;
1193         align-items: center;
1194         top: -1px;
1195         right: -1px;
1196         bottom: -1px;
1197         padding: 0 6px;
1198         border: 1px outset #000;
1199         background: #fff;
1200         border-radius: 0 3px 3px 0;
1201         font-weight: bold;
1202         color: #c44;
1203         pointer-events: auto;
1204         height: auto;
1205 }
1206
1207 input[type="text"] + .cbi-button,
1208 input[type="password"] + .cbi-button,
1209 select + .cbi-button {
1210         border-radius: 0 3px 3px 0;
1211         border: 1px outset #000;
1212         margin: 0 0 1px -2px;
1213         padding: 0 6px;
1214         vertical-align: top;
1215         display: inline-block;
1216         height: 14pt;
1217         font-size: 10pt;
1218         line-height: 12pt;
1219 }
1220
1221 .cbi-tooltip-container {
1222         cursor: help;
1223 }
1224
1225 .cbi-tooltip {
1226         position: absolute;
1227         z-index: 1000;
1228         left: -1000px;
1229         border-radius: 3px;
1230         background: #fff;
1231         padding: 2px 5px;
1232         white-space: pre;
1233         opacity: 0;
1234         transition: opacity .25s ease-out;
1235         pointer-events: none;
1236         box-shadow: 0 0 2px #444;
1237 }
1238
1239 .cbi-tooltip-container:hover .cbi-tooltip {
1240         left: auto;
1241         opacity: 1;
1242         transition: opacity .25s ease-in;
1243 }
1244
1245 .zonebadge .cbi-tooltip {
1246         padding: 1px;
1247         background: inherit;
1248         margin: -1.6em 0 0 -5px;
1249 }
1250
1251
1252 .zone-forwards {
1253         display: flex;
1254         flex-wrap: wrap;
1255 }
1256
1257 .zone-forwards > * {
1258         flex: 1 1 45%;
1259         padding: 1px;
1260 }
1261
1262 .zone-forwards > span {
1263         flex-basis: 10%;
1264         text-align: center;
1265 }
1266
1267 .zone-forwards .zone-src,
1268 .zone-forwards .zone-dest {
1269         display: flex;
1270         flex-direction: column;
1271 }
1272
1273
1274 .left, .left::before, .left::after { text-align: left !important; }
1275 .right, .right::before, .right::after { text-align: right !important; }
1276 .center, .center::before, .center::after { text-align: center !important; }
1277
1278 .top, .top::before, .top::after { vertical-align: top !important; }
1279 .middle, .middle::before, .middle::after { vertical-align: middle !important; }
1280 .bottom, .bottom::before, .bottom::after { vertical-align: bottom !important; }
1281
1282 .td.top { align-self: flex-start; vertical-align: top; }
1283 .td.middle { align-self: center; vertical-align: middle; }
1284 .td.bottom { align-self: flex-end; vertical-align: bottom; }
1285
1286 .luci {
1287         position: absolute;
1288         bottom: 0;
1289         left: 1em;
1290         height: 1.5em;
1291         font-size: 80%;
1292         margin-bottom: 0;
1293 }
1294
1295 .luci a:link,
1296 .luci a:visited {
1297         background-color: transparent;
1298         color: #666666;
1299         text-decoration: none;
1300         font-size: 70%;
1301 }
1302
1303 .inline {
1304         display: inline;
1305 }
1306
1307 .error500 {
1308         white-space: normal;
1309         border: 1px dotted #ff0000;
1310         background-color: #ffffff;
1311         color: #000000;
1312         padding: 0.5em;
1313 }
1314
1315
1316 .ifacebadge, .ifacebox {
1317         display: inline-flex;
1318         align-content: center;
1319         border: 1px solid #ccc;
1320         border-radius: 3px;
1321         padding: 2px;
1322         background: #fff;
1323 }
1324
1325 .ifacebox-head {
1326         background: #eee;
1327 }
1328
1329 .ifacebox-head.active {
1330         background: #90c0e0;
1331 }
1332
1333 .ifacebadge, .zonebadge {
1334         align-items: center;
1335 }
1336
1337 .ifacebadge > * {
1338         align-self: flex-start;
1339 }
1340
1341 .ifacebadge > img,
1342 .ifacebadge > em {
1343         margin-right: 5px;
1344         display: inline-block;
1345         height: 16px;
1346 }
1347
1348 .ifacebadge-active {
1349         border-color: #000000;
1350         font-weight: bold;
1351 }
1352
1353 .ifacebox {
1354         flex-direction: column;
1355         margin: 0;
1356         padding: 0;
1357         min-width: 100px;
1358         text-align: center;
1359 }
1360
1361 .ifacebox > * {
1362         padding: 2px;
1363 }
1364
1365 .td > .ifacebadge,
1366 .td > .zonebadge {
1367         margin: 0;
1368         vertical-align: top;
1369 }
1370
1371 .network-status-table {
1372         display: flex;
1373         flex-wrap: wrap;
1374         margin: -.25em -.25em .25em -.25em;
1375 }
1376
1377 .network-status-table .ifacebox {
1378         margin: .25em;
1379         font-size: 90%;
1380         flex-grow: 1;
1381 }
1382
1383 .network-status-table .ifacebox-body {
1384         display: flex;
1385         flex-direction: column;
1386         flex: 1 0 auto;
1387         padding: .5em;
1388 }
1389
1390 .network-status-table .ifacebox-body > span {
1391         flex: 10 10 auto;
1392 }
1393
1394 .network-status-table .ifacebox-body > div {
1395         display: flex;
1396         flex-wrap: wrap;
1397 }
1398
1399 .ifacebadge.large,
1400 .network-status-table .ifacebox-body .ifacebadge {
1401         flex: 1;
1402         -webkit-flex: 1 1 auto;
1403         padding: .5em;
1404         min-width: 220px;
1405         white-space: nowrap;
1406 }
1407
1408 .network-status-table .ifacebox-body .ifacebadge {
1409         margin: .5em 0 0 0;
1410 }
1411
1412 #dsl_status_table .ifacebox-body > span > strong {
1413         display: inline-block;
1414         min-width: 35%;
1415 }
1416
1417
1418 .zonebadge {
1419         padding: 2px;
1420         display: inline-block;
1421         white-space: nowrap;
1422         border-radius: 3px;
1423 }
1424
1425 .zonebadge > em,
1426 .zonebadge > strong {
1427         margin: 3px;
1428 }
1429
1430 .zonebadge input {
1431         width: 6em;
1432         height: 1.5em;
1433 }
1434
1435 .zonebadge .ifacebadge,
1436 .cbi-dropdown .ifacebadge {
1437         margin: 1px;
1438 }
1439
1440 .zonebadge .ifacebadge img,
1441 .zonebadge .ifacebadge em,
1442 .cbi-dropdown .ifacebadge img,
1443 .cbi-dropdown .ifacebadge em {
1444         margin: 0 1px;
1445 }
1446
1447 .zonebadge-empty {
1448         border: 1px dashed #AAAAAA;
1449         color: #AAAAAA;
1450         font-style: italic;
1451         font-size: smaller;
1452 }
1453
1454
1455 .uci-change-list {
1456         font-family: monospace;
1457         white-space: pre;
1458 }
1459
1460 .uci-change-list del,
1461 .uci-change-list ins,
1462 .uci-change-list var,
1463 .uci-change-legend-label del,
1464 .uci-change-legend-label ins,
1465 .uci-change-legend-label var {
1466         text-decoration: none;
1467         font-style: normal;
1468         border: 1px solid #ccc;
1469         background: #eee;
1470         padding: 2px;
1471         display: block;
1472         line-height: 15px;
1473         margin-bottom: 1px;
1474 }
1475
1476 .uci-change-list ins,
1477 .uci-change-legend-label ins {
1478         border-color: #0f0;
1479         background: #cfc;
1480 }
1481
1482 .uci-change-list del,
1483 .uci-change-legend-label del {
1484         border-color: #f00;
1485         background: #fcc;
1486 }
1487
1488 .uci-change-list var,
1489 .uci-change-legend-label var {
1490         border-color: #ccc;
1491         background: #eee;
1492 }
1493
1494 .uci-change-list var ins,
1495 .uci-change-list var del {
1496         display: inline-block;
1497         border: none;
1498         width: 100%;
1499         padding: 0;
1500 }
1501
1502 .uci-change-legend {
1503         padding: 5px;
1504 }
1505
1506 .uci-change-legend-label {
1507         width: 150px;
1508         float: left;
1509         font-size: 80%;
1510 }
1511
1512 .uci-change-legend-label>ins,
1513 .uci-change-legend-label>del,
1514 .uci-change-legend-label>var {
1515         float: left;
1516         margin-right: 4px;
1517         width: 12px;
1518         height: 12px;
1519         display: block;
1520         position: relative;
1521 }
1522
1523 .uci-change-legend-label var ins,
1524 .uci-change-legend-label var del {
1525         border: none;
1526         position: absolute;
1527         top: 1px;
1528         left: 1px;
1529         right: 1px;
1530         bottom: 1px;
1531 }
1532
1533
1534 }
1535
1536 @media screen and (max-width: 992px) {
1537         body {
1538                 -webkit-text-size-adjust: 100%;
1539         }
1540
1541         #maincontainer {
1542                 flex-direction: column;
1543                 width: 100%;
1544         }
1545
1546         #maincontent {
1547                 width: 96%;
1548                 margin: auto;
1549                 flex-basis: auto;
1550         }
1551
1552         #mainmenu {
1553                 border: none;
1554                 border-radius: 0;
1555                 max-width: none;
1556                 background: #000;
1557                 box-shadow: 0 0 2px #444;
1558                 padding: 0;
1559                 border-top: 1px solid #444;
1560                 position: relative;
1561         }
1562
1563         #mainmenu ul > li.selected > a {
1564                 background: #444;
1565                 color: #fff;
1566                 border-top: none;
1567         }
1568
1569         #mainmenu ul > li.selected:not(.active) > ul {
1570                 max-height: 0;
1571                 visibility: hidden;
1572         }
1573
1574         #mainmenu ul > li > a {
1575                 flex: 1 1 auto;
1576                 color: #fff;
1577                 border: 1px solid #444;
1578                 border-width: 0 0 1px 1px;
1579         }
1580
1581         #mainmenu ul.l1 {
1582                 display: flex;
1583                 flex-direction: row;
1584                 flex-wrap: wrap;
1585                 position: relative;
1586                 margin-left: -1px;
1587                 width: 100%;
1588         }
1589
1590         #mainmenu ul.l1 > li {
1591                 display: inline-flex;
1592                 flex: 1 1 auto;
1593                 position: relative;
1594                 height: 2em;
1595         }
1596
1597         #mainmenu ul.l1 ul.l2 {
1598                 position: absolute;
1599                 top: 2em;
1600                 right: 0;
1601                 z-index: 1000;
1602                 background: #000;
1603                 box-shadow: 0 0 2px #444;
1604                 min-width: 120px;
1605                 display: block;
1606         }
1607
1608         #mainmenu ul.l1 ul.l2.align-left {
1609                 right: auto;
1610                 left: 0;
1611         }
1612
1613         #mainmenu ul.l2 > li {
1614                 display: block;
1615         }
1616
1617         #mainmenu ul.l2 > li > a {
1618                 padding: .5em;
1619         }
1620
1621         #mainmenu ul li.mainmenu-item-logout {
1622                 margin-top: 0;
1623                 margin-left: auto;
1624         }
1625
1626         #mainmenu ul li.mainmenu-item-logout::before {
1627                 content: "\0a";
1628                 flex: 10;
1629                 border: 1px solid #444;
1630                 border-width: 0 0 1px 1px;
1631         }
1632
1633         .table {
1634                 display: flex;
1635                 flex-direction: column;
1636                 width: 100%;
1637         }
1638
1639         .tr {
1640                 display: flex;
1641                 flex-direction: row;
1642                 flex-wrap: wrap;
1643                 align-items: flex-end;
1644         }
1645
1646         .th, .td {
1647                 flex: 2 2 25%;
1648                 align-self: flex-start;
1649                 overflow: hidden;
1650                 text-overflow: ellipsis;
1651                 word-wrap: break-word;
1652                 display: inline-block;
1653         }
1654
1655         .td select {
1656                 word-wrap: normal;
1657         }
1658
1659         .td[data-type="button"],
1660         .td[data-type="fvalue"] {
1661                 flex: 1 1 12.5%;
1662                 text-align: left;
1663         }
1664
1665         .td.cbi-value-field {
1666                 align-self: flex-start;
1667         }
1668
1669         .td.cbi-value-field .cbi-button {
1670                 width: 100%;
1671         }
1672
1673         .table.cbi-section-table {
1674                 border: none;
1675                 background: none;
1676                 margin: 0;
1677         }
1678
1679         .tr.table-titles,
1680         .cbi-section-table-titles,
1681         .cbi-section-table-descr {
1682                 display: none;
1683         }
1684
1685         .cbi-section-table-row {
1686                 display: flex;
1687                 flex-direction: row;
1688                 flex-wrap: wrap;
1689                 border: 1px dotted #444;
1690                 margin: 0 0 .5em 0;
1691                 background: #fff;
1692         }
1693
1694         .cbi-section-table-row:hover {
1695                 border: 1px solid #4a6b7c;
1696         }
1697
1698         .cbi-section-table + .cbi-section-create {
1699                 padding-top: 0;
1700         }
1701
1702         .tr[data-title]::before {
1703                 display: block;
1704                 flex: 1 1 100%;
1705                 background: #eef;
1706         }
1707
1708         .td[data-title]::before,
1709         .td[data-description]::after {
1710                 display: block;
1711         }
1712
1713         .td[data-title] ~ .td.cbi-section-actions {
1714                 align-self: flex-start;
1715         }
1716
1717         .td[data-title] ~ .td.cbi-section-actions::before {
1718                 display: block;
1719                 content: "\a0";
1720         }
1721
1722         .hide-sm,
1723         .hide-xs {
1724                 display: none;
1725         }
1726
1727         #dsl_status_table .ifacebox-body > span > strong {
1728                 min-width: 50%;
1729         }
1730 }
1731
1732 @media screen and (max-width: 480px) {
1733         body {
1734                 font-size: 12pt;
1735         }
1736
1737         input, textarea, select {
1738                 font-size: 12pt !important;
1739                 line-height: 1.4em;
1740         }
1741
1742         select, input[type="text"], input[type="password"] {
1743                 width: 100%;
1744                 height: 1.4em;
1745         }
1746
1747         input.cbi-input-password {
1748                 width: calc(100% - 20px);
1749         }
1750
1751         .cbi-dynlist,
1752         .cbi-dropdown {
1753                 min-width: 100%;
1754                 display: flex;
1755         }
1756
1757         .btn, .cbi-button {
1758                 font-size: 9pt !important;
1759                 line-height: 13pt;
1760         }
1761
1762         #maincontent {
1763                 padding: .25em;
1764         }
1765
1766         #tabmenu {
1767                 margin: -.25em -.25em 1em -.25em;
1768         }
1769
1770         .th, .td {
1771                 flex: 2 2 50%;
1772         }
1773
1774         .td.cbi-value-field {
1775                 flex-basis: 100%;
1776         }
1777
1778         .td.cbi-value-field[data-type="dvalue"] {
1779                 flex-basis: 50%;
1780         }
1781
1782         .td.cbi-value-field[data-type="button"],
1783         .td.cbi-value-field[data-type="fvalue"] {
1784                 flex-basis: 25%;
1785                 text-align: left;
1786         }
1787
1788         .cbi-value-title {
1789                 float: none;
1790                 font-weight: bold;
1791         }
1792
1793         .cbi-value-field {
1794                 width: 100%;
1795                 margin: 0;
1796         }
1797
1798         .cbi-value-description {
1799                 margin-top: 5px;
1800                 display: block;
1801         }
1802
1803         .cbi-section-create {
1804                 margin-bottom: 1em;
1805         }
1806
1807         .cbi-page-actions {
1808                 flex-wrap: wrap;
1809                 margin: -2px;
1810         }
1811
1812         .cbi-page-actions > .cbi-button-link {
1813                 flex-basis: 100%;
1814                 margin-right: 2px;
1815         }
1816
1817         .cbi-page-actions > * {
1818                 flex: 1 1 auto;
1819                 margin: 2px;
1820         }
1821
1822         ul.cbi-tabmenu {
1823                 padding: 0 3px;
1824         }
1825
1826         ul.cbi-tabmenu li {
1827                 font-size: 90%;
1828                 margin: 0 1px -1px 0;
1829         }
1830
1831         .hide-xs {
1832                 display: none;
1833         }
1834
1835         #cbi-network .td[id] > strong {
1836                 display: block;
1837         }
1838
1839         #cbi-network-switch_vlan .td.cbi-section-actions {
1840                 flex-basis: 100%;
1841         }
1842
1843         #dsl_status_table .ifacebox-body > span > strong {
1844                 display: block;
1845                 width: 100%;
1846                 margin-top: .5em;
1847         }
1848 }