2 font-family: 'icomoon';
3 src: url('../fonts/font.eot');
4 src: url('../fonts/font.eot') format('embedded-opentype'),
5 url('../fonts/font.ttf') format('truetype'),
6 url('../fonts/font.woff') format('woff'),
7 url('../fonts/font.svg') format('svg');
16 [class^="icon-"], [class*=" icon-"] {
17 font-family: 'icomoon' !important;
19 font-style: normal !important;
20 font-weight: normal !important;
21 font-variant: normal !important;
22 text-transform: none !important;
25 -webkit-font-smoothing: antialiased;
26 -moz-osx-font-smoothing: grayscale;
34 box-sizing: border-box;
37 .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
48 font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
52 padding: 0.36rem 0.8rem;
54 background-color: #fff;
55 background-image: none;
56 border: 1px solid #ccc;
60 padding: 0.36rem 0.5rem;
69 text-decoration: underline;
73 header, footer, .main {
80 box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
81 transition: box-shadow .2s;
95 width: calc(0% + 17rem);
98 background-color: white;
103 width: calc(100% - 17rem);
107 background-color: #EEE;
123 header > .container {
125 padding: 0.5rem 1rem 0 1rem;
128 header > .container > .brand {
131 text-decoration: none;
133 vertical-align: text-bottom;
137 background-color: #FF7D60;
150 font-family: inherit;
154 background-color: #FFF;
155 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
160 background-color: #f0ad4e;
161 border-color: #eea236;
164 #maincontent > .container > div:nth-child(1).alert-message.warning > a {
165 box-sizing: border-box;
168 text-transform: none;
169 display: inline-block;
174 vertical-align: middle;
175 touch-action: manipulation;
177 -webkit-user-select: none;
178 -moz-user-select: none;
179 -ms-user-select: none;
181 background-image: none;
183 padding: 0.5rem 1rem;
185 line-height: 1.42857143;
187 background-color: #5bc0de;
188 border-color: #46b8da;
190 text-decoration: inherit;
193 .main > .main-left > .nav {
197 .main > .main-left > .nav > li a {
201 .main > .main-left > .nav > li:nth-last-child(1) {
205 .main > .main-left > .nav > li {
206 padding: 0.5rem 1rem;
210 .main > .main-left > .nav > .slide {
214 .main > .main-left > .nav > .slide > ul {
218 .main > .main-left > .nav > .slide > .menu {
220 padding: 0.5rem 1rem;
221 text-decoration: none;
226 .main > .main-left > .nav > li:hover,
227 .main > .main-left > .nav > .slide > .menu:hover {
231 .main > .main-left > .nav > .slide:hover {
235 .main > .main-left > .nav > .slide > .slide-menu > li {
236 padding: 0.4rem 2rem;
239 .main > .main-left > .nav > .slide > .slide-menu > .active {
240 background-color: #0099CC;
243 .main > .main-left > .nav > .slide > .slide-menu > li > a {
244 text-decoration: none;
248 .main > .main-left > .nav > .slide > .slide-menu > .active > a {
252 .main > .main-left > .nav > .slide > .slide-menu > li:hover {
256 .main > .main-left > .nav > .slide > .slide-menu > .active:hover {
257 background-color: #0099CC;
262 list-style-type: none;
265 #maincontent > .container {
266 margin: 0 2rem 3rem 2rem;
271 padding-bottom: 10px;
272 border-bottom: 1px solid #eee;
278 padding-bottom: 10px;
279 border-bottom: 1px solid #eee;
285 padding-bottom: 10px;
300 font-family: inherit;
306 background-color: #FFF;
307 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
311 display: none !important;
314 fieldset > fieldset {
327 padding-bottom: 2rem;
328 border-bottom: 1px solid #eee;
333 border-collapse: collapse;
335 border: 1px solid #eee;
338 table > tbody > tr > td, table > tbody > tr > th, table > tfoot > tr > td, table > tfoot > tr > th, table > thead > tr > td, table > thead > tr > th {
340 line-height: 1.42857143;
341 border-top: 1px solid #ddd;
346 .cbi-section-table-cell {
350 .cbi-section-table-row {
354 fieldset > table > tbody > tr:nth-of-type(odd) {
355 background-color: #f9f9f9;
370 width: 100% !important;
371 height: 1.4rem !important;
374 #memfree > div > div,
375 #membuff > div > div,
377 #memtotal > div > div {
378 height: 1.4rem !important;
379 background-color: #0099CC !important;
388 .cbi-value-field table {
392 td > table > tbody > tr > td {
396 .cbi-value-field > table > tbody > tr > td {
403 box-sizing: border-box;
406 text-transform: none;
407 display: inline-block;
412 vertical-align: middle;
413 touch-action: manipulation;
415 -webkit-user-select: none;
416 -moz-user-select: none;
417 -ms-user-select: none;
419 background-image: none;
420 border: 1px solid transparent;
422 background-color: #fff;
425 padding: 0.5rem 1rem;
427 line-height: 1.42857143;
433 background-color: #f0ad4e;
434 border-color: #eea236;
443 color: #fff !important;
444 background-color: #337ab7 !important;
445 border-color: #2e6da4 !important;
451 color: #fff !important;
452 background-color: #5bc0de !important;
453 border-color: #46b8da !important;
458 color: #fff !important;
459 background-color: #d9534f !important;
460 border-color: #d43f3a !important;
467 padding-left: 0.5rem;
468 background-color: #FFFFFF;
473 display: inline-block;
474 padding: 0.9rem 0rem;
477 .cbi-tabmenu > li > a,
479 text-decoration: none;
481 padding: 0.9rem 1.5rem;
484 .tabs > li[class~="active"],
487 background-color: white;
488 border-bottom: 0.2rem solid #0099CC;
492 .tabs > li[class~="active"] > a {
497 border-bottom: 0.2rem solid #C9C9C9;
501 border-top: 1px solid #D4D4D4;
502 border-left: 1px solid #D4D4D4;
503 border-right: 1px solid #D4D4D4;
506 .cbi-tabmenu > li:hover {
507 background-color: #F1F1F1;
510 .cbi-tabmenu > li[class~="cbi-tab"] {
511 background-color: white;
515 background-color: #D4D4D4;
518 .cbi-section-node-tabbed {
521 border-bottom: 1px solid #D4D4D4;
522 border-left: 1px solid #D4D4D4;
523 border-right: 1px solid #D4D4D4;
526 .cbi-tabcontainer > .cbi-value:nth-of-type(2n) {
527 background-color: #f9f9f9;
531 .cbi-value-description {
535 .cbi-value-helpicon > img {
539 .cbi-value-helpicon:before {
543 .cbi-value-description {
546 padding: 0.5rem 0 0 0;
552 display: inline-block;
562 .cbi-section-table-descr > .cbi-section-table-cell,
563 .cbi-section-table-titles > .cbi-section-table-cell {
568 background-color: #eee;
571 .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
572 width: auto !important;
589 text-align: left !important;
593 text-align: right !important;
597 display: inline-block;
601 border-top: 1px solid #eee;
607 .cbi-value input[type="password"],
608 .cbi-value input[type="text"] {
609 box-sizing: border-box;
610 padding: 0.36rem 1rem;
613 background-color: #fff;
614 background-image: none;
615 border: 1px solid #ccc;
616 margin-bottom: 0.3rem;
619 .cbi-value-field input[type="password"],
620 .cbi-value-field input[type="text"] {
621 box-sizing: border-box;
622 padding: 0.36rem 1rem;
624 background-color: #fff;
625 background-image: none;
626 border: 1px solid #ccc;
630 .cbi-value-field .cbi-input-select {
633 padding: 0.36rem 0.8rem;
635 background-color: #fff;
636 background-image: none;
637 border: 1px solid #ccc;
641 display: inline-block;
643 border: 1px solid #CCCCCC;
644 padding: 0.5rem 1rem;
645 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
646 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
647 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
657 .cbi-input-textarea {
658 box-sizing: border-box;
667 width: calc(100% - 2rem);
675 background-color: #FFF;
676 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
683 font-family: monospace;
686 .uci-change-list ins,
687 .uci-change-legend-label ins {
688 text-decoration: none;
689 border: 1px solid #00FF00;
690 background-color: #CCFFCC;
695 .uci-change-list del,
696 .uci-change-legend-label del {
697 text-decoration: none;
698 border: 1px solid #FF0000;
699 background-color: #FFCCCC;
705 .uci-change-list var,
706 .uci-change-legend-label var {
707 text-decoration: none;
708 border: 1px solid #CCCCCC;
709 background-color: #EEEEEE;
715 .uci-change-list var ins,
716 .uci-change-list var del {
728 .uci-change-legend-label {
733 .uci-change-legend-label > ins,
734 .uci-change-legend-label > del,
735 .uci-change-legend-label > var {
743 .uci-change-legend-label var ins,
744 .uci-change-legend-label var del {
749 .uci-change-list var,
750 .uci-change-list del,
751 .uci-change-list ins {
759 border: 1px solid #D4D4D4 !important;
760 border-top: none !important;
764 border: 1px solid #999;
765 background-color: #f9f9f9;
773 padding: 0.2rem 0.5rem;
774 display: inline-block;
778 .zonebadge > .ifacebadge {
779 padding: 0.2rem 1rem;
781 border: 1px solid #6C6C6C;
784 .zonebadge > input[type="text"] {
785 padding: 0.16rem 1rem;
790 .cbi-value-field .cbi-input-checkbox,
791 .cbi-value-field .cbi-input-radio {
795 .cbi-section-table-row > .cbi-value-field .cbi-input-select {
799 .cbi-section-create > .cbi-button-add {
803 div.cbi-value var, td.cbi-value-field var {
815 display: inline-block;
817 padding: 0.2rem 0.3rem;
821 #diag-rc-output > pre {
822 background-color: #f5f5f5;
827 -moz-border-radius: 3px;
828 white-space: pre-wrap;
829 word-wrap: break-word;
835 input[name="traceroute"],
836 input[name="nslookup"] {
846 #xhr_poll_status > .label.success {
847 background-color: #14CE14;
850 #xhr_poll_status > .label {
851 padding: 0.3rem 0.8rem;
853 box-sizing: border-box;
855 color: #ffffff !important;
856 text-transform: uppercase;
858 background-color: #bfbfbf;
859 -webkit-border-radius: 3px;
860 -moz-border-radius: 3px;
873 background-color: rgba(0, 0, 0, 0.56);
880 .node-main-login > .main > .main-left {
884 .node-main-login > .main > .main-right {
888 .node-main-login > .main fieldset {
897 .node-main-login > .main .cbi-value-title {
901 .node-main-login > .main #maincontent {
906 .node-main-login > .main .container {
907 display: inline-block;
909 margin-top: 2rem !important;
910 background-color: #FFF;
911 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
915 .node-main-login > .main form > div:nth-last-child(1) {
919 /* fix status processes */
921 .node-status-processes > .main table tr td:nth-child(3) {
925 .node-status-firewall > .main fieldset li {
926 display: inline-block;
929 .node-status-firewall > .main fieldset li > a {
930 box-sizing: border-box;
933 text-transform: none;
938 vertical-align: middle;
939 touch-action: manipulation;
941 -webkit-user-select: none;
942 -moz-user-select: none;
943 -ms-user-select: none;
945 background-image: none;
946 border: 1px solid transparent;
949 padding: 0.5rem 1rem;
951 line-height: 1.42857143;
952 background-color: #f0ad4e;
953 border-color: #eea236;
956 text-decoration: none;
959 /* fix system reboot */
961 .node-system-reboot > .main > .main-right p,
962 .node-system-reboot > .main > .main-right h3 {
966 .node-system-reboot > .main > .main-right p > a {
968 text-decoration: none;
969 box-sizing: border-box;
972 text-transform: none;
973 display: inline-block;
978 vertical-align: middle;
979 touch-action: manipulation;
981 -webkit-user-select: none;
982 -moz-user-select: none;
983 -ms-user-select: none;
985 background-image: none;
986 border: 1px solid transparent;
988 padding: 0.5rem 1rem;
990 line-height: 1.42857143;
991 text-decoration: none;
993 background-color: #d9534f !important;
994 border-color: #d43f3a !important;
997 /* fix Services Network Shares*/
998 .node-services-network_shares > .main .cbi-tabcontainer:nth-child(3) .cbi-value-title {
1002 .node-services-network_shares > .main .cbi-tabcontainer:nth-child(3) .cbi-value-field {
1006 .node-services-network_shares > .main .cbi-tabcontainer:nth-child(3) .cbi-value-description {
1010 /* fix System Software*/
1011 .node-system-software > .main table tr td:nth-child(4) {
1012 white-space: normal;
1017 .node-system-software > .main .cbi-tabmenu > li > a, .tabs > li > a {
1018 padding: 0.5rem 1rem;
1021 .node-status-firewall fieldset,
1022 .node-system-software fieldset,
1023 .node-system-backup_flash_firmware fieldset {
1027 .node-status-firewall .cbi-tabmenu,
1028 .node-system-software .cbi-tabmenu,
1029 .node-system-backup_flash_firmware .cbi-tabmenu {
1031 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
1034 @media screen and (max-width: 1600px) {
1036 width: calc(0% + 15rem);
1040 width: calc(100% - 15rem);
1044 padding: 0.3rem 0.6rem;
1053 #xhr_poll_status > .label {
1054 padding: 0.2rem 0.6rem;
1066 @media screen and (max-width: 1280px) {
1067 .cbi-tabmenu > li > a, .tabs > li > a {
1068 padding: 0.2rem 0.5rem;
1072 @media screen and (max-width: 992px) {
1089 margin-right: 0.5rem;
1090 display: inline-block;
1098 .node-main-login .showSide {
1099 display: none !important;
1107 .node-network-diagnostics > .main .cbi-map fieldset > div *{
1108 width: 100% !important;
1111 .node-network-diagnostics > .main .cbi-map fieldset > div input[type="text"]{
1112 margin: 3rem 0 0 0 !important;
1115 .node-network-diagnostics > .main .cbi-map fieldset > div:nth-child(4) input[type="text"]{
1116 margin: 0 !important;
1119 .node-network-diagnostics > .main .cbi-map fieldset > div select,
1120 .node-network-diagnostics > .main .cbi-map fieldset > div input[type="button"]{
1124 .node-network-diagnostics > .main .cbi-map fieldset > div{
1125 width: 100% !important;
1129 #diag-rc-output > pre {
1134 @media screen and (max-width: 480px) {
1148 #maincontent > .container {
1149 margin: 0 1rem 1.5rem 1rem;
1152 .main > .main-left > .nav > .slide > .menu {
1156 .main > .main-left > .nav > .slide > .slide-menu > li > a {
1161 min-width: 0rem !important;
1164 margin-bottom: 0.5rem;
1167 .cbi-value-field, .cbi-value-description {
1169 box-sizing: border-box;
1172 .cbi-value > .cbi-value-field {
1173 display: inline-block;
1176 .cbi-tabmenu > li, .tabs > li {
1177 padding: 0.6rem 0rem;
1180 .cbi-tabmenu > li > a, .tabs > li > a {
1181 padding: 0.2rem 0.7rem;
1184 .cbi-page-actions > div {
1188 .node-main-login > .main .container {
1189 padding: 0.5rem 1rem 2rem 1rem;
1192 .node-main-login > .main .cbi-value {
1196 .node-main-login > .main form > div:nth-last-child(1) {
1200 .node-main-login > .main .cbi-value-title {
1204 .node-main-login > .main fieldset {
1220 header > .container {
1221 margin-top: 0.25rem;