KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-12-08 20:48:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added blur and transparency

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2015-01-29 01:29:18 +01:00
parent aba9e8fbb1
commit 589948da0e
2 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
js/search.js
View File

@@ -23,6 +23,7 @@ $(document).ready(function()
search(search_input); search(search_input);
}else if(event.keyCode == 27){ }else if(event.keyCode == 27){
$("#results").html(""); $("#results").html("");
$(".main").removeClass("blurT");
}else{ }else{
timer=100; timer=100;
} }
@@ -78,8 +79,10 @@ function search(search_input){
wrapper += finalhtml; wrapper += finalhtml;
} }
}); });
console.log(wrapper); //console.log(wrapper);
//$("#results").append(wrapper).show("slow"); //$("#results").append(wrapper).show("slow");
if(wrapper.length > 0)
$(".main").addClass("blurT");
$("<div style='display:none;'>"+wrapper+"</div>").appendTo('#results').slideDown('slow'); $("<div style='display:none;'>"+wrapper+"</div>").appendTo('#results').slideDown('slow');
} }
@@ -87,6 +90,8 @@ function search(search_input){
} }
}); });
}else{
$(".main").removeClass("blurT");
} }
} }

9
static/style.css
View File

@@ -43,15 +43,16 @@ body{background:#000; margin:0; }
.skip{cursor: pointer; height: 25px; padding:8px 21px 0 0; -webkit-filter: brightness(0.1); pointer-events:auto; opacity: 0.7; transition: all ease-in-out 0.2s;} .skip{cursor: pointer; height: 25px; padding:8px 21px 0 0; -webkit-filter: brightness(0.1); pointer-events:auto; opacity: 0.7; transition: all ease-in-out 0.2s;}
.skip:hover{ -webkit-filter: brightness(1.7);} .skip:hover{ -webkit-filter: brightness(1.7);}
#results{position:absolute; background-color: white; font-size: 14px; width:90%; border-radius:3px; margin-left: 5%; margin-top:-20px; z-index: 2; font-family: sans-serif;} #results{position:absolute; background-color: rgba(255,255,255,0.2); font-size: 14px; width:90%; border-radius:3px; margin-left: 5%; margin-top:-20px; z-index: 2; font-family: sans-serif;}
.result{border-bottom: solid 1px #E5E5E5; text-align: left; height: 70px; cursor: pointer; border-radius: 3px;} .result{border-bottom: solid 1px #E5E5E5; text-align: left; height: 70px; cursor: pointer; border-radius: 3px;}
.result:hover, .result:hover #title, .result:hover .result_info {color:white !important;} .result:hover, .result:hover #title, .result:hover .result_info {color:white !important;}
.result:hover{background-color: rgba(0, 0, 0, 0.4);} .result:hover{background-color: rgba(0, 0, 0, 0.4);}
#title{ padding-left: 9%; padding-top: 16px; color: #000000; height: 36px;} #title{ padding-left: 9%; padding-top: 16px; color: #FFF; height: 36px;}
.result_info{color:#888; font-size: 12px; /* float:right; */padding-top: 6px;} .result_info{color:#D7D7D7; font-size: 12px; /* float:right; */padding-top: 6px;}
.thumb{height: 55px; border-radius:3px; float: left; margin: 7px 0px 7px 15px;} .thumb{height: 55px; border-radius:3px; float: left; margin: 7px 0px 7px 15px;}
.main{width:90%; margin: 0 auto 0 auto;} .main{width:90%; margin: 0 auto 0 auto;transition: 1s -webkit-filter linear;}
.blurT{filter: blur(10px);-webkit-filter: blur(15px);/*-moz-filter: blur(15px);-o-filter: blur(15px);-ms-filter: blur(15px);filter: url(#blur);*/}
.playlist{width:37%; margin-left: 0px; display: inline-block; font-size: 14px; border-radius: 3px; vertical-align: top; height: calc(87% - 183px);} .playlist{width:37%; margin-left: 0px; display: inline-block; font-size: 14px; border-radius: 3px; vertical-align: top; height: calc(87% - 183px);}
.lresult{padding:10px 0 10px 5px; height: 70px; border-top: none; cursor: default; border-bottom: solid 1px rgba(255,255,255,0.2); } .lresult{padding:10px 0 10px 5px; height: 70px; border-top: none; cursor: default; border-bottom: solid 1px rgba(255,255,255,0.2); }
.lthumb{height: 70px; margin:0;margin-right: 10px; display: inline; width: 109px; border-radius: 3px; box-shadow: 0 8px 11px -4px black;} .lthumb{height: 70px; margin:0;margin-right: 10px; display: inline; width: 109px; border-radius: 3px; box-shadow: 0 8px 11px -4px black;}