KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-10-29 18:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adding controlls

Browse Source
This commit is contained in:
kasperrt
2014-12-14 14:57:20 +01:00
parent 89de5e617f
commit edaade2d24
7 changed files with 347 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
static/controlstyle.css Normal file
View File

@@ -0,0 +1,161 @@
#controls
{
height:30px;
background-color:rgba(255, 255, 255, 0.40);
position:absolute;
width:54%;
}
#q, #fullscreen, #playpause
{
-webkit-filter:brightness(300%);
}
#q
{
cursor:pointer;
float:right;
background: no-repeat url(//s.ytimg.com/yts/imgbin/player-lighthh-vflueFmNN.webp) 0 -1023px;
background-size: auto;
width: 30px;
height: 27px;
}
#qS
{
display: block;
background-color: white;
position: relative;
float: right;
left: 55px;
/* margin-left: -10px; */
/* margin-top: -10px; */
top: -280%;
width:125px;
}
.qChange
{
font-family:helvetica;
padding-left:5px;
padding-right:5px;
padding-bottom:3px;
cursor:pointer;
background-color:rgba(0, 0, 0, 0.54);
}
.qChange:hover
{
background-color:#ED207F;
}
#fullscreen
{
cursor:pointer;
background: no-repeat url(//s.ytimg.com/yts/imgbin/player-lighthh-vflueFmNN.webp) 0 -1054px;
background-size: auto;
width: 30px;
height: 27px;
float:right;
}
#duration
{
float:left;
margin-top:9px;
font-family:helvetica;
font-size:12px;
}
#dash
{
font-weight:bolder;
}
#volume {
cursor:pointer;
position: absolute;
left: 200px;
margin: 12px auto;
height:4.5px;
width: 75px;
background-color:grey;
border: none;
outline: none;
}
#volume .ui-slider-range-min {
height:4.5px;
width: 75px;
position: absolute;
background-color:#ED207F;
border: none;
outline: none;
}
#volume .ui-slider-handle {
height:15px;
width:5px;
background-color:white;
position: absolute;
cursor: pointer;
outline: none;
border: none;
}
.ui-slider-handle
{
margin-top:-5px;
}
#playpause
{
cursor:pointer;
float:left;
}
.play
{
background: no-repeat url(//s.ytimg.com/yts/imgbin/player-lighthh-vflueFmNN.webp) 0 -496px;
background-size: auto;
width: 55px;
height: 27px;
}
.pause
{
background: no-repeat url(//s.ytimg.com/yts/imgbin/player-lighthh-vflueFmNN.webp) 0 -2139px;
background-size: auto;
width: 55px;
height: 27px;
}
.hide
{
display:none !important;
}
.bgimage{
z-index: -100;
background-size: 180%;
background-repeat: no-repeat;
background-position: center center;
background-color: #000;
background-image: url(bg.jpg);
-webkit-filter: blur(50px) brightness(0.8);
-moz-filter: blur(50px) brightness(0.8);
-ms-filter: blur(50px) brightness(0.8);
-o-filter: blur(50px) brightness(0.8);
filter: blur(50px) brightness(0.8);
position: absolute;
top: 0px;
left: 0;
width: 100%;
height: 100%;
}
body
{
background-color:#000;
}

5
static/style.css
View File

@@ -22,7 +22,7 @@ body{background:#000; margin:0; }
/*.small:hover{color: #CCC;}*/
.big{font-size:180vh; position:absolute; top:-50%; color:#330A00 !important; z-index:-1; width: 100%; overflow: hidden; display: none;}
.footer a{color:rgba(254, 254, 254, 0.42); text-decoration: none;}.footer a:hover {color:#ed207f;}
.footer{font-size: 15px; position: absolute; width:99%;color:rgba(192, 192, 192, 0.42) !important; margin-top: 0px; word-spacing: 2px;}
.footer{font-size: 15px; position: absolute; width:99%;color:rgba(192, 192, 192, 0.42) !important; margin-top: 13px; word-spacing: 2px;}
.bottom{bottom:10px;}
#channels{width:40%; min-width: 300px; padding-top: 4%; font-size: 25px;}
.channel{padding: 7px; display: inline-block; font-weight: bold; color: #C4C4C4 !important;font-size: 18px;}
@@ -65,7 +65,7 @@ body{background:#000; margin:0; }
#add{font-weight: normal; margin-right: 5%; margin-top: -36px;font-size: 30px;padding: 3px 45px; }
#add:hover{color:red;}
#player{height: 68%; height: calc(87% - 183px); width: 60%; border-radius: 3px; box-shadow: 0 8px 11px -4px black;}
#player{height: 68%; height: calc(87% - 213px); width: 60%; border-radius: 3px; box-shadow: 0 8px 11px -4px black;}
#playlist{-webkit-transition: opacity 0.5s;transition: opacity 0.5s;}
.nomargin{padding: 0;margin:0;}
@@ -95,6 +95,7 @@ input[type="radio"]{display: none;}
@media (max-width: 1000px) {
#controls{display:none;}
body{background-color: #2F2F2F;}
.bgimage{display: none;}
#player{width: 100%; height:45%; margin-bottom: 20px; box-shadow: none;}