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