diff options
author | Hannu Nyman <hannu.nyman@iki.fi> | 2015-09-26 18:29:12 +0300 |
---|---|---|
committer | Hannu Nyman <hannu.nyman@iki.fi> | 2015-09-26 18:29:12 +0300 |
commit | 990c2e23e7d41dc36a9eb9aedda9ad6b4306535f (patch) | |
tree | a45ea7297fecfe5cfa6bdc4c3d0fee6d66a3b0c5 /themes | |
parent | a60184d6bd6dd3b136d0cc447a65b9003ec7cd3d (diff) | |
parent | 5a0c3bbfa96ea7b4845402e1f776744a86df6cb7 (diff) |
Merge pull request #484 from LuttyYang/master
luci-theme-material: add button select and input theme
Diffstat (limited to 'themes')
3 files changed, 97 insertions, 120 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); diff --git a/themes/luci-theme-material/luasrc/view/themes/material/header.htm b/themes/luci-theme-material/luasrc/view/themes/material/header.htm index f96653a9c0..05d9419a80 100755 --- a/themes/luci-theme-material/luasrc/view/themes/material/header.htm +++ b/themes/luci-theme-material/luasrc/view/themes/material/header.htm @@ -166,7 +166,7 @@ </header> <div class="main"> - <div class="loading"><span>Loading...</span></div> + <div style="" class="loading"><span><div class="loading-img"></div>Loading...</span></div> <div class="main-left"> <ul class="nav"> <%- |