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 generate by Icomoon<icomoon.io>
23 font-family: "icomoon";
26 src: url
("fonts/font.eot");
27 src: url
("fonts/font.eot") format
("embedded-opentype"), url
("fonts/font.ttf") format
("truetype"),
28 url
("fonts/font.woff") format
("woff"), url
("fonts/font.svg") format
("svg");
31 /* Table correlation 表格 */
42 display: table-header-group
;
46 display: table-row-group
;
50 display: table-footer-group
;
59 vertical-align: middle
;
74 .tr.placeholder > .td {
80 text-align: center
!important
;
102 flex: 1 1 30px !important
;
106 flex: 2 2 60px !important
;
110 flex: 3 3 90px !important
;
114 flex: 4 4 120px !important
;
118 flex: 5 5 150px !important
;
122 flex: 6 6 180px !important
;
126 flex: 7 7 210px !important
;
130 flex: 8 8 240px !important
;
134 flex: 9 9 270px !important
;
138 flex: 10 10 300px !important
;
154 font-family: inherit
;
156 line-height: 1.1 !important
;
161 -webkit-text-size-adjust: 100%;
162 -ms-text-size-adjust: 100%;
168 background-color: #eee;
174 font-family: "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica",
178 background-color: #EBF1F6;
192 padding: .36rem .8rem;
194 border: thin solid
#ccc;
195 background-color: #fff;
196 background-image: none
;
205 font-size-adjust: .35;
208 border: thin solid
#999;
215 text-decoration: underline
;
242 [disabled
="disabled"] {
243 pointer-events: none
;
251 background-color: #f794b0 !important
;
255 background-color: #f0e68c !important
;
259 background-color: #f24c7c !important
;
263 background-color: #468ea4 !important
;
275 list-style-type: none
;
280 padding-bottom: 10px;
281 border-bottom: thin solid
#eee;
287 padding-bottom: 10px;
294 padding-bottom: 10px;
300 padding-bottom: 10px;
306 padding-bottom: 10px;
311 #cbi-network > .cbi-section-node
,
312 #cbi-wireless > .cbi-section-node
,
313 #cbi-wireless > #wifi_assoclist_table
,
314 [data-page^
="admin-system-admin"]:not
(.login
) .cbi-map:not
(#cbi-dropbear
),
315 [data-page
="admin-system-opkg"] #maincontent
> .container
{
316 font-family: inherit
;
324 background-color: #fff;
331 .cbi-map-descr + fieldset {
336 .cbi-section > legend {
337 display: none
!important
;
341 .cbi-section > .cbi-section {
348 .cbi-section
> h3:first-child
,
355 margin-bottom: .5rem;
364 font-family: "icomoon" !important
;
367 font-variant: normal
;
369 text-transform: none
;
370 -webkit-font-smoothing: antialiased
;
375 box-sizing: border-box
;
387 color: rgba
(0, 0, 0, .87);
389 border-bottom: 2px solid rgba
(0, 0, 0, .26);
392 background-color: transparent
;
393 background-image: none
;
395 vertical-align: bottom
;
403 select:not
([multiple
="multiple"]):focus
,
404 input:not
(.cbi-button
):focus
,
406 .cbi-dynlist > .item:focus {
410 select
[multiple
="multiple"] {
426 text-decoration: none
;
430 /* Main interface 主界面 */
438 pointer-events: none
;
439 background-color: #354057;
443 font-family: monospace
;
445 font-size-adjust: .35;
453 .loading > span > .loading-img {
454 font-family: "icomoon" !important
;
456 display: inline-block
;
458 animation: anim-rotate
2s infinite linear
;
459 vertical-align: middle
;
462 @keyframes anim-rotate
{
464 -webkit-transform: rotate
(0);
465 -ms-transform: rotate
(0);
466 transform: rotate
(0);
470 -webkit-transform: rotate
(360deg);
471 -ms-transform: rotate
(360deg);
472 transform: rotate
(360deg);
476 .Processes #maincontent > .container {
480 /* Main interface left 左主界面 */
488 background-color: #7f8ba5;
493 .main-left .nav-container {
498 background-color: #354057;
503 .main-left .nav-container .navbar-container {
509 height: calc
(100% - 92px);
512 .main-left .nav-container .brand {
514 text-decoration: none
;
518 padding: 36px 0 24px;
519 border-bottom: 1px solid
#fff;
527 .main-left .nav > li {
532 .main-left .nav > li a {
537 .main-left .nav > .slide {
541 .main-left .nav > .slide > ul {
545 .main-left .nav > .slide > .menu {
549 text-decoration: none
;
552 border-radius: 0 25px 25px 0;
555 .main-left .nav > .slide > .menu.active {
559 .main-left
.nav
> li:hover
,
560 .main-left
.nav
> .slide
> .menu:hover
,
561 .main-left .nav > .slide > .slide-menu > li:hover {
565 .main-left .nav > .slide:hover {
569 .main-left .nav > .slide > .slide-menu > li {
573 border-radius: 0 25px 25px 0;
576 .main-left .nav > .slide > .slide-menu > .active {
577 background-color: #f24c7c !important
;
579 border-radius: 0 25px 25px 0;
582 .main-left .nav > .slide > .slide-menu > li > a {
584 text-decoration: none
;
587 .main-left .nav > .slide > .slide-menu > .active > a {
591 .main-left .nav > .slide > .slide-menu > .active:hover {
595 /* Main interface right 右主界面 */
601 .main-right
.container
.alert
,
602 .main-right .container .alert-message {
606 .main-right .container .alert-message {
610 background-color: #fff !important
;
613 .main-right .container .alert-message h4 {
615 background: url
(./no-pwd
.png
) no-repeat left
1px / 28px;
616 padding: 7px 0 0 32px;
619 .main-right .container .alert-message .btn {
622 background-color: #468ea4;
630 border-collapse: collapse
;
637 border: 1px solid
#ddd;
641 table
> tbody
> tr
> td
,
642 table
> tbody
> tr
> th
,
643 table
> tfoot
> tr
> td
,
644 table
> tfoot
> tr
> th
,
645 table
> thead
> tr
> td
,
646 table
> thead
> tr
> th
,
647 .table
> .tbody
> .tr
> .td
,
648 .table
> .tbody
> .tr
> .th
,
649 .table
> .tfoot
> .tr
> .td
,
650 .table
> .tfoot
> .tr
> .th
,
651 .table
> .thead
> .tr
> .td
,
652 .table
> .thead
> .tr
> .th
,
653 .table
> .tr
> .td
.cbi-value-field
,
654 .table > .tr > .th.cbi-section-table-cell {
658 .container > .cbi-section:first-of-type > .table[width="100%"] > .tr > .td {
662 .cbi-section-table-cell {
664 align-self: flex-end
;
672 .cbi-section-table-row::before
,
673 #cbi-wireless > #wifi_assoclist_table
> .tr:nth-child
(2) {
674 border-top: thin solid
#ddd;
677 tr:first-child
> td
.tr:first-child
> .td
,
679 #cbi-network .tr:first-child
> .td
,
680 .table
[width
="100%"] > .tr:first-child
> .td
,
681 [data-page
="admin-network-diagnostics"] .tr
> .td
,
682 .tr
.table-titles
> .th
,
683 .tr.cbi-section-table-titles > .th {
684 border-top: 0 !important
;
687 .cbi-section-table-row {
689 text-align: center
!important
;
693 .cbi-section-table-row:last-child {
697 .cbi-section-table-row
> .cbi-value-field
.cbi-input-select
,
698 .cbi-section-table-row
> .cbi-value-field
.cbi-input-text
,
699 .cbi-section-table-row
> .cbi-value-field
.cbi-input-password
,
700 .cbi-section-table-row > .cbi-value-field .cbi-dropdown {
704 .cbi-section-table-row
> .cbi-value-field
[data-dynlist
] > input
,
705 .cbi-section-table-row > .cbi-value-field input.cbi-input-password {
706 width: calc
(100% - 1.5rem);
709 .cbi-section-table-row .td {
710 text-align: center
!important
;
713 div
> table
> tbody
> tr:nth-of-type
(2n),
714 div
> .table
> .tr:nth-of-type
(2n) {
715 background-color: #f9f9f9;
718 /* fix multiple table */
724 .cbi-value-field table
,
725 .cbi-value-field .table {
729 td
> table
> tbody
> tr
> td
,
730 .td > .table > .tbody > .tr > .td {
734 .cbi-value-field
> table
> tbody
> tr
> td
,
735 .cbi-value-field > .table > .tbody > .tr > .td {
744 display: inline-block
;
745 width: auto
!important
;
748 -webkit-user-select: none
;
749 -moz-user-select: none
;
750 -ms-user-select: none
;
752 transition: all
.2s ease-in-out
;
754 vertical-align: middle
;
756 text-decoration: none
;
757 color: rgba
(0, 0, 0, .87);
760 background-color: #f0f0f0;
761 background-image: none
;
762 -webkit-appearance: none
;
763 -ms-touch-action: manipulation
;
764 touch-action: manipulation
;
767 .cbi-button:not(select) {
768 -webkit-appearance: none
!important
;
771 form
[method
="post"] + form
[method
="post"],
772 .cbi-button + .cbi-button {
785 .cbi-page-actions
.cbi-button-apply
+ .cbi-button-save:hover
,
786 .cbi-page-actions
.cbi-button-apply
+ .cbi-button-save:focus
,
787 .cbi-page-actions .cbi-button-apply + .cbi-button-save:active {
788 text-decoration: none
;
793 .cbi-button:disabled {
795 pointer-events: none
;
801 .modal div
[class
="btn"],
807 .cbi-button
[name
="zero"],
808 .cbi-button
[name
="restart"],
809 .cbi-button[onclick="hide_empty(this)"] {
815 .cbi-page-actions
.cbi-button-save
,
816 .cbi-page-actions
.cbi-button-apply
+ .cbi-button-save
,
819 .cbi-button-positive
,
821 .cbi-button
[value
="Enable"],
822 .cbi-button
[value
="Scan"],
823 .cbi-button
[value^
="Back"],
824 .cbi-button-neutral[onclick="handleConfig(event)"] {
827 border: thin solid
#2e6da4;
828 background-color: transparent
;
832 .cbi-page-actions
.cbi-button-apply
,
833 .cbi-section-actions
.cbi-button-edit
,
838 .cbi-button
[value
="Submit"],
839 .cbi-button
[value$
="Apply"],
840 .cbi-button[onclick="addKey(event)"] {
843 border: 1px solid
#468ea4;
844 background-color: #468ea4;
849 .cbi-section-remove
> .cbi-button
,
852 .cbi-button-negative
,
853 .cbi-button
[value
="Stop"],
854 .cbi-button
[value
="Kill"],
855 .cbi-button
[onclick
="reboot(this)"],
856 .cbi-button-neutral[value="Restart"] {
860 background-color: transparent
;
861 border: 1px solid
#f24b7c;
865 .btn
[value
="Dismiss"],
866 .cbi-button
[value
="Terminate"],
867 .cbi-button
[value
="Reset"],
868 .cbi-button
[value
="Disabled"],
869 .cbi-button
[onclick^
="iface_reconnect"],
870 .cbi-button
[onclick
="handleReset(event)"],
871 .cbi-button-neutral[value="Disable"] {
874 border: 1px solid
#9a4569;
875 background-color: transparent
;
880 .cbi-button-download
,
881 .cbi-button
[name
="backup"],
882 .cbi-button
[value
="Upload"],
883 .cbi-button[value="Save mtdblock"] {
886 border: thin solid
#468ea4;
887 background-color: transparent
;
890 .cbi-page-actions .cbi-button-link:first-child {
895 text-decoration: none
;
898 .cbi-value-field .cbi-button-add {
902 .cbi-value-field .cbi-button-neutral {
906 /* tabs & menu 选项卡 & 菜单栏 */
909 background-color: #fff;
917 display: inline-block
;
924 text-decoration: none
;
930 background-color: #cccccc82;
937 transform: translateX
(-50%);
940 .tabs > li:hover::after {
941 transition: width
.35s;
942 width: calc
(100% + 4px);
945 .tabs > li.active::after {
946 width: calc
(100% + 4px);
947 background-color: #468ea473;
951 display: inline-block
;
955 .cbi-tabmenu > li > a {
956 padding: .5rem .8rem;
957 text-decoration: none
;
962 border: thin solid
#d4d4d4;
966 .cbi-tabmenu > li:hover {
967 background-color: #f1f1f1;
968 border-radius: 10px 10px 0 0;
971 .cbi-tabmenu > li[class~="cbi-tab"] {
972 background-color: #fff;
973 border-radius: 10px 10px 0 0;
977 background-color: #d4d4d4;
978 border-radius: 10px 10px 0 0;
982 .cbi-section
.cbi-section-remove:nth-of-type
(2n),
983 .container > .cbi-section .cbi-section-node:nth-of-type(2n) {
984 background-color: #f9f9f9;
988 border-radius: 0 0 10px 10px;
991 .cbi-tabmenu + div.controls {
993 padding: .5em 0 1em 0;
995 border: 1px solid
#d4d4d4;
1001 .cbi-tabmenu + div.controls + .table {
1002 border-radius: 0 0 25px 25px;
1012 [data-tab-active
="true"] {
1016 transition: opacity
.25s ease-in
;
1019 .cbi-section
[id
] .cbi-section-remove:nth-of-type
(4n + 3),
1020 .cbi-section[id] .cbi-section-node:nth-of-type(4n + 4) {
1021 background-color: #f9f9f9;
1024 .cbi-section-node-tabbed {
1027 border: thin solid
#d4d4d4;
1031 .cbi-tabcontainer > .cbi-value:nth-of-type(2n) {
1032 background-color: #f9f9f9;
1036 .cbi-value-description {
1038 display: table-cell
;
1041 .cbi-input-invalid {
1046 .cbi-section-error {
1048 line-height: 1.42857143;
1051 border: 1px solid
#f24b7c;
1053 background-color: #fce6e6;
1056 .cbi-section-error ul {
1060 .cbi-section-error ul li {
1065 .cbi-value-helpicon > img {
1069 .cbi-value-helpicon:before {
1073 .cbi-value-description {
1075 padding: .5rem 0 0 0;
1080 display: table-cell
;
1084 padding-right: 2rem;
1086 word-wrap: break-word
;
1090 display: inline-block
;
1092 padding: .3rem 1rem;
1099 .td[data-title]::before {
1103 content: attr
(data-title
) ":\20";
1105 white-space: nowrap
;
1108 .tr.placeholder .td[data-title]::before {
1112 .tr
[data-title
]::before
,
1113 .tr.cbi-section-table-titles.named::before {
1115 display: table-cell
;
1119 content: attr
(data-title
) "\20";
1121 vertical-align: middle
;
1122 white-space: normal
;
1123 word-wrap: break-word
;
1127 background-color: #f9f9f9;
1131 background-color: #eee;
1134 .cbi-rowstyle-2
.cbi-button-up
,
1135 .cbi-rowstyle-2 .cbi-button-down {
1136 background-color: #fff !important
;
1139 .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
1140 width: auto
!important
;
1143 .td.cbi-section-actions {
1144 text-align: right
!important
;
1145 vertical-align: middle
;
1148 .td.cbi-section-actions > * {
1149 display: inline-flex
;
1152 .td
.cbi-section-actions
> * > *,
1153 .td.cbi-section-actions > * > form > * {
1157 .td.cbi-section-actions > * > form {
1158 display: inline-flex
;
1166 line-height: 1.42857143;
1172 flex-direction: column
;
1176 .cbi-dynlist > .item {
1179 margin: 0 2em 4px 0;
1182 pointer-events: none
;
1184 border-bottom: 2px solid rgba
(0, 0, 0, .26);
1187 .cbi-dynlist[name="sshkeys"] > .item {
1191 .cbi-dynlist > .item::after {
1195 display: inline-flex
;
1199 pointer-events: auto
;
1201 border: thin solid
#f24b7c;
1202 background-color: transparent
;
1205 .cbi-dynlist > .item > span {
1206 white-space: normal
;
1207 word-break: break-word
;
1213 display: inline-flex
;
1219 .cbi-dropdown > ul {
1224 margin: 0 !important
;
1229 .cbi-dropdown > ul.preview {
1233 .cbi-dropdown > .open {
1237 .cbi-dropdown
> .open
,
1238 .cbi-dropdown > .more {
1243 flex-direction: column
;
1246 justify-content: center
;
1249 background: #d4d4d4;
1254 .cbi-dropdown
> .more
,
1255 .cbi-dropdown > ul > li[placeholder] {
1259 text-shadow: 1px 1px 0 #fff;
1262 .cbi-dropdown > ul > li {
1265 align-items: center
;
1271 white-space: nowrap
;
1272 text-overflow: ellipsis
;
1275 .cbi-dropdown > ul > li .hide-open {
1279 .cbi-dropdown > ul > li .hide-close {
1283 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1284 border-left: thin solid
#ccc;
1287 .cbi-dropdown[empty] > ul {
1291 .cbi-dropdown > ul > li > form {
1295 pointer-events: none
;
1298 .cbi-dropdown > ul > li img {
1299 margin-right: .25em;
1300 vertical-align: middle
;
1303 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1308 .cbi-dropdown > ul > li input[type="text"] {
1312 .cbi-dropdown[open] {
1316 .cbi-dropdown[open] > ul.dropdown {
1323 max-height: 200px !important
;
1324 border: thin solid
#918e8c;
1325 background: #f6f6f6;
1328 .cbi-dropdown
> ul
> li
[display
],
1329 .cbi-dropdown
[open
] > ul
.preview
,
1330 .cbi-dropdown
[open
] > ul
.dropdown
> li
,
1331 .cbi-dropdown
[multiple
] > ul
> li
> label
,
1332 .cbi-dropdown
[multiple
][open
] > ul
.dropdown
> li
,
1333 .cbi-dropdown
[multiple
][more
] > .more
,
1334 .cbi-dropdown[multiple][empty] > .more {
1336 align-items: center
;
1340 .cbi-dropdown
[empty
] > ul
> li
,
1341 .cbi-dropdown
[optional
][open
] > ul
.dropdown
> li
[placeholder
],
1342 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1346 .cbi-dropdown[open] > ul.dropdown > li .hide-open {
1350 .cbi-dropdown[open] > ul.dropdown > li .hide-close {
1354 .cbi-dropdown[open] > ul.dropdown > li {
1355 border-bottom: thin solid
#ccc;
1358 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1359 background: #b0d0f0;
1362 .cbi-dropdown[open] > ul.dropdown > li.focus {
1363 background: linear-gradient
(90deg, #a3c2e8 0%, #84aad9 100%);
1366 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1371 .cbi-dropdown[open] > ul.dropdown > li[unselectable] {
1375 .cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
1379 .cbi-dropdown[disabled] {
1380 pointer-events: none
;
1384 .cbi-dropdown .zonebadge {
1388 .cbi-dropdown[open] .zonebadge {
1400 transition: opacity
.125s ease-in
;
1402 background: rgba
(0, 0, 0, .7);
1403 -webkit-overflow-scrolling: touch
;
1408 align-items: center
;
1417 border-radius: 20px !important
;
1422 line-height: normal
;
1429 font-size-adjust: .35;
1431 margin-bottom: .5em;
1433 white-space: pre-wrap
;
1436 background-color: #354057;
1448 list-style-type: square
;
1453 padding-left: .25rem;
1454 word-break: break-word
;
1459 font-weight: normal
;
1460 padding: .1rem .3rem;
1466 .modal .label.warning {
1467 background-color: #f0ad4e !important
;
1471 padding: .3rem .6rem;
1478 body
.modal-overlay-active
{
1483 body
.modal-overlay-active #modal_overlay
{
1491 padding-left: 32px !important
;
1501 background: url
(../resources/icons/loading.gif) no-repeat center
;
1502 background-size: 16px;
1512 text-align: left
!important
;
1517 text-align: right
!important
;
1522 text-align: center
!important
;
1526 align-self: flex-start
!important
;
1527 vertical-align: top
!important
;
1531 align-self: flex-end
!important
;
1532 vertical-align: bottom
!important
;
1544 .cbi-page-actions > form[method="post"] {
1545 display: inline-block
;
1549 .cbi-value input
[type
="password"],
1550 .cbi-value input[type="text"] {
1555 .cbi-value-field
.cbi-dropdown
,
1556 .cbi-value-field .cbi-input-select {
1560 .cbi-value-field .cbi-input-invalid {
1562 border-bottom-color: #f00;
1571 background: #a9cad4;
1573 border-radius: 20px;
1577 .cbi-progressbar > div {
1580 background: #468ea4;
1581 border-radius: 20px;
1584 .cbi-progressbar::after {
1585 font-family: monospace
;
1587 font-size-adjust: .38;
1588 line-height: normal
;
1594 content: attr
(title
);
1597 transform: translateY
(-50%);
1600 .th
[data-type
="button"],
1601 .td
[data-type
="button"],
1602 .th
[data-type
="fvalue"],
1603 .td[data-type="fvalue"] {
1609 display: inline-flex
;
1610 padding: .5rem .8rem;
1612 border-radius: 20px;
1618 background-color: #d4d4d4;
1619 border-radius: 20px;
1624 display: inline-block
;
1625 align-self: flex-start
;
1629 .ifacebadge > img + img {
1630 margin: 0 .2rem 0 0;
1633 .network-status-table {
1638 .network-status-table .ifacebox {
1641 border-radius: 20px;
1645 .network-status-table .ifacebox-body {
1647 flex-direction: column
;
1649 background: #f5f5f5;
1652 .network-status-table .ifacebox-body > span {
1657 .network-status-table .ifacebox-body > div {
1662 .network-status-table .ifacebox-body .ifacebadge {
1663 align-items: center
;
1666 margin: .5em .25em 0 .25em;
1668 background-color: #fff;
1669 border-radius: 20px;
1673 .cbi-input-textarea {
1674 font-family: monospace
;
1685 margin-bottom: 20px;
1690 border-radius: 20px;
1691 background-color: #fff;
1698 /* config changes */
1700 font-family: monospace
;
1703 .uci-change-list ins
,
1704 .uci-change-legend-label ins {
1707 text-decoration: none
;
1708 border: thin solid
#0f0;
1709 background-color: #cfc;
1712 .uci-change-list del
,
1713 .uci-change-legend-label del {
1717 text-decoration: none
;
1718 border: thin solid
#f00;
1719 background-color: #fcc;
1722 .uci-change-list var
,
1723 .uci-change-legend-label var {
1727 text-decoration: none
;
1728 border: thin solid
#ccc;
1729 background-color: #eee;
1732 .uci-change-list var ins
,
1733 .uci-change-list var del {
1740 .uci-change-legend {
1744 .uci-change-legend-label {
1749 .uci-change-legend-label
> ins
,
1750 .uci-change-legend-label
> del
,
1751 .uci-change-legend-label > var {
1759 .uci-change-legend-label var ins
,
1760 .uci-change-legend-label var del {
1765 .uci-change-list var
,
1766 .uci-change-list del
,
1767 .uci-change-list ins {
1775 border: 1px solid
#d4d4d4 !important
;
1776 border-radius: 20px;
1779 .lang_enTraffic #bwsvg
,
1780 .lang_enWireless #iwsvg {
1781 border: 1px solid
#d4d4d4 !important
;
1782 border-radius: 0 0 20px 20px;
1786 [data-page
="admin-status-realtime-bandwidth"] #bwsvg
{
1787 border-top: 0 !important
;
1792 display: inline-flex
;
1793 flex-direction: column
;
1795 background-color: #f9f9f9;
1796 border-radius: 10px;
1804 border-radius: 10px 10px 0 0;
1811 .ifacebox-head.active {
1812 background: #5bc0de;
1817 border-radius: 0 0 10px 10px;
1825 display: inline-block
;
1826 padding: .2rem .5rem;
1827 border-radius: 20px;
1830 .zonebadge .ifacebadge {
1831 margin: .1rem .2rem;
1832 padding: .2rem .3rem;
1833 border: thin solid
#6c6c6c;
1837 .zonebadge > input[type="text"] {
1840 padding: .16rem 1rem;
1844 .zonebadge > strong {
1845 display: inline-block
;
1849 .cbi-value-field
.cbi-input-checkbox
,
1850 .cbi-value-field .cbi-input-radio {
1854 .cbi-value-field > ul > li {
1858 .cbi-value-field > ul > li > label {
1862 .cbi-value-field > ul > li .ifacebadge {
1865 background-color: #eee;
1868 .cbi-section-table-row > .cbi-value-field .cbi-dropdown {
1872 .cbi-section-create {
1873 display: inline-flex
;
1874 align-items: center
;
1878 .cbi-section-create > * {
1882 .cbi-section-remove {
1887 td
.cbi-value-field var
,
1888 .td.cbi-value-field var {
1895 line-height: 1.42857143;
1896 white-space: normal
;
1902 display: inline-block
;
1904 padding: .2rem .3rem;
1908 padding: 1rem 1rem 0 1rem;
1909 border-top: thin solid
#ccc;
1912 .cbi-dropdown-container {
1916 .cbi-tooltip-container
,
1918 span
[data-tooltip
] .label
{
1919 cursor: help
!important
;
1927 transition: opacity
.25s ease-out
;
1929 pointer-events: none
;
1935 .cbi-tooltip-container:hover .cbi-tooltip {
1937 transition: opacity
.25s ease-in
;
1942 .zonebadge .cbi-tooltip {
1943 margin: -1.5rem 0 0 -.5rem;
1945 background: inherit
;
1950 background: repeating-linear-gradient
(
1952 rgba
(204, 204, 204, .5),
1953 rgba
(204, 204, 204, .5) 5px,
1954 rgba
(255, 255, 255, .5) 5px,
1955 rgba
(255, 255, 255, .5) 10px
1964 .zone-forwards > * {
1968 .zone-forwards > span {
1974 .zone-forwards
.zone-src
,
1975 .zone-forwards .zone-dest {
1977 flex-direction: column
;
1982 padding: .3rem .8rem;
1983 white-space: nowrap
;
1984 text-decoration: none
;
1985 color: #fff !important
;
1986 -moz-border-radius: 3px;
1987 border-radius: 20px;
1988 background-color: #bfbfbf;
1991 label
> input
[type
="checkbox"],
1992 label
> input
[type
="radio"] {
1997 vertical-align: bottom
;
2011 background-color: rgba
(0, 0, 0, .56);
2015 #diag-rc-output > pre
,
2016 #command-rc-output > pre
{
2018 font-size-adjust: .35;
2019 line-height: normal
;
2025 background-color: #101010;
2028 [data-page
="admin-network-diagnostics"] .table
{
2033 input
[name
="traceroute"],
2034 input
[name
="nslookup"] {
2038 /* fix Main Login 登录界面*/
2040 background: #fff url
(./loginBG.png) no-repeat center center
;
2053 .login > .main .main-left {
2057 .login > .main > .main-right {
2060 background-color: transparent
;
2067 text-decoration: none
;
2070 .login > .main .cbi-value-title {
2074 .login > .main #maincontent {
2076 display: inline-block
;
2077 background-color: transparent
;
2083 .login > .main .container {
2085 margin-top: 2rem !important
;
2089 .login .main-right .container .alert-message {
2092 background-color: #4a5368 !important
;
2093 border: 1px solid
#3e4a62;
2094 border-radius: 20px;
2097 .login .alert-message > h4 {
2098 padding: 7px 0 0 32px;
2100 background: url
(./no-pwd
.png
) no-repeat left
0 / 28px;
2101 display: inline-block
;
2104 .login .alert-message > p {
2109 .login .alert-message > * {
2113 .login .main-right .container .alert-message .btn {
2114 border: 1px solid
#fff;
2115 background-color: transparent
;
2117 border-radius: 20px;
2122 .login > .main form h2 {
2129 .login > .main form .cbi-map-descr {
2130 margin-bottom: 17px;
2134 .login > .main form > .cbi-page-actions {
2139 .login > .main form > .cbi-page-actions .cbi-button {
2141 width: 50% !important
;
2146 .login > .main form > .cbi-page-actions .cbi-button-apply {
2147 border-radius: 25px 0 0 25px;
2150 .login > .main form > .cbi-page-actions .cbi-button-reset {
2151 border-radius: 0 25px 25px 0;
2154 .login > .main .cbi-value {
2160 .login > .main .cbi-value > .cbi-value-field {
2165 .login > .main .cbi-value-last > .cbi-value-field > div {
2172 background: no-repeat center center
/ cover
;
2175 .login > .main .cbi-value-last > .cbi-value-field .eye {
2176 background-image: url
(./op-eye
.png
);
2179 .login > .main .cbi-value-last > .cbi-value-field .op-eye {
2180 background-image: url
(./cl-eye
.png
);
2183 .login > .main .cbi-input-text {
2186 background: #fff no-repeat
12px center
;
2187 border-radius: 20px;
2193 .login > .main .cbi-value .cbi-input-text {
2194 background-image: url
(./user.png);
2197 .login > .main .cbi-value-last .cbi-input-text {
2198 background-image: url
(./pwd.png);
2201 .login .cbi-section {
2204 background-color: transparent
;
2207 .login
.cbi-page-actions
.cbi-button-apply
,
2208 .login .cbi-button-apply {
2209 border: 1px solid
#f24b7c;
2210 background-color: #f24b7c;
2213 .login .cbi-button[value="Reset"] {
2215 border: 1px solid
#9a4569;
2216 background-color: #9a4569;
2219 @media screen and
(min-height: 585px) {
2231 background-color: #ebf1f6;
2239 border: 1px solid
#ddd;
2240 background-color: #fff;
2241 border-radius: 20px;
2242 width: calc
(85% - 20px - 2rem);
2249 .logged-in header .container {
2253 .logged-in header .container .btn-con {
2258 .logged-in header .container .btn-con #xhr_poll_status {
2259 display: inline-block
;
2262 .logged-in header .container .btn-con .logout {
2263 background-color: #354057;
2266 .logged-in header .container .btn-con .logout a {
2268 text-decoration: none
;
2271 .logged-in
.logoImg
,
2272 .login-info .logoImg {
2276 .logged-in .main-right {
2280 .logged-in .main-right .container {
2281 margin: 5rem 1rem 1rem;
2284 /* node main login */
2291 .login-info .main-left {
2295 .login-info .main-right {
2299 /* fix status overview */
2300 .node-status-overview > .main fieldset:nth-child(4) .td:nth-child(2) {
2301 white-space: normal
;
2304 /* fix status processes */
2305 .node-status-processes > .main .table .tr .td:nth-child(3) {
2306 white-space: normal
;
2309 .node-admin-status form {
2310 margin: 2rem 2rem 0 0;
2313 /* fix system reboot */
2314 [data-page
="admin-system-reboot"] p
{
2318 /* fix network diagnostics */
2319 .lang_enDiagnostics
.tr
.td
,
2320 .lang_enLoad
.tr
.td
,
2321 .lang_enTraffic
.node-admin-status
.tr
.td
,
2322 .lang_enWireless
.tr
.td
,
2323 .lang_enConnections .tr .td {
2327 [data-page
="admin-system-reboot"] p
> span
{
2333 .lang_enInterfaces .ifacebox-body {
2335 border-style: solid
;
2339 #cbi-samba .cbi-value-last
.cbi-value-field
{
2343 #cbi-samba .cbi-value-last
.cbi-value-title
{
2345 padding-bottom: .6rem;
2349 .controls > * > .btn:not([aria-label$="page"]) {
2350 flex-grow: initial
!important
;
2354 .controls > #pager > .btn[aria-label$="page"] {
2358 .controls > * > label {
2359 margin-bottom: .2rem;
2362 [data-page
="admin-system-opkg"] div
.btn
{
2365 padding: .3rem .6rem;
2368 [data-page^
="admin-system-admin"]:not
(.login
) .cbi-map:not
(#cbi-dropbear
),
2369 [data-page
="admin-system-opkg"] #maincontent
> .container
{
2374 [data-page
="admin-system-opkg"] #maincontent
> .container
{
2376 margin-bottom: 1rem;
2381 white-space: normal
!important
;
2382 word-break: break-word
;
2385 .cbi-tabmenu + .cbi-section {
2387 border: 1px solid
#d4d4d4;
2391 /* wireless overview */
2392 #cbi-wireless > #wifi_assoclist_table
> .tr
{
2395 #cbi-wireless > #wifi_assoclist_table
> .tr
.placeholder
> .td
{
2399 border-top: thin solid
#ddd !important
;
2402 #cbi-wireless > #wifi_assoclist_table
> .tr
.table-titles
{
2403 border-radius: 20px 20px 0 0;
2406 #cbi-wireless > #wifi_assoclist_table
> .tr
.placeholder
,
2407 #cbi-wireless > #wifi_assoclist_table
> .tr
.placeholder
.td
{
2408 border-radius: 0 0 20px 20px;
2412 #cbi-wireless > #wifi_assoclist_table
> .tr
.table-titles
.th:first-child
{
2413 border-top-left-radius: 20px;
2416 #cbi-wireless > #wifi_assoclist_table
> .tr
.table-titles
.th:last-child
{
2417 border-top-right-radius: 20px;
2420 #cbi-wireless > #wifi_assoclist_table
> .tr
.table-titles
> .th
{
2421 border-bottom: thin solid
#ddd;
2424 #wifi_assoclist_table > .tr
> .td
[data-title
="RX Rate / TX Rate"] {
2430 font-family: inherit
;
2431 font-weight: normal
;
2437 border: 1px solid
#d4d4d4;
2439 background-color: #fff;
2443 #cbi-firewall-redirect table
*,
2444 #cbi-network-switch_vlan table
*,
2445 #cbi-firewall-zone table
* {
2449 #cbi-firewall-redirect table input
[type
="text"],
2450 #cbi-network-switch_vlan table input
[type
="text"],
2451 #cbi-firewall-zone table input
[type
="text"] {
2455 #cbi-firewall-redirect table select
,
2456 #cbi-network-switch_vlan table select
,
2457 #cbi-firewall-zone table select
{
2461 #cbi-network-switch_vlan .th
,
2462 #cbi-network-switch_vlan .td
{
2466 #cbi-firewall-zone .table
,
2467 #cbi-network-switch_vlan .table
{
2471 #cbi-firewall-zone .td
.cbi-section-actions
{
2475 /* applyreboot fix */
2476 #applyreboot-container {
2480 #applyreboot-section {
2485 /* openvpn bug fix */
2487 line-height: initial
!important
;
2490 /* custom commands */
2492 width: 24% !important
;
2493 padding: .5rem 1rem;
2494 border-bottom: thin solid
#ccc;
2499 line-height: normal
!important
;
2501 margin: 6px 0 !important
;
2502 white-space: nowrap
;
2503 text-overflow: ellipsis
;
2507 left: auto
!important
;
2519 text-overflow: ellipsis
;
2522 .commandbox p:first-of-type {
2526 .commandbox p:nth-of-type(2) {
2530 [data-page^
="admin-system-commands"] .panel-title
,
2531 [data-page^
="command-cfg"] .mobile-hide
,
2532 [data-page^
="command-cfg"] header
.container
> #logo
{
2540 @media screen and
(max-width: 1600px) {
2541 header
.container
> #logo
{
2542 margin: 0 2.5rem 0 .5rem;
2545 .cbi-dynlist > .item {
2552 padding: .3rem .6rem;
2556 padding: .2rem .6rem;
2561 padding-right: .6rem;
2569 .cbi-input-textarea {
2573 .node-admin-status > .main fieldset li > a {
2574 padding: .3rem .6rem;
2577 #cbi-firewall-zone > .table
{
2582 @media screen and
(max-width: 1400px) {
2583 .logged-in .main-right {
2584 width: calc
(100% - 230px);
2587 .cbi-dynlist > .item {
2591 .cbi-tabmenu
> li
> a
,
2593 padding: .2rem .5rem;
2598 padding-bottom: 1rem;
2602 font-size: .7rem !important
;
2603 width: 100% !important
;
2606 .table .cbi-input-text {
2610 .main
.main-left
> .nav
> li
,
2611 .main
.main-left
> .nav
> li a
,
2612 .main .main-left > .nav > .slide > .menu {
2616 .main .main-left > .nav > .slide > .slide-menu > li > a {
2624 [data-page
="admin-network-firewall-forwards"] .table:not
(.cbi-section-table
) {
2628 [data-page
="admin-network-firewall-forwards"] .table:not
(.cbi-section-table
),
2629 [data-page
="admin-network-firewall-rules"] .table:not
(.cbi-section-table
),
2630 [data-page
="admin-network-hosts"] .table
{
2631 overflow-y: visible
;
2635 width: 32% !important
;
2639 @media screen and
(max-width: 992px) {
2640 .login > .main #maincontent {
2649 .login > .main .container {
2660 border-bottom: 1px solid
#ddd;
2664 .logged-in header .container .btn-con {
2669 .logged-in .main-left {
2678 background-color: rgba
(0, 0, 0, .3);
2679 height: calc
(100% - 3rem);
2682 .main-left .nav-container {
2691 .main-left .nav-container .navbar-container {
2695 .logged-in .main-right {
2700 background: #354057;
2703 [data-page^
="command-cfg"] header
.container
> .brand
{
2705 margin-top: -1.75rem;
2708 .cbi-dynlist > .item {
2713 display: inline-block
;
2720 display: inline-block
;
2723 background: url
(./menu-logo
.png
) no-repeat center center
/ 100%;
2724 vertical-align: middle
;
2727 .login > .main .cbi-value-title {
2733 padding-right: 1rem;
2736 #diag-rc-output > pre
,
2737 #command-rc-output > pre
{
2751 flex-direction: row
;
2755 .Overview .table[width="100%"] > .tr {
2760 border-bottom: thin solid
#ddd;
2763 .tr
.placeholder
> .td
,
2764 #cbi-firewall .tr
> .td
,
2765 #iptables .tr:nth-child
(2) > .td
,
2766 #cbi-network .tr:nth-child
(2) > .td
,
2767 .cbi-section #wifi_assoclist_table .tr > .td {
2773 display: inline-block
;
2774 align-self: flex-start
;
2776 text-overflow: ellipsis
;
2777 word-wrap: break-word
;
2781 .td input[type="text"] {
2786 .td
[data-dynlist
] > input
,
2787 .td input.cbi-input-password {
2788 width: calc
(100% - 1.5rem);
2791 .td
[data-type
="button"],
2792 .td[data-type="fvalue"] {
2797 .th
.cbi-value-field
,
2798 .td
.cbi-value-field
,
2799 .th
.cbi-section-table-cell
,
2800 .td.cbi-section-table-cell {
2805 .cbi-section-table-row {
2807 flex-direction: row
;
2809 justify-content: space-between
;
2812 .td
.cbi-value-field
,
2813 .cbi-section-table-cell {
2814 display: inline-block
;
2820 .td.cbi-section-actions {
2821 vertical-align: bottom
;
2825 .tr
.cbi-section-table-titles
,
2826 .tr.cbi-section-table-descr {
2830 .tr
[data-title
]::before
,
2831 .tr.cbi-section-table-titles.named::before {
2835 border-bottom: thin solid rgba
(0, 0, 0, .26);
2836 background: #90c0e0;
2840 [data-page^
="admin-status-realtime"] .td
[id
] {
2844 .td[data-title]::before {
2848 .cbi-button + .cbi-button {
2852 .td
.cbi-section-actions
> * > *,
2853 .td.cbi-section-actions > * > form > * {
2858 font-family: inherit
;
2859 font-weight: normal
;
2861 line-height: normal
;
2862 position: static
!important
;
2868 background-color: #fff;
2871 .Firewall form input {
2872 width: 100% !important
;
2878 .Firewall .center::before {
2879 text-align: left
!important
;
2883 width: 100% !important
;
2886 /* The scroll bar of the navigation bar is compatible with each browser. */
2888 .main-left .navbar-container::-webkit-scrollbar {
2890 background: transparent
;
2893 .main-left .navbar-container::-webkit-scrollbar-button {
2897 .main-left .navbar-container::-webkit-scrollbar-thumb {
2898 background-color: #ffffff61;
2899 border-radius: 10px;
2902 .main-left .navbar-container::-webkit-scrollbar-thumb {
2903 background-color: #839dd67a;
2904 border-radius: 10px;
2907 .main-left .navbar-container:hover::-webkit-scrollbar-thumb {
2908 background-color: #839dd67a;
2912 .main-left .navbar-container {
2913 scrollbar-track-color: transparent
;
2914 scrollbar-face-color: #839dd67a;
2915 scrollbar-arrow-color: transparent
;
2916 scrollbar-3dlight-color: transparent
;
2917 scrollbar-highlight-color: transparent
;
2918 scrollbar-shadow-color: transparent
;
2919 scrollbar-darkshadow-color: transparent
;
2920 scrollbar-base-color: transparent
;
2923 .main-left .navbar-container:hover {
2924 scrollbar-face-color: #839dd67a;
2928 @media screen and
(max-width: 600px) {
2933 .cbi-progressbar::after {
2948 .main-left .nav-container {
2952 .main .main-left > .nav > .slide > .menu {
2956 .main .main-left > .nav > .slide > .slide-menu > li > a {
2963 min-width: 0 !important
;
2965 margin-bottom: .5rem;
2970 .cbi-value-description {
2974 .cbi-value > .cbi-value-field {
2975 display: inline-block
;
2983 .cbi-tabmenu
> li
> a
,
2986 padding: .2rem .3rem;
2989 .cbi-page-actions > div > input {
2993 .cbi-page-actions > .cbi-button {
2997 .login > .main .cbi-value {
3001 .login > .main form > div:nth-last-child(1) {
3005 .login > .main .cbi-value-title {
3007 width: 100% !important
;
3010 .login > .main fieldset {
3015 .commandbox p:first-of-type {
3019 #diag-rc-output > pre
,
3020 #command-rc-output > pre
{
3043 padding-bottom: 1rem;
3046 .node-system-packages > .main .cbi-value.cbi-value-last > div {
3047 width: 100% !important
;
3050 .node-system-packages > .main .cbi-value .cbi-value-field input {
3059 .td.cbi-value-field {
3063 .td
.cbi-value-field
[data-type
="button"],
3064 .td.cbi-value-field[data-type="fvalue"] {
3069 .tr
[data-title
]::before
,
3070 .tr.cbi-section-table-titles.named::before {
3084 .hide-xs:not([data-title="MAC-Address"]) {
3093 @media screen and
(min-width: 1152px) {
3094 .cbi-value input
[type
="password"],
3095 .cbi-value input[type="text"] {
3099 .cbi-value-field .cbi-input-select {
3103 .cbi-value-field .cbi-dropdown {
3107 .cbi-section-node .tr {
3112 @media screen and
(min-width: 1366px) {
3113 .cbi-value input
[type
="password"],
3114 .cbi-value input[type="text"] {
3118 .cbi-value-field .cbi-input-select {
3122 .cbi-value-field .cbi-dropdown {
3127 @media screen and
(min-width: 1600px) {
3128 .cbi-value input
[type
="password"],
3129 .cbi-value input[type="text"] {
3133 .cbi-value-field .cbi-input-select {
3137 .cbi-value-field .cbi-dropdown {