summaryrefslogtreecommitdiffhomepage
path: root/themes/luci-theme-material
diff options
context:
space:
mode:
Diffstat (limited to 'themes/luci-theme-material')
-rw-r--r--themes/luci-theme-material/htdocs/luci-static/material/cascade.css755
-rw-r--r--themes/luci-theme-material/htdocs/luci-static/material/fonts/font.eotbin1912 -> 0 bytes
-rw-r--r--themes/luci-theme-material/htdocs/luci-static/material/fonts/font.svg16
-rw-r--r--themes/luci-theme-material/htdocs/luci-static/material/fonts/font.ttfbin1748 -> 0 bytes
-rw-r--r--themes/luci-theme-material/htdocs/luci-static/material/fonts/font.woffbin1824 -> 0 bytes
-rw-r--r--themes/luci-theme-material/htdocs/luci-static/material/icons/arrow.svg1
-rw-r--r--themes/luci-theme-material/htdocs/luci-static/material/icons/logout.svg1
-rw-r--r--themes/luci-theme-material/htdocs/luci-static/material/icons/menu.svg1
-rw-r--r--themes/luci-theme-material/htdocs/luci-static/material/icons/spinner.svg1
-rwxr-xr-xthemes/luci-theme-material/htdocs/luci-static/material/js/script.js417
10 files changed, 603 insertions, 589 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 1fa7b50a7..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,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
index 9e6ffc9b8..000000000
--- a/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.eot
+++ /dev/null
Binary files 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
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
Binary files 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
index 00cf84ea0..000000000
--- a/themes/luci-theme-material/htdocs/luci-static/material/fonts/font.woff
+++ /dev/null
Binary files 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
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);
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-23 18:14:59 +0000