luci-theme-material: add button select input theme

add button select input theme

Signed-off-by: Lutty Yang <lutty@wcan.in>

2 files changed, 96 insertions, 119 deletions

diff --git a/themes/luci-theme-material/htdocs/luci-static/material/css/style.css b/themes/luci-theme-material/htdocs/luci-static/material/css/style.css
index 058d3edcfa..d59060f045 100755
--- a/themes/luci-theme-material/htdocs/luci-static/material/css/style.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/css/style.css
@@ -77,8 +77,29 @@ select {
     border: 1px solid #ccc;
 }
 
+select,
 input {
-    padding: 0.36rem 0.5rem;
+    background-color: transparent;
+    color: rgba(0,0,0,.87);
+    border: none;
+    border-bottom: 1px solid rgba(0,0,0,.26);
+    outline: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    background-image: none;
+    height: 2rem;
+    font-size: 1.1rem;
+    transition: all 0.2s ease-in-out;
+}
+
+select:focus,
+input:focus {
+    height: 2rem;
+    height: calc(2rem + 1px);
+    margin-bottom: -1px;
+    border-color: #0099CC;
+    border-width: 2px;
 }
 
 code {
@@ -130,6 +151,7 @@ footer > a{
     z-index: 1000;
     display: block;
     background-color: rgb(240, 240, 240);
+    top: 0;
 }
 
 .main > .loading > span{
@@ -140,22 +162,14 @@ footer > a{
     font-size: 1.3rem;
 }
 
-.main > .loading > span:before{
+.main > .loading > span > .loading-img:before{
     content: "\e603";
-    -webkit-animation: anim-rotate 2s infinite linear;
-    animation: anim-rotate 2s infinite linear;
-    margin-right: 0.2rem;
 }
 
-@-webkit-keyframes anim-rotate {
-    0% {
-        -webkit-transform:rotate(0);
-        transform:rotate(0);
-    }
-    100% {
-        -webkit-transform:rotate(360deg);
-        transform:rotate(360deg);
-    }
+.main > .loading > span > .loading-img{
+    animation: anim-rotate 2s infinite linear;
+    margin-right: 0.2rem;
+    display: inline-block;
 }
 
 @keyframes anim-rotate {
@@ -474,39 +488,67 @@ td > table > tbody > tr > td {
 /* button style */
 
 .cbi-button {
-    font: inherit;
-    overflow: visible;
-    text-transform: none;
+    text-transform: uppercase;
+    color: rgba(0, 0, 0, 0.87);
+    background-color: #FFF;
+    transition: all 0.2s ease-in-out;
     display: inline-block;
-    margin-bottom: 0;
-    font-weight: 400;
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: 0.2rem;
+    cursor: pointer;
+    -ms-touch-action: manipulation;
+    touch-action: manipulation;
+    background-image: none;
     text-align: center;
-    white-space: nowrap;
     vertical-align: middle;
-    touch-action: manipulation;
-    cursor: pointer;
+    white-space: nowrap;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    background-image: none;
-    border: 1px solid transparent;
-    color: #333;
-    background-color: #fff;
-    border-color: #ccc;
-    min-width: 6rem;
-    padding: 0.5rem 1rem;
-    font-size: 1.1rem;
-    line-height: 1.42857143;
+    font-size: 1rem;
+    width: auto !important;
+}
+
+.cbi-button:hover,
+.cbi-button:focus,
+.cbi-button:active {
+    color: rgba(0, 0, 0, 0.87);
+    background-color: white;
+    outline: 0;
+    text-decoration: none;
+    color: rgba(0, 0, 0, 0.87);
+}
+
+.cbi-button:hover,
+.cbi-button:focus {
+    box-shadow: 0 0px 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
+}
+
+.cbi-button:active {
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+}
+
+.cbi-button:disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: 0.60;
+    box-shadow: none;
+}
+
+.cbi-button + .cbi-button {
+    margin-left: 0.6rem;
 }
 
 .cbi-button-reset,
 .cbi-input-remove {
-    color: #fff;
-    background-color: #f0ad4e;
-    border-color: #eea236;
+    color: #fff !important;
+    background-color: #f0ad4e !important;
+    border-color: #eea236 !important;
 }
 
+.cbi-input-find,
 .cbi-input-save,
 .cbi-button-add,
 .cbi-button-save,
@@ -533,6 +575,10 @@ td > table > tbody > tr > td {
     border-color: #d43f3a !important;
 }
 
+.a-to-btn{
+    text-decoration: none;
+}
+
 /* table */
 
 .tabs {
@@ -680,39 +726,18 @@ td > table > tbody > tr > td {
 /* input */
 .cbi-value input[type="password"],
 .cbi-value input[type="text"] {
-    padding: 0.36rem 1rem;
-    color: #555;
     min-width: 15rem;
-    background-color: #fff;
-    background-image: none;
-    border: 1px solid #ccc;
-    margin-bottom: 0.3rem;
-}
-
-.cbi-value-field input[type="password"],
-.cbi-value-field input[type="text"] {
-    padding: 0.36rem 1rem;
-    color: #555;
-    background-color: #fff;
-    background-image: none;
-    border: 1px solid #ccc;
 }
 
 /* select */
 .cbi-value-field .cbi-input-select {
-    width: 95%;
     min-width: 15rem;
-    padding: 0.36rem 0.8rem;
-    color: #555;
-    background-color: #fff;
-    background-image: none;
-    border: 1px solid #ccc;
 }
 
 .ifacebadge {
     display: inline-block;
     min-width: 8rem;
-    border: 1px solid #CCCCCC;
+    border-bottom: 1px solid #CCCCCC;
     padding: 0.5rem 1rem;
     -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
@@ -860,7 +885,7 @@ td > table > tbody > tr > td {
 
 .cbi-value-field .cbi-input-checkbox,
 .cbi-value-field .cbi-input-radio {
-    margin-top: 1rem;
+    margin-top: 0.3rem;
 }
 
 .cbi-section-table-row > .cbi-value-field .cbi-input-select {
@@ -961,7 +986,7 @@ header > .container > .pull-right > * {
 }
 
 .node-main-login > .main fieldset {
-    padding: 0;
+    padding: 0.5rem;
     margin-bottom: 1rem;
     display: inline;
     background: none;
@@ -1014,34 +1039,6 @@ header > .container > .pull-right > * {
     display: inline-block;
 }
 
-.node-status-firewall > .main fieldset li > a {
-    font: inherit;
-    overflow: visible;
-    text-transform: none;
-    margin-bottom: 0;
-    font-weight: 400;
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: middle;
-    touch-action: manipulation;
-    cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    background-image: none;
-    border: 1px solid transparent;
-    color: #333;
-    min-width: 6rem;
-    padding: 0.5rem 1rem;
-    font-size: 1.1rem;
-    line-height: 1.42857143;
-    background-color: #f0ad4e;
-    border-color: #eea236;
-
-    color: #fff;
-    text-decoration: none;
-}
 
 /* fix system reboot */
 
@@ -1050,36 +1047,6 @@ header > .container > .pull-right > * {
     padding-left: 2rem;
 }
 
-.node-system-reboot > .main > .main-right p > a {
-    margin-top: 2rem;
-    text-decoration: none;
-    font: inherit;
-    overflow: visible;
-    text-transform: none;
-    display: inline-block;
-    margin-bottom: 0;
-    font-weight: 400;
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: middle;
-    touch-action: manipulation;
-    cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    background-image: none;
-    border: 1px solid transparent;
-    min-width: 6rem;
-    padding: 0.5rem 1rem;
-    font-size: 1.1rem;
-    line-height: 1.42857143;
-    text-decoration: none;
-    color: #fff;
-    background-color: #d9534f !important;
-    border-color: #d43f3a !important;
-}
-
 /* fix Services  Network Shares*/
 .node-services-network_shares > .main .cbi-tabcontainer:nth-child(3) .cbi-value-title {
     margin-bottom: 1rem;
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 dcf8a03d43..604c4da8a8 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
@@ -180,6 +180,7 @@
 
                 if (currentNode.indexOf(getUrlNode(href)) != -1){
                     ulNode.click();
+                    ulNode.next(".slide-menu").stop(true,true);
                     lastNode = that.parent();
                     tree = [trimText(ulNode.data("title")), trimText(that.data("title"))];
                     lastNode.addClass("active");
@@ -215,7 +216,7 @@
     $(".main > .main-left > .nav > .slide > .slide-menu > li > a").click(function () {
         if (lastNode != undefined) lastNode.removeClass("active");
         $(this).parent().addClass("active");
-        $(".main > .loading").fadeIn();
+        $(".main > .loading").fadeIn("fast");
         return true;
     });
 
@@ -225,7 +226,7 @@
     $(".main > .main-left > .nav > .slide > .slide-menu > li").click(function () {
         if (lastNode != undefined) lastNode.removeClass("active");
         $(this).addClass("active");
-        $(".main > .loading").fadeIn();
+        $(".main > .loading").fadeIn("fast");
         window.location = $($(this).find("a")[0]).attr("href");
         return;
     });
@@ -260,7 +261,7 @@
             that.click(function () {
                 var href = that.attr("href");
                 if (href.indexOf("#") == -1){
-                    $(".main > .loading").fadeIn();
+                    $(".main > .loading").fadeIn("fast");
                     return true;
                 }
             });
@@ -318,6 +319,7 @@
 
     $(".main-right").focus();
     $(".main-right").blur();
+    $("input").attr("size", "0");
 
     if (mainNodeName != undefined){
         console.log(mainNodeName);
@@ -330,6 +332,14 @@
                     $(".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);