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
;
46 border-collapse: collapse
;
64 -webkit-text-size-adjust: 100%;
65 -ms-text-size-adjust: 100%;
93 vertical-align: baseline
;
106 -ms-interpolation-mode: bicubic
;
116 box-sizing: border-box
;
117 vertical-align: baseline
;
118 *vertical-align: middle
;
126 button::-moz-focus-inner
, input::-moz-focus-inner
{
132 input
[type
="button"],
134 input
[type
="submit"] {
136 -webkit-appearance: button
;
140 input
[type
="button"][disabled
],
141 input
[type
="reset"][disabled
],
142 input
[type
="submit"][disabled
] {
146 input
[type
="search"] {
147 -webkit-appearance: textfield
;
148 box-sizing: content-box
;
151 input
[type
="search"]::-webkit-search-decoration
{
152 -webkit-appearance: none
;
162 * Basic and global styles for generating a grid system, structural layout, and page templates
163 * ------------------------------------------------------------------------------------------- */
165 background-color: #fff;
167 font-family: "Helvetica Neue", Helvetica
, Arial
, sans-serif
;
183 .container:before, .container:after {
195 text-decoration: none
;
196 line-height: inherit
;
197 font-weight: inherit
;
202 text-decoration: underline
;
214 * Headings, body text, lists, code, and more for a versatile and durable typography system
215 * ---------------------------------------------------------------------------------------- */
219 .table .tr.cbi-section-table-descr .th {
299 text-transform: uppercase
;
303 margin: 0 0 18px 25px;
350 border-bottom: 1px solid
#eee;
360 font-weight: inherit
;
361 line-height: inherit
;
364 small
{ font-size: 0.9em }
374 font-family: Monaco
, Andale Mono
, Courier New
, monospace
;
380 background-color: #fee9cc;
381 color: rgba
(0, 0, 0, 0.75);
386 background-color: #f5f5f5;
392 border: 1px solid
#ccc;
393 border: 1px solid rgba
(0, 0, 0, 0.15);
396 white-space: pre-wrap
;
397 word-wrap: break-word
;
401 * Base styles for various input types, form layouts, and states
402 * ------------------------------------------------------------- */
418 *padding: 0 0 5px 0px;
425 form
.cbi-tab-descr
{
436 form
.clearfix:before
, form
.clearfix:after
,
437 form
.cbi-value:before
, form
.cbi-value:after
{
443 form
.clearfix:after
,
444 form
.cbi-value:after
{
452 font-family: "Helvetica Neue", Helvetica
, Arial
, sans-serif
;
459 form
.cbi-value-field
{
463 form
.cbi-value label
.cbi-value-title
{
473 input
[type
=checkbox
], input
[type
=radio
] {
482 display: inline-block
;
489 border: 1px solid
#ccc;
491 box-sizing: border-box
;
503 box-shadow: inset
0 -1px 3px rgba
(0, 0, 0, 0.1);
506 input
[type
=checkbox
], input
[type
=radio
] {
519 background-color: #fff;
522 line-height: initial
;
524 width: auto
!important
;
527 input
[type
=button
], input
[type
=reset
], input
[type
=submit
] {
532 select
, input
[type
=file
] {
535 /* For IE7, add top margin to align select with labels */
540 background-color: #fff;
547 .td
> input
[type
=text
],
548 .td
> input
[type
=password
],
550 .td > .cbi-dropdown {
555 background-color: #fff;
558 box-shadow: inset
0 1px 2px rgba
(0, 0, 0, 0.025);
566 ::-webkit-input-placeholder
{
571 transition: border linear
0.2s, box-shadow linear
0.2s;
572 box-shadow: inset
0 1px 3px rgba
(0, 0, 0, 0.1);
575 .btn:hover
, .cbi-button:hover
,
576 input:focus
, textarea:focus
{
578 border-color: rgba
(82, 168, 236, 0.8) !important
;
579 box-shadow: inset
0 1px 3px rgba
(0, 0, 0, 0.1), 0 0 8px rgba
(82, 168, 236, 0.6);
582 input
[type
=file
]:focus
, input
[type
=checkbox
]:focus
, select:focus
{
584 outline: 1px dotted
#666;
593 background-color: #f5f5f5;
595 pointer-events: none
;
600 .cbi-section-create {
601 padding: 0 0 10px 10px;
604 .cbi-section-create {
606 display: inline-flex
;
610 .cbi-section-create > * {
615 .cbi-section-create > * > input {
623 padding: 17px 20px 18px 17px;
624 border-top: 1px solid
#ddd;
625 border-radius: 0 0 3px 3px;
629 .actions
.secondary-action
,
630 .cbi-page-actions .secondary-action{
634 .actions
.secondary-action a
,
635 .cbi-page-actions .secondary-action a {
639 .actions
.secondary-action
a:hover
,
640 .cbi-page-actions .secondary-action a:hover {
641 text-decoration: underline
;
644 .cbi-page-actions > form {
648 .help-inline, .help-block {
671 * Tables for, you guessed it, tabular data
672 * ---------------------------------------- */
673 .tr { display: table-row
; }
674 .table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
675 .table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
683 border-collapse: collapse
;
687 .table .th, .table .td {
689 vertical-align: middle
; /* Fixme */
690 padding: 10px 10px 9px;
698 vertical-align: middle
;
701 .table .td, .table .tbody .th {
702 border-top: 1px solid
#ddd;
706 height: calc
(3em + 20px);
709 .tr.placeholder > .td {
719 * Repeatable UI elements outside the base styles provided from the scaffolding
720 * ---------------------------------------------------------------------------- */
734 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
737 header h3
a:hover
, header
.brand:hover
, header ul
.active
> a
{
738 background-color: #333;
739 background-color: rgba
(255, 255, 255, 0.05);
741 text-decoration: none
;
748 header h3 a
, header
.brand
{
751 padding: 8px 20px 12px;
765 background-color: #222;
766 background-repeat: repeat-x
;
767 background-image: linear-gradient
(to bottom
, #333333, #222222);
768 box-shadow: 0 1px 3px rgba
(0, 0, 0, 0.25), inset
0 -1px 0 rgba
(0, 0, 0, 0.1);
772 header div
> ul
, .nav
{
780 header div
> ul
> li
, .nav
> li
{
785 header div
> ul a
, .nav a
{
788 padding: 10px 10px 11px;
790 text-decoration: none
;
793 header div
> ul
a:hover
, .nav
a:hover
{
795 text-decoration: none
;
798 header div
> ul
.active
> a
, .nav
.active
> a
{
799 background-color: #222;
800 background-color: rgba
(0, 0, 0, 0.5);
803 header div
> ul
.secondary-nav
, .nav
.secondary-nav
{
809 header div
> ul
.secondary-nav
.menu-dropdown
,
810 .nav
.secondary-nav
.menu-dropdown
,
811 header div
> ul
.secondary-nav
.dropdown-menu
,
812 .nav.secondary-nav .dropdown-menu {
817 header div
> ul a
.menu:hover
,
819 header div
> ul li
.open
.menu
,
821 header div
> ul
.dropdown-toggle:hover
,
822 .nav
.dropdown-toggle:hover
,
823 header div
> ul
.dropdown
.open
.dropdown-toggle
,
824 .nav .dropdown.open .dropdown-toggle {
826 background: rgba
(255, 255, 255, 0.05);
829 header div
> ul
.menu-dropdown
,
831 header div
> ul
.dropdown-menu
,
832 .nav .dropdown-menu {
833 background-color: #333;
836 header div
> ul
.menu-dropdown a
.menu
,
837 .nav
.menu-dropdown a
.menu
,
838 header div
> ul
.dropdown-menu a
.menu
,
839 .nav
.dropdown-menu a
.menu
,
840 header div
> ul
.menu-dropdown
.dropdown-toggle
,
841 .nav
.menu-dropdown
.dropdown-toggle
,
842 header div
> ul
.dropdown-menu
.dropdown-toggle
,
843 .nav .dropdown-menu .dropdown-toggle {
847 header div
> ul
.menu-dropdown a
.menu
.open
,
848 .nav
.menu-dropdown a
.menu
.open
,
849 header div
> ul
.dropdown-menu a
.menu
.open
,
850 .nav
.dropdown-menu a
.menu
.open
,
851 header div
> ul
.menu-dropdown
.dropdown-toggle
.open
,
852 .nav
.menu-dropdown
.dropdown-toggle
.open
,
853 header div
> ul
.dropdown-menu
.dropdown-toggle
.open
,
854 .nav .dropdown-menu .dropdown-toggle.open {
856 background: rgba
(255, 255, 255, 0.05);
859 header div
> ul
.menu-dropdown li a
,
860 .nav
.menu-dropdown li a
,
861 header div
> ul
.dropdown-menu li a
,
862 .nav .dropdown-menu li a {
864 text-shadow: 0 1px 0 rgba
(0, 0, 0, 0.5);
867 header div
> ul
.menu-dropdown li
a:hover
,
868 .nav
.menu-dropdown li
a:hover
,
869 header div
> ul
.dropdown-menu li
a:hover
,
870 .nav .dropdown-menu li a:hover {
871 background-color: #191919;
872 background-repeat: repeat-x
;
873 background-image: linear-gradient
(to bottom
, #292929, #191919);
877 header div
> ul
.menu-dropdown
.active a
,
878 .nav
.menu-dropdown
.active a
,
879 header div
> ul
.dropdown-menu
.active a
,
880 .nav .dropdown-menu .active a {
884 header div
> ul
.menu-dropdown
.divider
,
885 .nav
.menu-dropdown
.divider
,
886 header div
> ul
.dropdown-menu
.divider
,
887 .nav .dropdown-menu .divider {
888 background-color: #222;
892 header ul
.menu-dropdown li a
, header ul
.dropdown-menu li a
{
900 a
.menu:after
, .dropdown-toggle:after
{
903 display: inline-block
;
905 text-indent: -99999px;
909 border-left: 4px solid transparent
;
910 border-right: 4px solid transparent
;
911 border-top: 4px solid
#fff;
915 .menu-dropdown, .dropdown-menu {
916 background-color: #fff;
930 border-color: rgba
(0, 0, 0, 0.2);
932 border-width: 0 1px 1px;
933 border-radius: 0 0 6px 6px;
934 box-shadow: 0 2px 4px rgba
(0, 0, 0, 0.2);
935 background-clip: padding-box
;
938 .menu-dropdown li, .dropdown-menu li {
941 background-color: transparent
;
944 .menu-dropdown .divider, .dropdown-menu .divider {
948 background-color: #eee;
949 border-bottom: 1px solid
#fff;
952 header
.dropdown-menu a
, .dropdown-menu a
{
959 text-shadow: 0 1px 0 #fff;
962 header
.dropdown-menu
a:hover
,
963 .dropdown-menu
a:hover
,
964 header
.dropdown-menu a
.hover
,
965 .dropdown-menu a.hover {
966 background-color: #ddd;
967 background-repeat: repeat-x
;
968 background-image: linear-gradient
(to bottom
, #eee, #ddd);
970 text-decoration: none
;
971 box-shadow: inset
0 1px 0 rgba
(0, 0, 0, 0.025), inset
0 -1px rgba
(0, 0, 0, 0.025);
975 .dropdown
.open
.menu
,
976 .open
.dropdown-toggle
,
977 .dropdown.open .dropdown-toggle {
980 background: rgba
(0, 0, 0, 0.3);
983 .open
.menu-dropdown
,
984 .dropdown
.open
.menu-dropdown
,
985 .open
.dropdown-menu
,
986 .dropdown.open .dropdown-menu {
990 .dropdown:hover ul.dropdown-menu {
994 .dropdown-menu .dropdown-menu {
1003 .tabs, .cbi-tabmenu {
1011 .cbi-tabmenu:before
,
1013 .cbi-tabmenu:after {
1019 .tabs:after, .cbi-tabmenu:after {
1023 .tabs > li, .cbi-tabmenu > li {
1027 .tabs > li > a, .cbi-tabmenu > li > a {
1034 border-style: solid
;
1035 border-width: 0 0 1px;
1041 margin-bottom: -1px;
1048 .cbi-tabmenu.map > li {
1053 .cbi-tabcontainer > fieldset.cbi-section[id] > legend {
1058 .cbi-tabmenu > li > a {
1062 border: 1px solid transparent
;
1063 border-radius: 4px 4px 0 0;
1066 .tabs
> li
> a:hover
,
1067 .cbi-tabmenu > li > a:hover {
1068 text-decoration: none
;
1069 background-color: #eee;
1070 border-color: #eee #eee #ddd;
1073 .tabs
.active
> a
, .tabs
.active
> a:hover
,
1074 .cbi-tabmenu
.active
> a
, .cbi-tabmenu
.active
> a:hover
,
1075 .cbi-tab > a:link, .cbi-tab > a:hover {
1077 background-color: #fff;
1078 border: 1px solid
#ddd;
1079 border-bottom-color: transparent
;
1083 .tabs
.menu-dropdown
, .tabs
.dropdown-menu
,
1084 .cbi-tabmenu .menu-dropdown, .cbi-tabmenu .dropdown-menu {
1087 border-radius: 0 6px 6px 6px;
1090 .tabs a
.menu:after
, .tabs
.dropdown-toggle:after
,
1091 .cbi-tabmenu a.menu:after, .cbi-tabmenu .dropdown-toggle:after {
1092 border-top-color: #999;
1097 .tabs li
.open
.menu
.menu
, .tabs
.open
.dropdown
.dropdown-toggle
,
1098 .cbi-tabmenu li.open.menu .menu, .cbi-tabmenu .open.dropdown .dropdown-toggle {
1102 .tabs li
.open a
.menu:after
, .tabs
.dropdown
.open
.dropdown-toggle:after
,
1103 .cbi-tabmenu li.open a.menu:after, .cbi-tabmenu .dropdown.open .dropdown-toggle:after {
1104 border-top-color: #555;
1107 .tab-content
> .tab-pane
,
1108 .tab-content > div {
1112 .tab-content > .active {
1119 background-color: #f5f5f5;
1120 background-repeat: repeat-x
;
1121 background-image: linear-gradient
(to bottom
, #fff, #f5f5f5);
1122 border: 1px solid
#ddd;
1124 box-shadow: inset
0 1px 0 #fff;
1129 text-shadow: 0 1px 0 #fff;
1132 .breadcrumb .divider {
1137 .breadcrumb .active a {
1144 border-top: 1px solid
#eee;
1148 .alert-message
.danger
,
1150 .alert-message
.danger:hover
,
1152 .alert-message
.error
,
1154 .alert-message
.error:hover
,
1156 .alert-message
.success
,
1158 .alert-message
.success:hover
,
1160 .alert-message
.info
,
1162 .alert-message.info:hover {
1166 .btn .close, .alert-message .close {
1167 font-family: Arial
, sans-serif
;
1172 .alert-message
.danger
,
1174 .alert-message.error {
1175 background: linear-gradient
(to bottom
, #ee5f5b, #c43c35) repeat-x
;
1176 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1177 border-color: rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.25);
1180 .btn.success, .alert-message.success {
1181 background: linear-gradient
(to bottom
, #62c462, #57a957) repeat-x
;
1182 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1183 border-color: rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.25);
1186 .btn.info, .alert-message.info {
1187 background: linear-gradient
(to bottom
, #5bc0de, #339bb9) repeat-x
;
1188 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1189 border-color: rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.25);
1192 .alert-message.notice {
1193 background: linear-gradient
(to bottom
, #efefef, #fefefe) repeat-x
;
1194 text-shadow: 0 -1px 0 rgba
(255, 255, 255, 0.25);
1195 border-color: rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.25);
1201 display: inline-block
;
1202 background: linear-gradient
(#fff, #fff 25%, #e6e6e6) no-repeat
;
1203 padding: 5px 14px 6px;
1204 text-shadow: 0 1px 1px rgba
(255, 255, 255, 0.75);
1207 line-height: normal
;
1208 border: 1px solid
#ccc;
1209 border-bottom-color: #bbb;
1211 box-shadow: inset
0 1px 0 rgba
(255, 255, 255, 0.2), 0 1px 2px rgba
(0, 0, 0, 0.05);
1216 outline: 1px dotted
#666;
1220 .cbi-value-error input {
1225 .cbi-button-positive
,
1226 .cbi-button-fieldadd
,
1233 .cbi-button-neutral
,
1234 .cbi-button-download
,
1247 border-color: #0069d6;
1251 .cbi-button-negative
,
1252 .cbi-section-remove
.cbi-button
,
1254 .cbi-button-remove {
1259 .cbi-page-actions
.cbi-button-link
,
1260 .cbi-page-actions form[method="get"]:first-child {
1265 .cbi-button-action
.important
,
1266 .cbi-page-actions
.cbi-button-apply
,
1267 .cbi-section-actions .cbi-button-edit {
1269 background: linear-gradient
(to bottom
, #0069d6, #0049d6) no-repeat
;
1270 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1273 .cbi-button-positive
.important
,
1274 .cbi-page-actions .cbi-button-save {
1276 background: linear-gradient
(to bottom
, #4a4, #484) no-repeat
;
1277 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1280 .cbi-button-negative.important {
1282 background: linear-gradient
(to bottom
, #c44, #c00) no-repeat
;
1283 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1286 .cbi-page-actions .cbi-button-apply + .cbi-button-save {
1287 background: linear-gradient
(#fff, #fff 25%, #e6e6e6);
1288 text-shadow: 0 -1px 0 rgba
(255, 255, 255, 0.75);
1293 border: 1px solid
#ccc;
1295 display: inline-flex
;
1299 background: linear-gradient
(#fff 0%, #e9e8e6 100%);
1304 .cbi-dropdown:focus {
1305 outline: 2px solid
#4b6e9b;
1308 .cbi-dropdown > ul {
1309 margin: 0 !important
;
1318 .cbi-dropdown > ul.preview {
1322 .cbi-dropdown
> .open
,
1323 .cbi-dropdown > .more {
1327 flex-direction: column
;
1328 justify-content: center
;
1334 .cbi-dropdown
> .more
,
1335 .cbi-dropdown > ul > li[placeholder] {
1338 text-shadow: 1px 1px 0px #fff;
1342 .cbi-dropdown > ul > li {
1345 white-space: nowrap
;
1347 text-overflow: ellipsis
;
1350 align-items: center
;
1356 .cbi-dropdown > ul > li .hide-open { display: block
; display: initial
; }
1357 .cbi-dropdown > ul > li .hide-close { display: none
; }
1359 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1360 border-left: 1px solid
#ccc;
1363 .cbi-dropdown[empty] > ul {
1367 .cbi-dropdown > ul > li > form {
1371 pointer-events: none
;
1374 .cbi-dropdown > ul > li img {
1375 vertical-align: middle
;
1376 margin-right: .25em;
1379 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1383 .cbi-dropdown > ul > li input[type="text"] {
1387 .cbi-dropdown[open] {
1391 .cbi-dropdown[open] > ul.dropdown {
1393 background: #f6f6f5;
1394 border: 1px solid
#918e8c;
1395 box-shadow: 0 0 4px #918e8c;
1403 .cbi-dropdown
> ul
> li
[display
],
1404 .cbi-dropdown
[open
] > ul
.preview
,
1405 .cbi-dropdown
[open
] > ul
.dropdown
> li
,
1406 .cbi-dropdown
[multiple
] > ul
> li
> label
,
1407 .cbi-dropdown
[multiple
][open
] > ul
.dropdown
> li
,
1408 .cbi-dropdown
[multiple
][more
] > .more
,
1409 .cbi-dropdown[multiple][empty] > .more {
1414 .cbi-dropdown
[empty
] > ul
> li
,
1415 .cbi-dropdown
[optional
][open
] > ul
.dropdown
> li
[placeholder
],
1416 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1420 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none
; }
1421 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: block
; display: initial
; }
1423 .cbi-dropdown[open] > ul.dropdown > li {
1424 border-bottom: 1px solid
#ccc;
1427 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1428 background: #b0d0f0;
1431 .cbi-dropdown[open] > ul.dropdown > li.focus {
1432 background: linear-gradient
(90deg, #a3c2e8 0%, #84aad9 100%);
1435 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1437 border-bottom: none
;
1440 .cbi-dropdown[disabled] {
1441 pointer-events: none
;
1445 .cbi-tooltip-container {
1454 transition: opacity
.25s ease-out
;
1457 .cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
1460 transition: opacity
.25s ease-in
;
1463 .zonebadge .cbi-tooltip {
1465 background: inherit
;
1466 margin: -1.6em 0 0 -5px;
1468 pointer-events: none
;
1469 box-shadow: 0 0 3px #444;
1472 .zonebadge .cbi-tooltip > * {
1481 .zone-forwards > * {
1486 .zone-forwards > span {
1491 .zone-forwards
.zone-src
,
1492 .zone-forwards .zone-dest {
1494 flex-direction: column
;
1497 .btn.active, .btn:active {
1498 box-shadow: inset
0 2px 4px rgba
(0, 0, 0, 0.25), 0 1px 2px rgba
(0, 0, 0, 0.05);
1503 background-image: none
;
1510 background-image: none
;
1517 line-height: normal
;
1518 padding: 9px 14px 9px;
1523 padding: 7px 9px 7px;
1527 button
.btn::-moz-focus-inner
, input
[type
=submit
].btn::-moz-focus-inner
{
1537 line-height: 13.5px;
1538 text-shadow: 0 1px 0 #fff;
1544 text-decoration: none
;
1551 margin-bottom: 18px;
1553 background: linear-gradient
(to bottom
, #fceec1, #eedc94) repeat-x
;
1554 text-shadow: 0 -1px 0 rgba
(0, 0, 0, 0.25);
1555 border-color: rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.1) rgba
(0, 0, 0, 0.25);
1556 text-shadow: 0 1px 0 rgba
(255, 255, 255, 0.5);
1558 border-style: solid
;
1560 box-shadow: inset
0 1px 0 rgba
(255, 255, 255, 0.25);
1563 .alert-message .close {
1573 .alert-message
.danger p a
,
1574 .alert-message
.error p a
,
1575 .alert-message
.success p a
,
1576 .alert-message.info p a {
1588 .alert-message div {
1594 .alert-message .btn {
1595 box-shadow: 0 1px 0 rgba
(255, 255, 255, 0.25);
1599 padding: 1px 3px 2px;
1602 color: #fff !important
;
1603 text-transform: uppercase
;
1604 white-space: nowrap
;
1605 background-color: #bfbfbf;
1616 text-decoration: none
;
1620 background-color: #c43c35;
1624 background-color: #f89406;
1628 background-color: #46a546;
1632 background-color: #62cffc;
1635 /* LuCI specific items */
1636 .hidden { display: none
}
1643 border: 1px solid
#ccc;
1644 border-radius: 3px 3px 3px 3px;
1646 display: inline-block
;
1655 form
.inline
{ display: inline
}
1657 header
.pull-right
{ padding-top: 8px; }
1659 #modemenu li:last-child span
.divider
{ display: none
}
1661 #syslog { width: 100%; }
1663 .cbi-section-table tbody tr:nth-child(odd) td, .cbi-section-table tbody tr:nth-child(odd) th {
1664 background-color: #f9f9f9;
1667 .cbi-section-table tbody tr:hover td, .cbi-section-table tbody tr:hover th {
1668 background-color: #f5f5f5;
1671 .cbi-section-table tr.cbi-section-table-descr th {
1672 font-weight: normal
;
1675 .cbi-section-table-titles
.named::before
,
1676 .cbi-section-table-descr
.named::before
,
1677 .cbi-section-table-row[data-title]::before {
1678 content: attr
(data-title
) " ";
1679 display: table-cell
;
1680 padding: 10px 10px 9px;
1683 vertical-align: middle
;
1686 .cbi-section-table-row[data-title]::before {
1687 border-top: 1px solid
#ddd;
1690 .left { text-align: left
!important
; }
1691 .right { text-align: right
!important
; }
1692 .center { text-align: center
!important
; }
1693 .top { vertical-align: top
!important
; }
1694 .middle { vertical-align: middle
!important
; }
1695 .bottom { vertical-align: bottom
!important
; }
1697 .cbi-value-field { line-height: 1.5em; }
1699 .cbi-value-field input
[type
=checkbox
],
1700 .cbi-value-field input[type=radio] {
1706 .cbi-value-field table td {
1710 .table
.cbi-section-table input
[type
="password"],
1711 .table
.cbi-section-table input
[type
="text"],
1712 .table
.cbi-section-table textarea
,
1713 .table.cbi-section-table select {
1717 .table.cbi-section-table .td.cbi-section-table-cell {
1718 white-space: nowrap
;
1722 .table.cbi-section-table .td.cbi-section-table-cell select {
1726 .td.cbi-section-actions {
1728 vertical-align: middle
;
1731 .td.cbi-section-actions > * {
1735 .td
.cbi-section-actions
> * > *,
1736 .td.cbi-section-actions > * > form > * {
1741 .td.cbi-section-actions > * > form {
1742 display: inline-flex
;
1746 .table.valign-middle .td {
1747 vertical-align: middle
;
1751 background: #f9f9f9;
1754 .cbi-value-description {
1755 background-image: url
(/luci-static
/resources
/cbi
/help
.gif
);
1756 background-position: .25em .2em;
1757 background-repeat: no-repeat
;
1758 margin: .25em 0 0 0;
1759 padding: 0 0 0 1.7em;
1762 .cbi-section-error {
1763 border: 1px solid
#f00;
1765 background-color: #fce6e6;
1767 margin-bottom: 18px;
1770 .cbi-section-error ul { margin: 0 0 0 20px; }
1772 .cbi-section-error ul li {
1778 background-color: #fff;
1779 border: 1px solid
#ccc;
1782 white-space: nowrap
;
1783 background-image: linear-gradient
(#fff, #fff 25%, #f9f9f9);
1784 text-shadow: 0 1px 1px rgba
(255, 255, 255, 0.75);
1786 box-shadow: inset
0 1px 0 rgba
(255, 255, 255, 0.2), 0 1px 2px rgba
(0, 0, 0, 0.05);
1787 display: inline-flex
;
1788 flex-direction: column
;
1793 .ifacebox .ifacebox-head {
1794 border-bottom: 1px solid
#ccc;
1799 .ifacebox .ifacebox-head.active {
1800 background: #90c0e0;
1803 .ifacebox .ifacebox-body {
1808 display: inline-block
;
1809 flex-direction: row
;
1810 white-space: nowrap
;
1811 background-color: #fff;
1812 border: 1px solid
#ccc;
1814 background-image: linear-gradient
(#fff, #fff 25%, #f9f9f9);
1815 text-shadow: 0 1px 1px rgba
(255, 255, 255, 0.75);
1817 box-shadow: inset
0 1px 0 rgba
(255, 255, 255, 0.2), 0 1px 2px rgba
(0, 0, 0, 0.05);
1825 vertical-align: middle
;
1828 .ifacebadge-active {
1833 .network-status-table {
1838 .network-status-table .ifacebox {
1843 .network-status-table .ifacebox-body {
1845 flex-direction: column
;
1850 .network-status-table .ifacebox-body > * {
1854 .network-status-table .ifacebox-body > span {
1858 .network-status-table .ifacebox-body > div {
1865 .network-status-table .ifacebox-body .ifacebadge {
1866 display: inline-flex
;
1874 .ifacebadge.large > * {
1881 display: inline-block
;
1882 white-space: nowrap
;
1884 text-shadow: 0 1px 1px rgba
(255, 255, 255, 0.75);
1888 .zonebadge > strong {
1890 display: inline-block
;
1897 .zonebadge > .ifacebadge {
1902 border: 1px dashed
#aaa;
1909 .td.cbi-value-field var {
1915 font-family: monospace
;
1918 .uci-change-list ins
,
1919 .uci-change-legend-label ins {
1920 text-decoration: none
;
1921 border: 1px solid
#0f0;
1922 background-color: #cfc;
1927 .uci-change-list del
,
1928 .uci-change-legend-label del {
1929 text-decoration: none
;
1930 border: 1px solid
#f00;
1931 background-color: #fcc;
1937 .uci-change-list var
,
1938 .uci-change-legend-label var {
1939 text-decoration: none
;
1940 border: 1px solid
#ccc;
1941 background-color: #eee;
1949 .uci-change-list var ins
,
1950 .uci-change-list var del {
1958 .uci-change-legend {
1962 .uci-change-legend-label {
1967 .uci-change-legend-label
> ins
,
1968 .uci-change-legend-label
> del
,
1969 .uci-change-legend-label > var {
1977 .uci-change-legend-label var ins
,
1978 .uci-change-legend-label var del {
1983 html body
.apply-overlay-active
{
1984 height: calc
(100vh - 63px);