Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #484 from LuttyYang/master

Browse source 
luci-theme-material: add button select and input theme
This commit is contained in:
Hannu Nyman 2015-09-26 18:29:12 +03:00
commit 990c2e23e7
3 changed files with 98 additions and 121 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

201
themes/luci-theme-material/htdocs/luci-static/material/css/style.css
View file

@ -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;
text-align: center;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
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;
vertical-align: middle;
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;

16
themes/luci-theme-material/htdocs/luci-static/material/js/script.js
View file

@ -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);

2
themes/luci-theme-material/luasrc/view/themes/material/header.htm
View file

@ -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">
<%-