2 * Rosy is a theme for LuCI. It is based on luci-theme-bootstrap
5 * Copyright 2018 Rosy Song <rosysong@rosinson.com>
6 * Copyright 2018 Yan Lan Shen <yanlan.shen@rosinson.com>
8 * Have a bug? Please create an issue here on GitHub!
9 * https://github.com/rosywrt/luci-theme-rosy/issues
11 * luci-theme-bootstrap:
12 * Copyright 2008 Steven Barth <steven@midlink.org>
13 * Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
14 * Copyright 2012 David Menting <david@nut-bolt.nl>
16 * Licensed to the public under the Apache License 2.0
20 font-family: 'icomoon';
21 src: url
('fonts/font.eot');
22 src: url
('fonts/font.eot') format
('embedded-opentype'), url
('fonts/font.ttf') format
('truetype'), url
('fonts/font.woff') format
('woff'), url
('fonts/font.svg') format
('svg');
41 display: table-header-group
;
45 display: table-row-group
;
49 display: table-footer-group
;
54 vertical-align: middle
;
66 background-color: #f9f9f9;
92 flex: 1 1 30px !important
;
93 -webkit-flex: 1 1 30px !important
;
97 flex: 2 2 60px !important
;
98 -webkit-flex: 2 2 60px !important
;
102 flex: 3 3 90px !important
;
103 -webkit-flex: 3 3 90px !important
;
107 flex: 4 4 120px !important
;
108 -webkit-flex: 4 4 120px !important
;
112 flex: 5 5 150px !important
;
113 -webkit-flex: 5 5 150px !important
;
117 flex: 6 6 180px !important
;
118 -webkit-flex: 6 6 180px !important
;
122 flex: 7 7 210px !important
;
123 -webkit-flex: 7 7 210px !important
;
127 flex: 8 8 240px !important
;
128 -webkit-flex: 8 8 240px !important
;
132 flex: 9 9 270px !important
;
133 -webkit-flex: 9 9 270px !important
;
137 flex: 10 10 300px !important
;
138 -webkit-flex: 10 10 300px !important
;
144 .main>.loading>span {
145 font-family: 'icomoon' !important
;
147 font-style: normal
!important
;
148 font-weight: normal
!important
;
149 font-variant: normal
!important
;
150 text-transform: none
!important
;
152 -webkit-font-smoothing: antialiased
;
153 -moz-osx-font-smoothing: grayscale
;
159 box-sizing: border-box
;
174 font-family: inherit
;
181 -webkit-text-size-adjust: 100%;
182 -ms-text-size-adjust: 100%;
188 background-color: #EEE;
197 font-family: Microsoft Yahei
, WenQuanYi Micro Hei
, sans-serif
, "Helvetica Neue", Helvetica
, Hiragino Sans GB
;
201 padding: 0.36rem 0.8rem;
203 background-color: #fff;
204 background-image: none
;
205 border: 1px solid
#ccc;
211 background-color: transparent
;
212 color: rgba
(0, 0, 0, .87);
214 border-bottom: 2px solid rgba
(0, 0, 0, .26);
219 background-image: none
;
224 select:not
([multiple
="multiple"]):focus
,
226 border-color: #0099CC;
229 select
[multiple
="multiple"] {
239 text-decoration: underline
;
251 text-decoration: none
;
260 background-color: #354057;
264 .main>.loading>span {
273 .main>.loading>span>.loading-img {
274 margin-right: 0.2rem;
275 display: inline-block
;
278 .main>.loading>span>.loading-img img {
279 vertical-align: middle
;
291 list-style-type: none
;
296 padding-bottom: 10px;
297 border-bottom: 1px solid
#eee;
304 padding-bottom: 10px;
305 border-bottom: 1px solid
#eee;
311 padding-bottom: 10px;
317 padding-bottom: 10px;
321 display: inline-block
;
336 font-family: inherit
;
339 background-color: #FFF;
340 -webkit-overflow-scrolling: touch
;
343 .cbi-section>legend {
344 display: none
!important
;
347 .cbi-section
>h3:first-child
,
354 padding-bottom: 1rem;
363 .table
>.tbody
>.tr
>.td
,
364 .table
>.tbody
>.tr
>.th
,
365 .table
>.tfoot
>.tr
>.td
,
366 .table
>.tfoot
>.tr
>.th
,
367 .table
>.thead
>.tr
>.td
,
368 .table>.thead>.tr>.th {
370 border-top: 1px solid
#ddd;
374 .cbi-section-table-cell {
376 align-self: flex-end
;
384 .cbi-section-table-row {
390 .cbi-section-table-row:last-child {
394 .cbi-section-table-row
>.cbi-value-field
.cbi-input-select
,
395 .cbi-section-table-row
>.cbi-value-field
.cbi-input-text
,
396 .cbi-section-table-row
>.cbi-value-field
.cbi-input-password
,
397 .cbi-section-table-row>.cbi-value-field .cbi-dropdown {
401 .cbi-section-table-row
>.cbi-value-field
[data-dynlist
]>input
,
402 .cbi-section-table-row>.cbi-value-field input.cbi-input-password {
403 width: calc
(100% - 1.5rem);
406 div
>table
>tbody
>tr:nth-of-type
(2n),
407 div
>.table
>.tbody
>.tr:nth-of-type
(2n) {
408 background-color: #f9f9f9;
411 div
>table
>tbody
>tr:nth-of-type
(2n),
412 div
>.table
>.tbody
>.tr:nth-of-type
(2n) {
413 background-color: #f9f9f9;
416 .cbi-section .table .tr.table-titles {
417 background-color: #eee;
420 .table
.tr:first-child
.td:first-child
,
421 .table
.tr:first-child::before
,
422 .table .tr:first-child .th:first-child {
423 border-top-left-radius: 10px;
426 .table
.tr:first-child
.td:last-child
,
427 .table .tr:first-child .th:last-child {
428 border-top-right-radius: 10px;
431 .table
.tr:last-child
.td:first-child
,
432 .table .tr:last-child::before {
433 border-bottom-left-radius: 10px;
436 .table .tr:last-child .td:last-child {
437 border-bottom-right-radius: 10px;
440 .table .tr.placeholder:last-child {
441 background-color: transparent
;
444 .cbi-section .table .cbi-section-table-titles {
445 background-color: #e0e0e0;
448 /* fix progress bar */
450 background-color: #9bc1cc;
456 .cbi-progressbar div {
457 background-color: #468ea4;
462 .cbi-progressbar::after {
463 content: attr
(title
);
474 /* fix multiple table */
480 .cbi-value-field table
,
481 .cbi-value-field .table {
485 td
>table
>tbody
>tr
>td
,
486 .td>.table>.tbody>.tr>.td {
490 .cbi-value-field
>table
>tbody
>tr
>td
,
491 .cbi-value-field>.table>.tbody>.tr>.td {
498 margin: 0 .8rem .5rem 0;
499 -webkit-appearance: none
;
500 color: rgba
(0, 0, 0, 0.87);
501 background-color: #F0F0F0;
502 transition: all
0.2s ease-in-out
;
503 display: inline-block
;
504 padding: .5rem .8rem;
508 -ms-touch-action: manipulation
;
509 touch-action: manipulation
;
510 background-image: none
;
512 vertical-align: middle
;
514 -webkit-user-select: none
;
515 -moz-user-select: none
;
516 -ms-user-select: none
;
520 display: inline-block
;
521 text-decoration: none
;
525 .cbi-button:disabled {
527 pointer-events: none
;
532 .cbi-page-actions
.cbi-button-apply
,
533 .cbi-section-actions
.cbi-button-edit
,
534 .cbi-button-edit
.important
,
535 .cbi-button-apply
.important
,
536 .cbi-button-reload
.important
,
538 .cbi-page-actions .cbi-button-save {
540 background-color: #337ab7;
544 .cbi-button-add
.important
,
545 .cbi-button-save
.important
,
546 .cbi-button-positive
.important
,
547 .cbi-button-action
.important
,
548 .cbi-section-actions .cbi-button-edit {
550 background-color: transparent
;
551 border: 1px solid
#337ab7;
554 .cbi-button-remove
.important
,
555 .cbi-button-reset
.important
,
556 .cbi-button-negative.important {
558 background-color: #d9534f;
566 .cbi-button-neutral {
568 background-color: transparent
;
569 border: 1px solid
#468ea4;
576 background-color: transparent
;
577 border: 1px solid
#468ea4;
580 .cbi-page-actions
.cbi-button-apply
+.cbi-button-save
,
583 .cbi-button-positive {
585 background-color: transparent
;
586 border: 1px solid
#354057;
589 .cbi-section-remove
>.cbi-button
,
592 .cbi-button-negative {
594 background-color: transparent
;
595 border: 1px solid
#F24C7C;
598 .cbi-page-actions .cbi-button-link:first-child {
603 text-decoration: none
;
608 .container
>.tabs
>li
[class
~="active"],
609 .container
>.tabs
>li:hover
,
610 .container
>.cbi-tabmenu
,
611 .container
>.cbi-tabmenu
>li
[class
~="cbi-tab"],
612 .container>.cbi-tabmenu>li:hover {
616 .container
.cbi-map
.cbi-tabmenu
,
617 .container
.cbi-map
.cbi-tabmenu
>li
[class
~="cbi-tab"],
618 .container .cbi-map .cbi-tabmenu>li:hover {
619 border-top-left-radius: 10px;
620 border-top-right-radius: 10px;
623 .container
.cbi-map
.cbi-tabmenu
,
625 .container>.cbi-tabmenu {
629 .container .cbi-map .cbi-tabmenu+div {
631 border-bottom-left-radius: 10px;
632 border-bottom-right-radius: 10px;
636 background-color: #FFFFFF;
643 display: inline-block
;
644 padding: 0.6rem 0rem;
649 text-decoration: none
;
651 padding: 0.5rem 0.8rem;
654 .tabs
>li
[class
~="active"],
657 background-color: #337ab7;
660 .tabs
>li
[class
~="active"]>a
,
666 border-top: 1px solid
#D4D4D4;
667 border-left: 1px solid
#D4D4D4;
668 border-right: 1px solid
#D4D4D4;
671 .cbi-tabmenu>li:hover {
672 background-color: #F1F1F1;
675 .cbi-tabmenu>li[class~="cbi-tab"] {
676 background-color: #fff;
680 background-color: #D4D4D4;
689 [data-tab-active
="true"] {
693 transition: opacity
.25s ease-in
;
696 .cbi-section-remove:nth-of-type(2n) {
697 background-color: #f9f9f9;
700 .cbi-section-node-tabbed {
703 border-bottom: 1px solid
#D4D4D4;
704 border-left: 1px solid
#D4D4D4;
705 border-right: 1px solid
#D4D4D4;
708 .cbi-tabcontainer>.cbi-value:nth-of-type(2n) {
709 background-color: #f9f9f9;
713 .cbi-value-description {
718 .cbi-value-helpicon>img {
722 .cbi-value-helpicon:before {
726 .cbi-value-description {
729 padding: 0.5rem 0 0 0;
733 word-wrap: break-word
;
734 padding: 0.6rem 2rem .6rem 0;
743 display: inline-block
;
747 .cbi-section-table-descr
>.cbi-section-table-cell
,
748 .cbi-section-table-titles>.cbi-section-table-cell {
752 .td[data-title]::before {
753 content: attr
(data-title
) ":\20";
761 .tr.placeholder .td[data-title]::before {
765 .tr
[data-title
]::before
,
766 .tr.cbi-section-table-titles.named::before {
767 content: attr
(data-title
) "\20";
775 word-wrap: break-word
;
776 vertical-align: middle
;
780 background-color: #f9f9f9;
784 background-color: #eee;
787 .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
788 width: auto
!important
;
791 .td.cbi-section-actions {
793 vertical-align: middle
;
796 .td.cbi-section-actions>* {
800 .td
.cbi-section-actions
>*>*,
801 .td.cbi-section-actions>*>form>* {
806 .td.cbi-section-actions>*>form {
807 display: inline-flex
;
821 display: inline-flex
;
828 .cbi-dropdown:focus {
829 outline: 2px solid
#4b6e9b;
833 margin: 0 !important
;
842 .cbi-dropdown>ul.preview {
846 .cbi-dropdown>.open {
847 border: 2px outset
#eee;
853 .cbi-dropdown>.more {
857 flex-direction: column
;
858 justify-content: center
;
865 .cbi-dropdown>ul>li[placeholder] {
868 text-shadow: 1px 1px 0px #fff;
872 .cbi-dropdown>ul>li {
877 text-overflow: ellipsis
;
885 .cbi-dropdown>ul>li .hide-open {
889 .cbi-dropdown>ul>li .hide-close {
893 .cbi-dropdown>ul>li[display]:not([display="0"]) {
894 border-left: 1px solid
#ccc;
897 .cbi-dropdown[empty]>ul {
901 .cbi-dropdown>ul>li>form {
905 pointer-events: none
;
908 .cbi-dropdown>ul>li img {
909 vertical-align: middle
;
913 .cbi-dropdown>ul>li>form>input[type="checkbox"] {
918 .cbi-dropdown>ul>li input[type="text"] {
922 .cbi-dropdown[open] {
926 .cbi-dropdown[open]>ul.dropdown {
929 border: 1px solid
#918e8c;
937 .cbi-dropdown
>ul
>li
[display
],
938 .cbi-dropdown
[open
]>ul
.preview
,
939 .cbi-dropdown
[open
]>ul
.dropdown
>li
,
940 .cbi-dropdown
[multiple
]>ul
>li
>label
,
941 .cbi-dropdown
[multiple
][open
]>ul
.dropdown
>li
,
942 .cbi-dropdown
[multiple
][more
]>.more
,
943 .cbi-dropdown[multiple][empty]>.more {
949 .cbi-dropdown
[empty
]>ul
>li
,
950 .cbi-dropdown
[optional
][open
]>ul
.dropdown
>li
[placeholder
],
951 .cbi-dropdown[multiple][open]>ul.dropdown>li>form {
955 .cbi-dropdown[open]>ul.dropdown>li .hide-open {
959 .cbi-dropdown[open]>ul.dropdown>li .hide-close {
963 .cbi-dropdown[open]>ul.dropdown>li {
964 border-bottom: 1px solid
#ccc;
967 .cbi-dropdown[open]>ul.dropdown>li[selected] {
971 .cbi-dropdown[open]>ul.dropdown>li.focus {
972 background: linear-gradient
(90deg, #a3c2e8 0%, #84aad9 100%);
975 .cbi-dropdown[open]>ul.dropdown>li:last-child {
980 .cbi-dropdown[disabled] {
981 pointer-events: none
;
985 .cbi-dropdown .zonebadge {
988 background-color: #468ea4 !important
;
991 .cbi-dropdown[open] .zonebadge {
1003 text-align: left
!important
;
1008 text-align: right
!important
;
1013 text-align: center
!important
;
1017 align-self: flex-start
!important
;
1018 vertical-align: top
!important
;
1022 align-self: flex-end
!important
;
1023 vertical-align: bottom
!important
;
1031 border-top: 1px solid
#eee;
1038 .cbi-value-field .cbi-dropdown {
1042 .cbi-value-field .cbi-input-select {
1046 .th
[data-type
="button"],
1047 .td
[data-type
="button"],
1048 .th
[data-type
="fvalue"],
1049 .td[data-type="fvalue"] {
1055 display: inline-flex
;
1056 border: 1px solid
#CCCCCC;
1057 padding: 0.5rem 1rem;
1059 border-radius: 20px;
1064 background-color: #F0F0F0;
1070 display: inline-block
;
1072 align-self: flex-start
;
1075 .ifacebadge>img+img {
1076 margin: 0 .2rem 0 0;
1079 .network-status-table {
1084 .network-status-table .ifacebox {
1089 .network-status-table .ifacebox-body {
1091 flex-direction: column
;
1095 .network-status-table .ifacebox-body>span {
1099 .network-status-table .ifacebox-body>div {
1104 .network-status-table .ifacebox-body .ifacebadge {
1106 margin: .5em .25em 0 .25em;
1109 background-color: #fff;
1110 align-items: center
;
1115 .cbi-input-textarea {
1120 font-family: "Helvetica Neue", Helvetica
, Arial
, sans-serif
;
1123 border-radius: 20px;
1132 margin-bottom: 20px;
1133 border-radius: 20px;
1134 background-color: #FFF;
1142 font-family: monospace
;
1145 .uci-change-list ins
,
1146 .uci-change-legend-label ins {
1147 text-decoration: none
;
1148 border: 1px solid
#00FF00;
1149 background-color: #CCFFCC;
1154 .uci-change-list del
,
1155 .uci-change-legend-label del {
1156 text-decoration: none
;
1157 border: 1px solid
#FF0000;
1158 background-color: #FFCCCC;
1164 .uci-change-list var
,
1165 .uci-change-legend-label var {
1166 text-decoration: none
;
1167 border: 1px solid
#CCCCCC;
1168 background-color: #EEEEEE;
1174 .uci-change-list var ins
,
1175 .uci-change-list var del {
1182 .uci-change-legend {
1186 .uci-change-legend-label {
1191 .uci-change-legend-label
>ins
,
1192 .uci-change-legend-label
>del
,
1193 .uci-change-legend-label>var {
1201 .uci-change-legend-label var ins
,
1202 .uci-change-legend-label var del {
1207 .uci-change-list var
,
1208 .uci-change-list del
,
1209 .uci-change-list ins {
1218 border: 1px solid
#D4D4D4 !important
;
1220 border-radius: 20px;
1229 background-color: #f9f9f9;
1230 display: inline-flex
;
1231 flex-direction: column
;
1234 border-radius: 20px;
1243 .ifacebox-head.active {
1252 margin-left: 0.5rem;
1256 padding: 0.2rem 0.5rem;
1257 display: inline-block
;
1258 border-radius: 20px;
1261 .zonebadge .ifacebadge {
1262 padding: .2rem .3rem;
1263 margin: 0.1rem 0.2rem;
1267 .zonebadge>input[type="text"] {
1268 padding: 0.16rem 1rem;
1276 display: inline-block
;
1279 .cbi-value-field
.cbi-input-checkbox
,
1280 .cbi-value-field .cbi-input-radio {
1285 .td
.cbi-input-checkbox
,
1286 .td .cbi-input-radio {
1290 .cbi-value-field>input+.cbi-value-description {
1294 .cbi-value-field>ul>li {
1298 .cbi-value-field>ul>li>label {
1302 .cbi-value-field>ul>li .ifacebadge {
1303 background-color: #eee;
1304 margin-left: 0.4rem;
1305 margin-top: -0.5rem;
1308 .cbi-section-table-row>.cbi-value-field .cbi-dropdown {
1312 .cbi-section-create {
1314 display: inline-flex
;
1315 align-items: center
;
1318 .cbi-section-create>* {
1322 .cbi-section-remove {
1327 td
.cbi-value-field var
,
1328 .td.cbi-value-field var {
1335 white-space: normal
;
1336 line-height: 1.42857143;
1341 display: inline-block
;
1343 padding: 0.2rem 0.3rem;
1348 padding: 1rem 1rem 0 1rem;
1349 border-top: 1px solid
#CCC;
1352 .cbi-dropdown-container {
1356 .cbi-tooltip-container {
1365 transition: opacity
.25s ease-out
;
1366 pointer-events: none
;
1369 .cbi-tooltip-container:hover .cbi-tooltip {
1372 transition: opacity
.25s ease-in
;
1373 border-radius: 20px;
1376 .zonebadge .cbi-tooltip {
1378 background: inherit
;
1379 margin: -1.5rem 0 0 -.5rem;
1383 background: repeating-linear-gradient
(45deg, rgba
(204, 204, 204, 0.5), rgba
(204, 204, 204, 0.5) 5px, rgba
(255, 255, 255, 0.5) 5px, rgba
(255, 255, 255, 0.5) 10px);
1396 .zone-forwards>span {
1402 .zone-forwards
.zone-src
,
1403 .zone-forwards .zone-dest {
1405 flex-direction: column
;
1408 #diag-rc-output>pre
{
1409 background-color: #f5f5f5;
1413 line-height: 1.5rem;
1414 -moz-border-radius: 3px;
1415 white-space: pre-wrap
;
1416 word-wrap: break-word
;
1422 input
[name
="traceroute"],
1423 input
[name
="nslookup"] {
1427 header
>.container
>.pull-right
>* {
1433 #xhr_poll_status>.label
.success
{
1434 background-color: #F24C7C;
1438 padding: 0.3rem 0.8rem;
1441 color: #ffffff !important
;
1442 white-space: nowrap
;
1443 background-color: #bfbfbf;
1444 -webkit-border-radius: 3px;
1445 -moz-border-radius: 3px;
1446 border-radius: 50px;
1448 text-decoration: none
;
1452 background-color: #468EA4;
1456 background: url
(./menu-logo
.png
) no-repeat center center
/ 100%;
1466 background-color: rgba
(0, 0, 0, 0.56);
1472 /* fix status processes */
1474 .node-status-processes>.main .table .tr .td:nth-child(3) {
1475 white-space: normal
;
1478 .node-status-iptables>.main div>.cbi-map>form {
1479 margin: 2rem 2rem 0 0;
1482 .node-status-iptables>.main div>.cbi-map>form input {
1484 border-radius: 20px;
1487 .node-status-processes .cbi-section {
1491 .node-status-iptables #iptables
.table-titles
,
1492 .node-system-opkg #packages .cbi-section-table-titles {
1493 background-color: #eee;
1496 /* fix status realtime traffic and wireless */
1498 .node-status-realtime
.lang_enTraffic
.cbi-tabmenu
,
1499 .node-status-realtime.lang_enWireless .cbi-tabmenu {
1500 background-color: #d4d4d4;
1503 .node-status-realtime
.lang_enTraffic
.cbi-tabmenu
>li
[class
~="cbi-tab"],
1504 .node-status-realtime
.lang_enTraffic
.cbi-tabmenu
>li:hover
,
1505 .node-status-realtime
.lang_enWireless
.cbi-tabmenu
>li
[class
~="cbi-tab"],
1506 .node-status-realtime.lang_enWireless .cbi-tabmenu>li:hover {
1507 background-color: #F1F1F1;
1510 .node-status-realtime
.lang_enTraffic #bwsvg
,
1511 .node-status-realtime
.lang_enWireless #iwsvg
,
1512 .node-system-packages
.cbi-map
>.cbi-section
,
1513 .node-system-packages form .cbi-section {
1514 border-top-right-radius: 0;
1515 border-top-left-radius: 0;
1518 /* fix system system */
1520 .node-system-system .cbi-tabmenu {
1521 background-color: #d4d4d4;
1524 .node-system-system .cbi-tabmenu>li[class~="cbi-tab"] {
1525 background-color: #fff;
1528 /* fix system reboot */
1530 .node-system-reboot
>.main
>.main-right p
,
1531 .node-system-reboot>.main>.main-right h3 {
1535 /* fix Services Network Shares*/
1536 .node-services-samba.lang_enNetwork #cbi-samba-sambashare .table-container {
1540 .node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-title {
1541 margin-bottom: 1rem;
1545 .node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-field {
1549 .node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-description {
1553 /* fix System Software*/
1555 .node-system-packages #swfreespace {
1556 background-color: #468ea4 !important
;
1557 border: none
!important
;
1561 .node-system-packages #swfreespace>div {
1562 background-color: #f24c7c !important
;
1563 border: none
!important
;
1567 .node-system-packages>.main table tr td:nth-child(1) {
1568 width: auto
!important
;
1571 .node-system-packages>.main table tr td:nth-last-child(1) {
1572 white-space: normal
;
1577 .node-system-packages
>.main
.cbi-tabmenu
>li
>a
,
1579 padding: 0.5rem 0.8rem;
1582 .node-system-packages>.main .cbi-value>pre {
1583 background-color: #eee;
1588 .node-system-packages .cbi-section .cbi-section-node-tabbed {
1592 .node-system-packages form .cbi-section {
1596 .cbi-tabmenu+.cbi-section {
1600 .node-status-iptables
.cbi-tabmenu
,
1601 .node-system-flashops .cbi-tabmenu {
1605 .node-system-flashops form.inline+form.inline {
1609 .lang_zh-cnBackup .cbi-tabmenu {
1610 margin-bottom: 1rem;
1613 #cbi-firewall-redirect table
*,
1614 #cbi-network-switch_vlan table
*,
1615 #cbi-firewall-zone table
* {
1619 #cbi-firewall-redirect table input
[type
="text"],
1620 #cbi-network-switch_vlan table input
[type
="text"],
1621 #cbi-firewall-zone table input
[type
="text"] {
1625 #cbi-firewall-redirect table select
,
1626 #cbi-network-switch_vlan table select
,
1627 #cbi-firewall-zone table select
{
1631 #cbi-network-switch_vlan .th
,
1632 #cbi-network-switch_vlan .td
{
1636 /* fix Network Network*/
1638 .node-network-network .cbi-rowstyle-2 .ifacebox-body {
1639 background-color: #fff;
1642 .lang_zh-cnInterfaces .container .cbi-map .cbi-tabmenu+div {
1646 /* fix Network Wireless*/
1648 .node-network-wireless .cbi-section-node {
1649 margin-bottom: 1rem;
1652 /* applyreboot fix */
1658 #maincontainer>#maincontent
{
1661 border-radius: 10px;
1662 display: inline-block
;
1667 #applyreboot-container {
1668 margin-bottom: 1rem;
1671 #applyreboot-section {
1675 border-radius: 10px;
1678 #applyreboot-section>div
{
1680 line-height: 1.5rem;
1683 #applyreboot-container {
1684 margin: 90px 2rem 2rem 2rem;
1687 #applyreboot-section {
1705 padding-right: 1rem;
1708 border-bottom: 1px solid
#dadada;
1717 padding-left: .8rem;
1720 text-decoration: none
;
1721 display: inline-block
;
1733 background-color: #354057;
1737 text-decoration: none
;
1755 background-color: #636569;
1758 border-radius: 20px;
1762 .main>.main-left .navbar-container {
1765 width: calc
(100% + 10px);
1766 height: calc
(100% - 110px);
1770 .main>.main-left .nav {
1774 .main>.main-left .nav>li a {
1779 .main>.main-left .nav>li {
1780 padding: 0.5rem 1.7rem;
1784 .main>.main-left .nav>.slide {
1785 padding: 0 15px 0 0;
1790 .main>.main-left .nav>.slide>ul {
1793 width: calc
(100% - 10px);
1796 .main>.main-left .nav>.slide>.menu {
1798 padding: 0.5rem 1.7rem;
1799 text-decoration: none
;
1806 .main
>.main-left
.nav
>li
>a
.active
,
1807 .main
>.main-left
.nav
>.slide
>.menu:hover
,
1808 .main>.main-left .nav>.slide>.menu.active {
1809 background: #485267;
1811 border-top-right-radius: 50px;
1812 border-bottom-right-radius: 50px;
1815 .main>.main-left .nav>.slide:hover {
1819 .main>.main-left .nav>.slide>.slide-menu>li {
1820 padding: 0.6rem 2rem;
1824 .main>.main-left .nav>.slide>.slide-menu>.active {
1825 background-color: #F24C7C;
1826 border-top-right-radius: 50px;
1827 border-bottom-right-radius: 50px;
1830 .main>.main-left .nav>.slide>.slide-menu>li>a {
1831 text-decoration: none
;
1832 white-space: nowrap
;
1835 .main>.main-left .nav>.slide>.slide-menu>.active>a {
1839 .main>.main-left .nav>.slide>.slide-menu>li:hover {
1840 background: #F24C7C;
1841 border-top-right-radius: 50px;
1842 border-bottom-right-radius: 50px;
1845 .main>.main-left .nav>.slide>.slide-menu>.active:hover {
1846 background-color: #F24C7C;
1850 /* The scroll bar of the navigation bar is compatible with each browser. */
1854 .main>.main-left .navbar-container::-webkit-scrollbar {
1856 background: transparent
;
1859 .main>.main-left .navbar-container::-webkit-scrollbar-button {
1863 .main>.main-left .navbar-container::-webkit-scrollbar-thumb {
1864 background-color: #ffffff61;
1865 border-radius: 10px;
1868 .main>.main-left .navbar-container::-webkit-scrollbar-thumb {
1869 background-color: #839dd67a;
1870 border-radius: 10px;
1873 .main>.main-left .navbar-container:hover::-webkit-scrollbar-thumb {
1874 background-color: #839dd67a;
1879 .main>.main-left .navbar-container {
1880 scrollbar-track-color: transparent
;
1881 scrollbar-face-color: #839dd67a;
1882 scrollbar-arrow-color: transparent
;
1883 scrollbar-3dlight-color: transparent
;
1884 scrollbar-highlight-color: transparent
;
1885 scrollbar-shadow-color: transparent
;
1886 scrollbar-darkshadow-color: transparent
;
1887 scrollbar-base-color: transparent
;
1890 .main>.main-left .navbar-container:hover {
1891 scrollbar-face-color: #839dd67a;
1896 padding-right: 1rem;
1899 text-shadow: 0px 0px 2px #BBB;
1905 /* The style of the prompt message */
1909 border-radius: 10px;
1910 background-color: #FFF;
1914 background-color: #FA8072;
1919 background-color: #90EE90;
1928 padding: 7px 0 7px 36px;
1930 font-weight: normal
;
1932 background: url
(./no-pwd
.png
) no-repeat left
43%/ 28px;
1933 display: inline-block
;
1938 line-height: 1.5rem;
1945 background-color: transparent
;
1948 border: 1px solid
#fff;
1949 border-radius: 50px;
1952 /* All styles of the login interface */
1956 background: #fff url
(./loginBG.png) no-repeat center center
/ cover
;
1959 .node-main-login header {
1963 .node-main-login .main {
1967 .node-main-login>.main>.main-left {
1971 .node-main-login>.main>.main-right {
1977 .node-main-login>.main #maincontent {
1983 transform: translateX
(-50%) translateY
(-50%);
1988 .node-main-login>.main .container {
1992 display: inline-block
;
1995 .node-main-login>.main .logoImg a {
2000 text-decoration: none
;
2003 .node-main-login>.main .logoImg img:first-child {
2007 .node-main-login .warning {
2008 background-color: #3E4A62;
2012 .node-main-login>.main form h2 {
2017 font-weight: normal
;
2021 .node-main-login>.main form .cbi-map-descr {
2028 .node-main-login>.main form .cbi-section {
2031 background-color: transparent
;
2035 .node-main-login>.main form .cbi-value {
2039 .node-main-login>.main form .cbi-value-title {
2045 .node-main-login>.main form .cbi-value .cbi-value-field {
2046 margin-bottom: 16px;
2052 .node-main-login>.main form .cbi-value-field input {
2055 border: 1px solid
#556270;
2057 border-radius: 50px;
2062 .node-main-login form
.cbi-value-field
.iconpwd
,
2063 .node-main-login form
.cbi-value-field
.iconuser
,
2064 .node-main-login form .cbi-value-field .iconeye {
2070 transform: translateY
(-50%);
2073 .node-main-login form .cbi-value-field .iconpwd {
2074 background: transparent url
(./pwd.png) no-repeat center center
/ 100%;
2077 .node-main-login form .cbi-value-field .iconuser {
2078 background: transparent url
(./user.png) no-repeat center center
/ 100%;
2081 .node-main-login form .cbi-value-field .iconeye {
2084 background: transparent url
(./op-eye
.png
) no-repeat center center
/ 100%;
2087 .node-main-login form .cbi-value-field .cleye {
2088 background-image: url
(./cl-eye
.png
);
2091 .node-main-login form .cbi-value-field .opeye {
2092 background-image: url
(./op-eye
.png
);
2095 .node-main-login form .cbi-page-actions {
2101 .node-main-login form .cbi-page-actions input {
2105 display: inline-block
;
2111 .node-main-login form .cbi-page-actions .cbi-button-apply {
2112 background-color: #F24C7C;
2113 border-top-left-radius: 50px;
2114 border-bottom-left-radius: 50px;
2117 .node-main-login form .cbi-page-actions .cbi-button-reset {
2118 background-color: #8a4568;
2120 border-top-right-radius: 50px;
2121 border-bottom-right-radius: 50px;
2124 .node-main-login input.cbi-input-text {
2125 box-shadow: 0 0 0 1000px white inset
;
2128 /* Interface after login */
2130 background-color: #EBF1F6;
2141 .logged-in .main-right {
2142 padding: 0 1rem 3rem 0;
2147 .logged-in .main .logoImg {
2151 .logged-in .main .main-left .nav-container {
2152 background-color: #354057;
2153 border-radius: 20px;
2161 .logged-in .main .main-left .brand {
2163 padding: 44px 0 23px;
2169 text-decoration: none
;
2170 border-bottom: 2px solid
#ffffff42;
2171 /* Single line text omitted */
2172 white-space: nowrap
;
2174 text-overflow: ellipsis
;
2175 -webkit-text-overflow: ellipsis
;
2176 -o-text-overflow: ellipsis
;
2179 .logged-in .alert-message {
2182 background-color: #fff;
2185 .logged-in .alert-message a {
2189 background-color: #468EA4;
2193 @media screen and
(max-width: 1600px) {
2195 width: calc
(0% + 13rem);
2200 padding: 0.3rem 0.6rem;
2204 header
>.container
>.pull-right
>* {
2209 padding: 0.2rem 0.6rem;
2214 padding-right: 0.6rem;
2217 .cbi-input-textarea {
2222 @media screen and
(max-width: 1280px) {
2223 .node-main-login>.main .container {
2229 padding: 0.2rem 0.5rem;
2234 padding-bottom: 1rem;
2238 font-size: 0.7rem !important
;
2239 width: 100% !important
;
2242 .main
>.main-left
.nav
>li
,
2243 .main
>.main-left
.nav
>li a
,
2244 .main>.main-left .nav>.slide>.menu {
2248 .main>.main-left .nav>.slide>.slide-menu>li>a {
2253 @media screen and
(max-width: 992px) {
2276 background: #0000007d;
2282 .main>.main-left .navbar-container {
2287 .main>.main-left .nav>.slide>.slide-menu>li {
2299 .node-main-login>.main .container {
2305 display: inline-block
;
2306 vertical-align: middle
;
2311 padding-right: 1rem;
2314 #diag-rc-output>pre
{
2320 flex-direction: row
;
2327 align-self: flex-start
;
2328 text-overflow: ellipsis
;
2329 word-wrap: break-word
;
2330 display: inline-block
;
2334 .td input[type="text"] {
2339 .td
[data-dynlist
]>input
,
2340 .td input.cbi-input-password {
2341 width: calc
(100% - 1.5rem);
2344 .td
[data-type
="button"],
2345 .td[data-type="fvalue"] {
2350 .th
.cbi-value-field
,
2351 .td
.cbi-value-field
,
2352 .th
.cbi-section-table-cell
,
2353 .td.cbi-section-table-cell {
2357 .cbi-section-table-row {
2360 flex-direction: row
;
2361 justify-content: space-between
;
2364 .td
.cbi-value-field
,
2365 .cbi-section-table-cell {
2367 display: inline-block
;
2371 .td.cbi-section-actions {
2373 align-self: flex-end
;
2374 vertical-align: bottom
;
2378 .tr
.cbi-section-table-titles
,
2379 .tr.cbi-section-table-descr {
2383 .tr
[data-title
]::before
,
2384 .tr.cbi-section-table-titles.named::before {
2389 border-bottom: 1px solid rgba
(0, 0, 0, .26);
2397 .td[data-title]::before {
2406 /* All styles of the login interface */
2407 .node-main-login .showSide {
2408 display: none
!important
;
2412 padding-bottom: .8rem;
2415 .logged-in .main .main-left .nav-container {
2416 background-color: #354057;
2425 .logged-in .main-right {
2427 margin-top: calc
(45px + .8rem);
2433 .logged-in .alert-message {
2438 margin: .8rem 0 0 0;
2447 .cbi-section
>h3:first-child
,
2452 .network-status-table .ifacebox-body>span {
2456 .cbi-section .ifacebox-body .ifacebadge>span {
2460 .table
.tr
.cbi-rowstyle-1:nth-child
(n
),
2461 .table .tr:nth-child(n) {
2465 .node-network-firewall
.table
.tr
.cbi-rowstyle-1:nth-child
(n
),
2466 .node-network-firewall .table .tr:nth-child(n) {
2467 border-radius: 20px;
2475 border-bottom: none
;
2482 .cbi-section-node-tabbed {
2487 .cbi-button-action.important {
2488 margin-right: .3rem;
2492 border-bottom: 1px solid rgba
(0, 0, 0, .26);
2495 .node-status-processes
.table
.tr
.cbi-rowstyle-1:nth-child
(n
),
2496 .node-status-processes .table .tr:nth-child(n) {
2497 border-radius: 20px;
2501 @media screen and
(max-width: 768px) {
2506 .node-main-login>.main .logoImg a {
2508 margin: 12px 0 22px 0;
2512 .node-main-login>.main #maincontent {
2514 padding-bottom: 1rem;
2517 transform: translateY
(0) translateX
(-50%);
2533 .a lert-message>h4 {
2534 padding: 8px 0 8px 36px;
2542 .node-main-login .warning {
2543 background-color: #F5F5F6;
2552 .node-main-login>.main form h2 {
2554 margin: 20px 0 16px;
2558 .node-main-login>.main form .cbi-value-field input {
2561 background-size: 16px;
2565 .node-main-login>.main form .cbi-value-field {
2566 margin-bottom: 20px;
2569 .node-main-login form .cbi-page-actions input {
2574 .node-main-login form
.cbi-value-field
.iconpwd
,
2575 .node-main-login form
.cbi-value-field
.iconuser
,
2576 .node-main-login form .cbi-value-field .iconeye {
2582 .node-main-login form .cbi-value-field .iconeye {
2592 display: inline-block
;
2596 @media screen and
(max-width: 480px) {
2603 min-width: 0rem !important
;
2606 margin-bottom: 0.5rem;
2611 .cbi-value-description {
2615 .cbi-value>.cbi-value-field {
2616 display: inline-block
;
2621 padding: 0.6rem 0rem;
2626 padding: 0.2rem 0.3rem;
2630 .cbi-page-actions>div>input {
2645 padding-bottom: 1rem;
2648 .node-system-packages>.main .cbi-value.cbi-value-last>div {
2649 width: 100% !important
;
2652 .node-system-packages>.main .cbi-value .cbi-value-field input {
2656 .node-status-iptables>.main div>.cbi-map>form {
2657 position: static
!important
;
2661 font-weight: normal
;
2664 font-family: inherit
;
2666 background-color: #FFF;
2667 border-radius: 20px;
2668 -webkit-overflow-scrolling: touch
;
2671 .node-status-iptables>.main div>.cbi-map>form input[type="submit"] {
2672 width: 100% !important
;
2676 .node-status-iptables>.main div>.cbi-map>form input[type="submit"]+input[type="submit"] {
2680 .node-main-login>.main .container {
2689 .td.cbi-value-field {
2693 .td.cbi-value-field[data-type="dvalue"] {
2697 .td
.cbi-value-field
[data-type
="button"],
2698 .td.cbi-value-field[data-type="fvalue"] {
2703 .tr
[data-title
]::before
,
2704 .tr.cbi-section-table-titles.named::before {
2712 /* All styles of the login interface */
2713 .node-main-login>.main .cbi-value {
2722 @media screen and
(min-width: 992px) {
2723 .cbi-value-field .cbi-input-select {
2727 .cbi-value-field .cbi-dropdown {
2732 @media screen and
(min-width: 1280px) {
2733 .cbi-value-field .cbi-input-select {
2737 .cbi-value-field .cbi-dropdown {
2742 @media screen and
(min-width: 1600px) {
2743 .cbi-value-field .cbi-input-select {
2747 .cbi-value-field .cbi-dropdown {