2 * Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
5 * Copyright 2015 Lutty Yang <lutty@wcan.in>
7 * Have a bug? Please create an issue here on GitHub!
8 * https://github.com/LuttyYang/luci-theme-material/issues
10 * luci-theme-bootstrap:
11 * Copyright 2008 Steven Barth <steven@midlink.org>
12 * Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
13 * Copyright 2012 David Menting <david@nut-bolt.nl>
16 * https://github.com/muicss/mui
18 * Licensed to the public under the Apache License 2.0
22 * Font generate by Icomoon<icomoon.io>
25 font-family: 'icomoon';
26 src: url('../fonts/font.eot');
27 src: url('../fonts/font.eot') format('embedded-opentype'),
28 url('../fonts/font.ttf') format('truetype'),
29 url('../fonts/font.woff') format('woff'),
30 url('../fonts/font.svg') format('svg');
39 [class^="icon-"], [class*=" icon-"] {
40 font-family: 'icomoon' !important;
42 font-style: normal !important;
43 font-weight: normal !important;
44 font-variant: normal !important;
45 text-transform: none !important;
48 -webkit-font-smoothing: antialiased;
49 -moz-osx-font-smoothing: grayscale;
57 box-sizing: border-box;
60 .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
71 font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
75 padding: 0.36rem 0.8rem;
77 background-color: #fff;
78 background-image: none;
79 border: 1px solid #ccc;
83 padding: 0.36rem 0.5rem;
92 text-decoration: underline;
96 header, footer, .main {
103 box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
104 transition: box-shadow .2s;
118 width: calc(0% + 17rem);
121 background-color: white;
126 width: calc(100% - 17rem);
130 background-color: #EEE;
146 header > .container {
148 padding: 0.5rem 1rem 0 1rem;
151 header > .container > .brand {
154 text-decoration: none;
156 vertical-align: text-bottom;
160 background-color: #FF7D60;
173 font-family: inherit;
177 background-color: #FFF;
178 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
183 background-color: #f0ad4e;
184 border-color: #eea236;
187 #maincontent > .container > div:nth-child(1).alert-message.warning > a {
188 box-sizing: border-box;
191 text-transform: none;
192 display: inline-block;
197 vertical-align: middle;
198 touch-action: manipulation;
200 -webkit-user-select: none;
201 -moz-user-select: none;
202 -ms-user-select: none;
204 background-image: none;
206 padding: 0.5rem 1rem;
208 line-height: 1.42857143;
210 background-color: #5bc0de;
211 border-color: #46b8da;
213 text-decoration: inherit;
216 .main > .main-left > .nav {
220 .main > .main-left > .nav > li a {
224 .main > .main-left > .nav > li:nth-last-child(1) {
228 .main > .main-left > .nav > li {
229 padding: 0.5rem 1rem;
233 .main > .main-left > .nav > .slide {
237 .main > .main-left > .nav > .slide > ul {
241 .main > .main-left > .nav > .slide > .menu {
243 padding: 0.5rem 1rem;
244 text-decoration: none;
249 .main > .main-left > .nav > li:hover,
250 .main > .main-left > .nav > .slide > .menu:hover {
254 .main > .main-left > .nav > .slide:hover {
258 .main > .main-left > .nav > .slide > .slide-menu > li {
259 padding: 0.4rem 2rem;
262 .main > .main-left > .nav > .slide > .slide-menu > .active {
263 background-color: #0099CC;
266 .main > .main-left > .nav > .slide > .slide-menu > li > a {
267 text-decoration: none;
271 .main > .main-left > .nav > .slide > .slide-menu > .active > a {
275 .main > .main-left > .nav > .slide > .slide-menu > li:hover {
279 .main > .main-left > .nav > .slide > .slide-menu > .active:hover {
280 background-color: #0099CC;
285 list-style-type: none;
288 #maincontent > .container {
289 margin: 0 2rem 3rem 2rem;
294 padding-bottom: 10px;
295 border-bottom: 1px solid #eee;
301 padding-bottom: 10px;
302 border-bottom: 1px solid #eee;
308 padding-bottom: 10px;
323 font-family: inherit;
329 background-color: #FFF;
330 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
334 display: none !important;
337 fieldset > fieldset {
350 padding-bottom: 2rem;
351 border-bottom: 1px solid #eee;
356 border-collapse: collapse;
358 border: 1px solid #eee;
361 table > tbody > tr > td, table > tbody > tr > th, table > tfoot > tr > td, table > tfoot > tr > th, table > thead > tr > td, table > thead > tr > th {
363 line-height: 1.42857143;
364 border-top: 1px solid #ddd;
369 .cbi-section-table-cell {
373 .cbi-section-table-row {
377 fieldset > table > tbody > tr:nth-of-type(odd) {
378 background-color: #f9f9f9;
388 /* fix progress bar */
393 width: 100% !important;
394 height: 1.4rem !important;
397 #memfree > div > div,
398 #membuff > div > div,
400 #memtotal > div > div {
401 height: 1.4rem !important;
402 background-color: #0099CC !important;
405 /* fix multiple table */
411 .cbi-value-field table {
415 td > table > tbody > tr > td {
419 .cbi-value-field > table > tbody > tr > td {
426 box-sizing: border-box;
429 text-transform: none;
430 display: inline-block;
435 vertical-align: middle;
436 touch-action: manipulation;
438 -webkit-user-select: none;
439 -moz-user-select: none;
440 -ms-user-select: none;
442 background-image: none;
443 border: 1px solid transparent;
445 background-color: #fff;
448 padding: 0.5rem 1rem;
450 line-height: 1.42857143;
456 background-color: #f0ad4e;
457 border-color: #eea236;
466 color: #fff !important;
467 background-color: #337ab7 !important;
468 border-color: #2e6da4 !important;
474 color: #fff !important;
475 background-color: #5bc0de !important;
476 border-color: #46b8da !important;
481 color: #fff !important;
482 background-color: #d9534f !important;
483 border-color: #d43f3a !important;
490 padding-left: 0.5rem;
491 background-color: #FFFFFF;
496 display: inline-block;
497 padding: 0.9rem 0rem;
500 .cbi-tabmenu > li > a,
502 text-decoration: none;
504 padding: 0.9rem 1.5rem;
507 .tabs > li[class~="active"],
510 background-color: white;
511 border-bottom: 0.2rem solid #0099CC;
515 .tabs > li[class~="active"] > a {
520 border-bottom: 0.2rem solid #C9C9C9;
524 border-top: 1px solid #D4D4D4;
525 border-left: 1px solid #D4D4D4;
526 border-right: 1px solid #D4D4D4;
529 .cbi-tabmenu > li:hover {
530 background-color: #F1F1F1;
533 .cbi-tabmenu > li[class~="cbi-tab"] {
534 background-color: white;
538 background-color: #D4D4D4;
541 .cbi-section-node-tabbed {
544 border-bottom: 1px solid #D4D4D4;
545 border-left: 1px solid #D4D4D4;
546 border-right: 1px solid #D4D4D4;
549 .cbi-tabcontainer > .cbi-value:nth-of-type(2n) {
550 background-color: #f9f9f9;
554 .cbi-value-description {
558 .cbi-value-helpicon > img {
562 .cbi-value-helpicon:before {
566 .cbi-value-description {
569 padding: 0.5rem 0 0 0;
575 display: inline-block;
585 .cbi-section-table-descr > .cbi-section-table-cell,
586 .cbi-section-table-titles > .cbi-section-table-cell {
591 background-color: #eee;
594 .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
595 width: auto !important;
612 text-align: left !important;
616 text-align: right !important;
620 display: inline-block;
624 border-top: 1px solid #eee;
630 .cbi-value input[type="password"],
631 .cbi-value input[type="text"] {
632 box-sizing: border-box;
633 padding: 0.36rem 1rem;
636 background-color: #fff;
637 background-image: none;
638 border: 1px solid #ccc;
639 margin-bottom: 0.3rem;
642 .cbi-value-field input[type="password"],
643 .cbi-value-field input[type="text"] {
644 box-sizing: border-box;
645 padding: 0.36rem 1rem;
647 background-color: #fff;
648 background-image: none;
649 border: 1px solid #ccc;
653 .cbi-value-field .cbi-input-select {
656 padding: 0.36rem 0.8rem;
658 background-color: #fff;
659 background-image: none;
660 border: 1px solid #ccc;
664 display: inline-block;
666 border: 1px solid #CCCCCC;
667 padding: 0.5rem 1rem;
668 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
669 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
670 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
680 .cbi-input-textarea {
681 box-sizing: border-box;
690 width: calc(100% - 2rem);
698 background-color: #FFF;
699 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
706 font-family: monospace;
709 .uci-change-list ins,
710 .uci-change-legend-label ins {
711 text-decoration: none;
712 border: 1px solid #00FF00;
713 background-color: #CCFFCC;
718 .uci-change-list del,
719 .uci-change-legend-label del {
720 text-decoration: none;
721 border: 1px solid #FF0000;
722 background-color: #FFCCCC;
728 .uci-change-list var,
729 .uci-change-legend-label var {
730 text-decoration: none;
731 border: 1px solid #CCCCCC;
732 background-color: #EEEEEE;
738 .uci-change-list var ins,
739 .uci-change-list var del {
750 .uci-change-legend-label {
755 .uci-change-legend-label > ins,
756 .uci-change-legend-label > del,
757 .uci-change-legend-label > var {
765 .uci-change-legend-label var ins,
766 .uci-change-legend-label var del {
771 .uci-change-list var,
772 .uci-change-list del,
773 .uci-change-list ins {
781 border: 1px solid #D4D4D4 !important;
782 border-top: none !important;
786 border: 1px solid #999;
787 background-color: #f9f9f9;
795 padding: 0.2rem 0.5rem;
796 display: inline-block;
800 .zonebadge > .ifacebadge {
801 padding: 0.2rem 1rem;
803 border: 1px solid #6C6C6C;
806 .zonebadge > input[type="text"] {
807 padding: 0.16rem 1rem;
812 .cbi-value-field .cbi-input-checkbox,
813 .cbi-value-field .cbi-input-radio {
817 .cbi-section-table-row > .cbi-value-field .cbi-input-select {
821 .cbi-section-create > .cbi-button-add {
825 div.cbi-value var, td.cbi-value-field var {
837 display: inline-block;
839 padding: 0.2rem 0.3rem;
843 #diag-rc-output > pre {
844 background-color: #f5f5f5;
849 -moz-border-radius: 3px;
850 white-space: pre-wrap;
851 word-wrap: break-word;
857 input[name="traceroute"],
858 input[name="nslookup"] {
868 #xhr_poll_status > .label.success {
869 background-color: #14CE14;
872 #xhr_poll_status > .label {
873 padding: 0.3rem 0.8rem;
875 box-sizing: border-box;
877 color: #ffffff !important;
878 text-transform: uppercase;
880 background-color: #bfbfbf;
881 -webkit-border-radius: 3px;
882 -moz-border-radius: 3px;
895 background-color: rgba(0, 0, 0, 0.56);
902 .node-main-login > .main > .main-left {
906 .node-main-login > .main > .main-right {
910 .node-main-login > .main fieldset {
919 .node-main-login > .main .cbi-value-title {
923 .node-main-login > .main #maincontent {
928 .node-main-login > .main .container {
929 display: inline-block;
931 margin-top: 2rem !important;
932 background-color: #FFF;
933 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
937 .node-main-login > .main form > div:nth-last-child(1) {
941 /* fix status processes */
943 .node-status-processes > .main table tr td:nth-child(3) {
947 .node-status-firewall > .main fieldset li {
948 display: inline-block;
951 .node-status-firewall > .main fieldset li > a {
952 box-sizing: border-box;
955 text-transform: none;
960 vertical-align: middle;
961 touch-action: manipulation;
963 -webkit-user-select: none;
964 -moz-user-select: none;
965 -ms-user-select: none;
967 background-image: none;
968 border: 1px solid transparent;
971 padding: 0.5rem 1rem;
973 line-height: 1.42857143;
974 background-color: #f0ad4e;
975 border-color: #eea236;
978 text-decoration: none;
981 /* fix system reboot */
983 .node-system-reboot > .main > .main-right p,
984 .node-system-reboot > .main > .main-right h3 {
988 .node-system-reboot > .main > .main-right p > a {
990 text-decoration: none;
991 box-sizing: border-box;
994 text-transform: none;
995 display: inline-block;
1000 vertical-align: middle;
1001 touch-action: manipulation;
1003 -webkit-user-select: none;
1004 -moz-user-select: none;
1005 -ms-user-select: none;
1007 background-image: none;
1008 border: 1px solid transparent;
1010 padding: 0.5rem 1rem;
1012 line-height: 1.42857143;
1013 text-decoration: none;
1015 background-color: #d9534f !important;
1016 border-color: #d43f3a !important;
1019 /* fix Services Network Shares*/
1020 .node-services-network_shares > .main .cbi-tabcontainer:nth-child(3) .cbi-value-title {
1021 margin-bottom: 1rem;
1024 .node-services-network_shares > .main .cbi-tabcontainer:nth-child(3) .cbi-value-field {
1028 .node-services-network_shares > .main .cbi-tabcontainer:nth-child(3) .cbi-value-description {
1032 /* fix System Software*/
1033 .node-system-software > .main table tr td:nth-child(4) {
1034 white-space: normal;
1039 .node-system-software > .main .cbi-tabmenu > li > a, .tabs > li > a {
1040 padding: 0.5rem 1rem;
1043 .node-status-firewall fieldset,
1044 .node-system-software fieldset,
1045 .node-system-backup_flash_firmware fieldset {
1049 .node-status-firewall .cbi-tabmenu,
1050 .node-system-software .cbi-tabmenu,
1051 .node-system-backup_flash_firmware .cbi-tabmenu {
1053 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
1056 @media screen and (max-width: 1600px) {
1058 width: calc(0% + 15rem);
1062 width: calc(100% - 15rem);
1066 padding: 0.3rem 0.6rem;
1075 #xhr_poll_status > .label {
1076 padding: 0.2rem 0.6rem;
1088 @media screen and (max-width: 1280px) {
1089 .cbi-tabmenu > li > a, .tabs > li > a {
1090 padding: 0.2rem 0.5rem;
1094 @media screen and (max-width: 992px) {
1111 margin-right: 0.5rem;
1112 display: inline-block;
1120 .node-main-login .showSide {
1121 display: none !important;
1129 .node-network-diagnostics > .main .cbi-map fieldset > div *{
1130 width: 100% !important;
1133 .node-network-diagnostics > .main .cbi-map fieldset > div input[type="text"]{
1134 margin: 3rem 0 0 0 !important;
1137 .node-network-diagnostics > .main .cbi-map fieldset > div:nth-child(4) input[type="text"]{
1138 margin: 0 !important;
1141 .node-network-diagnostics > .main .cbi-map fieldset > div select,
1142 .node-network-diagnostics > .main .cbi-map fieldset > div input[type="button"]{
1146 .node-network-diagnostics > .main .cbi-map fieldset > div{
1147 width: 100% !important;
1151 #diag-rc-output > pre {
1156 @media screen and (max-width: 480px) {
1170 #maincontent > .container {
1171 margin: 0 1rem 1.5rem 1rem;
1174 .main > .main-left > .nav > .slide > .menu {
1178 .main > .main-left > .nav > .slide > .slide-menu > li > a {
1183 min-width: 0rem !important;
1186 margin-bottom: 0.5rem;
1189 .cbi-value-field, .cbi-value-description {
1191 box-sizing: border-box;
1194 .cbi-value > .cbi-value-field {
1195 display: inline-block;
1198 .cbi-tabmenu > li, .tabs > li {
1199 padding: 0.6rem 0rem;
1202 .cbi-tabmenu > li > a, .tabs > li > a {
1203 padding: 0.2rem 0.7rem;
1206 .cbi-page-actions > div {
1210 .node-main-login > .main .container {
1211 padding: 0.5rem 1rem 2rem 1rem;
1214 .node-main-login > .main .cbi-value {
1218 .node-main-login > .main form > div:nth-last-child(1) {
1222 .node-main-login > .main .cbi-value-title {
1226 .node-main-login > .main fieldset {
1242 header > .container {
1243 margin-top: 0.25rem;