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%;
74 font-family: "Helvetica Neue", Helvetica
, Microsoft Yahei
, Hiragino Sans GB
, WenQuanYi Micro Hei
, sans-serif
;
78 padding: 0.36rem 0.8rem;
80 background-color: #fff;
81 background-image: none
;
82 border: 1px solid
#ccc;
87 background-color: transparent
;
88 color: rgba
(0,0,0,.87);
90 border-bottom: 1px solid rgba
(0,0,0,.26);
95 background-image: none
;
100 select:not
([multiple
="multiple"]):focus
,
103 height: calc
(2rem + 1px);
105 border-color: #0099CC;
109 select
[multiple
="multiple"]{
119 text-decoration: underline
;
130 box-shadow: 0 2px 5px rgba
(0, 0, 0, .26);
131 transition: box-shadow
.2s;
142 text-shadow: 0px 0px 2px #BBB;
147 text-decoration: none
;
155 height: calc
(100% - 4rem);
164 background-color: rgb
(240, 240, 240);
168 .main > .loading > span{
176 .main > .loading > span > .loading-img:before{
180 .main > .loading > span > .loading-img{
181 animation: anim-rotate
2s infinite linear
;
182 margin-right: 0.2rem;
183 display: inline-block
;
186 @keyframes anim-rotate
{
188 -webkit-transform:rotate
(0);
189 -ms-transform:rotate
(0);
193 -webkit-transform:rotate
(360deg);
194 -ms-transform:rotate
(360deg);
195 transform:rotate
(360deg)
203 width: calc
(0% + 17rem);
205 height: calc
(100% - 4rem);
206 background-color: white
;
214 width: calc
(100% - 17rem);
217 background-color: #EEE;
220 .main-right > #maincontent{
221 background-color: #EEE;
237 header
> .container
{
239 padding: 0.5rem 1rem 0 1rem;
242 header
> .container
> .brand
{
245 text-decoration: none
;
247 vertical-align: text-bottom
;
251 background-color: #FF7D60 !important
;
263 font-family: inherit
;
267 background-color: #FFF;
268 box-shadow: 0 2px 2px 0 rgba
(0, 0, 0, .16), 0 0 2px 0 rgba
(0, 0, 0, .12);
273 background-color: #f0ad4e;
274 border-color: #eea236;
281 #maincontent > .container
> div:nth-child
(1).alert-message
.warning
> a
{
284 text-transform: none
;
285 display: inline-block
;
290 vertical-align: middle
;
291 touch-action: manipulation
;
293 -webkit-user-select: none
;
294 -moz-user-select: none
;
295 -ms-user-select: none
;
297 background-image: none
;
299 padding: 0.5rem 1rem;
301 line-height: 1.42857143;
303 background-color: #5bc0de;
304 border-color: #46b8da;
306 text-decoration: inherit
;
309 .main > .main-left > .nav {
313 .main > .main-left > .nav > li a {
318 .main > .main-left > .nav > li:nth-last-child(1) {
323 .main > .main-left > .nav > li {
324 padding: 0.5rem 1rem;
328 .main > .main-left > .nav > .slide {
332 .main > .main-left > .nav > .slide > ul {
336 .main > .main-left > .nav > .slide > .menu {
338 padding: 0.5rem 1rem;
339 text-decoration: none
;
344 .main
> .main-left
> .nav
> li:hover
,
345 .main > .main-left > .nav > .slide > .menu:hover {
349 .main > .main-left > .nav > .slide:hover {
353 .main > .main-left > .nav > .slide > .slide-menu > li {
354 padding: 0.4rem 2rem;
357 .main > .main-left > .nav > .slide > .slide-menu > .active {
358 background-color: #0099CC;
361 .main > .main-left > .nav > .slide > .slide-menu > li > a {
362 text-decoration: none
;
366 .main > .main-left > .nav > .slide > .slide-menu > .active > a {
370 .main > .main-left > .nav > .slide > .slide-menu > li:hover {
374 .main > .main-left > .nav > .slide > .slide-menu > .active:hover {
375 background-color: #0099CC;
380 list-style-type: none
;
383 #maincontent > .container
{
384 margin: 0 2rem 1rem 2rem;
389 padding-bottom: 10px;
390 border-bottom: 1px solid
#eee;
396 padding-bottom: 10px;
397 border-bottom: 1px solid
#eee;
403 padding-bottom: 10px;
417 font-family: inherit
;
424 background-color: #FFF;
425 box-shadow: 0 2px 2px 0 rgba
(0, 0, 0, .16), 0 0 2px 0 rgba
(0, 0, 0, .12);
427 -webkit-overflow-scrolling:touch
;
431 display: none
!important
;
434 fieldset
> fieldset
{
447 padding-bottom: 2rem;
448 border-bottom: 1px solid
#eee;
453 border-collapse: collapse
;
455 border: 1px solid
#eee;
458 table
> tbody
> tr
> td
, table
> tbody
> tr
> th
, table
> tfoot
> tr
> td
, table
> tfoot
> tr
> th
, table
> thead
> tr
> td
, table
> thead
> tr
> th
{
460 line-height: 1.42857143;
461 border-top: 1px solid
#ddd;
466 .cbi-section-table-cell {
470 .cbi-section-table-row {
474 fieldset
> table
> tbody
> tr:nth-of-type
(odd
) {
475 background-color: #f9f9f9;
478 /* fix progress bar */
483 width: 100% !important
;
484 height: 1.4rem !important
;
487 #memfree > div
> div
,
488 #membuff > div
> div
,
490 #memtotal > div
> div
{
491 height: 1.4rem !important
;
492 background-color: #0099CC !important
;
495 /* fix multiple table */
501 .cbi-value-field table {
505 td
> table
> tbody
> tr
> td
{
509 .cbi-value-field > table > tbody > tr > td {
516 -webkit-appearance: none
;
517 text-transform: uppercase
;
518 color: rgba
(0, 0, 0, 0.87);
519 background-color: #F0F0F0;
520 transition: all
0.2s ease-in-out
;
521 display: inline-block
;
522 padding: 0.5rem 1rem;
524 border-radius: 0.2rem;
526 -ms-touch-action: manipulation
;
527 touch-action: manipulation
;
528 background-image: none
;
530 vertical-align: middle
;
532 -webkit-user-select: none
;
533 -moz-user-select: none
;
534 -ms-user-select: none
;
537 width: auto
!important
;
543 color: rgba
(0, 0, 0, 0.87);
545 text-decoration: none
;
546 color: rgba
(0, 0, 0, 0.87);
551 box-shadow: 0 0px 2px rgba
(0, 0, 0, 0.12), 0 2px 2px rgba
(0, 0, 0, 0.2);
555 box-shadow: 0 10px 20px rgba
(0, 0, 0, 0.19), 0 6px 6px rgba
(0, 0, 0, 0.23);
558 .cbi-button:disabled {
560 pointer-events: none
;
565 .cbi-button + .cbi-button {
571 color: #fff !important
;
572 background-color: #f0ad4e !important
;
573 border-color: #eea236 !important
;
583 color: #fff !important
;
584 background-color: #337ab7 !important
;
585 border-color: #2e6da4 !important
;
591 color: #fff !important
;
592 background-color: #5bc0de !important
;
593 border-color: #46b8da !important
;
598 color: #fff !important
;
599 background-color: #d9534f !important
;
600 border-color: #d43f3a !important
;
604 text-decoration: none
;
611 padding-left: 0.5rem;
612 background-color: #FFFFFF;
617 display: inline-block
;
618 padding: 0.9rem 0rem;
621 .cbi-tabmenu
> li
> a
,
623 text-decoration: none
;
625 padding: 0.9rem 1.5rem;
628 .tabs
> li
[class
~="active"],
631 border-bottom: 0.2rem solid
#0099CC;
633 margin-bottom: -0.18751rem;
636 .tabs > li[class~="active"] > a {
641 border-bottom: 0.18751rem solid
#C9C9C9;
645 border-top: 1px solid
#D4D4D4;
646 border-left: 1px solid
#D4D4D4;
647 border-right: 1px solid
#D4D4D4;
650 .cbi-tabmenu > li:hover {
651 background-color: #F1F1F1;
654 .cbi-tabmenu > li[class~="cbi-tab"] {
655 background-color: white
;
659 background-color: #D4D4D4;
662 .cbi-section-node-tabbed {
665 border-bottom: 1px solid
#D4D4D4;
666 border-left: 1px solid
#D4D4D4;
667 border-right: 1px solid
#D4D4D4;
670 .cbi-tabcontainer > .cbi-value:nth-of-type(2n) {
671 background-color: #f9f9f9;
675 .cbi-value-description {
679 .cbi-value-helpicon > img {
683 .cbi-value-helpicon:before {
687 .cbi-value-description {
690 padding: 0.5rem 0 0 0;
694 word-wrap: break-word
;
705 display: inline-block
;
709 .cbi-section-table-descr
> .cbi-section-table-cell
,
710 .cbi-section-table-titles > .cbi-section-table-cell {
715 background-color: #eee;
718 .cbi-section-table .cbi-section-table-titles .cbi-section-table-cell {
719 width: auto
!important
;
737 text-align: left
!important
;
741 text-align: right
!important
;
745 display: inline-block
;
749 border-top: 1px solid
#eee;
755 .cbi-value input
[type
="password"],
756 .cbi-value input[type="text"] {
761 .cbi-value-field .cbi-input-select {
766 display: inline-flex
;
767 border-bottom: 1px solid
#CCCCCC;
768 padding: 0.5rem 1rem;
769 -webkit-box-shadow: inset
0 1px 0 rgba
(255, 255, 255, 0.2), 0 1px 2px rgba
(0, 0, 0, 0.05);
770 -moz-box-shadow: inset
0 1px 0 rgba
(255, 255, 255, 0.2), 0 1px 2px rgba
(0, 0, 0, 0.05);
771 box-shadow: inset
0 1px 0 rgba
(255, 255, 255, 0.2), 0 1px 2px rgba
(0, 0, 0, 0.05);
781 .cbi-input-textarea {
786 font-family: "Helvetica Neue", Helvetica
, Arial
, sans-serif
;
799 background-color: #FFF;
800 box-shadow: 0 2px 2px 0 rgba
(0, 0, 0, .16), 0 0 2px 0 rgba
(0, 0, 0, .12);
807 font-family: monospace
;
810 .uci-change-list ins
,
811 .uci-change-legend-label ins {
812 text-decoration: none
;
813 border: 1px solid
#00FF00;
814 background-color: #CCFFCC;
819 .uci-change-list del
,
820 .uci-change-legend-label del {
821 text-decoration: none
;
822 border: 1px solid
#FF0000;
823 background-color: #FFCCCC;
829 .uci-change-list var
,
830 .uci-change-legend-label var {
831 text-decoration: none
;
832 border: 1px solid
#CCCCCC;
833 background-color: #EEEEEE;
839 .uci-change-list var ins
,
840 .uci-change-list var del {
851 .uci-change-legend-label {
856 .uci-change-legend-label
> ins
,
857 .uci-change-legend-label
> del
,
858 .uci-change-legend-label > var {
866 .uci-change-legend-label var ins
,
867 .uci-change-legend-label var del {
872 .uci-change-list var
,
873 .uci-change-list del
,
874 .uci-change-list ins {
882 border: 1px solid
#D4D4D4 !important
;
883 border-top: none
!important
;
887 border: 1px solid
#999;
888 background-color: #f9f9f9;
896 padding: 0.2rem 0.5rem;
897 display: inline-block
;
901 .zonebadge > .ifacebadge {
902 padding: 0.2rem 1rem;
904 border: 1px solid
#6C6C6C;
907 .zonebadge > input[type="text"] {
908 padding: 0.16rem 1rem;
913 .cbi-value-field
.cbi-input-checkbox
,
914 .cbi-value-field .cbi-input-radio {
918 .cbi-section-table-row > .cbi-value-field .cbi-input-select {
922 .cbi-section-create > .cbi-button-add {
926 div
.cbi-value var
, td
.cbi-value-field var
{
938 display: inline-block
;
940 padding: 0.2rem 0.3rem;
945 padding: 1rem 1rem 0 1rem;
946 border-top: 1px solid
#CCC;
949 #diag-rc-output > pre
{
950 background-color: #f5f5f5;
955 -moz-border-radius: 3px;
956 white-space: pre-wrap
;
957 word-wrap: break-word
;
963 input
[name
="traceroute"],
964 input
[name
="nslookup"] {
968 header
> .container
> .pull-right
> * {
974 #xhr_poll_status > .label
.success
{
975 background-color: #14CE14;
979 padding: 0.3rem 0.8rem;
982 color: #ffffff !important
;
983 text-transform: uppercase
;
985 background-color: #bfbfbf;
986 -webkit-border-radius: 3px;
987 -moz-border-radius: 3px;
990 text-decoration: none
;
994 background-color: #5BC0DE;
1005 background-color: rgba
(0, 0, 0, 0.56);
1012 .node-main-login > .main > .main-left {
1016 .node-main-login > .main > .main-right {
1020 .node-main-login > .main fieldset {
1022 margin-bottom: 1rem;
1030 .node-main-login > .main .cbi-value-title {
1034 .node-main-login > .main #maincontent {
1039 .node-main-login > .main .container {
1040 display: inline-block
;
1042 margin-top: 2rem !important
;
1043 background-color: #FFF;
1044 box-shadow: 0 2px 2px 0 rgba
(0, 0, 0, .16), 0 0 2px 0 rgba
(0, 0, 0, .12);
1048 .node-main-login > .main form > div:nth-last-child(1) {
1052 .node-main-login > .main .cbi-value{
1056 .node-main-login > .main .cbi-value > *{
1057 display: inline-block
!important
;
1060 .node-main-login
> .main
.cbi-input-user
,
1061 .node-main-login > .main .cbi-input-password{
1065 .node-main-login footer{
1071 /* fix status overview */
1073 .node-status-overview > .main fieldset:nth-child(4) td:nth-child(2){
1074 white-space: normal
;
1078 /* fix status processes */
1080 .node-status-processes > .main table tr td:nth-child(3) {
1081 white-space: normal
;
1084 .node-status-firewall > .main fieldset li {
1085 display: inline-block
;
1089 /* fix system reboot */
1091 .node-system-reboot
> .main
> .main-right p
,
1092 .node-system-reboot > .main > .main-right h3 {
1096 /* fix Services Network Shares*/
1097 .node-services-network_shares > .main .cbi-tabcontainer:nth-child(3) .cbi-value-title {
1098 margin-bottom: 1rem;
1101 .node-services-network_shares > .main .cbi-tabcontainer:nth-child(3) .cbi-value-field {
1105 .node-services-network_shares > .main .cbi-tabcontainer:nth-child(3) .cbi-value-description {
1109 /* fix System Software*/
1110 .node-system-software > .main table tr td:nth-child(1) {
1111 width: auto
!important
;
1114 .node-system-software > .main table tr td:nth-last-child(1) {
1115 white-space: normal
;
1120 .node-system-software > .main .cbi-tabmenu > li > a, .tabs > li > a {
1121 padding: 0.5rem 1rem;
1124 .node-system-software > .main .cbi-value > pre {
1125 background-color: #eee;
1130 .cbi-tabmenu + .cbi-section {
1134 /* fix network firewall*/
1135 .node-network-firewall > .main .cbi-section-table-row > .cbi-value-field .cbi-input-select{
1139 .node-status-firewall fieldset
,
1140 .node-system-software fieldset
,
1141 .node-system-backup_flash_firmware fieldset {
1145 .node-status-firewall
.cbi-tabmenu
,
1146 .node-system-software
.cbi-tabmenu
,
1147 .node-system-backup_flash_firmware .cbi-tabmenu {
1149 box-shadow: 0 2px 2px 0 rgba
(0, 0, 0, .16), 0 0 2px 0 rgba
(0, 0, 0, .12);
1153 body
.lang_pl
.node-main-login
.cbi-value-title
{
1157 @media screen and
(max-width: 1600px) {
1159 width: calc
(0% + 15rem);
1163 width: calc
(100% - 15rem);
1167 padding: 0.3rem 0.6rem;
1172 header
> .container
> .pull-right
> * {
1177 padding: 0.2rem 0.6rem;
1188 .cbi-input-textarea {
1192 .node-status-firewall > .main fieldset li > a {
1193 padding: 0.3rem 0.6rem;
1197 @media screen and
(max-width: 1280px) {
1202 header
> .container
{
1203 margin-top: 0.25rem;
1208 height: calc
(100% - 3.5rem);
1212 width: calc
(0% + 13rem);
1214 height: calc
(100% - 3.5rem);
1218 width: calc
(100% - 13rem);
1221 .cbi-tabmenu > li > a, .tabs > li > a {
1222 padding: 0.2rem 0.5rem;
1227 padding-bottom: 1rem;
1231 font-size: 0.8rem !important
;
1234 .main
> .main-left
> .nav
> li
,
1235 .main
> .main-left
> .nav
> li a
,
1236 .main > .main-left > .nav > .slide > .menu {
1240 .main > .main-left > .nav > .slide > .slide-menu > li > a {
1245 @media screen and
(max-width: 992px) {
1258 margin-right: 0.5rem;
1259 display: inline-block
;
1267 .node-main-login .showSide {
1268 display: none
!important
;
1273 padding-right: 1rem;
1276 .node-network-diagnostics > .main .cbi-map fieldset > div * {
1277 width: 100% !important
;
1280 .node-network-diagnostics > .main .cbi-map fieldset > div input[type="text"] {
1281 margin: 3rem 0 0 0 !important
;
1284 .node-network-diagnostics > .main .cbi-map fieldset > div:nth-child(4) input[type="text"] {
1285 margin: 0 !important
;
1288 .node-network-diagnostics
> .main
.cbi-map fieldset
> div select
,
1289 .node-network-diagnostics > .main .cbi-map fieldset > div input[type="button"] {
1293 .node-network-diagnostics > .main .cbi-map fieldset > div {
1294 width: 100% !important
;
1297 #diag-rc-output > pre
{
1301 .node-main-login > .main .cbi-value-title {
1306 @media screen and
(max-width: 480px) {
1316 #maincontent > .container
{
1317 margin: 0 1rem 1.5rem 1rem;
1320 .main > .main-left > .nav > .slide > .menu {
1324 .main > .main-left > .nav > .slide > .slide-menu > li > a {
1330 min-width: 0rem !important
;
1333 margin-bottom: 0.5rem;
1337 .cbi-value-field, .cbi-value-description {
1341 .cbi-value > .cbi-value-field {
1342 display: inline-block
;
1345 .cbi-tabmenu > li, .tabs > li {
1346 padding: 0.6rem 0rem;
1349 .cbi-tabmenu > li > a, .tabs > li > a {
1350 padding: 0.2rem 0.3rem;
1354 .cbi-page-actions > div > input {
1358 .node-main-login > .main .container {
1359 padding: 0.5rem 1rem 2rem 1rem;
1362 .node-main-login > .main .cbi-value {
1366 .node-main-login > .main form > div:nth-last-child(1) {
1370 .node-main-login > .main .cbi-value-title {
1371 width: 100% !important
;
1375 .node-main-login > .main fieldset {
1399 padding-bottom: 1rem;
1402 .node-system-software > .main .cbi-value.cbi-value-last > div {
1403 width: 100% !important
;
1406 .node-system-software > .main .cbi-value .cbi-value-field input {
1411 @media screen and
(min-width: 992px) {
1412 .cbi-value input
[type
="password"],
1413 .cbi-value input[type="text"] {
1417 .cbi-value-field .cbi-input-select {
1422 @media screen and
(min-width: 1280px) {
1423 .cbi-value input
[type
="password"],
1424 .cbi-value input[type="text"] {
1428 .cbi-value-field .cbi-input-select {
1433 @media screen and
(min-width: 1600px) {
1434 .cbi-value input
[type
="password"],
1435 .cbi-value input[type="text"] {
1439 .cbi-value-field .cbi-input-select {