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 .main > .loading > span {
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;
55 box-sizing: border-box;
58 .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
66 -webkit-text-size-adjust: 100%;
67 -ms-text-size-adjust: 100%;
72 background-color: #EEE;
79 font-family: Microsoft Yahei, WenQuanYi Micro Hei, sans-serif, "Helvetica Neue", Helvetica, Hiragino Sans GB;
83 padding: 0.36rem 0.8rem;
85 background-color: #fff;
86 background-image: none;
87 border: 1px solid #ccc;
92 background-color: transparent;
93 color: rgba(0, 0, 0, .87);
95 border-bottom: 2px solid rgba(0, 0, 0, .26);
100 background-image: none;
105 select:not([multiple="multiple"]):focus,
107 border-color: #0099CC;
110 select[multiple="multiple"] {
120 text-decoration: underline;
137 box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
138 transition: box-shadow .2s;
149 text-shadow: 0px 0px 2px #BBB;
154 text-decoration: none;
162 height: calc(100% - 4rem);
171 background-color: rgb(240, 240, 240);
175 .main > .loading > span {
183 .main > .loading > span > .loading-img:before {
187 .main > .loading > span > .loading-img {
188 animation: anim-rotate 2s infinite linear;
189 margin-right: 0.2rem;
190 display: inline-block;
193 @keyframes anim-rotate {
195 -webkit-transform: rotate(0);
196 -ms-transform: rotate(0);
197 transform: rotate(0);
200 -webkit-transform: rotate(360deg);
201 -ms-transform: rotate(360deg);
202 transform: rotate(360deg)
210 width: calc(0% + 15rem);
212 height: calc(100% - 4rem);
213 background-color: white;
220 width: calc(100% - 15rem);
223 background-color: #EEE;
226 .main-right > #maincontent {
227 background-color: #EEE;
243 header > .container {
245 padding: 0.5rem 1rem 0 1rem;
248 header > .container > .brand {
251 text-decoration: none;
253 vertical-align: text-bottom;
257 background-color: #FA8072 !important;
262 background-color: #F0E68C !important;
267 background-color: #90EE90 !important;
279 font-family: inherit;
283 background-color: #FFF;
284 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
289 background-color: #f0ad4e;
290 border-color: #eea236;
297 #maincontent > .container > div:nth-child(1).alert-message.warning > a {
300 text-transform: none;
301 display: inline-block;
306 vertical-align: middle;
307 touch-action: manipulation;
309 -webkit-user-select: none;
310 -moz-user-select: none;
311 -ms-user-select: none;
313 background-image: none;
315 padding: 0.5rem 1rem;
317 line-height: 1.42857143;
319 background-color: #5bc0de;
320 border-color: #46b8da;
322 text-decoration: inherit;
325 .main > .main-left > .nav {
329 .main > .main-left > .nav > li a {
334 .main > .main-left > .nav > li:nth-last-child(1) {
339 .main > .main-left > .nav > li {
340 padding: 0.5rem 1rem;
344 .main > .main-left > .nav > .slide {
348 .main > .main-left > .nav > .slide > ul {
352 .main > .main-left > .nav > .slide > .menu {
354 padding: 0.5rem 1rem;
355 text-decoration: none;
360 .main > .main-left > .nav > li:hover,
361 .main > .main-left > .nav > .slide > .menu:hover {
365 .main > .main-left > .nav > .slide:hover {
369 .main > .main-left > .nav > .slide > .slide-menu > li {
370 padding: 0.4rem 2rem;
373 .main > .main-left > .nav > .slide > .slide-menu > .active {
374 background-color: #0099CC;
377 .main > .main-left > .nav > .slide > .slide-menu > li > a {
378 text-decoration: none;
382 .main > .main-left > .nav > .slide > .slide-menu > .active > a {
386 .main > .main-left > .nav > .slide > .slide-menu > li:hover {
390 .main > .main-left > .nav > .slide > .slide-menu > .active:hover {
391 background-color: #0099CC;
396 list-style-type: none;
399 #maincontent > .container {
400 margin: 0 2rem 1rem 2rem;
405 padding-bottom: 10px;
406 border-bottom: 1px solid #eee;
412 padding-bottom: 10px;
413 border-bottom: 1px solid #eee;
419 padding-bottom: 10px;
433 font-family: inherit;
440 background-color: #FFF;
441 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
443 -webkit-overflow-scrolling: touch;
446 .cbi-map-descr + fieldset {
451 display: none !important;
454 fieldset > fieldset {
467 padding-bottom: 1rem;
468 border-bottom: 1px solid #eee;
473 border-collapse: collapse;
475 border: 1px solid #eee;
478 table > tbody > tr > td, table > tbody > tr > th, table > tfoot > tr > td, table > tfoot > tr > th, table > thead > tr > td, table > thead > tr > th {
480 border-top: 1px solid #ddd;
484 .cbi-section-table-cell {
488 .cbi-section-table-row {
492 fieldset > table > tbody > tr:nth-of-type(2n) {
493 background-color: #f9f9f9;
496 /* fix progress bar */
503 width: 100% !important;
504 height: 1.2rem !important;
507 #swaptotal > div > div,
508 #swapfree > div > div,
509 #memfree > div > div,
510 #membuff > div > div,
512 #memtotal > div > div {
513 height: 100% !important;
514 background-color: #0099CC !important;
517 /* fix multiple table */
523 .cbi-value-field table {
527 td > table > tbody > tr > td {
531 .cbi-value-field > table > tbody > tr > td {
538 -webkit-appearance: none;
539 text-transform: uppercase;
540 color: rgba(0, 0, 0, 0.87);
541 background-color: #F0F0F0;
542 transition: all 0.2s ease-in-out;
543 display: inline-block;
546 border-radius: 0.2rem;
548 -ms-touch-action: manipulation;
549 touch-action: manipulation;
550 background-image: none;
552 vertical-align: middle;
554 -webkit-user-select: none;
555 -moz-user-select: none;
556 -ms-user-select: none;
559 width: auto !important;
565 color: rgba(0, 0, 0, 0.87);
567 text-decoration: none;
568 color: rgba(0, 0, 0, 0.87);
573 box-shadow: 0 0px 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
577 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
580 .cbi-button:disabled {
582 pointer-events: none;
587 form.inline + form.inline,
588 .cbi-button + .cbi-button {
594 color: #fff !important;
595 background-color: #f0ad4e !important;
596 border-color: #eea236 !important;
606 color: #fff !important;
607 background-color: #337ab7 !important;
608 border-color: #2e6da4 !important;
614 color: #fff !important;
615 background-color: #5bc0de !important;
616 border-color: #46b8da !important;
620 .cbi-section-remove > .cbi-button,
622 color: #fff !important;
623 background-color: #d9534f !important;
624 border-color: #d43f3a !important;
628 text-decoration: none;
635 padding-left: 0.5rem;
636 background-color: #FFFFFF;
641 display: inline-block;
642 padding: 0.6rem 0rem;
645 .cbi-tabmenu > li > a,
647 text-decoration: none;
649 padding: 0.5rem 0.8rem;
652 .tabs > li[class~="active"],
655 border-bottom: 0.2rem solid #0099CC;
657 margin-bottom: -0.18751rem;
660 .tabs > li[class~="active"] > a {
665 border-bottom: 0.18751rem solid #C9C9C9;
669 border-top: 1px solid #D4D4D4;
670 border-left: 1px solid #D4D4D4;
671 border-right: 1px solid #D4D4D4;
674 .cbi-tabmenu > li:hover {
675 background-color: #F1F1F1;
678 .cbi-tabmenu > li[class~="cbi-tab"] {
679 background-color: white;
683 background-color: #D4D4D4;
686 .cbi-section-remove:nth-of-type(2n),
687 .cbi-section-node:nth-of-type(2n){
688 background-color: #f9f9f9;
691 .cbi-section-node-tabbed {
694 border-bottom: 1px solid #D4D4D4;
695 border-left: 1px solid #D4D4D4;
696 border-right: 1px solid #D4D4D4;
699 .cbi-tabcontainer > .cbi-value:nth-of-type(2n) {
700 background-color: #f9f9f9;
704 .cbi-value-description {
709 .cbi-value-helpicon > img {
713 .cbi-value-helpicon:before {
717 .cbi-value-description {
720 padding: 0.5rem 0 0 0;
724 word-wrap: break-word;
734 padding: 0.3rem 1rem;
735 display: inline-block;
739 .cbi-section-table-descr > .cbi-section-table-cell,
740 .cbi-section-table-titles > .cbi-section-table-cell {
745 background-color: #eee;
748 .cbi-rowstyle-2 .cbi-button-up,
749 .cbi-rowstyle-2 .cbi-button-down {
750 background-color: #FFF !important;
753 .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
754 width: auto !important;
772 text-align: left !important;
776 text-align: right !important;
784 border-top: 1px solid #eee;
790 .cbi-value input[type="password"],
791 .cbi-value input[type="text"] {
796 .cbi-value-field .cbi-input-select {
801 display: inline-flex;
802 border-bottom: 1px solid #CCCCCC;
803 padding: 0.5rem 1rem;
804 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
805 -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
806 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
810 background-color: #F0F0F0;
821 .cbi-input-textarea {
826 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
839 background-color: #FFF;
840 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
847 font-family: monospace;
850 .uci-change-list ins,
851 .uci-change-legend-label ins {
852 text-decoration: none;
853 border: 1px solid #00FF00;
854 background-color: #CCFFCC;
859 .uci-change-list del,
860 .uci-change-legend-label del {
861 text-decoration: none;
862 border: 1px solid #FF0000;
863 background-color: #FFCCCC;
869 .uci-change-list var,
870 .uci-change-legend-label var {
871 text-decoration: none;
872 border: 1px solid #CCCCCC;
873 background-color: #EEEEEE;
879 .uci-change-list var ins,
880 .uci-change-list var del {
891 .uci-change-legend-label {
896 .uci-change-legend-label > ins,
897 .uci-change-legend-label > del,
898 .uci-change-legend-label > var {
906 .uci-change-legend-label var ins,
907 .uci-change-legend-label var del {
912 .uci-change-list var,
913 .uci-change-list del,
914 .uci-change-list ins {
922 border: 1px solid #D4D4D4 !important;
923 border-top: none !important;
927 border: 1px solid #999;
928 background-color: #f9f9f9;
936 padding: 0.2rem 0.5rem;
937 display: inline-block;
941 .zonebadge > .ifacebadge {
942 padding: 0.2rem 1rem;
944 border: 1px solid #6C6C6C;
947 .zonebadge > input[type="text"] {
948 padding: 0.16rem 1rem;
953 .cbi-value-field .cbi-input-checkbox,
954 .cbi-value-field .cbi-input-radio {
959 .cbi-value-field > input + .cbi-value-description {
963 .cbi-value-field > ul > li {
967 .cbi-value-field > ul > li > label {
971 .cbi-value-field > ul > li .ifacebadge {
972 background-color: #eee;
977 .cbi-section-table-row > .cbi-value-field .cbi-input-select {
981 .cbi-section-create > .cbi-button-add {
985 .cbi-section-remove {
989 div.cbi-value var, td.cbi-value-field var {
997 line-height: 1.42857143;
1002 display: inline-block;
1004 padding: 0.2rem 0.3rem;
1009 padding: 1rem 1rem 0 1rem;
1010 border-top: 1px solid #CCC;
1013 #diag-rc-output > pre {
1014 background-color: #f5f5f5;
1018 line-height: 1.5rem;
1019 -moz-border-radius: 3px;
1020 white-space: pre-wrap;
1021 word-wrap: break-word;
1027 input[name="traceroute"],
1028 input[name="nslookup"] {
1032 header > .container > .pull-right > * {
1038 #xhr_poll_status > .label.success {
1039 background-color: #14CE14;
1043 padding: 0.3rem 0.8rem;
1046 color: #ffffff !important;
1047 text-transform: uppercase;
1048 white-space: nowrap;
1049 background-color: #bfbfbf;
1050 -webkit-border-radius: 3px;
1051 -moz-border-radius: 3px;
1054 text-decoration: none;
1058 background-color: #5BC0DE;
1069 background-color: rgba(0, 0, 0, 0.56);
1076 .node-main-login > .main > .main-left {
1080 .node-main-login > .main > .main-right {
1084 .node-main-login > .main fieldset {
1086 margin-bottom: 1rem;
1094 .node-main-login > .main .cbi-value-title {
1098 .node-main-login > .main #maincontent {
1103 .node-main-login > .main .container {
1104 display: inline-block;
1106 margin-top: 2rem !important;
1107 background-color: #FFF;
1108 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
1112 .node-main-login > .main form > div:nth-last-child(1) {
1116 .node-main-login > .main .cbi-value {
1120 .node-main-login > .main .cbi-value > * {
1121 display: inline-block !important;
1124 .node-main-login > .main .cbi-input-user,
1125 .node-main-login > .main .cbi-input-password {
1129 .node-main-login footer {
1135 /* fix status overview */
1137 .node-status-overview > .main fieldset:nth-child(4) td:nth-child(2) {
1138 white-space: normal;
1141 /* fix status processes */
1143 .node-status-processes > .main table tr td:nth-child(3) {
1144 white-space: normal;
1147 .node-status-iptables > .main div > .cbi-map > form {
1148 margin: 2rem 2rem 0 0;
1151 /* fix system reboot */
1153 .node-system-reboot > .main > .main-right p,
1154 .node-system-reboot > .main > .main-right h3 {
1158 /* fix Services Network Shares*/
1159 .node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-title {
1160 margin-bottom: 1rem;
1164 .node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-field {
1168 .node-services-samba > .main .cbi-tabcontainer:nth-child(3) .cbi-value-description {
1172 /* fix System Software*/
1173 .node-system-packages > .main table tr td:nth-child(1) {
1174 width: auto !important;
1177 .node-system-packages > .main table tr td:nth-last-child(1) {
1178 white-space: normal;
1183 .node-system-packages > .main .cbi-tabmenu > li > a, .tabs > li > a {
1184 padding: 0.5rem 0.8rem;
1187 .node-system-packages > .main .cbi-value > pre {
1188 background-color: #eee;
1193 .cbi-tabmenu + .cbi-section {
1197 /* fix network firewall*/
1198 .node-network-firewall > .main .cbi-section-table-row > .cbi-value-field .cbi-input-select {
1202 .node-status-iptables fieldset,
1203 .node-system-packages fieldset,
1204 .node-system-flashops fieldset {
1208 .node-status-iptables .cbi-tabmenu,
1209 .node-system-packages .cbi-tabmenu,
1210 .node-system-flashops .cbi-tabmenu {
1212 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
1215 .node-system-flashops form.inline + form.inline {
1219 #cbi-firewall-redirect table *,
1220 #cbi-network-switch_vlan table *,
1221 #cbi-firewall-zone table * {
1225 #cbi-firewall-redirect table input[type="text"],
1226 #cbi-network-switch_vlan table input[type="text"],
1227 #cbi-firewall-zone table input[type="text"] {
1231 #cbi-firewall-redirect table select,
1232 #cbi-network-switch_vlan table select,
1233 #cbi-firewall-zone table select {
1238 body.lang_pl.node-main-login .cbi-value-title {
1242 @media screen and (max-width: 1600px) {
1244 width: calc(0% + 13rem);
1248 width: calc(100% - 13rem);
1252 padding: 0.3rem 0.6rem;
1256 header > .container > .pull-right > * {
1261 padding: 0.2rem 0.6rem;
1266 padding-right: 0.6rem;
1273 .cbi-input-textarea {
1277 .node-status-iptables > .main fieldset li > a {
1278 padding: 0.3rem 0.6rem;
1282 @media screen and (max-width: 1280px) {
1287 header > .container {
1288 margin-top: 0.25rem;
1293 height: calc(100% - 3.5rem);
1297 width: calc(0% + 13rem);
1299 height: calc(100% - 3.5rem);
1303 width: calc(100% - 13rem);
1306 .cbi-tabmenu > li > a, .tabs > li > a {
1307 padding: 0.2rem 0.5rem;
1312 padding-bottom: 1rem;
1316 font-size: 0.7rem !important;
1317 width: 100% !important;
1320 .main > .main-left > .nav > li,
1321 .main > .main-left > .nav > li a,
1322 .main > .main-left > .nav > .slide > .menu {
1326 .main > .main-left > .nav > .slide > .slide-menu > li > a {
1331 @media screen and (max-width: 992px) {
1344 margin-right: 0.5rem;
1345 display: inline-block;
1353 .node-main-login .showSide {
1354 display: none !important;
1359 padding-right: 1rem;
1362 .node-network-diagnostics > .main .cbi-map fieldset > div * {
1363 width: 100% !important;
1366 .node-network-diagnostics > .main .cbi-map fieldset > div input[type="text"] {
1367 margin: 3rem 0 0 0 !important;
1370 .node-network-diagnostics > .main .cbi-map fieldset > div:nth-child(4) input[type="text"] {
1371 margin: 0 !important;
1374 .node-network-diagnostics > .main .cbi-map fieldset > div select,
1375 .node-network-diagnostics > .main .cbi-map fieldset > div input[type="button"] {
1379 .node-network-diagnostics > .main .cbi-map fieldset > div {
1380 width: 100% !important;
1383 #diag-rc-output > pre {
1387 .node-main-login > .main .cbi-value-title {
1392 @media screen and (max-width: 480px) {
1406 #maincontent > .container {
1407 margin: 0 1rem 1.5rem 1rem;
1410 .main > .main-left > .nav > .slide > .menu {
1414 .main > .main-left > .nav > .slide > .slide-menu > li > a {
1420 min-width: 0rem !important;
1423 margin-bottom: 0.5rem;
1427 .cbi-value-field, .cbi-value-description {
1431 .cbi-value > .cbi-value-field {
1432 display: inline-block;
1435 .cbi-tabmenu > li, .tabs > li {
1436 padding: 0.6rem 0rem;
1439 .cbi-tabmenu > li > a, .tabs > li > a {
1440 padding: 0.2rem 0.3rem;
1444 .cbi-page-actions > div > input {
1448 .node-main-login > .main .container {
1449 padding: 0.5rem 1rem 2rem 1rem;
1452 .node-main-login > .main .cbi-value {
1456 .node-main-login > .main form > div:nth-last-child(1) {
1460 .node-main-login > .main .cbi-value-title {
1461 width: 100% !important;
1465 .node-main-login > .main fieldset {
1489 padding-bottom: 1rem;
1492 .node-system-packages > .main .cbi-value.cbi-value-last > div {
1493 width: 100% !important;
1496 .node-system-packages > .main .cbi-value .cbi-value-field input {
1500 .node-status-iptables > .main div > .cbi-map > form {
1501 position: static !important;
1505 font-weight: normal;
1508 font-family: inherit;
1513 background-color: #FFF;
1514 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
1515 -webkit-overflow-scrolling: touch;
1518 .node-status-iptables > .main div > .cbi-map > form input[type="submit"] {
1519 width: 100% !important;
1523 .node-status-iptables > .main div > .cbi-map > form input[type="submit"] + input[type="submit"] {
1528 @media screen and (min-width: 992px) {
1529 .cbi-value input[type="password"],
1530 .cbi-value input[type="text"] {
1534 .cbi-value-field .cbi-input-select {
1539 @media screen and (min-width: 1280px) {
1540 .cbi-value input[type="password"],
1541 .cbi-value input[type="text"] {
1545 .cbi-value-field .cbi-input-select {
1550 @media screen and (min-width: 1600px) {
1551 .cbi-value input[type="password"],
1552 .cbi-value input[type="text"] {
1556 .cbi-value-field .cbi-input-select {