3 * Copyright 2012 Nut & Bolt
4 * By David Menting <david@nut-bolt.nl>
5 * Based on Bootstrap v1.4.0
7 * Copyright 2011 Twitter, Inc
8 * Licensed under the Apache License v2.0
9 * http://www.apache.org/licenses/LICENSE-2.0
11 * Designed and built with all the love in the world @twitter by @mdo and @fat.
14 * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
15 * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
26 h1
, h2
, h3
, h4
, h5
, h6
, p
, pre
, a
, abbr
, acronym
, code
, del
, em
, img
, q
, s
,
27 small
, strike
, strong
, sub
, sup
, tt
, var
, dd
, dl
, dt
, li
, ol
, ul
, fieldset
,
28 form
, label
, legend
, button
, table
, caption
, tbody
, tfoot
, thead
, tr
, th
, td
,
29 .table, .tbody, .tfoot, .thead, .tr, .th, .td {
40 abbr
[title
], acronym
[title
] {
41 border-bottom: 1px dotted
;
47 border-collapse: collapse
;
65 -webkit-text-size-adjust: 100%;
66 -ms-text-size-adjust: 100%;
94 vertical-align: baseline
;
107 -ms-interpolation-mode: bicubic
;
117 box-sizing: border-box
;
118 vertical-align: baseline
;
119 *vertical-align: middle
;
127 button::-moz-focus-inner
, input::-moz-focus-inner
{
133 input
[type
="button"],
135 input
[type
="submit"] {
137 -webkit-appearance: button
;
141 input
[type
="button"][disabled
],
142 input
[type
="reset"][disabled
],
143 input
[type
="submit"][disabled
] {
147 input
[type
="search"] {
148 -webkit-appearance: textfield
;
149 box-sizing: content-box
;
152 input
[type
="search"]::-webkit-search-decoration
{
153 -webkit-appearance: none
;
163 * Basic and global styles for generating a grid system, structural layout, and page templates
164 * ------------------------------------------------------------------------------------------- */
166 background-color: #fff;
168 font-family: "Helvetica Neue", Helvetica
, Arial
, sans-serif
;
184 .container:before, .container:after {
196 text-decoration: none
;
197 line-height: inherit
;
198 font-weight: inherit
;
203 text-decoration: underline
;
215 * Headings, body text, lists, code, and more for a versatile and durable typography system
216 * ---------------------------------------------------------------------------------------- */
220 .table .tr.cbi-section-table-descr .th {
300 text-transform: uppercase
;
304 margin: 0 0 18px 25px;
351 border-bottom: 1px solid
#eee;
361 font-weight: inherit
;
362 line-height: inherit
;
365 small
{ font-size: 0.9em }
375 font-family: Monaco
, Andale Mono
, Courier New
, monospace
;
381 background-color: #fee9cc;
382 color: rgba
(0, 0, 0, 0.75);
387 background-color: #f5f5f5;
393 border: 1px solid
#ccc;
394 border: 1px solid rgba
(0, 0, 0, 0.15);
397 white-space: pre-wrap
;
398 word-wrap: break-word
;
402 * Base styles for various input types, form layouts, and states
403 * ------------------------------------------------------------- */
419 *padding: 0 0 5px 0px;
426 form
.cbi-tab-descr
{
437 form
.clearfix:before
, form
.clearfix:after
,
438 form
.cbi-value:before
, form
.cbi-value:after
{
444 form
.clearfix:after
,
445 form
.cbi-value:after
{
453 font-family: "Helvetica Neue", Helvetica
, Arial
, sans-serif
;
460 form
.cbi-value-field
{
464 form
.cbi-value label
.cbi-value-title
{
474 input
[type
=checkbox
], input
[type
=radio
] {
483 display: inline-block
;
490 border: 1px solid
#ccc;
492 box-sizing: border-box
;
504 box-shadow: inset
0 -1px 3px rgba
(0, 0, 0, 0.1);
507 input
[type
=checkbox
], input
[type
=radio
] {
520 background-color: #fff;
523 line-height: initial
;
525 width: auto
!important
;
528 input
[type
=button
], input
[type
=reset
], input
[type
=submit
] {
533 select
, input
[type
=file
] {
536 /* For IE7, add top margin to align select with labels */
541 background-color: #fff;
548 .td
> input
[type
=text
],
549 .td
> input
[type
=password
],
551 .td > .cbi-dropdown {
556 background-color: #fff;
559 box-shadow: inset
0 1px 2px rgba
(0, 0, 0, 0.025);
567 ::-webkit-input-placeholder
{
571 .btn, .cbi-button, input, textarea {
572 transition: border linear
0.2s, box-shadow linear
0.2s;
573 box-shadow: inset
0 1px 3px rgba
(0, 0, 0, 0.1);
576 .btn:hover
, .cbi-button:hover
,
577 input:focus
, textarea:focus
{
579 border-color: rgba
(82, 168, 236, 0.8) !important
;
580 box-shadow: inset
0 1px 3px rgba
(0, 0, 0, 0.1), 0 0 8px rgba
(82, 168, 236, 0.6);
581 text-decoration: none
;
584 input
[type
=file
]:focus
, input
[type
=checkbox
]:focus
, select:focus
{
586 outline: 1px dotted
#666;
595 background-color: #f5f5f5;
597 pointer-events: none
;
602 .cbi-section-create {
603 padding: 0 0 10px 10px;
606 .cbi-section-create {
608 display: inline-flex
;
612 .cbi-section-create > * {
617 .cbi-section-create > * > input {
625 padding: 17px 20px 18px 17px;
626 border-top: 1px solid
#ddd;
627 border-radius: 0 0 3px 3px;
631 .actions
.secondary-action
,
632 .cbi-page-actions .secondary-action{
636 .actions
.secondary-action a
,
637 .cbi-page-actions .secondary-action a {
641 .actions
.secondary-action
a:hover
,
642 .cbi-page-actions .secondary-action a:hover {
643 text-decoration: underline
;
646 .cbi-page-actions > form {
651 .help-inline, .help-block {
674 * Tables for, you guessed it, tabular data
675 * ---------------------------------------- */
676 .tr { display: table-row
; }
677 .table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
678 .table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
686 border-collapse: collapse
;
690 .table .th, .table .td {
692 vertical-align: middle
; /* Fixme */
693 padding: 10px 10px 9px;
698 .table .tr:first-child .th {
704 .table .td, .table .th {
705 border-top: 1px solid
#ddd;
709 height: calc
(3em + 20px);
712 .tr.placeholder > .td {
722 * Repeatable UI elements outside the base styles provided from the scaffolding
723 * ---------------------------------------------------------------------------- */
737 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
740 header h3
a:hover
, header
.brand:hover
, header ul
.active
> a
{
741 background-color: #333;
742 background-color: rgba
(255, 255, 255, 0.05);
744 text-decoration: none
;
751 header h3 a
, header
.brand
{
754 padding: 8px 20px 12px;
768 background-color: #222;
769 background-repeat: repeat-x
;
770 background-image: linear-gradient
(to bottom
, #333333, #222222);
771 box-shadow: 0 1px 3px rgba
(0, 0, 0, 0.25), inset
0 -1px 0 rgba
(0, 0, 0, 0.1);
775 header div
> ul
, .nav
{
783 header div
> ul
> li
, .nav
> li
{
788 header div
> ul a
, .nav a
{
791 padding: 10px 10px 11px;
793 text-decoration: none
;
796 header div
> ul
a:hover
, .nav
a:hover
{
798 text-decoration: none
;
801 header div
> ul
.active
> a
, .nav
.active
> a
{
802 background-color: #222;
803 background-color: rgba
(0, 0, 0, 0.5);
806 header div
> ul
.secondary-nav
, .nav
.secondary-nav
{
812 header div
> ul
.secondary-nav
.menu-dropdown
,
813 .nav
.secondary-nav
.menu-dropdown
,
814 header div
> ul
.secondary-nav
.dropdown-menu
,
815 .nav.secondary-nav .dropdown-menu {
820 header div
> ul a
.menu:hover
,
822 header div
> ul li
.open
.menu
,
824 header div
> ul
.dropdown-toggle:hover
,
825 .nav
.dropdown-toggle:hover
,
826 header div
> ul
.dropdown
.open
.dropdown-toggle
,
827 .nav .dropdown.open .dropdown-toggle {
829 background: rgba
(255, 255, 255, 0.05);
832 header div
> ul
.menu-dropdown
,
834 header div
> ul
.dropdown-menu
,
835 .nav .dropdown-menu {
836 background-color: #333;
839 header div
> ul
.menu-dropdown a
.menu
,
840 .nav
.menu-dropdown a
.menu
,
841 header div
> ul
.dropdown-menu a
.menu
,
842 .nav
.dropdown-menu a
.menu
,
843 header div
> ul
.menu-dropdown
.dropdown-toggle
,
844 .nav
.menu-dropdown
.dropdown-toggle
,
845 header div
> ul
.dropdown-menu
.dropdown-toggle
,
846 .nav .dropdown-menu .dropdown-toggle {
850 header div
> ul
.menu-dropdown a
.menu
.open
,
851 .nav
.menu-dropdown a
.menu
.open
,
852 header div
> ul
.dropdown-menu a
.menu
.open
,
853 .nav
.dropdown-menu a
.menu
.open
,
854 header div
> ul
.menu-dropdown
.dropdown-toggle
.open
,
855 .nav
.menu-dropdown
.dropdown-toggle
.open
,
856 header div
> ul
.dropdown-menu
.dropdown-toggle
.open
,
857 .nav .dropdown-menu .dropdown-toggle.open {
859 background: rgba
(255, 255, 255, 0.05);
862 header div
> ul
.menu-dropdown li a
,
863 .nav
.menu-dropdown li a
,
864 header div
> ul
.dropdown-menu li a
,
865 .nav .dropdown-menu li a {
867 text-shadow: 0 1px 0 rgba
(0, 0, 0, 0.5);
870 header div
> ul
.menu-dropdown li
a:hover
,
871 .nav
.menu-dropdown li
a:hover
,
872 header div
> ul
.dropdown-menu li
a:hover
,
873 .nav .dropdown-menu li a:hover {
874 background-color: #191919;
875 background-repeat: repeat-x
;
876 background-image: linear-gradient
(to bottom
, #292929, #191919);
880 header div
> ul
.menu-dropdown
.active a
,
881 .nav
.menu-dropdown
.active a
,
882 header div
> ul
.dropdown-menu
.active a
,
883 .nav .dropdown-menu .active a {
887 header div
> ul
.menu-dropdown
.divider
,
888 .nav
.menu-dropdown
.divider
,
889 header div
> ul
.dropdown-menu
.divider
,
890 .nav .dropdown-menu .divider {
891 background-color: #222;
895 header ul
.menu-dropdown li a
, header ul
.dropdown-menu li a
{
903 a
.menu:after
, .dropdown-toggle:after
{
906 display: inline-block
;
908 text-indent: -99999px;
912 border-left: 4px solid transparent
;
913 border-right: 4px solid transparent
;
914 border-top: 4px solid
#fff;
918 .menu-dropdown, .dropdown-menu {
919 background-color: #fff;
933 border-color: rgba
(0, 0, 0, 0.2);
935 border-width: 0 1px 1px;
936 border-radius: 0 0 6px 6px;
937 box-shadow: 0 2px 4px rgba
(0, 0, 0, 0.2);
938 background-clip: padding-box
;
941 .menu-dropdown li, .dropdown-menu li {
944 background-color: transparent
;
947 .menu-dropdown .divider, .dropdown-menu .divider {
951 background-color: #eee;
952 border-bottom: 1px solid
#fff;
955 header
.dropdown-menu a
, .dropdown-menu a
{
962 text-shadow: 0 1px 0 #fff;
965 header
.dropdown-menu
a:hover
,
966 .dropdown-menu
a:hover
,
967 header
.dropdown-menu a
.hover
,
968 .dropdown-menu a.hover {
969 background-color: #ddd;
970 background-repeat: repeat-x
;
971 background-image: linear-gradient
(to bottom
, #eee, #ddd);
973 text-decoration: none
;
974 box-shadow: inset
0 1px 0 rgba
(0, 0, 0, 0.025), inset
0 -1px rgba
(0, 0, 0, 0.025);
978 .dropdown
.open
.menu
,
979 .open
.dropdown-toggle
,
980 .dropdown.open .dropdown-toggle {
983 background: rgba
(0, 0, 0, 0.3);
986 .open
.menu-dropdown
,
987 .dropdown
.open
.menu-dropdown
,
988 .open
.dropdown-menu
,
989 .dropdown.open .dropdown-menu {
993 .dropdown:hover ul.dropdown-menu {
997 .dropdown-menu .dropdown-menu {
1006 .tabs, .cbi-tabmenu {
1014 .cbi-tabmenu:before
,
1016 .cbi-tabmenu:after {
1022 .tabs:after, .cbi-tabmenu:after {
1026 .tabs > li, .cbi-tabmenu > li {
1030 .tabs > li > a, .cbi-tabmenu > li > a {
1037 border-style: solid
;
1038 border-width: 0 0 1px;
1044 margin-bottom: -1px;
1051 .cbi-tabmenu.map > li {
1056 .cbi-tabcontainer > fieldset.cbi-section[id] > legend {
1061 .cbi-tabmenu > li > a {
1065 border: 1px solid transparent
;
1066 border-radius: 4px 4px 0 0;
1069 .tabs
> li
> a:hover
,
1070 .cbi-tabmenu > li > a:hover {
1071 text-decoration: none
;
1072 background-color: #eee;
1073 border-color: #eee #eee #ddd;
1076 .tabs
.active
> a
, .tabs
.active
> a:hover
,
1077 .cbi-tabmenu
.active
> a
, .cbi-tabmenu
.active
> a:hover
,
1078 .cbi-tab > a:link, .cbi-tab > a:hover {
1080 background-color: #fff;
1081 border: 1px solid
#ddd;
1082 border-bottom-color: transparent
;
1086 .tabs
.menu-dropdown
, .tabs
.dropdown-menu
,
1087 .cbi-tabmenu .menu-dropdown, .cbi-tabmenu .dropdown-menu {
1090 border-radius: 0 6px 6px 6px;
1093 .tabs a
.menu:after
, .tabs
.dropdown-toggle:after
,
1094 .cbi-tabmenu a.menu:after, .cbi-tabmenu .dropdown-toggle:after {
1095 border-top-color: #999;
1100 .tabs li
.open
.menu
.menu
, .tabs
.open
.dropdown
.dropdown-toggle
,
1101 .cbi-tabmenu li.open.menu .menu, .cbi-tabmenu .open.dropdown .dropdown-toggle {
1105 .tabs li
.open a
.menu:after
, .tabs
.dropdown
.open
.dropdown-toggle:after
,
1106 .cbi-tabmenu li.open a.menu:after, .cbi-tabmenu .dropdown.open .dropdown-toggle:after {
1107 border-top-color: #555;
1110 .tab-content
> .tab-pane
,
1111 .tab-content > div {
1115 .tab-content > .active {
1122 background-color: #f5f5f5;
1123 background-repeat: repeat-x
;
1124 background-image: linear-gradient
(to bottom
, #fff, #f5f5f5);
1125 border: 1px solid
#ddd;
1127 box-shadow: inset
0 1px 0 #fff;
1132 text-shadow: 0 1px 0 #fff;
1135 .breadcrumb .divider {
1140 .breadcrumb .active a {
1147 border-top: 1px solid
#eee;
1151 .alert-message
.danger
,
1153 .alert-message
.danger:hover
,
1155 .alert-message
.error
,
1157 .alert-message
.error:hover
,
1159 .alert-message
.success
,
1161 .alert-message
.success:hover
,
1163 .alert-message
.info
,
1165 .alert-message.info:hover {
1169 .btn .close, .alert-message .close {
1170 font-family: Arial
, sans-serif
;
1175 .alert-message
.danger
,
1177 .alert-message.error {
1178 background: linear-gradient
(to bottom
, #ee5f5b, #c43c35) repeat-x
;
1179 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1180 border-color: rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.25);
1183 .btn.success, .alert-message.success {
1184 background: linear-gradient
(to bottom
, #62c462, #57a957) repeat-x
;
1185 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1186 border-color: rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.25);
1189 .btn.info, .alert-message.info {
1190 background: linear-gradient
(to bottom
, #5bc0de, #339bb9) repeat-x
;
1191 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1192 border-color: rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.25);
1195 .alert-message.notice {
1196 background: linear-gradient
(to bottom
, #efefef, #fefefe) repeat-x
;
1197 text-shadow: 0 -1px 0 rgba
(255, 255, 255, 0.25);
1198 border-color: rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.25);
1204 display: inline-block
;
1205 background: linear-gradient
(#fff, #fff 25%, #e6e6e6) no-repeat
;
1206 padding: 5px 14px 6px;
1207 text-shadow: 0 1px 1px rgba
(255, 255, 255, 0.75);
1210 line-height: normal
;
1211 border: 1px solid
#ccc;
1212 border-bottom-color: #bbb;
1214 box-shadow: inset
0 1px 0 rgba
(255, 255, 255, 0.2), 0 1px 2px rgba
(0, 0, 0, 0.05);
1219 outline: 1px dotted
#666;
1223 .cbi-value-error input {
1228 .cbi-button-positive
,
1229 .cbi-button-fieldadd
,
1236 .cbi-button-neutral
,
1237 .cbi-button-download
,
1250 border-color: #0069d6;
1254 .cbi-button-negative
,
1255 .cbi-section-remove
.cbi-button
,
1257 .cbi-button-remove {
1262 .cbi-page-actions::after {
1268 .cbi-page-actions > :not([method="post"]):not(.cbi-button-apply):not(.cbi-button-save):not(.cbi-button-reset) {
1274 .cbi-button-action
.important
,
1275 .cbi-page-actions
.cbi-button-apply
,
1276 .cbi-section-actions .cbi-button-edit {
1278 background: linear-gradient
(to bottom
, #0069d6, #0049d6) no-repeat
;
1279 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1282 .cbi-button-positive
.important
,
1283 .cbi-page-actions .cbi-button-save {
1285 background: linear-gradient
(to bottom
, #4a4, #484) no-repeat
;
1286 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1289 .cbi-button-negative.important {
1291 background: linear-gradient
(to bottom
, #c44, #c00) no-repeat
;
1292 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1295 .cbi-page-actions .cbi-button-apply + .cbi-button-save {
1296 background: linear-gradient
(#fff, #fff 25%, #e6e6e6);
1297 text-shadow: 0 -1px 0 rgba
(255, 255, 255, 0.75);
1302 border: 1px solid
#ccc;
1304 display: inline-flex
;
1308 background: linear-gradient
(#fff 0%, #e9e8e6 100%);
1313 .cbi-dropdown:focus {
1314 outline: 2px solid
#4b6e9b;
1317 .cbi-dropdown > ul {
1318 margin: 0 !important
;
1327 .cbi-dropdown > ul.preview {
1331 .cbi-dropdown
> .open
,
1332 .cbi-dropdown > .more {
1336 flex-direction: column
;
1337 justify-content: center
;
1343 .cbi-dropdown
> .more
,
1344 .cbi-dropdown > ul > li[placeholder] {
1347 text-shadow: 1px 1px 0px #fff;
1351 .cbi-dropdown > ul > li {
1354 white-space: nowrap
;
1356 text-overflow: ellipsis
;
1359 align-items: center
;
1365 .cbi-dropdown > ul > li .hide-open { display: block
; display: initial
; }
1366 .cbi-dropdown > ul > li .hide-close { display: none
; }
1368 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1369 border-left: 1px solid
#ccc;
1372 .cbi-dropdown[empty] > ul {
1376 .cbi-dropdown > ul > li > form {
1380 pointer-events: none
;
1383 .cbi-dropdown > ul > li img {
1384 vertical-align: middle
;
1385 margin-right: .25em;
1388 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1392 .cbi-dropdown > ul > li input[type="text"] {
1396 .cbi-dropdown[open] {
1400 .cbi-dropdown[open] > ul.dropdown {
1402 background: #f6f6f5;
1403 border: 1px solid
#918e8c;
1404 box-shadow: 0 0 4px #918e8c;
1412 .cbi-dropdown
> ul
> li
[display
],
1413 .cbi-dropdown
[open
] > ul
.preview
,
1414 .cbi-dropdown
[open
] > ul
.dropdown
> li
,
1415 .cbi-dropdown
[multiple
] > ul
> li
> label
,
1416 .cbi-dropdown
[multiple
][open
] > ul
.dropdown
> li
,
1417 .cbi-dropdown
[multiple
][more
] > .more
,
1418 .cbi-dropdown[multiple][empty] > .more {
1423 .cbi-dropdown
[empty
] > ul
> li
,
1424 .cbi-dropdown
[optional
][open
] > ul
.dropdown
> li
[placeholder
],
1425 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1429 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none
; }
1430 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block
; display: initial
; }
1432 .cbi-dropdown[open] > ul.dropdown > li {
1433 border-bottom: 1px solid
#ccc;
1436 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1437 background: #b0d0f0;
1440 .cbi-dropdown[open] > ul.dropdown > li.focus {
1441 background: linear-gradient
(90deg, #a3c2e8 0%, #84aad9 100%);
1444 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1446 border-bottom: none
;
1449 .cbi-dropdown[disabled] {
1450 pointer-events: none
;
1454 input
[type
="text"] + .cbi-button
,
1455 input
[type
="password"] + .cbi-button
,
1456 select
+ .cbi-button
{
1457 border-radius: 0 3px 3px 0;
1459 margin: 0 0 1px -2px;
1461 vertical-align: top
;
1468 select
+ .cbi-button
{
1469 border-left-color: transparent
;
1476 .cbi-title-ref::after {
1480 .cbi-tooltip-container {
1489 transition: opacity
.25s ease-out
;
1492 .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
1495 transition: opacity
.25s ease-in
;
1498 .zonebadge .cbi-tooltip {
1500 background: inherit
;
1501 margin: -1.6em 0 0 -5px;
1503 pointer-events: none
;
1504 box-shadow: 0 0 3px #444;
1507 .zonebadge .cbi-tooltip > * {
1516 .zone-forwards > * {
1521 .zone-forwards > span {
1526 .zone-forwards
.zone-src
,
1527 .zone-forwards .zone-dest {
1529 flex-direction: column
;
1532 .btn.active, .btn:active {
1533 box-shadow: inset
0 2px 4px rgba
(0, 0, 0, 0.25), 0 1px 2px rgba
(0, 0, 0, 0.05);
1538 background-image: none
;
1545 background-image: none
;
1552 line-height: normal
;
1553 padding: 9px 14px 9px;
1558 padding: 7px 9px 7px;
1562 button
.btn::-moz-focus-inner
, input
[type
=submit
].btn::-moz-focus-inner
{
1572 line-height: 13.5px;
1573 text-shadow: 0 1px 0 #fff;
1579 text-decoration: none
;
1586 margin-bottom: 18px;
1588 background: linear-gradient
(to bottom
, #fceec1, #eedc94) repeat-x
;
1589 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1590 border-color: rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.25);
1591 text-shadow: 0 1px 0 rgba
(255, 255, 255, 0.5);
1593 border-style: solid
;
1595 box-shadow: inset
0 1px 0 rgba
(255, 255, 255, 0.25);
1598 .alert-message .close {
1608 .alert-message
.danger p a
,
1609 .alert-message
.error p a
,
1610 .alert-message
.success p a
,
1611 .alert-message.info p a {
1623 .alert-message div {
1630 padding: 1px 3px 2px;
1633 color: #fff !important
;
1634 text-transform: uppercase
;
1635 white-space: nowrap
;
1636 background-color: #bfbfbf;
1647 text-decoration: none
;
1651 background-color: #c43c35;
1655 background-color: #f89406;
1659 background-color: #46a546;
1663 background-color: #62cffc;
1666 /* LuCI specific items */
1667 .hidden { display: none
}
1674 border: 1px solid
#ccc;
1675 border-radius: 3px 3px 3px 3px;
1677 display: inline-block
;
1686 form
.inline
{ display: inline
; margin-bottom: 0; }
1688 header
.pull-right
{ padding-top: 8px; }
1690 #modemenu li:last-child span
.divider
{ display: none
}
1692 #syslog { width: 100%; }
1694 .cbi-section-table
.tr:hover
.td
,
1695 .cbi-section-table
.tr:hover
.th
,
1696 .cbi-section-table .tr:hover::before {
1697 background-color: #f5f5f5;
1700 .cbi-section-table .tr.cbi-section-table-descr .th {
1701 font-weight: normal
;
1704 .cbi-section-table-titles
.named::before
,
1705 .cbi-section-table-descr
.named::before
,
1706 .cbi-section-table-row[data-title]::before {
1707 content: attr
(data-title
) " ";
1708 display: table-cell
;
1709 padding: 10px 10px 9px;
1712 vertical-align: middle
;
1715 .cbi-section-table-titles
.named::before
,
1716 .cbi-section-table-descr
.named::before
,
1717 .cbi-section-table-row[data-title]::before {
1718 border-top: 1px solid
#ddd;
1721 .left { text-align: left
!important
; }
1722 .right { text-align: right
!important
; }
1723 .center { text-align: center
!important
; }
1724 .top { vertical-align: top
!important
; }
1725 .middle { vertical-align: middle
!important
; }
1726 .bottom { vertical-align: bottom
!important
; }
1728 .cbi-value-field { line-height: 1.5em; }
1730 .cbi-value-field input
[type
=checkbox
],
1731 .cbi-value-field input[type=radio] {
1737 .cbi-value-field table td {
1741 .table
.cbi-section-table input
[type
="password"],
1742 .table
.cbi-section-table input
[type
="text"],
1743 .table
.cbi-section-table textarea
,
1744 .table.cbi-section-table select {
1748 .table.cbi-section-table .td.cbi-section-table-cell {
1749 white-space: nowrap
;
1753 .table.cbi-section-table .td.cbi-section-table-cell select {
1757 .td.cbi-section-actions {
1759 vertical-align: middle
;
1762 .td.cbi-section-actions > * {
1766 .td
.cbi-section-actions
> * > *,
1767 .td.cbi-section-actions > * > form > * {
1772 .td.cbi-section-actions > * > form {
1773 display: inline-flex
;
1777 .table.valign-middle .td {
1778 vertical-align: middle
;
1783 .tr.cbi-section-table-titles {
1784 background: #f9f9f9;
1787 .cbi-value-description {
1788 background-image: url
(/luci-static
/resources
/cbi
/help
.gif
);
1789 background-position: .25em .2em;
1790 background-repeat: no-repeat
;
1791 margin: .25em 0 0 0;
1792 padding: 0 0 0 1.7em;
1795 .cbi-section-error {
1796 border: 1px solid
#f00;
1798 background-color: #fce6e6;
1800 margin-bottom: 18px;
1803 .cbi-section-error ul { margin: 0 0 0 20px; }
1805 .cbi-section-error ul li {
1811 background-color: #fff;
1812 border: 1px solid
#ccc;
1815 white-space: nowrap
;
1816 background-image: linear-gradient
(#fff, #fff 25%, #f9f9f9);
1817 text-shadow: 0 1px 1px rgba
(255, 255, 255, 0.75);
1819 box-shadow: inset
0 1px 0 rgba
(255, 255, 255, 0.2), 0 1px 2px rgba
(0, 0, 0, 0.05);
1820 display: inline-flex
;
1821 flex-direction: column
;
1826 .ifacebox .ifacebox-head {
1827 border-bottom: 1px solid
#ccc;
1832 .ifacebox .ifacebox-head.active {
1833 background: #90c0e0;
1836 .ifacebox .ifacebox-body {
1841 display: inline-block
;
1842 flex-direction: row
;
1843 white-space: nowrap
;
1844 background-color: #fff;
1845 border: 1px solid
#ccc;
1847 background-image: linear-gradient
(#fff, #fff 25%, #f9f9f9);
1848 text-shadow: 0 1px 1px rgba
(255, 255, 255, 0.75);
1850 box-shadow: inset
0 1px 0 rgba
(255, 255, 255, 0.2), 0 1px 2px rgba
(0, 0, 0, 0.05);
1858 vertical-align: middle
;
1861 .ifacebadge-active {
1866 .network-status-table {
1871 .network-status-table .ifacebox {
1876 .network-status-table .ifacebox-body {
1878 flex-direction: column
;
1883 .network-status-table .ifacebox-body > * {
1887 .network-status-table .ifacebox-body > span {
1891 .network-status-table .ifacebox-body > div {
1898 .network-status-table .ifacebox-body .ifacebadge {
1899 display: inline-flex
;
1907 .ifacebadge.large > * {
1914 display: inline-block
;
1915 white-space: nowrap
;
1917 text-shadow: 0 1px 1px rgba
(255, 255, 255, 0.75);
1921 .zonebadge > strong {
1923 display: inline-block
;
1930 .zonebadge > .ifacebadge {
1935 border: 1px dashed
#aaa;
1942 .td.cbi-value-field var {
1948 font-family: monospace
;
1951 .uci-change-list ins
,
1952 .uci-change-legend-label ins {
1953 text-decoration: none
;
1954 border: 1px solid
#0f0;
1955 background-color: #cfc;
1960 .uci-change-list del
,
1961 .uci-change-legend-label del {
1962 text-decoration: none
;
1963 border: 1px solid
#f00;
1964 background-color: #fcc;
1970 .uci-change-list var
,
1971 .uci-change-legend-label var {
1972 text-decoration: none
;
1973 border: 1px solid
#ccc;
1974 background-color: #eee;
1982 .uci-change-list var ins
,
1983 .uci-change-list var del {
1991 .uci-change-legend {
1995 .uci-change-legend-label {
2000 .uci-change-legend-label
> ins
,
2001 .uci-change-legend-label
> del
,
2002 .uci-change-legend-label > var {
2010 .uci-change-legend-label var ins
,
2011 .uci-change-legend-label var del {
2016 html body
.apply-overlay-active
{
2017 height: calc
(100vh - 63px);