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 .table .tr:first-child .td:first-child,
407 .table .tr:first-child::before,
408 .table .tr:first-child .th:first-child {
409 border-top-left-radius: 10px;
412 .table .tr:first-child .td:last-child,
413 .table .tr:first-child .th:last-child {
414 border-top-right-radius: 10px;
417 .table .tr:last-child .td:first-child,
418 .table .tr:last-child::before {
419 border-bottom-left-radius: 10px;
422 .table .tr:last-child .td:last-child {
423 border-bottom-right-radius: 10px;
426 .table .tr.placeholder:last-child {
427 background-color: transparent;
430 /* fix progress bar */
432 background-color: #9bc1cc;
438 .cbi-progressbar div {
439 background-color: #468ea4;
444 .cbi-progressbar::after {
445 content: attr(title);
456 /* fix multiple table */
462 .cbi-value-field table,
463 .cbi-value-field .table {
467 td>table>tbody>tr>td,
468 .td>.table>.tbody>.tr>.td {
472 .cbi-value-field>table>tbody>tr>td,
473 .cbi-value-field>.table>.tbody>.tr>.td {
480 margin: 0 .8rem .5rem 0;
481 -webkit-appearance: none;
482 color: rgba(0, 0, 0, 0.87);
483 background-color: #F0F0F0;
484 transition: all 0.2s ease-in-out;
485 display: inline-block;
486 padding: .5rem .8rem;
490 -ms-touch-action: manipulation;
491 touch-action: manipulation;
492 background-image: none;
494 vertical-align: middle;
496 -webkit-user-select: none;
497 -moz-user-select: none;
498 -ms-user-select: none;
502 display: inline-block;
503 text-decoration: none;
507 .cbi-button:disabled {
509 pointer-events: none;
514 .cbi-page-actions .cbi-button-apply,
515 .cbi-section-actions .cbi-button-edit,
516 .cbi-button-edit.important,
517 .cbi-button-apply.important,
518 .cbi-button-reload.important,
520 .cbi-page-actions .cbi-button-save {
522 background-color: #337ab7;
526 .cbi-button-add.important,
527 .cbi-button-save.important,
528 .cbi-button-positive.important,
529 .cbi-button-action.important,
530 .cbi-section-actions .cbi-button-edit {
532 background-color: transparent;
533 border: 1px solid #337ab7;
536 .cbi-button-remove.important,
537 .cbi-button-reset.important,
538 .cbi-button-negative.important {
540 background-color: #d9534f;
548 .cbi-button-neutral {
550 background-color: transparent;
551 border: 1px solid #468ea4;
558 background-color: transparent;
559 border: 1px solid #468ea4;
562 .cbi-page-actions .cbi-button-apply+.cbi-button-save,
565 .cbi-button-positive {
567 background-color: transparent;
568 border: 1px solid #354057;
571 .cbi-section-remove>.cbi-button,
574 .cbi-button-negative {
576 background-color: transparent;
577 border: 1px solid #F24C7C;
580 .cbi-page-actions .cbi-button-link:first-child {
585 text-decoration: none;
590 .container>.tabs>li[class~="active"],
591 .container>.tabs>li:hover,
592 .container>.cbi-tabmenu,
593 .container>.cbi-tabmenu>li[class~="cbi-tab"],
594 .container>.cbi-tabmenu>li:hover {
598 .container .cbi-map .cbi-tabmenu,
599 .container .cbi-map .cbi-tabmenu>li[class~="cbi-tab"],
600 .container .cbi-map .cbi-tabmenu>li:hover {
601 border-top-left-radius: 10px;
602 border-top-right-radius: 10px;
605 .container .cbi-map .cbi-tabmenu,
607 .container>.cbi-tabmenu {
611 .container .cbi-map .cbi-tabmenu+div {
613 border-bottom-left-radius: 10px;
614 border-bottom-right-radius: 10px;
618 background-color: #FFFFFF;
625 display: inline-block;
626 padding: 0.6rem 0rem;
631 text-decoration: none;
633 padding: 0.5rem 0.8rem;
636 .tabs>li[class~="active"],
639 background-color: #337ab7;
642 .tabs>li[class~="active"]>a,
648 border-top: 1px solid #D4D4D4;
649 border-left: 1px solid #D4D4D4;
650 border-right: 1px solid #D4D4D4;
653 .cbi-tabmenu>li:hover {
654 background-color: #F1F1F1;
657 .cbi-tabmenu>li[class~="cbi-tab"] {
658 background-color: #fff;
662 background-color: #D4D4D4;
671 [data-tab-active="true"] {
675 transition: opacity .25s ease-in;
678 .cbi-section-remove:nth-of-type(2n) {
679 background-color: #f9f9f9;
682 .cbi-section-node-tabbed {
685 border-bottom: 1px solid #D4D4D4;
686 border-left: 1px solid #D4D4D4;
687 border-right: 1px solid #D4D4D4;
690 .cbi-tabcontainer>.cbi-value:nth-of-type(2n) {
691 background-color: #f9f9f9;
695 .cbi-value-description {
700 .cbi-value-helpicon>img {
704 .cbi-value-helpicon:before {
708 .cbi-value-description {
711 padding: 0.5rem 0 0 0;
715 word-wrap: break-word;
716 padding: 0.6rem 2rem .6rem 0;
725 display: inline-block;
729 .cbi-section-table-descr>.cbi-section-table-cell,
730 .cbi-section-table-titles>.cbi-section-table-cell {
734 .td[data-title]::before {
735 content: attr(data-title) ":\20";
743 .tr.placeholder .td[data-title]::before {
747 .tr[data-title]::before,
748 .tr.cbi-section-table-titles.named::before {
749 content: attr(data-title) "\20";
757 word-wrap: break-word;
758 vertical-align: middle;
761 .table .tr.cbi-rowstyle-2,
762 .table .tr:nth-child(n) {
763 background-color: #eee;
766 .table .tr.cbi-rowstyle-1,
767 .table .tr:nth-child(2n) {
768 background-color: #f9f9f9;
771 .table .tr.table-titles,
772 .table .tr.cbi-section-table-titles {
773 background-color: #ddd;
776 .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
777 width: auto !important;
780 .td.cbi-section-actions {
782 vertical-align: middle;
785 .td.cbi-section-actions>* {
789 .td.cbi-section-actions>*>*,
790 .td.cbi-section-actions>*>form>* {
795 .td.cbi-section-actions>*>form {
796 display: inline-flex;
810 display: inline-flex;
817 .cbi-dropdown:focus {
818 outline: 2px solid #4b6e9b;
822 margin: 0 !important;
831 .cbi-dropdown>ul.preview {
835 .cbi-dropdown>.open {
836 border: 2px outset #eee;
842 .cbi-dropdown>.more {
846 flex-direction: column;
847 justify-content: center;
854 .cbi-dropdown>ul>li[placeholder] {
857 text-shadow: 1px 1px 0px #fff;
861 .cbi-dropdown>ul>li {
866 text-overflow: ellipsis;
874 .cbi-dropdown>ul>li .hide-open {
878 .cbi-dropdown>ul>li .hide-close {
882 .cbi-dropdown>ul>li[display]:not([display="0"]) {
883 border-left: 1px solid #ccc;
886 .cbi-dropdown[empty]>ul {
890 .cbi-dropdown>ul>li>form {
894 pointer-events: none;
897 .cbi-dropdown>ul>li img {
898 vertical-align: middle;
902 .cbi-dropdown>ul>li>form>input[type="checkbox"] {
907 .cbi-dropdown>ul>li input[type="text"] {
911 .cbi-dropdown[open] {
915 .cbi-dropdown[open]>ul.dropdown {
918 border: 1px solid #918e8c;
926 .cbi-dropdown>ul>li[display],
927 .cbi-dropdown[open]>ul.preview,
928 .cbi-dropdown[open]>ul.dropdown>li,
929 .cbi-dropdown[multiple]>ul>li>label,
930 .cbi-dropdown[multiple][open]>ul.dropdown>li,
931 .cbi-dropdown[multiple][more]>.more,
932 .cbi-dropdown[multiple][empty]>.more {
938 .cbi-dropdown[empty]>ul>li,
939 .cbi-dropdown[optional][open]>ul.dropdown>li[placeholder],
940 .cbi-dropdown[multiple][open]>ul.dropdown>li>form {
944 .cbi-dropdown[open]>ul.dropdown>li .hide-open {
948 .cbi-dropdown[open]>ul.dropdown>li .hide-close {
952 .cbi-dropdown[open]>ul.dropdown>li {
953 border-bottom: 1px solid #ccc;
956 .cbi-dropdown[open]>ul.dropdown>li[selected] {
960 .cbi-dropdown[open]>ul.dropdown>li.focus {
961 background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
964 .cbi-dropdown[open]>ul.dropdown>li:last-child {
969 .cbi-dropdown[disabled] {
970 pointer-events: none;
974 .cbi-dropdown .zonebadge {
977 background-color: #468ea4 !important;
980 .cbi-dropdown[open] .zonebadge {
992 text-align: left !important;
997 text-align: right !important;
1002 text-align: center !important;
1006 align-self: flex-start !important;
1007 vertical-align: top !important;
1011 align-self: flex-end !important;
1012 vertical-align: bottom !important;
1020 border-top: 1px solid #eee;
1027 .cbi-value-field .cbi-dropdown {
1031 .cbi-value-field .cbi-input-select {
1035 .th[data-type="button"],
1036 .td[data-type="button"],
1037 .th[data-type="fvalue"],
1038 .td[data-type="fvalue"] {
1044 display: inline-flex;
1045 border: 1px solid #CCCCCC;
1046 padding: 0.5rem 1rem;
1048 border-radius: 20px;
1053 background-color: #F0F0F0;
1059 display: inline-block;
1061 align-self: flex-start;
1064 .ifacebadge>img+img {
1065 margin: 0 .2rem 0 0;
1068 .network-status-table {
1073 .network-status-table .ifacebox {
1078 .network-status-table .ifacebox-body {
1080 flex-direction: column;
1084 .network-status-table .ifacebox-body>span {
1088 .network-status-table .ifacebox-body>div {
1093 .network-status-table .ifacebox-body .ifacebadge {
1095 margin: .5em .25em 0 .25em;
1098 background-color: #fff;
1099 align-items: center;
1104 .cbi-input-textarea {
1109 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
1112 border-radius: 20px;
1121 margin-bottom: 20px;
1122 border-radius: 20px;
1123 background-color: #FFF;
1131 font-family: monospace;
1134 .uci-change-list ins,
1135 .uci-change-legend-label ins {
1136 text-decoration: none;
1137 border: 1px solid #00FF00;
1138 background-color: #CCFFCC;
1143 .uci-change-list del,
1144 .uci-change-legend-label del {
1145 text-decoration: none;
1146 border: 1px solid #FF0000;
1147 background-color: #FFCCCC;
1153 .uci-change-list var,
1154 .uci-change-legend-label var {
1155 text-decoration: none;
1156 border: 1px solid #CCCCCC;
1157 background-color: #EEEEEE;
1163 .uci-change-list var ins,
1164 .uci-change-list var del {
1171 .uci-change-legend {
1175 .uci-change-legend-label {
1180 .uci-change-legend-label>ins,
1181 .uci-change-legend-label>del,
1182 .uci-change-legend-label>var {
1190 .uci-change-legend-label var ins,
1191 .uci-change-legend-label var del {
1196 .uci-change-list var,
1197 .uci-change-list del,
1198 .uci-change-list ins {
1207 border: 1px solid #D4D4D4 !important;
1209 border-radius: 20px;
1218 background-color: #f9f9f9;
1219 display: inline-flex;
1220 flex-direction: column;
1223 border-radius: 20px;
1232 .ifacebox-head.active {
1241 margin-left: 0.5rem;
1245 padding: 0.2rem 0.5rem;
1246 display: inline-block;
1247 border-radius: 20px;
1250 .zonebadge .ifacebadge {
1251 padding: .2rem .3rem;
1252 margin: 0.1rem 0.2rem;
1256 .zonebadge>input[type="text"] {
1257 padding: 0.16rem 1rem;
1265 display: inline-block;
1268 .cbi-value-field .cbi-input-checkbox,
1269 .cbi-value-field .cbi-input-radio {
1274 .td .cbi-input-checkbox,
1275 .td .cbi-input-radio {
1279 .cbi-value-field>input+.cbi-value-description {
1283 .cbi-value-field>ul>li {
1287 .cbi-value-field>ul>li>label {
1291 .cbi-value-field>ul>li .ifacebadge {
1292 background-color: #eee;
1293 margin-left: 0.4rem;
1294 margin-top: -0.5rem;
1297 .cbi-section-table-row>.cbi-value-field .cbi-dropdown {
1301 .cbi-section-create {
1303 display: inline-flex;
1304 align-items: center;
1307 .cbi-section-create>* {
1311 .cbi-section-remove {
1316 td.cbi-value-field var,
1317 .td.cbi-value-field var {
1324 white-space: normal;
1325 line-height: 1.42857143;
1330 display: inline-block;
1332 padding: 0.2rem 0.3rem;
1337 padding: 1rem 1rem 0 1rem;
1338 border-top: 1px solid #CCC;
1341 .cbi-dropdown-container {
1345 .cbi-tooltip-container {
1354 transition: opacity .25s ease-out;
1355 pointer-events: none;
1358 .cbi-tooltip-container:hover .cbi-tooltip {
1361 transition: opacity .25s ease-in;
1362 border-radius: 20px;
1365 .zonebadge .cbi-tooltip {
1367 background: inherit;
1368 margin: -1.5rem 0 0 -.5rem;
1372 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);
1385 .zone-forwards>span {
1391 .zone-forwards .zone-src,
1392 .zone-forwards .zone-dest {
1394 flex-direction: column;
1397 #diag-rc-output>pre {
1398 background-color: #f5f5f5;
1402 line-height: 1.5rem;
1403 -moz-border-radius: 3px;
1404 white-space: pre-wrap;
1405 word-wrap: break-word;
1411 input[name="traceroute"],
1412 input[name="nslookup"] {
1416 header>.container>.pull-right>* {
1422 #xhr_poll_status>.label.success {
1423 background-color: #F24C7C;
1427 padding: 0.3rem 0.8rem;
1430 color: #ffffff !important;
1431 white-space: nowrap;
1432 background-color: #bfbfbf;
1433 -webkit-border-radius: 3px;
1434 -moz-border-radius: 3px;
1435 border-radius: 50px;
1437 text-decoration: none;
1441 background-color: #468EA4;
1445 background: url(./menu-logo.png) no-repeat center center / 100%;
1455 background-color: rgba(0, 0, 0, 0.56);
1461 /* fix status processes */
1463 .node-status-processes>.main .table .tr .td:nth-child(3) {
1464 white-space: normal;
1467 .node-status-iptables>.main div>.cbi-map>form {
1468 margin: 2rem 2rem 0 0;
1471 .node-status-iptables>.main div>.cbi-map>form input {
1473 border-radius: 20px;
1476 .node-status-processes .cbi-section {
1480 /* fix status realtime traffic and wireless */
1482 .node-status-realtime.lang_enTraffic .cbi-tabmenu,
1483 .node-status-realtime.lang_enWireless .cbi-tabmenu {
1484 background-color: #d4d4d4;
1487 .node-status-realtime.lang_enTraffic .cbi-tabmenu>li[class~="cbi-tab"],
1488 .node-status-realtime.lang_enTraffic .cbi-tabmenu>li:hover,
1489 .node-status-realtime.lang_enWireless .cbi-tabmenu>li[class~="cbi-tab"],
1490 .node-status-realtime.lang_enWireless .cbi-tabmenu>li:hover {
1491 background-color: #F1F1F1;
1494 .node-status-realtime.lang_enTraffic #bwsvg,
1495 .node-status-realtime.lang_enWireless #iwsvg,
1496 .node-system-packages .cbi-map>.cbi-section,
1497 .node-system-packages form .cbi-section {
1498 border-top-right-radius: 0;
1499 border-top-left-radius: 0;
1502 /* fix system system */
1504 .node-system-system .cbi-tabmenu {
1505 background-color: #d4d4d4;
1508 .node-system-system .cbi-tabmenu>li[class~="cbi-tab"] {
1509 background-color: #fff;
1512 /* fix system reboot */
1514 .node-system-reboot>.main>.main-right p,
1515 .node-system-reboot>.main>.main-right h3 {
1519 /* fix Services Network Shares*/
1520 .node-services-samba.lang_enNetwork #cbi-samba-sambashare .table-container {
1524 .node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-title {
1525 margin-bottom: 1rem;
1529 .node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-field {
1533 .node-services-samba>.main .cbi-tabcontainer:nth-child(3) .cbi-value-description {
1537 /* fix System Software*/
1539 .node-system-packages #swfreespace {
1540 background-color: #468ea4 !important;
1541 border: none !important;
1545 .node-system-packages #swfreespace>div {
1546 background-color: #f24c7c !important;
1547 border: none !important;
1551 .node-system-packages>.main table tr td:nth-child(1) {
1552 width: auto !important;
1555 .node-system-packages>.main table tr td:nth-last-child(1) {
1556 white-space: normal;
1561 .node-system-packages>.main .cbi-tabmenu>li>a,
1563 padding: 0.5rem 0.8rem;
1566 .node-system-packages>.main .cbi-value>pre {
1567 background-color: #eee;
1572 .node-system-packages .cbi-section .cbi-section-node-tabbed {
1576 .node-system-packages form .cbi-section {
1580 .cbi-tabmenu+.cbi-section {
1584 .node-status-iptables .cbi-tabmenu,
1585 .node-system-flashops .cbi-tabmenu {
1589 .node-system-flashops form.inline+form.inline {
1593 .lang_zh-cnBackup .cbi-tabmenu {
1594 margin-bottom: 1rem;
1597 #cbi-firewall-redirect table *,
1598 #cbi-network-switch_vlan table *,
1599 #cbi-firewall-zone table * {
1603 #cbi-firewall-redirect table input[type="text"],
1604 #cbi-network-switch_vlan table input[type="text"],
1605 #cbi-firewall-zone table input[type="text"] {
1609 #cbi-firewall-redirect table select,
1610 #cbi-network-switch_vlan table select,
1611 #cbi-firewall-zone table select {
1615 #cbi-network-switch_vlan .th,
1616 #cbi-network-switch_vlan .td {
1620 /* fix Network Network*/
1622 .node-network-network .cbi-rowstyle-2 .ifacebox-body {
1623 background-color: #fff;
1626 .lang_zh-cnInterfaces .container .cbi-map .cbi-tabmenu+div {
1630 /* fix Network Wireless*/
1632 .node-network-wireless .cbi-section-node {
1633 margin-bottom: 1rem;
1636 /* applyreboot fix */
1642 #maincontainer>#maincontent {
1645 border-radius: 10px;
1646 display: inline-block;
1651 #applyreboot-container {
1652 margin-bottom: 1rem;
1655 #applyreboot-section {
1659 border-radius: 10px;
1662 #applyreboot-section>div {
1664 line-height: 1.5rem;
1667 #applyreboot-container {
1668 margin: 90px 2rem 2rem 2rem;
1671 #applyreboot-section {
1689 padding-right: 1rem;
1692 border-bottom: 1px solid #dadada;
1701 padding-left: .8rem;
1704 text-decoration: none;
1705 display: inline-block;
1717 background-color: #354057;
1721 text-decoration: none;
1739 background-color: #636569;
1742 border-radius: 20px;
1746 .main>.main-left .navbar-container {
1749 width: calc(100% + 10px);
1750 height: calc(100% - 110px);
1754 .main>.main-left .nav {
1758 .main>.main-left .nav>li a {
1763 .main>.main-left .nav>li {
1764 padding: 0.5rem 1.7rem;
1768 .main>.main-left .nav>.slide {
1769 padding: 0 15px 0 0;
1774 .main>.main-left .nav>.slide>ul {
1777 width: calc(100% - 10px);
1780 .main>.main-left .nav>.slide>.menu {
1782 padding: 0.5rem 1.7rem;
1783 text-decoration: none;
1790 .main>.main-left .nav>li>a.active,
1791 .main>.main-left .nav>.slide>.menu:hover,
1792 .main>.main-left .nav>.slide>.menu.active {
1793 background: #485267;
1795 border-top-right-radius: 50px;
1796 border-bottom-right-radius: 50px;
1799 .main>.main-left .nav>.slide:hover {
1803 .main>.main-left .nav>.slide>.slide-menu>li {
1804 padding: 0.6rem 2rem;
1808 .main>.main-left .nav>.slide>.slide-menu>.active {
1809 background-color: #F24C7C;
1810 border-top-right-radius: 50px;
1811 border-bottom-right-radius: 50px;
1814 .main>.main-left .nav>.slide>.slide-menu>li>a {
1815 text-decoration: none;
1816 white-space: nowrap;
1819 .main>.main-left .nav>.slide>.slide-menu>.active>a {
1823 .main>.main-left .nav>.slide>.slide-menu>li:hover {
1824 background: #F24C7C;
1825 border-top-right-radius: 50px;
1826 border-bottom-right-radius: 50px;
1829 .main>.main-left .nav>.slide>.slide-menu>.active:hover {
1830 background-color: #F24C7C;
1834 /* The scroll bar of the navigation bar is compatible with each browser. */
1838 .main>.main-left .navbar-container::-webkit-scrollbar {
1840 background: transparent;
1843 .main>.main-left .navbar-container::-webkit-scrollbar-button {
1847 .main>.main-left .navbar-container::-webkit-scrollbar-thumb {
1848 background-color: #ffffff61;
1849 border-radius: 10px;
1852 .main>.main-left .navbar-container::-webkit-scrollbar-thumb {
1853 background-color: #839dd67a;
1854 border-radius: 10px;
1857 .main>.main-left .navbar-container:hover::-webkit-scrollbar-thumb {
1858 background-color: #839dd67a;
1863 .main>.main-left .navbar-container {
1864 scrollbar-track-color: transparent;
1865 scrollbar-face-color: #839dd67a;
1866 scrollbar-arrow-color: transparent;
1867 scrollbar-3dlight-color: transparent;
1868 scrollbar-highlight-color: transparent;
1869 scrollbar-shadow-color: transparent;
1870 scrollbar-darkshadow-color: transparent;
1871 scrollbar-base-color: transparent;
1874 .main>.main-left .navbar-container:hover {
1875 scrollbar-face-color: #839dd67a;
1880 padding-right: 1rem;
1883 text-shadow: 0px 0px 2px #BBB;
1889 .modal-overlay-active #modal_overlay {
1896 background-color: #000000b8;
1900 .modal-overlay-active #modal_overlay .modal {
1902 background-color: #fff;
1904 border-radius: 20px;
1908 /* The style of the prompt message */
1912 border-radius: 10px;
1913 background-color: #FFF;
1917 background-color: #FA8072;
1922 background-color: #90EE90;
1931 padding: 7px 0 7px 36px;
1933 font-weight: normal;
1935 background: url(./no-pwd.png) no-repeat left 43%/ 28px;
1936 display: inline-block;
1941 line-height: 1.5rem;
1948 background-color: transparent;
1951 border: 1px solid #fff;
1952 border-radius: 50px;
1955 /* All styles of the login interface */
1959 background: #fff url(./loginBG.png) no-repeat center center / cover;
1962 .node-main-login header {
1966 .node-main-login .main {
1970 .node-main-login>.main>.main-left {
1974 .node-main-login>.main>.main-right {
1980 .node-main-login>.main #maincontent {
1986 transform: translateX(-50%) translateY(-50%);
1991 .node-main-login>.main .container {
1995 display: inline-block;
1998 .node-main-login>.main .logoImg a {
2003 text-decoration: none;
2006 .node-main-login>.main .logoImg img:first-child {
2010 .node-main-login .warning {
2011 background-color: #3E4A62;
2015 .node-main-login>.main form h2 {
2020 font-weight: normal;
2024 .node-main-login>.main form .cbi-map-descr {
2031 .node-main-login>.main form .cbi-section {
2034 background-color: transparent;
2038 .node-main-login>.main form .cbi-value {
2042 .node-main-login>.main form .cbi-value-title {
2048 .node-main-login>.main form .cbi-value .cbi-value-field {
2049 margin-bottom: 16px;
2055 .node-main-login>.main form .cbi-value-field input {
2058 border: 1px solid #556270;
2060 border-radius: 50px;
2065 .node-main-login form .cbi-value-field .iconpwd,
2066 .node-main-login form .cbi-value-field .iconuser,
2067 .node-main-login form .cbi-value-field .iconeye {
2073 transform: translateY(-50%);
2076 .node-main-login form .cbi-value-field .iconpwd {
2077 background: transparent url(./pwd.png) no-repeat center center / 100%;
2080 .node-main-login form .cbi-value-field .iconuser {
2081 background: transparent url(./user.png) no-repeat center center / 100%;
2084 .node-main-login form .cbi-value-field .iconeye {
2087 background: transparent url(./op-eye.png) no-repeat center center / 100%;
2090 .node-main-login form .cbi-value-field .cleye {
2091 background-image: url(./cl-eye.png);
2094 .node-main-login form .cbi-value-field .opeye {
2095 background-image: url(./op-eye.png);
2098 .node-main-login form .cbi-page-actions {
2104 .node-main-login form .cbi-page-actions input {
2108 display: inline-block;
2114 .node-main-login form .cbi-page-actions .cbi-button-apply {
2115 background-color: #F24C7C;
2116 border-top-left-radius: 50px;
2117 border-bottom-left-radius: 50px;
2120 .node-main-login form .cbi-page-actions .cbi-button-reset {
2121 background-color: #8a4568;
2123 border-top-right-radius: 50px;
2124 border-bottom-right-radius: 50px;
2127 .node-main-login input.cbi-input-text {
2128 box-shadow: 0 0 0 1000px white inset;
2131 /* Interface after login */
2133 background-color: #EBF1F6;
2144 .logged-in .main-right {
2145 padding: 0 1rem 3rem 0;
2150 .logged-in .main .logoImg {
2154 .logged-in .main .main-left .nav-container {
2155 background-color: #354057;
2156 border-radius: 20px;
2164 .logged-in .main .main-left .brand {
2166 padding: 44px 0 23px;
2172 text-decoration: none;
2173 border-bottom: 2px solid #ffffff42;
2174 /* Single line text omitted */
2175 white-space: nowrap;
2177 text-overflow: ellipsis;
2178 -webkit-text-overflow: ellipsis;
2179 -o-text-overflow: ellipsis;
2182 .logged-in .alert-message {
2185 background-color: #fff;
2188 .logged-in .alert-message a {
2192 background-color: #468EA4;
2196 @media screen and (max-width: 1600px) {
2198 width: calc(0% + 13rem);
2203 padding: 0.3rem 0.6rem;
2207 header>.container>.pull-right>* {
2212 padding: 0.2rem 0.6rem;
2217 padding-right: 0.6rem;
2220 .cbi-input-textarea {
2225 @media screen and (max-width: 1280px) {
2226 .node-main-login>.main .container {
2232 padding: 0.2rem 0.5rem;
2237 padding-bottom: 1rem;
2241 font-size: 0.7rem !important;
2242 width: 100% !important;
2245 .main>.main-left .nav>li,
2246 .main>.main-left .nav>li a,
2247 .main>.main-left .nav>.slide>.menu {
2251 .main>.main-left .nav>.slide>.slide-menu>li>a {
2256 @media screen and (max-width: 992px) {
2279 background: #0000007d;
2285 .main>.main-left .navbar-container {
2290 .main>.main-left .nav>.slide>.slide-menu>li {
2302 .node-main-login>.main .container {
2308 display: inline-block;
2309 vertical-align: middle;
2314 padding-right: 1rem;
2317 #diag-rc-output>pre {
2323 flex-direction: row;
2330 align-self: flex-start;
2331 text-overflow: ellipsis;
2332 word-wrap: break-word;
2333 display: inline-block;
2337 .td input[type="text"] {
2342 .td [data-dynlist]>input,
2343 .td input.cbi-input-password {
2344 width: calc(100% - 1.5rem);
2347 .td[data-type="button"],
2348 .td[data-type="fvalue"] {
2353 .th.cbi-value-field,
2354 .td.cbi-value-field,
2355 .th.cbi-section-table-cell,
2356 .td.cbi-section-table-cell {
2360 .cbi-section-table-row {
2363 flex-direction: row;
2364 justify-content: space-between;
2367 .td.cbi-value-field,
2368 .cbi-section-table-cell {
2370 display: inline-block;
2374 .td.cbi-section-actions {
2376 align-self: flex-end;
2377 vertical-align: bottom;
2381 .tr.cbi-section-table-titles,
2382 .tr.cbi-section-table-descr {
2386 .tr[data-title]::before,
2387 .tr.cbi-section-table-titles.named::before {
2392 border-bottom: 1px solid rgba(0, 0, 0, .26);
2400 .td[data-title]::before {
2409 /* All styles of the login interface */
2410 .node-main-login .showSide {
2411 display: none !important;
2415 padding-bottom: .8rem;
2418 .logged-in .main .main-left .nav-container {
2419 background-color: #354057;
2428 .logged-in .main-right {
2430 margin-top: calc(45px + .8rem);
2436 .logged-in .alert-message {
2441 margin: .8rem 0 0 0;
2450 .cbi-section>h3:first-child,
2455 .network-status-table .ifacebox-body>span {
2459 .cbi-section .ifacebox-body .ifacebadge>span {
2463 .table .tr.cbi-rowstyle-1:nth-child(n),
2464 .table .tr:nth-child(n) {
2468 .node-network-firewall .table .tr.cbi-rowstyle-1:nth-child(n),
2469 .node-network-firewall .table .tr:nth-child(n) {
2470 border-radius: 20px;
2478 border-bottom: none;
2485 .cbi-section-node-tabbed {
2490 .cbi-button-action.important {
2491 margin-right: .3rem;
2495 border-bottom: 1px solid rgba(0, 0, 0, .26);
2498 .node-status-processes .table .tr.cbi-rowstyle-1:nth-child(n),
2499 .node-status-processes .table .tr:nth-child(n) {
2500 border-radius: 20px;
2504 @media screen and (max-width: 768px) {
2509 .node-main-login>.main .logoImg a {
2511 margin: 12px 0 22px 0;
2515 .node-main-login>.main #maincontent {
2517 padding-bottom: 1rem;
2520 transform: translateY(0) translateX(-50%);
2536 .a lert-message>h4 {
2537 padding: 8px 0 8px 36px;
2545 .node-main-login .warning {
2546 background-color: #F5F5F6;
2555 .node-main-login>.main form h2 {
2557 margin: 20px 0 16px;
2561 .node-main-login>.main form .cbi-value-field input {
2564 background-size: 16px;
2568 .node-main-login>.main form .cbi-value-field {
2569 margin-bottom: 20px;
2572 .node-main-login form .cbi-page-actions input {
2577 .node-main-login form .cbi-value-field .iconpwd,
2578 .node-main-login form .cbi-value-field .iconuser,
2579 .node-main-login form .cbi-value-field .iconeye {
2585 .node-main-login form .cbi-value-field .iconeye {
2595 display: inline-block;
2599 @media screen and (max-width: 480px) {
2606 min-width: 0rem !important;
2609 margin-bottom: 0.5rem;
2614 .cbi-value-description {
2618 .cbi-value>.cbi-value-field {
2619 display: inline-block;
2624 padding: 0.6rem 0rem;
2629 padding: 0.2rem 0.3rem;
2633 .cbi-page-actions>div>input {
2648 padding-bottom: 1rem;
2651 .node-system-packages>.main .cbi-value.cbi-value-last>div {
2652 width: 100% !important;
2655 .node-system-packages>.main .cbi-value .cbi-value-field input {
2659 .node-status-iptables>.main div>.cbi-map>form {
2660 position: static !important;
2664 font-weight: normal;
2667 font-family: inherit;
2669 background-color: #FFF;
2670 border-radius: 20px;
2671 -webkit-overflow-scrolling: touch;
2674 .node-status-iptables>.main div>.cbi-map>form input[type="submit"] {
2675 width: 100% !important;
2679 .node-status-iptables>.main div>.cbi-map>form input[type="submit"]+input[type="submit"] {
2683 .node-main-login>.main .container {
2692 .td.cbi-value-field {
2696 .td.cbi-value-field[data-type="dvalue"] {
2700 .td.cbi-value-field[data-type="button"],
2701 .td.cbi-value-field[data-type="fvalue"] {
2706 .tr[data-title]::before,
2707 .tr.cbi-section-table-titles.named::before {
2715 /* All styles of the login interface */
2716 .node-main-login>.main .cbi-value {
2725 @media screen and (min-width: 992px) {
2726 .cbi-value-field .cbi-input-select {
2730 .cbi-value-field .cbi-dropdown {
2735 @media screen and (min-width: 1280px) {
2736 .cbi-value-field .cbi-input-select {
2740 .cbi-value-field .cbi-dropdown {
2745 @media screen and (min-width: 1600px) {
2746 .cbi-value-field .cbi-input-select {
2750 .cbi-value-field .cbi-dropdown {