Merge pull request #2509 from shunjou/material-svg

luci-theme-material: icons and other changes

11 files changed, 604 insertions, 588 deletions

diff --git a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
index db5304b43..2a88ef375 100644
--- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
@@ -15,6 +15,9 @@
  *	MUI:
  *		https://github.com/muicss/mui
  *
+ *	Menu and loading spinner icons from IcoMoon:
+ *		https://icomoon.io
+ *
  *	Pure CSS ripple effect:
  *		https://github.com/mladenplavsic/css-ripple-effect
  *
@@ -26,20 +29,6 @@
  */
 @import url("custom.css");
 
-/*
- *	Font generate by Icomoon<icomoon.io>
- */
-@font-face {
-	font-family: "icomoon";
-	font-weight: normal;
-	font-style: normal;
-	src: url("fonts/font.eot");
-	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");
-}
-
 .table {
 	position: relative;
 	display: table;
@@ -143,20 +132,6 @@
 	flex: 10 10 300px !important;
 }
 
-.cbi-button-up,
-.cbi-button-down,
-.cbi-value-helpicon,
-.showSide {
-	font-family: "icomoon" !important;
-	font-weight: normal;
-	font-style: normal;
-	font-variant: normal;
-	line-height: 1;
-	text-transform: none;
-	-webkit-font-smoothing: antialiased;
-	speak: none;
-}
-
 * {
 	box-sizing: border-box;
 	margin: 0;
@@ -229,12 +204,12 @@ input,
 select,
 .cbi-dropdown {
 	width: inherit;
+	cursor: default;
 }
 
 select:not([multiple="multiple"]):focus,
 input:not(.cbi-button):focus,
-.cbi-dropdown:focus,
-.cbi-dynlist > .item:focus {
+.cbi-dropdown:focus {
 	border-color: #09c;
 	border-color: var(--main-color);
 }
@@ -298,6 +273,12 @@ footer > a {
 	color: #aaa;
 }
 
+small {
+	font-size: 90%;
+	line-height: 1.42857143;
+	white-space: normal;
+}
+
 .main {
 	position: relative;
 	top: 4rem;
@@ -320,7 +301,7 @@ footer > a {
 
 .main > .loading > span {
 	font-family: monospace;
-	font-size: 2.0rem;
+	font-size: 2rem;
 	font-size-adjust: .35;
 	position: relative;
 	top: 12.5%;
@@ -329,17 +310,16 @@ footer > a {
 	color: #888;
 }
 
-.main > .loading > span > .loading-img:before {
-	content: "\e603";
-}
-
 .main > .loading > span > .loading-img {
-	font-family: "icomoon" !important;
-	font-size: 1.0rem;
-	font-size-adjust: .6;
+	position: relative;
+	top: .1rem;
+	left: .05rem;
 	display: inline-block;
+	width: 1.25rem;
+	height: 1.25rem;
 	margin-right: 1rem;
 	animation: anim-rotate 2s infinite linear;
+	background: url(./icons/spinner.svg) no-repeat center;
 }
 
 @keyframes anim-rotate {
@@ -406,6 +386,9 @@ header {
 header > .fill > .container {
 	margin-top: .5rem;
 	padding: .5rem 1rem 0 1rem;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
 	user-select: none;
 }
 
@@ -508,12 +491,17 @@ header > .fill > .container > .status > * {
 .main > .main-left > .nav > li {
 	padding: .5rem 1rem;
 	cursor: pointer;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
 }
 
-.main > .main-left > .nav > li:nth-last-child(1) {
-	font-size: 1.2rem;
-	margin-top: 1rem;
-	margin-bottom: 1rem;
+.main > .main-left > .nav > li:last-child {
+	display: flex;
+	align-items: center;
+	margin: 2rem 0 1rem 0;
+	padding: 0 0 0 2rem;
 }
 
 .main > .main-left > .nav > li a {
@@ -530,15 +518,26 @@ header > .fill > .container > .status > * {
 	display: none;
 }
 
+.main > .main-left > .nav > .slide > .menu,
+.main > .main-left > .nav > li > [data-title="Logout"] {
+	font-size: 1.15rem;
+	font-weight: 500;
+	display: flex;
+	align-items: center;
+	width: 100%;
+	padding: .5rem 1rem;
+	text-decoration: none;
+	color: #202124;
+	color: var(--main-menu-color);
+}
+
 .main > .main-left > .nav > .slide > .menu::before {
 	position: absolute;
-	top: 30%;
 	right: 17px;
-	width: 1rem;
-	height: 1rem;
+	width: 16px;
+	height: 16px;
 	content: "";
-	background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAwIDEwMDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGQ9Ik01MDAsNjI1LjJMNzUuMywyNTVMMTAsMzE0LjlMNTAwLDc0NWw0OTAtNDMwLjFMOTI0LjcsMjU1TDUwMCw2MjUuMnoiLz48L2c+PC9zdmc+);
-	background-repeat: no-repeat;
+	background: url(./icons/arrow.svg) no-repeat;
 }
 
 .main > .main-left > .nav > .slide > .menu.active::before {
@@ -557,13 +556,12 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before
 	display: none;
 }
 
-.main > .main-left > .nav > .slide > .menu {
-	font-size: 1.15rem;
-	font-weight: 500;
-	display: block;
-	padding: .5rem 1rem;
-	text-decoration: none;
-	color: var(--menu-color);
+.main > .main-left > .nav > li:last-child::before {
+	position: absolute;
+	left: 14px;
+	width: 24px;
+	height: 24px;
+	content: url(./icons/logout.svg);
 }
 
 .main > .main-left > .nav > li:hover,
@@ -605,21 +603,22 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before
 }
 
 .main > .main-left > .nav > .slide > .slide-menu > .active:hover {
-	cursor: hand;
 	background-color: #09c;
 	background-color: var(--main-color);
 }
 
 /* ripple effect */
 .main > .main-left > .nav > .slide > .menu,
-.main > .main-left > .nav > .slide > .slide-menu > li {
+.main > .main-left > .nav > .slide > .slide-menu > li,
+.main > .main-left > .nav > li:last-child {
 	position: relative;
 	overflow: hidden;
 	transform: translate3d(0, 0, 0);
 }
 
-.main > .main-left > .nav > .slide > .menu:after,
-.main > .main-left > .nav > .slide > .slide-menu > li:after {
+.main > .main-left > .nav > .slide > .menu::after,
+.main > .main-left > .nav > .slide > .slide-menu > li::after,
+.main > .main-left > .nav > li:last-child::after {
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -636,8 +635,9 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before
 	background-position: 50%;
 }
 
-.main > .main-left > .nav > .slide > .menu:active:after,
-.main > .main-left > .nav > .slide > .slide-menu > li:active:after {
+.main > .main-left > .nav > .slide > .menu:active::after,
+.main > .main-left > .nav > .slide > .slide-menu > li:active::after,
+.main > .main-left > .nav > li:last-child:active::after {
 	transition: 0s;
 	transform: scale(0, 0);
 	opacity: .2;
@@ -647,10 +647,6 @@ body[class*="node-"] > .main > .main-left > .nav > .slide > .menu.active::before
 	margin: 0 2rem 1rem 2rem;
 }
 
-.Processes #maincontent > .container {
-	margin-right: 0;
-}
-
 ul {
 	line-height: normal;
 }
@@ -712,6 +708,14 @@ h5 {
 	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
 }
 
+.cbi-map-descr,
+.cbi-section-descr {
+	font-size: small;
+	line-height: 1.42857143;
+	padding: .5rem;
+	color: #999;
+}
+
 .cbi-map-descr + fieldset {
 	margin-top: 1rem;
 }
@@ -789,8 +793,6 @@ tr > th,
 	border-top: thin solid #ddd;
 }
 
-tr:first-child > td
-.tr:first-child > .td,
 #cbi-wireless .td,
 #cbi-network .tr:first-child > .td,
 .table[width="100%"] > .tr:first-child > .td,
@@ -800,6 +802,10 @@ tr:first-child > td
 	border-top: 0 !important;
 }
 
+.table[width="100%"] > .tr:first-child > .td {
+	margin: auto 0;
+}
+
 .cbi-section-table-row {
 	margin-bottom: 1rem;
 	text-align: center !important;
@@ -810,10 +816,10 @@ tr:first-child > td
 	margin-bottom: 0;
 }
 
+.cbi-section-table-row > .cbi-value-field .cbi-dropdown,
 .cbi-section-table-row > .cbi-value-field .cbi-input-select,
 .cbi-section-table-row > .cbi-value-field .cbi-input-text,
-.cbi-section-table-row > .cbi-value-field .cbi-input-password,
-.cbi-section-table-row > .cbi-value-field .cbi-dropdown {
+.cbi-section-table-row > .cbi-value-field .cbi-input-password {
 	width: 100%;
 }
 
@@ -833,20 +839,11 @@ div > .table > .tr:nth-of-type(2n) {
 
 /* fix multiple table */
 table table,
-.table .table {
-	border: 0;
-}
-
+.table .table,
 .cbi-value-field table,
-.cbi-value-field .table {
-	border: 0;
-}
-
+.cbi-value-field .table,
 td > table > tbody > tr > td,
-.td > .table > .tbody > .tr > .td {
-	border: 0;
-}
-
+.td > .table > .tbody > .tr > .td,
 .cbi-value-field > table > tbody > tr > td,
 .cbi-value-field > .table > .tbody > .tr > .td {
 	border: 0;
@@ -881,11 +878,25 @@ td > table > tbody > tr > td,
 	touch-action: manipulation;
 }
 
+.cbi-button-up,
+.cbi-button-down {
+	font-size: 1.2rem;
+	display: inline-block;
+	min-width: 0;
+	padding: .2rem .3rem;
+	color: transparent !important;
+	background: url(./icons/arrow.svg) no-repeat center;
+	background-size: 12px 20px;
+}
+
+.cbi-button-up {
+	transform: scaleY(-1);
+}
+
 .cbi-button:not(select) {
 	-webkit-appearance: none !important;
 }
 
-form[method="post"] + form[method="post"],
 .cbi-button + .cbi-button {
 	margin-left: .6rem;
 }
@@ -909,15 +920,27 @@ form[method="post"] + form[method="post"],
 .btn:hover,
 .btn:focus,
 .cbi-button:hover,
-.cbi-button:focus {
+.cbi-button:focus,
+.item:hover::after,
+.item:focus::after {
 	box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 2px 2px rgba(0, 0, 0, .2);
 }
 
 .btn:active,
-.cbi-button:active {
+.cbi-button:active,
+.item:active::after {
 	box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
 }
 
+.cbi-button-up:hover,
+.cbi-button-up:focus {
+	box-shadow: 0 0 2px rgba(0, 0, 0, .12), 0 -2px 2px rgba(0, 0, 0, .2);
+}
+
+.cbi-button-up:active {
+	box-shadow: 0 -10px 20px rgba(0, 0, 0, .19), 0 -6px 6px rgba(0, 0, 0, .23);
+}
+
 .btn:disabled,
 .cbi-button:disabled {
 	cursor: not-allowed;
@@ -968,6 +991,7 @@ form[method="post"] + form[method="post"],
 .cbi-button-reload,
 .cbi-button-action,
 .cbi-button[value="Submit"],
+.cbi-button[value="Upload"],
 .cbi-button[value$="Apply"],
 .cbi-button[onclick="addKey(event)"] {
 	font-weight: normal;
@@ -1010,7 +1034,7 @@ form[method="post"] + form[method="post"],
 .cbi-button-success,
 .cbi-button-download,
 .cbi-button[name="backup"],
-.cbi-button[value="Upload"],
+.cbi-button[value="Download"],
 .cbi-button[value="Save mtdblock"] {
 	font-weight: normal;
 	color: #fff;
@@ -1028,41 +1052,44 @@ form[method="post"] + form[method="post"],
 
 .cbi-value-field .cbi-button-add {
 	font-weight: bold;
+	margin: 9px 0 4px 3px;
 	padding: 1px 6px;
 }
 
-.cbi-value-field .cbi-button-neutral {
-	padding: 1px 8px;
-}
-
-/* table */
 .tabs {
 	margin: 0 -2rem;
 	padding-left: .5rem;
 	background-color: #fff;
 }
 
-.cbi-tabmenu > li,
-.tabs > li {
+.tabs > li,
+.cbi-tabmenu > li {
 	display: inline-block;
-	padding: .6rem 0;
+	padding: .55rem 0;
+	cursor: pointer;
 }
 
-.cbi-tabmenu > li > a,
-.tabs > li > a {
-	padding: .5rem .8rem;
-	text-decoration: none;
-	color: #404040;
+.tabs > li {
+	padding-bottom: .4rem;
+	border-bottom: .2rem solid transparent;
 }
 
 .tabs > li[class~="active"],
 .tabs > li:hover {
-	margin-bottom: -.18751rem;
+	border-bottom-color: #09c;
+	border-bottom-color: var(--main-color);
+}
+
+.tabs > li:hover {
 	cursor: pointer;
-	color: #09c;
-	color: var(--main-color);
-	border-bottom: #09c;
-	border-bottom: .2rem solid var(--main-color);
+	border-bottom-color: #c9c9c9;
+}
+
+.tabs > li > a,
+.cbi-tabmenu > li > a {
+	padding: .6rem .9rem;
+	text-decoration: none;
+	color: #404040;
 }
 
 .tabs > li[class~="active"] > a {
@@ -1070,10 +1097,6 @@ form[method="post"] + form[method="post"],
 	color: var(--main-color);
 }
 
-.tabs > li:hover {
-	border-bottom: .18751rem solid #c9c9c9;
-}
-
 .cbi-tabmenu {
 	border: thin solid #d4d4d4;
 	border-bottom: 0;
@@ -1097,15 +1120,15 @@ form[method="post"] + form[method="post"],
 }
 
 [data-tab-title] {
+	overflow: hidden;
 	height: 0;
 	opacity: 0;
-	overflow: hidden;
 }
 
 [data-tab-active="true"] {
-	opacity: 1;
-	height: auto;
 	overflow: visible;
+	height: auto;
+	opacity: 1;
 	transition: opacity .25s ease-in;
 }
 
@@ -1131,41 +1154,9 @@ form[method="post"] + form[method="post"],
 	display: table-cell;
 }
 
-.cbi-input-invalid {
-	color: #f00;
-	border-color: #f00;
-}
-
-.cbi-section-error {
-	font-weight: bold;
-	line-height: 1.42857143;
-	margin: 18px;
-	padding: 6px;
-	border: thin solid #f00;
-	border-radius: 3px;
-	background-color: #fce6e6;
-}
-
-.cbi-section-error ul {
-	margin: 0 0 0 20px;
-}
-
-.cbi-section-error ul li {
-	font-weight: bold;
-	color: #f00;
-}
-
-.cbi-value-helpicon > img {
-	display: none;
-}
-
-.cbi-value-helpicon:before {
-	content: "\f059";
-}
-
 .cbi-value-description {
 	font-size: small;
-	padding: .5rem 0 0 0;
+	padding-top: .4rem;
 	opacity: .5;
 }
 
@@ -1173,7 +1164,7 @@ form[method="post"] + form[method="post"],
 	display: table-cell;
 	float: left;
 	width: 23rem;
-	padding-top: .4rem;
+	padding-top: .35rem;
 	padding-right: 2rem;
 	text-align: right;
 	word-wrap: break-word;
@@ -1182,13 +1173,53 @@ form[method="post"] + form[method="post"],
 .cbi-value {
 	display: inline-block;
 	width: 100%;
-	padding: .3rem 1rem;
+	padding: .35rem 1rem .2rem 1rem;
 }
 
 .cbi-value ul {
 	line-height: 1.25;
 }
 
+.cbi-value-field .cbi-dropdown,
+.cbi-value-field .cbi-input-select,
+.cbi-value input[type="text"],
+.cbi-value input[type="password"] {
+	min-width: 25rem;
+}
+
+#cbi-firewall-zone .cbi-input-select,
+#cbi-network-switch_vlan .cbi-input-select {
+	min-width: 11rem;
+}
+
+#cbi-network-switch_vlan .cbi-input-text {
+	max-width: 3rem;
+}
+
+.cbi-input-invalid {
+	color: #f00;
+	border-bottom-color: #f00;
+}
+
+.cbi-section-error {
+	font-weight: bold;
+	line-height: 1.42857143;
+	margin: 18px;
+	padding: 6px;
+	border: thin solid #f00;
+	border-radius: 3px;
+	background-color: #fce6e6;
+}
+
+.cbi-section-error ul {
+	margin: 0 0 0 20px;
+}
+
+.cbi-section-error ul li {
+	font-weight: bold;
+	color: #f00;
+}
+
 .td[data-title]::before {
 	font-weight: bold;
 	display: none;
@@ -1226,7 +1257,7 @@ form[method="post"] + form[method="post"],
 
 .cbi-rowstyle-2 .cbi-button-up,
 .cbi-rowstyle-2 .cbi-button-down,
-.cbi-rowstyle-2:first-child {
+body:not(.Interfaces) .cbi-rowstyle-2:first-child {
 	background-color: #fff !important;
 }
 
@@ -1253,30 +1284,23 @@ form[method="post"] + form[method="post"],
 	margin: 0;
 }
 
-/* desc */
-.cbi-section-descr,
-.cbi-map-descr {
-	font-size: small;
-	line-height: 1.42857143;
-	padding: .5rem;
-	color: #999;
-}
-
+/* lists */
 .cbi-dynlist {
 	line-height: 1.3;
 	flex-direction: column;
 	min-height: 30px;
+	cursor: text;
 }
 
 .cbi-dynlist > .item {
 	position: relative;
-	max-width: 24.9rem;
-	margin: 0 2em 4px 0;
-	padding: 2px 4px;
-	cursor: default;
+	max-width: 25rem;
+	margin-right: 2em;
+	padding: .5em .25em .25em 0;
 	pointer-events: none;
 	color: #666;
 	border-bottom: 2px solid rgba(0, 0, 0, .26);
+	outline: 0;
 }
 
 .cbi-dynlist[name="sshkeys"] > .item {
@@ -1303,13 +1327,36 @@ form[method="post"] + form[method="post"],
 	word-break: break-word;
 }
 
+.cbi-dynlist > .add-item {
+	display: inline-flex;
+	align-items: center;
+	width: 100%;
+	min-width: 16rem;
+}
+
+.cbi-dynlist > .add-item:not([ondrop]) > input {
+	overflow: hidden;
+	width: 100%;
+	min-width: 15rem;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.cbi-dynlist > .add-item[ondrop] > input {
+	min-width: 13rem;
+}
+
 .cbi-dynlist,
 .cbi-dropdown {
 	position: relative;
 	display: inline-flex;
-	height: auto;
 	padding: 0;
-	cursor: default;
+}
+
+.cbi-dropdown[placeholder*="select"] {
+	max-width: 25rem;
+	height: auto;
+	margin-top: -3px;
 }
 
 .cbi-dropdown > ul {
@@ -1320,6 +1367,7 @@ form[method="post"] + form[method="post"],
 	margin: 0 !important;
 	padding: 0;
 	list-style: none;
+	outline: 0;
 }
 
 .cbi-dropdown > ul.preview {
@@ -1341,7 +1389,9 @@ form[method="post"] + form[method="post"],
 	flex-shrink: 0;
 	justify-content: center;
 	padding: 0 .25em;
+	cursor: default;
 	text-align: center;
+	outline: 0;
 }
 
 .cbi-dropdown > .more,
@@ -1402,10 +1452,6 @@ form[method="post"] + form[method="post"],
 	height: 20px;
 }
 
-.cbi-dropdown[open] {
-	position: relative;
-}
-
 .cbi-dropdown[open] > ul.dropdown {
 	position: absolute;
 	z-index: 1100;
@@ -1483,6 +1529,43 @@ form[method="post"] + form[method="post"],
 	width: auto;
 }
 
+/* progressbar */
+.cbi-progressbar {
+	position: relative;
+	min-width: 170px;
+	height: 20px;
+	margin: 6px 0;
+	border: thin solid #999;
+	background: #eee;
+}
+
+.cbi-progressbar > div {
+	width: 0;
+	height: 100%;
+	transition: width .25s ease-in;
+	background: #5bc0de;
+	background: var(--bar-bg);
+}
+
+.cbi-progressbar::after {
+	font-family: monospace;
+	font-size: 1.3em;
+	font-weight: bold;
+	font-size-adjust: .38;
+	line-height: normal;
+	position: absolute;
+	top: 2px;
+	right: 0;
+	bottom: 2px;
+	left: 0;
+	overflow: hidden;
+	content: attr(title);
+	text-align: center;
+	white-space: pre;
+	text-overflow: ellipsis;
+	text-shadow: 0 0 2px #eee;
+}
+
 #modal_overlay {
 	position: fixed;
 	z-index: 900;
@@ -1525,6 +1608,7 @@ form[method="post"] + form[method="post"],
 	overflow: auto;
 	margin-bottom: .5em;
 	padding: 8.5px;
+	cursor: auto;
 	white-space: pre-wrap;
 	color: #eee;
 	outline: 0;
@@ -1593,7 +1677,7 @@ body.modal-overlay-active #modal_overlay {
 	bottom: 0;
 	left: .2em;
 	width: 32px;
-	content: " ";
+	content: "";
 	background: url(../resources/icons/loading.gif) no-repeat center;
 	background-size: 16px;
 }
@@ -1641,60 +1725,6 @@ body.modal-overlay-active #modal_overlay {
 	display: inline-block;
 }
 
-/* input */
-.cbi-value input[type="password"],
-.cbi-value input[type="text"] {
-	min-width: 15rem;
-}
-
-/* select */
-.cbi-value-field .cbi-dropdown,
-.cbi-value-field .cbi-input-select {
-	min-width: 15rem;
-}
-
-.cbi-value-field .cbi-input-invalid {
-	color: #f00;
-	border-bottom-color: #f00;
-}
-
-/* progressbar */
-.cbi-progressbar {
-	position: relative;
-	min-width: 170px;
-	height: 20px;
-	margin: 4px 0;
-	border: thin solid #999;
-	background: #eee;
-}
-
-.cbi-progressbar > div {
-	width: 0;
-	height: 100%;
-	transition: width .25s ease-in;
-	background: #5bc0de;
-	background: var(--bar-bg);
-}
-
-.cbi-progressbar::after {
-	font-family: monospace;
-	font-size: 1.3em;
-	font-weight: bold;
-	font-size-adjust: .38;
-	line-height: normal;
-	position: absolute;
-	top: 2px;
-	right: 0;
-	bottom: 2px;
-	left: 0;
-	overflow: hidden;
-	content: attr(title);
-	text-align: center;
-	white-space: pre;
-	text-overflow: ellipsis;
-	text-shadow: 0 0 2px #eee;
-}
-
 .th[data-type="button"],
 .td[data-type="button"],
 .th[data-type="fvalue"],
@@ -1773,12 +1803,11 @@ td > .ifacebadge,
 
 #syslog {
 	font-size: small;
+	line-height: 1.25;
 	overflow-y: hidden;
 	width: 100%;
 	min-height: 15rem;
-	margin-bottom: 20px;
 	padding: 1rem;
-	padding-bottom: 2.5rem;
 	resize: none;
 	color: #eee;
 	border: 0;
@@ -1929,7 +1958,7 @@ td > .ifacebadge,
 
 .cbi-value-field .cbi-input-checkbox,
 .cbi-value-field .cbi-input-radio {
-	margin-top: .15rem;
+	margin-top: .1rem;
 }
 
 .cbi-value-field > ul > li {
@@ -1971,20 +2000,6 @@ td.cbi-value-field var,
 	color: #0069d6;
 }
 
-small {
-	font-size: 90%;
-	line-height: 1.42857143;
-	white-space: normal;
-}
-
-.cbi-button-up,
-.cbi-button-down {
-	font-size: 1.2rem;
-	display: inline-block;
-	min-width: 0;
-	padding: .2rem .3rem;
-}
-
 .cbi-optionals {
 	padding: 1rem 1rem 0 1rem;
 	border-top: thin solid #ccc;
@@ -2060,8 +2075,6 @@ span[data-tooltip] .label {
 	text-decoration: none;
 	text-transform: uppercase;
 	color: #fff !important;
-	-webkit-border-radius: 3px;
-	-moz-border-radius: 3px;
 	border-radius: 3px;
 	background-color: #bfbfbf;
 	text-shadow: none;
@@ -2092,11 +2105,13 @@ label > input[type="radio"] {
 
 /* diagnostics */
 #diag-rc-output > pre,
-#command-rc-output > pre {
+#command-rc-output > pre,
+[data-page="admin-services-wol"] .notice code {
 	font-size: 1.2rem;
 	font-size-adjust: .35;
 	line-height: normal;
 	display: block;
+	overflow-y: hidden;
 	width: 100%;
 	padding: 8.5px;
 	white-space: pre;
@@ -2151,7 +2166,7 @@ input[name="nslookup"] {
 	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
 }
 
-.node-main-login > .main form > div:nth-last-child(1) {
+.node-main-login > .main form > div:last-child {
 	float: right;
 }
 
@@ -2164,6 +2179,7 @@ input[name="nslookup"] {
 }
 
 .node-main-login > .main .cbi-input-text {
+	width: 100% !important;
 	min-width: 15rem;
 }
 
@@ -2179,20 +2195,12 @@ input[name="nslookup"] {
 	}
 }
 
-/* fix status overview */
-.node-status-overview > .main fieldset:nth-child(4) .td:nth-child(2) {
-	white-space: normal;
-}
-
-/* fix status processes */
+/* fix status */
+.node-status-overview > .main fieldset:nth-child(4) .td:nth-child(2),
 .node-status-processes > .main .table .tr .td:nth-child(3) {
 	white-space: normal;
 }
 
-.node-admin-status form {
-	margin: 2rem 2rem 0 0;
-}
-
 /* fix system reboot */
 [data-page="admin-system-reboot"] p {
 	padding-left: 2rem;
@@ -2205,11 +2213,11 @@ input[name="nslookup"] {
 }
 
 /* samba */
-#cbi-samba .cbi-value-last .cbi-value-field {
+#cbi-samba [data-tab="template"] .cbi-value-field {
 	display: block;
 }
 
-#cbi-samba .cbi-value-last .cbi-value-title {
+#cbi-samba [data-tab="template"] .cbi-value-title {
 	width: auto;
 	padding-bottom: .6rem;
 }
@@ -2287,6 +2295,7 @@ input[name="nslookup"] {
 }
 
 .Firewall form {
+	margin: 2rem 2rem 0 0;
 	padding: 0;
 	box-shadow: none;
 }
@@ -2319,7 +2328,8 @@ input[name="nslookup"] {
 	display: block;
 }
 
-#cbi-firewall-zone .td.cbi-section-actions {
+#cbi-firewall-zone .td,
+#cbi-network-switch_vlan .td {
 	width: 100%;
 }
 
@@ -2341,6 +2351,7 @@ input[name="nslookup"] {
 /* custom commands */
 .commandbox {
 	width: 24% !important;
+	margin: 10px 0 0 10px !important;
 	padding: .5rem 1rem;
 	border-bottom: thin solid #ccc;
 	background: #eee;
@@ -2361,16 +2372,20 @@ input[name="nslookup"] {
 
 .commandbox code {
 	position: absolute;
-	overflow-x: hidden;
-	overflow-y: auto;
+	overflow: hidden;
 	max-width: 60%;
-	max-height: 55px;
-	margin-top: -3px;
 	margin-left: 4px;
 	padding: 2px 3px;
+	white-space: nowrap;
 	text-overflow: ellipsis;
 }
 
+.commandbox code:hover {
+	overflow-y: auto;
+	max-height: 50px;
+	white-space: normal;
+}
+
 .commandbox p:first-of-type {
 	margin-top: -6px;
 }
@@ -2381,7 +2396,7 @@ input[name="nslookup"] {
 
 [data-page^="admin-system-commands"] .panel-title,
 [data-page^="command-cfg"] .mobile-hide,
-[data-page^="command-cfg"] header > .fill > .container > #logo {
+[data-page^="command-cfg"] .showSide {
 	display: none;
 }
 
@@ -2393,6 +2408,7 @@ input[name="nslookup"] {
 	max-width: 40%;
 	margin: 0;
 	animation: anim-fade-in 1.5s forwards;
+	word-break: break-word;
 	opacity: 0;
 }
 
@@ -2402,6 +2418,21 @@ input[name="nslookup"] {
 	}
 }
 
+/* IE hacks */
+@media all and (-ms-high-contrast: none) {
+	.main > .main-left > .nav > .slide > .menu::before {
+		top: 30.25%;
+	}
+
+	.main > .main-left > .nav > li:last-child::before {
+		top: 20%;
+	}
+
+	.showSide::before {
+		top: -12px;
+	}
+}
+
 @media screen and (max-width: 1600px) {
 	header > .fill > .container > #logo {
 		margin: 0 2.5rem 0 .5rem;
@@ -2415,10 +2446,6 @@ input[name="nslookup"] {
 		width: calc(100% - 13rem);
 	}
 
-	.cbi-dynlist > .item {
-		max-width: 21.9rem;
-	}
-
 	.btn:not(button),
 	.cbi-button {
 		font-size: .8rem;
@@ -2429,14 +2456,25 @@ input[name="nslookup"] {
 		padding: .2rem .6rem;
 	}
 
+	fieldset,
+	.cbi-section {
+		padding: 1rem;
+	}
+
 	.cbi-value-title {
 		width: 15rem;
 		padding-right: .6rem;
 	}
 
-	fieldset,
-	.cbi-section {
-		padding: 1rem;
+	.cbi-value-field .cbi-dropdown,
+	.cbi-value-field .cbi-input-select,
+	.cbi-value input[type="text"],
+	.cbi-value input[type="password"] {
+		min-width: 22rem;
+	}
+
+	#cbi-firewall-zone .cbi-input-select {
+		min-width: 9rem;
 	}
 
 	.cbi-input-textarea {
@@ -2446,10 +2484,6 @@ input[name="nslookup"] {
 	.node-admin-status > .main fieldset li > a {
 		padding: .3rem .6rem;
 	}
-
-	#cbi-firewall-zone > .table {
-		display: block;
-	}
 }
 
 @media screen and (max-width: 1366px) {
@@ -2477,12 +2511,8 @@ input[name="nslookup"] {
 		width: calc(100% - 13rem);
 	}
 
-	.cbi-dynlist > .item {
-		max-width: 19.9rem;
-	}
-
-	.cbi-tabmenu > li > a,
-	.tabs > li > a {
+	.tabs > li > a,
+	.cbi-tabmenu > li > a {
 		padding: .2rem .5rem;
 	}
 
@@ -2500,9 +2530,21 @@ input[name="nslookup"] {
 		width: 100%;
 	}
 
+	.cbi-value-field .cbi-dropdown,
+	.cbi-value-field .cbi-input-select,
+	.cbi-value input[type="text"],
+	.cbi-value input[type="password"] {
+		min-width: 19rem;
+	}
+
+	#cbi-firewall-zone .cbi-input-select {
+		min-width: 4rem;
+	}
+
 	.main > .main-left > .nav > li,
 	.main > .main-left > .nav > li a,
-	.main > .main-left > .nav > .slide > .menu {
+	.main > .main-left > .nav > .slide > .menu,
+	.main > .main-left > .nav > li > [data-title="Logout"] {
 		font-size: .9rem;
 	}
 
@@ -2520,7 +2562,8 @@ input[name="nslookup"] {
 
 	[data-page="admin-network-firewall-forwards"] .table:not(.cbi-section-table),
 	[data-page="admin-network-firewall-rules"] .table:not(.cbi-section-table),
-	[data-page="admin-network-hosts"] .table {
+	[data-page="admin-network-hosts"] .table,
+	[data-page="admin-network-routes"] .table {
 		overflow-y: visible;
 	}
 
@@ -2538,16 +2581,15 @@ input[name="nslookup"] {
 		position: relative;
 	}
 
-	[data-page^="command-cfg"] header > .fill > .container > .brand {
-		display: block;
-		margin-top: -1.75rem;
-	}
-
 	html,
 	.main {
 		overflow-y: visible;
 	}
 
+	.main > .loading > span {
+		top: 25%;
+	}
+
 	.main-left {
 		position: fixed;
 		z-index: 100;
@@ -2558,29 +2600,30 @@ input[name="nslookup"] {
 		width: 100%;
 	}
 
-	.cbi-dynlist > .item {
-		max-width: 14.9rem;
-	}
-
 	.showSide {
-		display: inline-block;
-		overflow: visible;
-		margin-right: .5rem;
-		padding: .1rem;
+		position: relative;
+		top: .18rem;
+		display: inline-flex;
+		align-items: center;
+		width: 1.6rem;
+		height: 1.6rem;
+		margin-right: .7rem;
 		cursor: pointer;
-		border-radius: 50%;
 	}
 
-	.showSide:before {
-		font-size: 1.7rem;
-		content: "\e20e";
+	.showSide::before {
+		position: absolute;
+		left: 1px;
+		width: 24px;
+		height: 24px;
+		content: "";
+		background: url(./icons/menu.svg) no-repeat center;
 	}
 
 	body:not(.logged-in) .showSide {
 		visibility: hidden;
 		width: 0;
 		margin: 0;
-		padding: 0;
 	}
 
 	.node-main-login > .main .cbi-value-title {
@@ -2588,12 +2631,27 @@ input[name="nslookup"] {
 	}
 
 	.cbi-value-title {
-		width: 9rem;
+		width: 12rem;
 		padding-right: 1rem;
 	}
 
+	.cbi-value-field .cbi-dropdown,
+	.cbi-value-field .cbi-input-select,
+	.cbi-value input[type="text"] {
+		width: 16rem;
+		min-width: 16rem;
+	}
+
+	.cbi-value input[type="password"],
+	.cbi-value input[name^="pw"],
+	.cbi-value input[data-update="change"]:nth-child(2) {
+		width: 13rem !important;
+		min-width: 13rem;
+	}
+
 	#diag-rc-output > pre,
-	#command-rc-output > pre {
+	#command-rc-output > pre,
+	[data-page="admin-services-wol"] .notice code {
 		font-size: 1rem;
 	}
 
@@ -2601,6 +2659,10 @@ input[name="nslookup"] {
 		display: block;
 	}
 
+	.Interfaces .table {
+		overflow-x: hidden;
+	}
+
 	#packages.table {
 		display: grid;
 	}
@@ -2733,6 +2795,7 @@ input[name="nslookup"] {
 
 	.commandbox {
 		width: 100% !important;
+		margin-left: 0 !important;
 	}
 }
 
@@ -2749,7 +2812,6 @@ input[name="nslookup"] {
 	fieldset,
 	.cbi-section {
 		margin: 1rem 0 0 0;
-		padding: 1rem;
 	}
 
 	.tabs {
@@ -2760,7 +2822,8 @@ input[name="nslookup"] {
 		margin: 0 1rem 1.5rem 1rem;
 	}
 
-	.main > .main-left > .nav > .slide > .menu {
+	.main > .main-left > .nav > .slide > .menu,
+	.main > .main-left > .nav > li > [data-title="Logout"] {
 		font-size: 1.2rem;
 	}
 
@@ -2770,15 +2833,17 @@ input[name="nslookup"] {
 
 	.cbi-value-title {
 		display: block;
-		width: 100%;
 		min-width: 0 !important;
-		margin-top: 1rem;
-		margin-bottom: .5rem;
+		margin: .5rem 0;
 		text-align: left;
 	}
 
+	.cbi-value-title,
+	.cbi-value-description,
 	.cbi-value-field,
-	.cbi-value-description {
+	.cbi-value-field .cbi-dropdown,
+	.cbi-value-field .cbi-input-select,
+	.cbi-value input[type="text"] {
 		width: 100%;
 	}
 
@@ -2786,13 +2851,8 @@ input[name="nslookup"] {
 		display: inline-block;
 	}
 
-	.cbi-tabmenu > li,
-	.tabs > li {
-		padding: .6rem 0;
-	}
-
-	.cbi-tabmenu > li > a,
-	.tabs > li > a {
+	.tabs > li > a,
+	.cbi-tabmenu > li > a {
 		font-size: .9rem;
 		padding: .2rem .3rem;
 	}
@@ -2814,7 +2874,7 @@ input[name="nslookup"] {
 		padding: 0;
 	}
 
-	.node-main-login > .main form > div:nth-last-child(1) {
+	.node-main-login > .main form > div:last-child {
 		margin-top: 2rem;
 	}
 
@@ -2832,9 +2892,11 @@ input[name="nslookup"] {
 		margin-top: -8px;
 	}
 
+	#syslog,
 	#diag-rc-output > pre,
-	#command-rc-output > pre {
-		font-size: .8rem;
+	#command-rc-output > pre,
+	[data-page="admin-services-wol"] .notice code {
+		font-size: .8rem !important;
 	}
 
 	h2 {
@@ -2896,10 +2958,21 @@ input[name="nslookup"] {
 		font-size: .62rem;
 	}
 
-	#cbi-wireless .td {
+	#cbi-wireless > #wifi_assoclist_table .td {
 		overflow: hidden;
 	}
 
+	#cbi-wireless > .cbi-section-node .td,
+	.Interfaces .td.cbi-section-actions {
+		text-align: center !important;
+	}
+
+	[data-page="admin-status-processes"] .td[data-title="Hang Up"]::before,
+	[data-page="admin-status-processes"] .td[data-title="Terminate"]::before,
+	[data-page="admin-status-processes"] .td[data-title="Kill"]::before {
+		display: none;
+	}
+
 	.hide-sm,
 	.hide-xs:not([data-title="MAC-Address"]) {
 		display: none;
@@ -2910,6 +2983,10 @@ input[name="nslookup"] {
 	::-webkit-scrollbar {
 		width: 10px;
 		height: 10px;
+	}
+
+	::-webkit-scrollbar,
+	::-webkit-scrollbar-corner {
 		background: transparent;
 	}
 
@@ -2925,52 +3002,3 @@ input[name="nslookup"] {
 		background: #424242;
 	}
 }
-
-@media screen and (min-width: 1152px) {
-	.cbi-value input[type="password"],
-	.cbi-value input[type="text"] {
-		min-width: 20rem;
-	}
-
-	.cbi-value-field .cbi-input-select {
-		width: 20rem;
-	}
-
-	.cbi-value-field .cbi-dropdown {
-		min-width: 20rem;
-	}
-
-	.cbi-section-node .tr {
-		overflow: hidden;
-	}
-}
-
-@media screen and (min-width: 1366px) {
-	.cbi-value input[type="password"],
-	.cbi-value input[type="text"] {
-		min-width: 22rem;
-	}
-
-	.cbi-value-field .cbi-input-select {
-		width: 22rem;
-	}
-
-	.cbi-value-field .cbi-dropdown {
-		min-width: 22rem;
-	}
-}
-
-@media screen and (min-width: 1600px) {
-	.cbi-value input[type="password"],
-	.cbi-value input[type="text"] {
-		min-width: 25rem;
-	}
-
-	.cbi-value-field .cbi-input-select {
-		width: 25rem;
-	}
-
-	.cbi-value-field .cbi-dropdown {
-		min-width: 25rem;
-	}
-}
diff --git a/themes/luci-theme-material/htdocs/luci-static/material/custom.css b/themes/luci-theme-material/htdocs/luci-static/material/custom.css
index 6acd5aa3d..7a5bbb93e 100644
--- a/themes/luci-theme-material/htdocs/luci-static/material/custom.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/custom.css
@@ -6,6 +6,7 @@
 	--menu-bg-color: #fff;
 	--menu-color: #5f6368;
 	--menu-color-hover: #202124;
+	--main-menu-color: #202124;
 	--submenu-bg-hover: #d4d4d4;
 	--submenu-bg-hover-active: #09c;
 	--font-body: "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB";
diff --git a/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.eot b/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.eot
deleted file mode 100644
index 9e6ffc9b8..000000000
--- a/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.eot
+++ /dev/null
diff --git a/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.svg b/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.svg
deleted file mode 100644
index d38d057da..000000000
--- a/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Generated by IcoMoon</metadata>
-<defs>
-<font id="icomoon" horiz-adv-x="1024">
-<font-face units-per-em="1024" ascent="960" descent="-64" />
-<missing-glyph horiz-adv-x="1024" />
-<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
-<glyph unicode="&#xe20a;" glyph-name="expand_less" d="M512 596.667l256-256-60-60-196 196-196-196-60 60z" />
-<glyph unicode="&#xe20b;" glyph-name="expand_more" d="M708 572.667l60-60-256-256-256 256 60 60 196-196z" />
-<glyph unicode="&#xe20e;" glyph-name="menu" d="M128 682.667h768v-86h-768v86zM128 384.667v84h768v-84h-768zM128 170.667v86h768v-86h-768z" />
-<glyph unicode="&#xe291;" glyph-name="favorite" d="M512 28.667l-62 56q-106 96-154 142t-107 114-81 123-22 113q0 98 67 166t167 68q116 0 192-90 76 90 192 90 100 0 167-68t67-166q0-78-52-162t-113-146-199-186z" />
-<glyph unicode="&#xe603;" glyph-name="spinner9" d="M512 960c-278.748 0-505.458-222.762-511.848-499.974 5.92 241.864 189.832 435.974 415.848 435.974 229.75 0 416-200.576 416-448 0-53.020 42.98-96 96-96s96 42.98 96 96c0 282.77-229.23 512-512 512zM512-64c278.748 0 505.458 222.762 511.848 499.974-5.92-241.864-189.832-435.974-415.848-435.974-229.75 0-416 200.576-416 448 0 53.020-42.98 96-96 96s-96-42.98-96-96c0-282.77 229.23-512 512-512z" />
-<glyph unicode="&#xf059;" glyph-name="question-circle" horiz-adv-x="878" d="M512 164.571v109.714q0 8-5.143 13.143t-13.143 5.143h-109.714q-8 0-13.143-5.143t-5.143-13.143v-109.714q0-8 5.143-13.143t13.143-5.143h109.714q8 0 13.143 5.143t5.143 13.143zM658.286 548.571q0 50.286-31.714 93.143t-79.143 66.286-97.143 23.429q-138.857 0-212-121.714-8.571-13.714 4.571-24l75.429-57.143q4-3.429 10.857-3.429 9.143 0 14.286 6.857 30.286 38.857 49.143 52.571 19.429 13.714 49.143 13.714 27.429 0 48.857-14.857t21.429-33.714q0-21.714-11.429-34.857t-38.857-25.714q-36-16-66-49.429t-30-71.714v-20.571q0-8 5.143-13.143t13.143-5.143h109.714q8 0 13.143 5.143t5.143 13.143q0 10.857 12.286 28.286t31.143 28.286q18.286 10.286 28 16.286t26.286 20 25.429 27.429 16 34.571 7.143 46.286zM877.714 438.857q0-119.429-58.857-220.286t-159.714-159.714-220.286-58.857-220.286 58.857-159.714 159.714-58.857 220.286 58.857 220.286 159.714 159.714 220.286 58.857 220.286-58.857 159.714-159.714 58.857-220.286z" />
-</font></defs></svg>
\ No newline at end of file
diff --git a/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.ttf b/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.ttf
deleted file mode 100644
index 84669323e..000000000
--- a/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.ttf
+++ /dev/null
diff --git a/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.woff b/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.woff
deleted file mode 100644
index 00cf84ea0..000000000
--- a/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.woff
+++ /dev/null
diff --git a/themes/luci-theme-material/htdocs/luci-static/material/icons/arrow.svg b/themes/luci-theme-material/htdocs/luci-static/material/icons/arrow.svg
new file mode 100644
index 000000000..be864c5ac
--- /dev/null
+++ b/themes/luci-theme-material/htdocs/luci-static/material/icons/arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#202124" d="m8,10.033663l-6.898535,-6.013274l-1.060688,0.972974l7.959223,6.986249l7.959223,-6.986249l-1.060688,-0.972974l-6.898535,6.013274z"/></svg>
\ No newline at end of file
diff --git a/themes/luci-theme-material/htdocs/luci-static/material/icons/logout.svg b/themes/luci-theme-material/htdocs/luci-static/material/icons/logout.svg
new file mode 100644
index 000000000..d529b94e6
--- /dev/null
+++ b/themes/luci-theme-material/htdocs/luci-static/material/icons/logout.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#202124" d="M10.09,15.59L11.5,17l5,-5,-5,-5,-1.41,1.41L12.67,11H3v2h9.67l-2.58,2.59zM19,3H5c-1.11,0,-2,0.9,-2,2v4h2V5h14v14H5v-4H3v4c0,1.1,0.89,2,2,2h14c1.1,0,2,-0.9,2,-2V5c0,-1.1,-0.9,-2,-2,-2z"/></svg>
\ No newline at end of file
diff --git a/themes/luci-theme-material/htdocs/luci-static/material/icons/menu.svg b/themes/luci-theme-material/htdocs/luci-static/material/icons/menu.svg
new file mode 100644
index 000000000..46bd0ae68
--- /dev/null
+++ b/themes/luci-theme-material/htdocs/luci-static/material/icons/menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="m2.037076,18.641983l19.925899,0l0,-2.231286l-19.925899,0l0,2.231286zm0,-7.731664l0,2.179395l19.925899,0l0,-2.179395l-19.925899,0zm0,-5.552269l0,2.231286l19.925899,0l0,-2.231286l-19.925899,0z"/></svg>
\ No newline at end of file
diff --git a/themes/luci-theme-material/htdocs/luci-static/material/icons/spinner.svg b/themes/luci-theme-material/htdocs/luci-static/material/icons/spinner.svg
new file mode 100644
index 000000000..6ddd3b3ed
--- /dev/null
+++ b/themes/luci-theme-material/htdocs/luci-static/material/icons/spinner.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#888" d="M8,0c-4.355,0-7.898,3.481-7.998,7.812,0.092-3.779,2.966-6.812,6.498-6.812,3.59,0,6.5,3.134,6.5,7,0,0.828,0.672,1.5,1.5,1.5s1.5-0.672,1.5-1.5c0-4.418-3.582-8-8-8zM8,16c4.355,0,7.898-3.481,7.998-7.812-0.092,3.779-2.966,6.812-6.498,6.812-3.59,0-6.5-3.134-6.5-7,0-0.828-0.672-1.5-1.5-1.5s-1.5,0.672-1.5,1.5c0,4.418,3.582,8,8,8z"/></svg>
\ No newline at end of file
diff --git a/themes/luci-theme-material/htdocs/luci-static/material/js/script.js b/themes/luci-theme-material/htdocs/luci-static/material/js/script.js
index db9c99e11..755191f33 100755
--- a/themes/luci-theme-material/htdocs/luci-static/material/js/script.js
+++ b/themes/luci-theme-material/htdocs/luci-static/material/js/script.js
@@ -1,219 +1,218 @@
 /**
- *  Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
+ *	Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
  *
- *  luci-theme-material
- *      Copyright 2015 Lutty Yang <lutty@wcan.in>
+ *	luci-theme-material
+ *		Copyright 2015 Lutty Yang <lutty@wcan.in>
  *
- *  Have a bug? Please create an issue here on GitHub!
- *      https://github.com/LuttyYang/luci-theme-material/issues
+ *	Have a bug? Please create an issue here on GitHub!
+ *		https://github.com/LuttyYang/luci-theme-material/issues
  *
- *  luci-theme-bootstrap:
- *      Copyright 2008 Steven Barth <steven@midlink.org>
- *      Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
- *      Copyright 2012 David Menting <david@nut-bolt.nl>
+ *	luci-theme-bootstrap:
+ *		Copyright 2008 Steven Barth <steven@midlink.org>
+ *		Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
+ *		Copyright 2012 David Menting <david@nut-bolt.nl>
  *
- *  MUI:
- *      https://github.com/muicss/mui
+ *	MUI:
+ *		https://github.com/muicss/mui
  *
- *  Licensed to the public under the Apache License 2.0
+ *	Licensed to the public under the Apache License 2.0
  */
+
 (function ($) {
-    $(".main > .loading").fadeOut();
-
-    /**
-     * trim text, Remove spaces, wrap
-     * @param text
-     * @returns {string}
-     */
-    function trimText(text) {
-        return text.replace(/[ \t\n\r]+/g, " ");
-    }
-
-
-    var lastNode = undefined;
-    var mainNodeName = undefined;
-
-    var nodeUrl = "";
-    (function(node){
-        var luciLocation;
-        if (node[0] == "admin"){
-            luciLocation = [node[1], node[2]];
-        }else{
-            luciLocation = node;
-        }
-
-        for(var i in luciLocation){
-            nodeUrl += luciLocation[i];
-            if (i != luciLocation.length - 1){
-                nodeUrl += "/";
-            }
-        }
-    })(luciLocation);
-
-    /**
-     * get the current node by Burl (primary)
-     * @returns {boolean} success?
-     */
-    function getCurrentNodeByUrl() {
-        var ret = false;
-        if (!$('body').hasClass('logged-in')) {
-            luciLocation = ["Main", "Login"];
-            return true;
-        }
-
-        $(".main > .main-left > .nav > .slide > .menu").each(function () {
-            var ulNode = $(this);
-            ulNode.next().find("a").each(function () {
-                var that = $(this);
-                var href = that.attr("href");
-
-                if (href.indexOf(nodeUrl) != -1) {
-                    ulNode.click();
-                    ulNode.next(".slide-menu").stop(true, true);
-                    lastNode = that.parent();
-                    lastNode.addClass("active");
-                    ret = true;
-                    return true;
-                }
-            });
-        });
-        return ret;
-    }
-
-    /**
-     * menu click
-     */
-    $(".main > .main-left > .nav > .slide > .menu").click(function () {
-        var ul = $(this).next(".slide-menu");
-        var menu = $(this);
-        if (!ul.is(":visible")) {
-            menu.addClass("active");
-            ul.addClass("active");
-            ul.stop(true).slideDown("fast");
-        } else {
-            ul.stop(true).slideUp("fast", function () {
-                menu.removeClass("active");
-                ul.removeClass("active");
-            });
-        }
-        return false;
-    });
-
-    /**
-     * hook menu click and add the hash
-     */
-    $(".main > .main-left > .nav > .slide > .slide-menu > li > a").click(function () {
-        if (lastNode != undefined) lastNode.removeClass("active");
-        $(this).parent().addClass("active");
-        $(".main > .loading").fadeIn("fast");
-        return true;
-    });
-
-    /**
-     * fix menu click
-     */
-    $(".main > .main-left > .nav > .slide > .slide-menu > li").click(function () {
-        if (lastNode != undefined) lastNode.removeClass("active");
-        $(this).addClass("active");
-        $(".main > .loading").fadeIn("fast");
-        window.location = $($(this).find("a")[0]).attr("href");
-        return false;
-    });
-
-    /**
-     * get current node and open it
-     */
-    if (getCurrentNodeByUrl()) {
-        mainNodeName = "node-" + luciLocation[0] + "-" + luciLocation[1];
-        mainNodeName = mainNodeName.replace(/[ \t\n\r\/]+/g, "_").toLowerCase();
-        $("body").addClass(mainNodeName);
-    }
-    $(".cbi-button-up").val("");
-    $(".cbi-button-down").val("");
-
-    /**
-     * Sidebar expand
-     */
-    var showSide = false;
-    $(".showSide").click(function () {
-        if (showSide) {
-            $(".darkMask").stop(true).fadeOut("fast");
-            $(".main-left").stop(true).animate({
-                width: "0"
-            }, "fast");
-            $(".main-right").css("overflow-y", "visible");
-            showSide = false;
-        } else {
-            $(".darkMask").stop(true).fadeIn("fast");
-            $(".main-left").stop(true).animate({
-                width: "15rem"
-            }, "fast");
-            $(".main-right").css("overflow-y", "hidden");
-            showSide = true;
-        }
-    });
-
-
-    $(".darkMask").click(function () {
-        if (showSide) {
-            showSide = false;
-            $(".darkMask").stop(true).fadeOut("fast");
-            $(".main-left").stop(true).animate({
-                width: "0"
-            }, "fast");
-            $(".main-right").css("overflow-y", "visible");
-        }
-    });
-
-    $(window).resize(function () {
-        if ($(window).width() > 921) {
-            $(".main-left").css("width", "");
-            $(".darkMask").stop(true);
-            $(".darkMask").css("display", "none");
-            showSide = false;
-        }
-    });
-
-    /**
-     * fix legend position
-     */
-    $("legend").each(function () {
-        var that = $(this);
-        that.after("<span class='panel-title'>" + that.text() + "</span>");
-    });
-
-    $(".cbi-section-table-titles, .cbi-section-table-descr, .cbi-section-descr").each(function () {
-        var that = $(this);
-        if (that.text().trim() == ""){
-            that.css("display", "none");
-        }
-    });
-
-
-    $(".main-right").focus();
-    $(".main-right").blur();
-    $("input").attr("size", "0");
-
-    if (mainNodeName != undefined) {
-        console.log(mainNodeName);
-        switch (mainNodeName) {
-            case "node-status-system_log":
-            case "node-status-kernel_log":
-                $("#syslog").focus(function () {
-                    $("#syslog").blur();
-                    $(".main-right").focus();
-                    $(".main-right").blur();
-                });
-                break;
-            case "node-status-firewall":
-                var button = $(".node-status-firewall > .main fieldset li > a");
-                button.addClass("cbi-button cbi-button-reset a-to-btn");
-                break;
-            case "node-system-reboot":
-                var button = $(".node-system-reboot > .main > .main-right p > a");
-                button.addClass("cbi-button cbi-input-reset a-to-btn");
-                break;
-        }
-    }
+	$(".main > .loading").fadeOut();
+
+	/**
+	 * trim text, Remove spaces, wrap
+	 * @param text
+	 * @returns {string}
+	 */
+	function trimText(text) {
+		return text.replace(/[ \t\n\r]+/g, " ");
+	}
+
+	var lastNode = undefined;
+	var mainNodeName = undefined;
+
+	var nodeUrl = "";
+	(function(node){
+		var luciLocation;
+		if (node[0] == "admin"){
+			luciLocation = [node[1], node[2]];
+		}else{
+			luciLocation = node;
+		}
+
+		for(var i in luciLocation){
+			nodeUrl += luciLocation[i];
+			if (i != luciLocation.length - 1){
+				nodeUrl += "/";
+			}
+		}
+	})(luciLocation);
+
+	/**
+	 * get the current node by Burl (primary)
+	 * @returns {boolean} success?
+	 */
+	function getCurrentNodeByUrl() {
+		var ret = false;
+		if (!$('body').hasClass('logged-in')) {
+			luciLocation = ["Main", "Login"];
+			return true;
+		}
+
+		$(".main > .main-left > .nav > .slide > .menu").each(function () {
+			var ulNode = $(this);
+			ulNode.next().find("a").each(function () {
+				var that = $(this);
+				var href = that.attr("href");
+
+				if (href.indexOf(nodeUrl) != -1) {
+					ulNode.click();
+					ulNode.next(".slide-menu").stop(true, true);
+					lastNode = that.parent();
+					lastNode.addClass("active");
+					ret = true;
+					return true;
+				}
+			});
+		});
+		return ret;
+	}
+
+	/**
+	 * menu click
+	 */
+	$(".main > .main-left > .nav > .slide > .menu").click(function () {
+		var ul = $(this).next(".slide-menu");
+		var menu = $(this);
+		if (!ul.is(":visible")) {
+			menu.addClass("active");
+			ul.addClass("active");
+			ul.stop(true).slideDown("fast");
+		} else {
+			ul.stop(true).slideUp("fast", function () {
+				menu.removeClass("active");
+				ul.removeClass("active");
+			});
+		}
+		return false;
+	});
+
+	/**
+	 * hook menu click and add the hash
+	 */
+	$(".main > .main-left > .nav > .slide > .slide-menu > li > a").click(function () {
+		if (lastNode != undefined) lastNode.removeClass("active");
+		$(this).parent().addClass("active");
+		$(".main > .loading").fadeIn("fast");
+		return true;
+	});
+
+	/**
+	 * fix menu click
+	 */
+	$(".main > .main-left > .nav > .slide > .slide-menu > li").click(function () {
+		if (lastNode != undefined) lastNode.removeClass("active");
+		$(this).addClass("active");
+		$(".main > .loading").fadeIn("fast");
+		window.location = $($(this).find("a")[0]).attr("href");
+		return false;
+	});
+
+	/**
+	 * get current node and open it
+	 */
+	if (getCurrentNodeByUrl()) {
+		mainNodeName = "node-" + luciLocation[0] + "-" + luciLocation[1];
+		mainNodeName = mainNodeName.replace(/[ \t\n\r\/]+/g, "_").toLowerCase();
+		$("body").addClass(mainNodeName);
+	}
+
+	/**
+	 * Sidebar expand
+	 */
+	var showSide = false;
+	$(".showSide").click(function () {
+		if (showSide) {
+			$(".darkMask").stop(true).fadeOut("fast");
+			$(".main-left").stop(true).animate({
+				width: "0"
+			}, "fast");
+			$(".main-right").css("overflow-y", "visible");
+			showSide = false;
+		} else {
+			$(".darkMask").stop(true).fadeIn("fast");
+			$(".main-left").stop(true).animate({
+				width: "15rem"
+			}, "fast");
+			$(".main-right").css("overflow-y", "hidden");
+			showSide = true;
+		}
+	});
+
+	$(".darkMask").click(function () {
+		if (showSide) {
+			showSide = false;
+			$(".darkMask").stop(true).fadeOut("fast");
+			$(".main-left").stop(true).animate({
+				width: "0"
+			}, "fast");
+			$(".main-right").css("overflow-y", "visible");
+		}
+	});
+
+	$(window).resize(function () {
+		if ($(window).width() > 921) {
+			$(".main-left").css("width", "");
+			$(".darkMask").stop(true);
+			$(".darkMask").css("display", "none");
+			showSide = false;
+		}
+	});
+
+	/**
+	 * fix legend position
+	 */
+	$("legend").each(function () {
+		var that = $(this);
+		that.after("<span class='panel-title'>" + that.text() + "</span>");
+	});
+
+	$(".cbi-section-table-titles, .cbi-section-table-descr, .cbi-section-descr").each(function () {
+		var that = $(this);
+		if (that.text().trim() == ""){
+			that.css("display", "none");
+		}
+	});
+
+	$(".main-right").focus();
+	$(".main-right").blur();
+	$("input").attr("size", "0");
+	$(".cbi-button-up").val("__");
+	$(".cbi-button-down").val("__");
+	$(".slide > a").removeAttr("href");
+
+	if (mainNodeName != undefined) {
+		console.log(mainNodeName);
+		switch (mainNodeName) {
+			case "node-status-system_log":
+			case "node-status-kernel_log":
+				$("#syslog").focus(function () {
+					$("#syslog").blur();
+					$(".main-right").focus();
+					$(".main-right").blur();
+				});
+				break;
+			case "node-status-firewall":
+				var button = $(".node-status-firewall > .main fieldset li > a");
+				button.addClass("cbi-button cbi-button-reset a-to-btn");
+				break;
+			case "node-system-reboot":
+				var button = $(".node-system-reboot > .main > .main-right p > a");
+				button.addClass("cbi-button cbi-input-reset a-to-btn");
+				break;
+		}
+	}
 
 })(jQuery);