luci-theme-material: icons and other changes

* Remove excess font dependency
* Retain two glyphs as svg
* Store svg icons externally
* Add logout icon
* Replace spaces with tabs in script
* Various minor fixes

Signed-off-by: Shun Jou <shunjou@gmail.com>

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 1fa7b50a7417df737f0cea55fa52a9382f5ee5ab..2a88ef375064903fbb6244c6921a697a57a1585a 100644 (file)
--- 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,14 +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: #202124;
-       color: var(--main-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,
@@ -606,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;
@@ -637,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;
@@ -648,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;
 }
@@ -713,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;
 }
@@ -790,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,
@@ -801,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;
@@ -811,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%;
 }
 
@@ -834,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;
@@ -882,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;
 }
@@ -910,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;
@@ -969,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;
@@ -1011,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;
@@ -1029,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 {
@@ -1071,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;
@@ -1098,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;
 }
 
@@ -1132,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;
 }
 
@@ -1174,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;
@@ -1183,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;
@@ -1227,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;
 }
 
@@ -1254,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 {
@@ -1304,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 {
@@ -1321,6 +1367,7 @@ form[method="post"] + form[method="post"],
        margin: 0 !important;
        padding: 0;
        list-style: none;
+       outline: 0;
 }
 
 .cbi-dropdown > ul.preview {
@@ -1342,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,
@@ -1403,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;
@@ -1484,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;
@@ -1526,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;
@@ -1594,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;
 }
@@ -1642,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"],
@@ -1774,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;
@@ -1930,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 {
@@ -1972,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;
@@ -2061,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;
@@ -2093,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;
@@ -2152,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;
 }
 
@@ -2165,6 +2179,7 @@ input[name="nslookup"] {
 }
 
 .node-main-login > .main .cbi-input-text {
+       width: 100% !important;
        min-width: 15rem;
 }
 
@@ -2180,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;
@@ -2206,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;
 }
@@ -2288,6 +2295,7 @@ input[name="nslookup"] {
 }
 
 .Firewall form {
+       margin: 2rem 2rem 0 0;
        padding: 0;
        box-shadow: none;
 }
@@ -2320,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%;
 }
 
@@ -2342,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;
@@ -2362,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;
 }
@@ -2382,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;
 }
 
@@ -2394,6 +2408,7 @@ input[name="nslookup"] {
        max-width: 40%;
        margin: 0;
        animation: anim-fade-in 1.5s forwards;
+       word-break: break-word;
        opacity: 0;
 }
 
@@ -2403,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;
@@ -2416,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;
@@ -2430,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 {
@@ -2447,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) {
@@ -2478,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;
        }
 
@@ -2501,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;
        }
 
@@ -2521,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;
        }
 
@@ -2539,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;
@@ -2559,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 {
@@ -2589,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;
        }
 
@@ -2602,6 +2659,10 @@ input[name="nslookup"] {
                display: block;
        }
 
+       .Interfaces .table {
+               overflow-x: hidden;
+       }
+
        #packages.table {
                display: grid;
        }
@@ -2734,6 +2795,7 @@ input[name="nslookup"] {
 
        .commandbox {
                width: 100% !important;
+               margin-left: 0 !important;
        }
 }
 
@@ -2750,7 +2812,6 @@ input[name="nslookup"] {
        fieldset,
        .cbi-section {
                margin: 1rem 0 0 0;
-               padding: 1rem;
        }
 
        .tabs {
@@ -2761,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;
        }
 
@@ -2771,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%;
        }
 
@@ -2787,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;
        }
@@ -2815,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;
        }
 
@@ -2833,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 {
@@ -2897,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;
@@ -2911,6 +2983,10 @@ input[name="nslookup"] {
        ::-webkit-scrollbar {
                width: 10px;
                height: 10px;
+       }
+
+       ::-webkit-scrollbar,
+       ::-webkit-scrollbar-corner {
                background: transparent;
        }
 
@@ -2926,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/fonts/font.eot b/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.eot
deleted file mode 100644 (file)
index 9e6ffc9..0000000
Binary files a/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.eot and /dev/null differ

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 (file)
index d38d057..0000000
--- 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 (file)
index 8466932..0000000
Binary files a/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.ttf and /dev/null differ

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 (file)
index 00cf84e..0000000
Binary files a/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.woff and /dev/null differ

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 (file)
index 0000000..be864c5
--- /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 (file)
index 0000000..d529b94
--- /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 (file)
index 0000000..46bd0ae
--- /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 (file)
index 0000000..6ddd3b3
--- /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 db9c99e118d26acaa0105d991fc327da3ed7a7cc..755191f3352d8e83674cbe0bbc28c0e421723015 100755 (executable)
--- 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);