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