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');
37 display: table-header-group
;
40 display: table-row-group
;
43 display: table-footer-group
;
47 vertical-align: middle
;
57 background-color: #f9f9f9;
79 flex: 1 1 30px !important
;
80 -webkit-flex: 1 1 30px !important
;
83 flex: 2 2 60px !important
;
84 -webkit-flex: 2 2 60px !important
;
87 flex: 3 3 90px !important
;
88 -webkit-flex: 3 3 90px !important
;
91 flex: 4 4 120px !important
;
92 -webkit-flex: 4 4 120px !important
;
95 flex: 5 5 150px !important
;
96 -webkit-flex: 5 5 150px !important
;
99 flex: 6 6 180px !important
;
100 -webkit-flex: 6 6 180px !important
;
103 flex: 7 7 210px !important
;
104 -webkit-flex: 7 7 210px !important
;
107 flex: 8 8 240px !important
;
108 -webkit-flex: 8 8 240px !important
;
111 flex: 9 9 270px !important
;
112 -webkit-flex: 9 9 270px !important
;
115 flex: 10 10 300px !important
;
116 -webkit-flex: 10 10 300px !important
;
121 .main>.loading>span {
122 font-family: 'icomoon' !important
;
124 font-style: normal
!important
;
125 font-weight: normal
!important
;
126 font-variant: normal
!important
;
127 text-transform: none
!important
;
129 -webkit-font-smoothing: antialiased
;
130 -moz-osx-font-smoothing: grayscale
;
135 box-sizing: border-box
;
137 .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
138 font-family: inherit
;
144 -webkit-text-size-adjust: 100%;
145 -ms-text-size-adjust: 100%;
150 background-color: #EEE;
158 font-family: Microsoft Yahei
, WenQuanYi Micro Hei
, sans-serif
, "Helvetica Neue", Helvetica
, Hiragino Sans GB
;
161 padding: 0.36rem 0.8rem;
163 background-color: #fff;
164 background-image: none
;
165 border: 1px solid
#ccc;
170 background-color: transparent
;
171 color: rgba
(0, 0, 0, .87);
173 border-bottom: 2px solid rgba
(0, 0, 0, .26);
178 background-image: none
;
182 select:not
([multiple
="multiple"]):focus
,
184 border-color: #0099CC;
186 select
[multiple
="multiple"] {
194 text-decoration: underline
;
204 text-decoration: none
;
212 background-color: #354057;
215 .main>.loading>span {
223 .main>.loading>span>.loading-img {
224 margin-right: 0.2rem;
225 display: inline-block
;
227 .main>.loading>span>.loading-img img {
228 vertical-align: middle
;
237 list-style-type: none
;
241 padding-bottom: 10px;
242 border-bottom: 1px solid
#eee;
248 padding-bottom: 10px;
249 border-bottom: 1px solid
#eee;
254 padding-bottom: 10px;
259 padding-bottom: 10px;
262 display: inline-block
;
275 font-family: inherit
;
278 background-color: #FFF;
279 -webkit-overflow-scrolling: touch
;
281 .cbi-section>legend {
282 display: none
!important
;
284 .cbi-section
>h3:first-child
,
291 padding-bottom: 1rem;
298 .table
>.tbody
>.tr
>.td
,
299 .table
>.tbody
>.tr
>.th
,
300 .table
>.tfoot
>.tr
>.td
,
301 .table
>.tfoot
>.tr
>.th
,
302 .table
>.thead
>.tr
>.td
,
303 .table>.thead>.tr>.th {
305 border-top: 1px solid
#ddd;
308 .cbi-section-table-cell {
310 align-self: flex-end
;
316 .cbi-section-table-row {
321 .cbi-section-table-row:last-child {
324 .cbi-section-table-row
>.cbi-value-field
.cbi-input-select
,
325 .cbi-section-table-row
>.cbi-value-field
.cbi-input-text
,
326 .cbi-section-table-row
>.cbi-value-field
.cbi-input-password
,
327 .cbi-section-table-row>.cbi-value-field .cbi-dropdown {
330 .cbi-section-table-row
>.cbi-value-field
[data-dynlist
]>input
,
331 .cbi-section-table-row>.cbi-value-field input.cbi-input-password {
332 width: calc
(100% - 1.5rem);
334 div
>table
>tbody
>tr:nth-of-type
(2n),
335 div
>.table
>.tbody
>.tr:nth-of-type
(2n) {
336 background-color: #f9f9f9;
338 div
>table
>tbody
>tr:nth-of-type
(2n),
339 div
>.table
>.tbody
>.tr:nth-of-type
(2n) {
340 background-color: #f9f9f9;
342 .cbi-section .table .tr.table-titles {
343 background-color: #eee;
345 .table
.tr:first-child
.td:first-child
,
346 .table
.tr:first-child::before
,
347 .table .tr:first-child .th:first-child {
348 border-top-left-radius: 10px;
350 .table
.tr:first-child
.td:last-child
,
351 .table .tr:first-child .th:last-child {
352 border-top-right-radius: 10px;
354 .table
.tr:last-child
.td:first-child
,
355 .table .tr:last-child::before {
356 border-bottom-left-radius: 10px;
358 .table .tr:last-child .td:last-child {
359 border-bottom-right-radius: 10px;
361 .table .tr.placeholder:last-child {
362 background-color: transparent
;
364 .cbi-section .table .cbi-section-table-titles {
365 background-color: #e0e0e0;
367 /* fix progress bar */
369 background-color: #9bc1cc;
374 .cbi-progressbar div {
375 background-color: #468ea4;
379 .cbi-progressbar::after {
380 content: attr
(title
);
390 /* fix multiple table */
395 .cbi-value-field table
,
396 .cbi-value-field .table {
399 td
>table
>tbody
>tr
>td
,
400 .td>.table>.tbody>.tr>.td {
403 .cbi-value-field
>table
>tbody
>tr
>td
,
404 .cbi-value-field>.table>.tbody>.tr>.td {
410 margin: 0 .8rem .5rem 0;
411 -webkit-appearance: none
;
413 background-color: transparent
;
414 transition: all
0.2s ease-in-out
;
415 display: inline-block
;
416 padding: .5rem .8rem;
420 -ms-touch-action: manipulation
;
421 touch-action: manipulation
;
422 background-image: none
;
424 vertical-align: middle
;
426 -webkit-user-select: none
;
427 -moz-user-select: none
;
428 -ms-user-select: none
;
432 display: inline-block
;
433 text-decoration: none
;
436 .cbi-button:disabled {
438 pointer-events: none
;
442 .cbi-page-actions
.cbi-button-apply
,
443 .cbi-section-actions
.cbi-button-edit
,
444 .cbi-button-edit
.important
,
445 .cbi-button-apply
.important
,
446 .cbi-button-reload
.important
,
448 .cbi-page-actions .cbi-button-save {
450 background-color: #337ab7;
453 .cbi-button-add
.important
,
454 .cbi-button-save
.important
,
455 .cbi-button-positive
.important
,
456 .cbi-button-action
.important
,
457 .cbi-section-actions .cbi-button-edit {
459 background-color: transparent
;
460 border: 1px solid
#337ab7;
462 .cbi-button-remove
.important
,
463 .cbi-button-reset
.important
,
464 .cbi-button-negative.important {
466 background-color: #d9534f;
473 .cbi-button-neutral {
475 background-color: transparent
;
476 border: 1px solid
#468ea4;
482 background-color: transparent
;
483 border: 1px solid
#468ea4;
485 .cbi-page-actions
.cbi-button-apply
+.cbi-button-save
,
488 .cbi-button-positive {
490 background-color: transparent
;
491 border: 1px solid
#354057;
493 .cbi-section-remove
>.cbi-button
,
496 .cbi-button-negative {
498 background-color: transparent
;
499 border: 1px solid
#F24C7C;
501 .cbi-page-actions .cbi-button-link:first-child {
505 text-decoration: none
;
509 .container
>.tabs
>li
[class
~="active"],
510 .container
>.tabs
>li:hover
,
511 .container
>.cbi-tabmenu
,
512 .container
>.cbi-tabmenu
>li
[class
~="cbi-tab"],
513 .container>.cbi-tabmenu>li:hover {
516 .container
.cbi-map
.cbi-tabmenu
,
517 .container
.cbi-map
.cbi-tabmenu
>li
[class
~="cbi-tab"],
518 .container .cbi-map .cbi-tabmenu>li:hover {
519 border-top-left-radius: 10px;
520 border-top-right-radius: 10px;
522 .container
.cbi-map
.cbi-tabmenu
,
524 .container>.cbi-tabmenu {
527 .container .cbi-map .cbi-tabmenu+div {
529 border-bottom-left-radius: 10px;
530 border-bottom-right-radius: 10px;
533 background-color: #FFFFFF;
539 display: inline-block
;
540 padding: 0.6rem 0rem;
544 text-decoration: none
;
546 padding: 0.5rem 0.8rem;
548 .tabs
>li
[class
~="active"],
551 background-color: #337ab7;
553 .tabs
>li
[class
~="active"]>a
,
558 border-top: 1px solid
#D4D4D4;
559 border-left: 1px solid
#D4D4D4;
560 border-right: 1px solid
#D4D4D4;
562 .cbi-tabmenu>li:hover {
563 background-color: #F1F1F1;
565 .cbi-tabmenu>li[class~="cbi-tab"] {
566 background-color: #fff;
569 background-color: #D4D4D4;
578 [data-tab-active
="true"] {
582 transition: opacity
.25s ease-in
;
585 .cbi-section-remove:nth-of-type(2n) {
586 background-color: #f9f9f9;
588 .cbi-section-node-tabbed {
591 border-bottom: 1px solid
#D4D4D4;
592 border-left: 1px solid
#D4D4D4;
593 border-right: 1px solid
#D4D4D4;
595 .cbi-tabcontainer>.cbi-value:nth-of-type(2n) {
596 background-color: #f9f9f9;
599 .cbi-value-description {
603 .cbi-value-helpicon>img {
606 .cbi-value-helpicon:before {
609 .cbi-value-description {
612 padding: 0.5rem 0 0 0;
616 word-wrap: break-word
;
617 padding: 0.6rem 2rem .6rem 0;
626 display: inline-block
;
630 .cbi-section-table-descr
>.cbi-section-table-cell
,
631 .cbi-section-table-titles>.cbi-section-table-cell {
635 .td[data-title]::before {
636 content: attr
(data-title
) ":\20";
644 .tr.placeholder .td[data-title]::before {
648 .tr
[data-title
]::before
,
649 .tr.cbi-section-table-titles.named::before {
650 content: attr
(data-title
) "\20";
658 word-wrap: break-word
;
659 vertical-align: middle
;
663 background-color: #f9f9f9;
667 background-color: #eee;
670 .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
671 width: auto
!important
;
674 .td.cbi-section-actions {
676 vertical-align: middle
;
679 .td.cbi-section-actions>* {
683 .td
.cbi-section-actions
>*>*,
684 .td.cbi-section-actions>*>form>* {
689 .td.cbi-section-actions>*>form {
690 display: inline-flex
;
704 display: inline-flex
;
711 .cbi-dropdown:focus {
712 outline: 2px solid
#4b6e9b;
716 margin: 0 !important
;
725 .cbi-dropdown>ul.preview {
729 .cbi-dropdown>.open {
730 border: 2px outset
#eee;
736 .cbi-dropdown>.more {
740 flex-direction: column
;
741 justify-content: center
;
748 .cbi-dropdown>ul>li[placeholder] {
751 text-shadow: 1px 1px 0px #fff;
755 .cbi-dropdown>ul>li {
760 text-overflow: ellipsis
;
768 .cbi-dropdown>ul>li .hide-open {
772 .cbi-dropdown>ul>li .hide-close {
776 .cbi-dropdown>ul>li[display]:not([display="0"]) {
777 border-left: 1px solid
#ccc;
780 .cbi-dropdown[empty]>ul {
784 .cbi-dropdown>ul>li>form {
788 pointer-events: none
;
791 .cbi-dropdown>ul>li img {
792 vertical-align: middle
;
796 .cbi-dropdown>ul>li>form>input[type="checkbox"] {
801 .cbi-dropdown>ul>li input[type="text"] {
805 .cbi-dropdown[open] {
809 .cbi-dropdown[open]>ul.dropdown {
812 border: 1px solid
#918e8c;
820 .cbi-dropdown
>ul
>li
[display
],
821 .cbi-dropdown
[open
]>ul
.preview
,
822 .cbi-dropdown
[open
]>ul
.dropdown
>li
,
823 .cbi-dropdown
[multiple
]>ul
>li
>label
,
824 .cbi-dropdown
[multiple
][open
]>ul
.dropdown
>li
,
825 .cbi-dropdown
[multiple
][more
]>.more
,
826 .cbi-dropdown[multiple][empty]>.more {
832 .cbi-dropdown
[empty
]>ul
>li
,
833 .cbi-dropdown
[optional
][open
]>ul
.dropdown
>li
[placeholder
],
834 .cbi-dropdown[multiple][open]>ul.dropdown>li>form {
838 .cbi-dropdown[open]>ul.dropdown>li .hide-open {
842 .cbi-dropdown[open]>ul.dropdown>li .hide-close {
846 .cbi-dropdown[open]>ul.dropdown>li {
847 border-bottom: 1px solid
#ccc;
850 .cbi-dropdown[open]>ul.dropdown>li[selected] {
854 .cbi-dropdown[open]>ul.dropdown>li.focus {
855 background: linear-gradient
(90deg, #a3c2e8 0%, #84aad9 100%);
858 .cbi-dropdown[open]>ul.dropdown>li:last-child {
863 .cbi-dropdown[disabled] {
864 pointer-events: none
;
868 .cbi-dropdown .zonebadge {
871 background-color: #468ea4 !important
;
874 .cbi-dropdown[open] .zonebadge {
886 text-align: left
!important
;
891 text-align: right
!important
;
896 text-align: center
!important
;
900 align-self: flex-start
!important
;
901 vertical-align: top
!important
;
905 align-self: flex-end
!important
;
906 vertical-align: bottom
!important
;
914 border-top: 1px solid
#eee;
921 .cbi-value-field .cbi-dropdown {
925 .cbi-value-field .cbi-input-select {
929 .th
[data-type
="button"],
930 .td
[data-type
="button"],
931 .th
[data-type
="fvalue"],
932 .td[data-type="fvalue"] {
938 display: inline-flex
;
939 border: 1px solid
#CCCCCC;
940 padding: 0.5rem 1rem;
947 background-color: #F0F0F0;
953 display: inline-block
;
955 align-self: flex-start
;
958 .ifacebadge>img+img {
962 .network-status-table {
967 .network-status-table .ifacebox {
972 .network-status-table .ifacebox-body {
974 flex-direction: column
;
978 .network-status-table .ifacebox-body>span {
982 .network-status-table .ifacebox-body>div {
987 .network-status-table .ifacebox-body .ifacebadge {
989 margin: .5em .25em 0 .25em;
992 background-color: #fff;
998 .cbi-input-textarea {
1003 font-family: "Helvetica Neue", Helvetica
, Arial
, sans-serif
;
1006 border-radius: 20px;
1015 margin-bottom: 20px;
1016 border-radius: 20px;
1017 background-color: #FFF;
1025 font-family: monospace
;
1028 .uci-change-list ins
,
1029 .uci-change-legend-label ins {
1030 text-decoration: none
;
1031 border: 1px solid
#00FF00;
1032 background-color: #CCFFCC;
1037 .uci-change-list del
,
1038 .uci-change-legend-label del {
1039 text-decoration: none
;
1040 border: 1px solid
#FF0000;
1041 background-color: #FFCCCC;
1047 .uci-change-list var
,
1048 .uci-change-legend-label var {
1049 text-decoration: none
;
1050 border: 1px solid
#CCCCCC;
1051 background-color: #EEEEEE;
1057 .uci-change-list var ins
,
1058 .uci-change-list var del {
1065 .uci-change-legend {
1069 .uci-change-legend-label {
1074 .uci-change-legend-label
>ins
,
1075 .uci-change-legend-label
>del
,
1076 .uci-change-legend-label>var {
1084 .uci-change-legend-label var ins
,
1085 .uci-change-legend-label var del {
1090 .uci-change-list var
,
1091 .uci-change-list del
,
1092 .uci-change-list ins {
1101 border: 1px solid
#D4D4D4 !important
;
1103 border-radius: 20px;
1112 background-color: #f9f9f9;
1113 display: inline-flex
;
1114 flex-direction: column
;
1117 border-radius: 20px;
1126 .ifacebox-head.active {
1135 margin-left: 0.5rem;
1139 padding: 0.2rem 0.5rem;
1140 display: inline-block
;
1141 border-radius: 20px;
1144 .zonebadge .ifacebadge {
1145 padding: .2rem .3rem;
1146 margin: 0.1rem 0.2rem;
1150 .zonebadge>input[type="text"] {
1151 padding: 0.16rem 1rem;
1159 display: inline-block
;
1162 .cbi-value-field
.cbi-input-checkbox
,
1163 .cbi-value-field .cbi-input-radio {
1168 .td
.cbi-input-checkbox
,
1169 .td .cbi-input-radio {
1173 .cbi-value-field>input+.cbi-value-description {
1177 .cbi-value-field>ul>li {
1181 .cbi-value-field>ul>li>label {
1185 .cbi-value-field>ul>li .ifacebadge {
1186 background-color: #eee;
1187 margin-left: 0.4rem;
1188 margin-top: -0.5rem;
1191 .cbi-section-table-row>.cbi-value-field .cbi-dropdown {
1195 .cbi-section-create {
1197 display: inline-flex
;
1198 align-items: center
;
1201 .cbi-section-create>* {
1205 .cbi-section-remove {
1210 td
.cbi-value-field var
,
1211 .td.cbi-value-field var {
1218 white-space: normal
;
1219 line-height: 1.42857143;
1224 display: inline-block
;
1226 padding: 0.2rem 0.3rem;
1231 padding: 1rem 1rem 0 1rem;
1232 border-top: 1px solid
#CCC;
1235 .cbi-dropdown-container {
1239 .cbi-tooltip-container {
1248 transition: opacity
.25s ease-out
;
1249 pointer-events: none
;
1252 .cbi-tooltip-container:hover .cbi-tooltip {
1255 transition: opacity
.25s ease-in
;
1256 border-radius: 20px;
1259 .zonebadge .cbi-tooltip {
1261 background: inherit
;
1262 margin: -1.5rem 0 0 -.5rem;
1266 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);
1279 .zone-forwards>span {
1285 .zone-forwards
.zone-src
,
1286 .zone-forwards .zone-dest {
1288 flex-direction: column
;
1291 #diag-rc-output>pre
{
1292 background-color: #f5f5f5;
1296 line-height: 1.5rem;
1297 -moz-border-radius: 3px;
1298 white-space: pre-wrap
;
1299 word-wrap: break-word
;
1305 input
[name
="traceroute"],
1306 input
[name
="nslookup"] {
1310 header
>.container
>.pull-right
>* {
1316 #xhr_poll_status>.label
.success
{
1317 background-color: #F24C7C;
1321 padding: 0.3rem 0.8rem;
1324 color: #ffffff !important
;
1325 white-space: nowrap
;
1326 background-color: #bfbfbf;
1327 -webkit-border-radius: 3px;
1328 -moz-border-radius: 3px;
1329 border-radius: 50px;
1331 text-decoration: none
;
1335 background-color: #468EA4;
1339 background: url
(./menu-logo
.png
) no-repeat center center
/ 100%;
1349 background-color: rgba
(0, 0, 0, 0.56);
1355 /* fix status processes */
1357 .node-status-processes>.main .table .tr .td:nth-child(3) {
1358 white-space: normal
;
1361 .node-status-iptables>.main div>.cbi-map>form {
1362 margin: 2rem 2rem 0 0;
1365 .node-status-iptables>.main div>.cbi-map>form input {
1367 border-radius: 20px;
1370 .node-status-processes .cbi-section {
1373 .node-status-iptables #iptables
.table-titles
,
1374 .node-system-opkg #packages .cbi-section-table-titles {
1375 background-color: #eee;
1378 /* fix status realtime traffic and wireless */
1380 .node-status-realtime
.lang_enTraffic
.cbi-tabmenu
,
1381 .node-status-realtime.lang_enWireless .cbi-tabmenu {
1382 background-color: #d4d4d4;
1385 .node-status-realtime
.lang_enTraffic
.cbi-tabmenu
>li
[class
~="cbi-tab"],
1386 .node-status-realtime
.lang_enTraffic
.cbi-tabmenu
>li:hover
,
1387 .node-status-realtime
.lang_enWireless
.cbi-tabmenu
>li
[class
~="cbi-tab"],
1388 .node-status-realtime.lang_enWireless .cbi-tabmenu>li:hover {
1389 background-color: #F1F1F1;
1392 .node-status-realtime
.lang_enTraffic #bwsvg
,
1393 .node-status-realtime
.lang_enWireless #iwsvg
,
1394 .node-system-packages
.cbi-map
>.cbi-section
,
1395 .node-system-packages form .cbi-section {
1396 border-top-right-radius: 0;
1397 border-top-left-radius: 0;
1400 /* fix system system */
1402 .node-system-system .cbi-tabmenu {
1403 background-color: #d4d4d4;
1406 .node-system-system .cbi-tabmenu>li[class~="cbi-tab"] {
1407 background-color: #fff;
1410 /* fix system reboot */
1412 .node-system-reboot
>.main
>.main-right p
,
1413 .node-system-reboot>.main>.main-right h3 {
1417 /* fix Services Network Shares*/
1418 .node-services-samba.lang_enNetwork #cbi-samba-sambashare .table-container {
1421 .node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-title {
1422 margin-bottom: 1rem;
1426 .node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-field {
1430 .node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-description {
1434 /* fix System Software*/
1436 .node-system-packages #swfreespace {
1437 background-color: #468ea4 !important
;
1438 border: none
!important
;
1442 .node-system-packages #swfreespace>div {
1443 background-color: #f24c7c !important
;
1444 border: none
!important
;
1448 .node-system-packages>.main table tr td:nth-child(1) {
1449 width: auto
!important
;
1452 .node-system-packages>.main table tr td:nth-last-child(1) {
1453 white-space: normal
;
1458 .node-system-packages
>.main
.cbi-tabmenu
>li
>a
,
1460 padding: 0.5rem 0.8rem;
1463 .node-system-packages>.main .cbi-value>pre {
1464 background-color: #eee;
1469 .node-system-packages .cbi-section .cbi-section-node-tabbed {
1473 .node-system-packages form .cbi-section {
1477 .cbi-tabmenu+.cbi-section {
1481 .node-status-iptables
.cbi-tabmenu
,
1482 .node-system-flashops .cbi-tabmenu {
1486 .node-system-flashops form.inline+form.inline {
1490 .lang_zh-cnBackup .cbi-tabmenu {
1491 margin-bottom: 1rem;
1494 #cbi-firewall-redirect table
*,
1495 #cbi-network-switch_vlan table
*,
1496 #cbi-firewall-zone table
* {
1500 #cbi-firewall-redirect table input
[type
="text"],
1501 #cbi-network-switch_vlan table input
[type
="text"],
1502 #cbi-firewall-zone table input
[type
="text"] {
1506 #cbi-firewall-redirect table select
,
1507 #cbi-network-switch_vlan table select
,
1508 #cbi-firewall-zone table select
{
1512 #cbi-network-switch_vlan .th
,
1513 #cbi-network-switch_vlan .td
{
1517 /* fix Network Network*/
1519 .node-network-network .cbi-rowstyle-2 .ifacebox-body {
1520 background-color: #fff;
1523 .lang_zh-cnInterfaces .container .cbi-map .cbi-tabmenu+div {
1527 /* fix Network Wireless*/
1529 .node-network-wireless .cbi-section-node {
1530 margin-bottom: 1rem;
1533 /* applyreboot fix */
1539 #maincontainer>#maincontent
{
1542 border-radius: 10px;
1543 display: inline-block
;
1548 #applyreboot-container {
1549 margin-bottom: 1rem;
1552 #applyreboot-section {
1556 border-radius: 10px;
1559 #applyreboot-section>div
{
1561 line-height: 1.5rem;
1564 #applyreboot-container {
1565 margin: 90px 2rem 2rem 2rem;
1568 #applyreboot-section {
1586 padding-right: 1rem;
1589 border-bottom: 1px solid
#dadada;
1598 padding-left: .8rem;
1601 text-decoration: none
;
1602 display: inline-block
;
1614 background-color: #354057;
1618 text-decoration: none
;
1636 background-color: #636569;
1639 border-radius: 20px;
1643 .main>.main-left .navbar-container {
1646 width: calc
(100% + 10px);
1647 height: calc
(100% - 110px);
1652 .main>.main-left .nav {
1656 .main>.main-left .nav>li a {
1661 .main>.main-left .nav>li {
1662 padding: 0.5rem 1.7rem;
1666 .main>.main-left .nav>.slide {
1667 padding: 0 15px 0 0;
1672 .main>.main-left .nav>.slide>ul {
1675 width: calc
(100% - 10px);
1678 .main>.main-left .nav>.slide>.menu {
1680 padding: 0.5rem 1.7rem;
1681 text-decoration: none
;
1688 .main
>.main-left
.nav
>li
>a
.active
,
1689 .main
>.main-left
.nav
>.slide
>.menu:hover
,
1690 .main>.main-left .nav>.slide>.menu.active {
1691 background: #485267;
1693 border-top-right-radius: 50px;
1694 border-bottom-right-radius: 50px;
1697 .main>.main-left .nav>.slide:hover {
1701 .main>.main-left .nav>.slide>.slide-menu>li {
1702 padding: 0.6rem 2rem;
1706 .main>.main-left .nav>.slide>.slide-menu>.active {
1707 background-color: #F24C7C;
1708 border-top-right-radius: 50px;
1709 border-bottom-right-radius: 50px;
1712 .main>.main-left .nav>.slide>.slide-menu>li>a {
1713 text-decoration: none
;
1714 white-space: nowrap
;
1717 .main>.main-left .nav>.slide>.slide-menu>.active>a {
1721 .main>.main-left .nav>.slide>.slide-menu>li:hover {
1722 background: #F24C7C;
1723 border-top-right-radius: 50px;
1724 border-bottom-right-radius: 50px;
1727 .main>.main-left .nav>.slide>.slide-menu>.active:hover {
1728 background-color: #F24C7C;
1732 /* The scroll bar of the navigation bar is compatible with each browser. */
1736 .main>.main-left .navbar-container::-webkit-scrollbar {
1738 background: transparent
;
1741 .main>.main-left .navbar-container::-webkit-scrollbar-button {
1745 .main>.main-left .navbar-container::-webkit-scrollbar-thumb {
1746 background-color: #ffffff61;
1747 border-radius: 10px;
1750 .main>.main-left .navbar-container::-webkit-scrollbar-thumb {
1751 background-color: #839dd67a;
1752 border-radius: 10px;
1755 .main>.main-left .navbar-container:hover::-webkit-scrollbar-thumb {
1756 background-color: #839dd67a;
1761 .main>.main-left .navbar-container {
1762 scrollbar-track-color: transparent
;
1763 scrollbar-face-color: #839dd67a;
1764 scrollbar-arrow-color: transparent
;
1765 scrollbar-3dlight-color: transparent
;
1766 scrollbar-highlight-color: transparent
;
1767 scrollbar-shadow-color: transparent
;
1768 scrollbar-darkshadow-color: transparent
;
1769 scrollbar-base-color: transparent
;
1772 .main>.main-left .navbar-container:hover {
1773 scrollbar-face-color: #839dd67a;
1778 padding-right: 1rem;
1781 text-shadow: 0px 0px 2px #BBB;
1787 /* The style of the prompt message */
1791 border-radius: 10px;
1792 background-color: #FFF;
1796 background-color: #FA8072;
1801 background-color: #90EE90;
1810 padding: 7px 0 7px 36px;
1812 font-weight: normal
;
1814 background: url
(./no-pwd
.png
) no-repeat left
43%/ 28px;
1815 display: inline-block
;
1820 line-height: 1.5rem;
1827 background-color: transparent
;
1830 border: 1px solid
#fff;
1831 border-radius: 50px;
1834 /* All styles of the login interface */
1838 background: #fff url
(./loginBG.png) no-repeat center center
/ cover
;
1840 .node-main-login header {
1843 .node-main-login .main {
1846 .node-main-login>.main>.main-left {
1849 .node-main-login>.main>.main-right {
1854 .node-main-login>.main #maincontent {
1860 transform: translateX
(-50%) translateY
(-50%);
1864 .node-main-login>.main .container {
1868 display: inline-block
;
1870 .node-main-login>.main .logoImg a {
1875 text-decoration: none
;
1877 .node-main-login>.main .logoImg img:first-child {
1880 .node-main-login .warning {
1881 background-color: #3E4A62;
1884 .node-main-login>.main form h2 {
1889 font-weight: normal
;
1892 .node-main-login>.main form .cbi-map-descr {
1898 .node-main-login>.main form .cbi-section {
1901 background-color: transparent
;
1904 .node-main-login>.main form .cbi-value {
1907 .node-main-login>.main form .cbi-value-title {
1912 .node-main-login>.main form .cbi-value-field {
1913 margin-bottom: 16px;
1918 .node-main-login>.main form .cbi-value-field input {
1921 border: 1px solid
#556270;
1923 border-radius: 50px;
1927 .node-main-login form
.cbi-value-field
.iconpwd
,
1928 .node-main-login form
.cbi-value-field
.iconuser
,
1929 .node-main-login form .cbi-value-field .iconeye {
1935 transform: translateY
(-50%);
1937 .node-main-login form .cbi-value-field .iconpwd {
1938 background: transparent url
(./pwd.png) no-repeat center center
/ 100%;
1940 .node-main-login form .cbi-value-field .iconuser {
1941 background: transparent url
(./user.png) no-repeat center center
/ 100%;
1943 .node-main-login form .cbi-value-field .iconeye {
1946 background: transparent url
(./op-eye
.png
) no-repeat center center
/ 100%;
1948 .node-main-login form .cbi-value-field .cleye {
1949 background-image: url
(./cl-eye
.png
);
1951 .node-main-login form .cbi-value-field .opeye {
1952 background-image: url
(./op-eye
.png
);
1954 .node-main-login form .cbi-page-actions {
1959 .node-main-login form .cbi-page-actions input {
1963 display: inline-block
;
1968 .node-main-login form .cbi-page-actions .cbi-button-apply {
1969 background-color: #F24C7C;
1970 border-top-left-radius: 50px;
1971 border-bottom-left-radius: 50px;
1973 .node-main-login form .cbi-page-actions .cbi-button-reset {
1974 background-color: #8a4568;
1976 border-top-right-radius: 50px;
1977 border-bottom-right-radius: 50px;
1979 .node-main-login input.cbi-input-text {
1980 box-shadow: 0 0 0 1000px white inset
;
1982 /* Interface after login */
1984 background-color: #EBF1F6;
1992 .logged-in .main-right {
1993 padding: 0 1rem 3rem 0;
1997 .logged-in .main .logoImg {
2000 .logged-in .main .main-left .nav-container {
2001 background-color: #354057;
2002 border-radius: 20px;
2009 .logged-in .main .main-left .brand {
2011 padding: 44px 0 23px;
2017 text-decoration: none
;
2018 border-bottom: 2px solid
#ffffff42;
2019 /* Single line text omitted */
2020 white-space: nowrap
;
2022 text-overflow: ellipsis
;
2023 -webkit-text-overflow: ellipsis
;
2024 -o-text-overflow: ellipsis
;
2026 .logged-in .alert-message {
2029 background-color: #fff;
2031 .logged-in .alert-message a {
2035 background-color: #468EA4;
2038 @media screen and
(max-width: 1600px) {
2040 width: calc
(0% + 13rem);
2044 padding: 0.3rem 0.6rem;
2047 header
>.container
>.pull-right
>* {
2051 padding: 0.2rem 0.6rem;
2055 padding-right: 0.6rem;
2057 .cbi-input-textarea {
2061 @media screen and
(max-width: 1280px) {
2062 .node-main-login>.main .container {
2067 padding: 0.2rem 0.5rem;
2071 padding-bottom: 1rem;
2074 font-size: 0.7rem !important
;
2075 width: 100% !important
;
2077 .main
>.main-left
.nav
>li
,
2078 .main
>.main-left
.nav
>li a
,
2079 .main>.main-left .nav>.slide>.menu {
2082 .main>.main-left .nav>.slide>.slide-menu>li>a {
2086 @media screen and
(max-width: 992px) {
2106 background: #0000007d;
2111 .main>.main-left .nav>.slide>.slide-menu>li {
2120 .node-main-login>.main .container {
2125 display: inline-block
;
2126 vertical-align: middle
;
2130 padding-right: 1rem;
2132 #diag-rc-output>pre
{
2137 flex-direction: row
;
2143 align-self: flex-start
;
2144 text-overflow: ellipsis
;
2145 word-wrap: break-word
;
2146 display: inline-block
;
2149 .td input[type="text"] {
2153 .td
[data-dynlist
]>input
,
2154 .td input.cbi-input-password {
2155 width: calc
(100% - 1.5rem);
2157 .td
[data-type
="button"],
2158 .td[data-type="fvalue"] {
2162 .th
.cbi-value-field
,
2163 .td
.cbi-value-field
,
2164 .th
.cbi-section-table-cell
,
2165 .td.cbi-section-table-cell {
2168 .cbi-section-table-row {
2171 flex-direction: row
;
2172 justify-content: space-between
;
2174 .td
.cbi-value-field
,
2175 .cbi-section-table-cell {
2177 display: inline-block
;
2180 .td.cbi-section-actions {
2182 align-self: flex-end
;
2183 vertical-align: bottom
;
2186 .tr
.cbi-section-table-titles
,
2187 .tr.cbi-section-table-descr {
2190 .tr
[data-title
]::before
,
2191 .tr.cbi-section-table-titles.named::before {
2196 border-bottom: 1px solid rgba
(0, 0, 0, .26);
2202 .td[data-title]::before {
2209 /* All styles of the login interface */
2210 .node-main-login .showSide {
2211 display: none
!important
;
2214 padding-bottom: .8rem;
2216 .logged-in .main .main-left .nav-container {
2217 background-color: #354057;
2225 .logged-in .main-right {
2227 margin-top: calc
(45px + .8rem);
2232 .logged-in .alert-message {
2236 margin: .8rem 0 0 0;
2243 .cbi-section
>h3:first-child
,
2247 .network-status-table .ifacebox-body>span {
2250 .cbi-section .ifacebox-body .ifacebadge>span {
2253 .table
.tr
.cbi-rowstyle-1:nth-child
(n
),
2254 .table .tr:nth-child(n) {
2257 .node-network-firewall
.table
.tr
.cbi-rowstyle-1:nth-child
(n
),
2258 .node-network-firewall .table .tr:nth-child(n) {
2259 border-radius: 20px;
2266 border-bottom: none
;
2271 .cbi-section-node-tabbed {
2275 .cbi-button-action.important {
2276 margin-right: .3rem;
2279 border-bottom: 1px solid rgba
(0, 0, 0, .26);
2281 .node-status-processes
.table
.tr
.cbi-rowstyle-1:nth-child
(n
),
2282 .node-status-processes .table .tr:nth-child(n) {
2283 border-radius: 20px;
2286 @media screen and
(max-width: 768px) {
2290 .node-main-login>.main .logoImg a {
2292 margin: 12px 0 22px 0;
2295 .node-main-login>.main #maincontent {
2297 padding-bottom: 1rem;
2300 transform: translateY
(0) translateX
(-50%);
2312 .a lert-message>h4 {
2313 padding: 8px 0 8px 36px;
2319 .node-main-login .warning {
2320 background-color: #F5F5F6;
2327 .node-main-login>.main form h2 {
2329 margin: 20px 0 16px;
2332 .node-main-login>.main form .cbi-value-field input {
2335 background-size: 16px;
2338 .node-main-login>.main form .cbi-value-field {
2339 margin-bottom: 20px;
2341 .node-main-login form .cbi-page-actions input {
2345 .node-main-login form
.cbi-value-field
.iconpwd
,
2346 .node-main-login form
.cbi-value-field
.iconuser
,
2347 .node-main-login form .cbi-value-field .iconeye {
2352 .node-main-login form .cbi-value-field .iconeye {
2360 display: inline-block
;
2363 @media screen and
(max-width: 480px) {
2369 min-width: 0rem !important
;
2372 margin-bottom: 0.5rem;
2376 .cbi-value-description {
2379 .cbi-value>.cbi-value-field {
2380 display: inline-block
;
2384 padding: 0.6rem 0rem;
2388 padding: 0.2rem 0.3rem;
2391 .cbi-page-actions>div>input {
2403 padding-bottom: 1rem;
2405 .node-system-packages>.main .cbi-value.cbi-value-last>div {
2406 width: 100% !important
;
2408 .node-system-packages>.main .cbi-value .cbi-value-field input {
2411 .node-status-iptables>.main div>.cbi-map>form {
2412 position: static
!important
;
2416 font-weight: normal
;
2419 font-family: inherit
;
2421 background-color: #FFF;
2422 border-radius: 20px;
2423 -webkit-overflow-scrolling: touch
;
2425 .node-status-iptables>.main div>.cbi-map>form input[type="submit"] {
2426 width: 100% !important
;
2429 .node-status-iptables>.main div>.cbi-map>form input[type="submit"]+input[type="submit"] {
2432 .node-main-login>.main .container {
2439 .td.cbi-value-field {
2442 .td.cbi-value-field[data-type="dvalue"] {
2445 .td
.cbi-value-field
[data-type
="button"],
2446 .td.cbi-value-field[data-type="fvalue"] {
2450 .tr
[data-title
]::before
,
2451 .tr.cbi-section-table-titles.named::before {
2457 /* All styles of the login interface */
2458 .node-main-login>.main .cbi-value {
2465 @media screen and
(min-width: 992px) {
2466 .cbi-value-field .cbi-input-select {
2469 .cbi-value-field .cbi-dropdown {
2473 @media screen and
(min-width: 1280px) {
2474 .cbi-value-field .cbi-input-select {
2477 .cbi-value-field .cbi-dropdown {
2481 @media screen and
(min-width: 1600px) {
2482 .cbi-value-field .cbi-input-select {
2485 .cbi-value-field .cbi-dropdown {