mirror of
https://github.com/KevinMidboe/zoff.git
synced 2025-12-08 12:38:49 +00:00
Prettified CSS
This commit is contained in:
Nicolas A. Tonne
915
static/style.css
915
static/style.css
@@ -1,122 +1,515 @@
|
||||
body{background:#000; margin:0; }
|
||||
body {
|
||||
background:#000;
|
||||
margin:0
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: grey; /* WebKit/Blink Browsers */
|
||||
background:grey
|
||||
/* WebKit/Blink Browsers */
|
||||
}
|
||||
.top{
|
||||
font-family: 'Open Sans', sans-serif; font-weight: 300; text-align: center;
|
||||
animation: fadein .5s; -moz-animation: fadein .5s; -webkit-animation: fadein .5s; -o-animation: fadein .5s;
|
||||
|
||||
.top {
|
||||
font-family:'Open Sans',sans-serif;
|
||||
font-weight:300;
|
||||
text-align:center;
|
||||
animation:fadein .5s;
|
||||
-moz-animation:fadein .5s;
|
||||
-webkit-animation:fadein .5s;
|
||||
-o-animation:fadein .5s
|
||||
}
|
||||
.top, .top a{color:#fff; text-decoration: none;}
|
||||
.vcent{position: relative; top: 45%; -webkit-transform: translateY(-50%);}
|
||||
.nochanvcent{position: relative; top: 46%; -webkit-transform: translateY(-54%);}
|
||||
|
||||
.top,.top a {
|
||||
color:#fff;
|
||||
text-decoration:none
|
||||
}
|
||||
|
||||
.vcent {
|
||||
position:relative;
|
||||
top:45%;
|
||||
-webkit-transform:translateY(-50%)
|
||||
}
|
||||
|
||||
.nochanvcent {
|
||||
position:relative;
|
||||
top:46%;
|
||||
-webkit-transform:translateY(-54%)
|
||||
}
|
||||
|
||||
/*#change{ display: table-cell; vertical-align: middle;}*/
|
||||
::-webkit-input-placeholder {color: #FEFEFE;}
|
||||
::-moz-input-placeholder{color: #FEFEFE;}
|
||||
::input-placeholder{color: #FEFEFE;}
|
||||
.innbox, .innbox a{
|
||||
width:90%; height: 50px; border-radius:4px; border:none; font-family: 'Open Sans', sans-serif; font-size: 25px; margin-bottom: 20px;
|
||||
/*color:#f15;*/color:white; text-align: center;-webkit-transition:background 1s;-moz-transition:background 1s;-o-transition:background 1s; transition:background 1s;
|
||||
background-color: rgba(255, 255, 255, 0.22);
|
||||
::-webkit-input-placeholder {
|
||||
color:#FEFEFE
|
||||
}
|
||||
.passbox{color:white;height: 24px;font-size: 15px;width: 42%;padding: 4px 0;margin: 5px 0;border-radius: 2px;border: none; text-align: center;background-color:rgba(255,255,255,0.2);}
|
||||
.success{animation: fadecol 1.5s; -moz-animation: fadecol 1.5s; -webkit-animation: fadecol 1.5s; -o-animation: fadecol 1.5s;}
|
||||
.fadeerror {animation: fadered 1.5s; -moz-animation: fadered 1.5s; -webkit-animation: fadered 1.5s; -o-animation: fadered 1.5s;}
|
||||
.small{font-size: 5vw; color:#E2E2E2; text-decoration: none; }
|
||||
|
||||
::-moz-input-placeholder {
|
||||
color:#FEFEFE
|
||||
}
|
||||
|
||||
::input-placeholder {
|
||||
color:#FEFEFE
|
||||
}
|
||||
|
||||
.innbox,.innbox a {
|
||||
width:90%;
|
||||
height:50px;
|
||||
border-radius:4px;
|
||||
border:none;
|
||||
font-family:'Open Sans',sans-serif;
|
||||
font-size:25px;
|
||||
margin-bottom:20px;
|
||||
/*color:#f15;*/
|
||||
color:#fff;
|
||||
text-align:center;
|
||||
-webkit-transition:background 1s;
|
||||
-moz-transition:background 1s;
|
||||
-o-transition:background 1s;
|
||||
transition:background 1s;
|
||||
background-color:rgba(255,255,255,0.22)
|
||||
}
|
||||
|
||||
.passbox {
|
||||
color:#fff;
|
||||
height:24px;
|
||||
font-size:15px;
|
||||
width:42%;
|
||||
padding:4px 0;
|
||||
margin:5px 0;
|
||||
border-radius:2px;
|
||||
border:none;
|
||||
text-align:center;
|
||||
background-color:rgba(255,255,255,0.2)
|
||||
}
|
||||
|
||||
.success {
|
||||
animation:fadecol 1.5s;
|
||||
-moz-animation:fadecol 1.5s;
|
||||
-webkit-animation:fadecol 1.5s;
|
||||
-o-animation:fadecol 1.5s
|
||||
}
|
||||
|
||||
.fadeerror {
|
||||
animation:fadered 1.5s;
|
||||
-moz-animation:fadered 1.5s;
|
||||
-webkit-animation:fadered 1.5s;
|
||||
-o-animation:fadered 1.5s
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size:5vw;
|
||||
color:#E2E2E2;
|
||||
text-decoration:none
|
||||
}
|
||||
|
||||
/*.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:grey;}
|
||||
.footer{font-size: 15px; position: absolute; width:99%;color:rgba(192, 192, 192, 0.42) !important; /*margin-top: 50px;*/ word-spacing: 2px;bottom:0px;}
|
||||
.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;}
|
||||
.channel:hover{color:grey !important;}
|
||||
.bgimage{
|
||||
-webkit-transition: opacity 1s;
|
||||
background-size: 180%; background-repeat: no-repeat; background-position: center center; background-color: #000; /*background-image: url(bg5.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%;
|
||||
.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
|
||||
}
|
||||
|
||||
.anim{transition: all .20s ease-in-out; -moz-transition: all .20s ease-in-out; -webkit-transition: all .20s ease-in-out;}
|
||||
.chan{color:#CCC; cursor:pointer; display: inline;}
|
||||
.bigchan{color: #fff; font-size: 10vw; padding-top: 25%;}
|
||||
.footer a:hover {
|
||||
color:grey
|
||||
}
|
||||
|
||||
#buttons{cursor: default; text-align: right; -webkit-filter: brightness(1.6);margin-top: -65px; margin-bottom: 28px; pointer-events:none;}
|
||||
#buttons:hover{background-color: none !important;}
|
||||
.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);}
|
||||
.footer {
|
||||
font-size:15px;
|
||||
position:absolute;
|
||||
width:99%;
|
||||
color:rgba(192,192,192,0.42)!important;
|
||||
/*margin-top: 50px;*/
|
||||
word-spacing:2px;
|
||||
bottom:0
|
||||
}
|
||||
|
||||
#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:hover, .result:hover #title, .result:hover .result_info {color:white !important;}
|
||||
.result:hover{background-color: rgba(0, 0, 0, 0.4);}
|
||||
#title{ padding-left: 9%; padding-top: 16px; color: #FFF; height: 36px;}
|
||||
.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;}
|
||||
.bottom {
|
||||
bottom:10px
|
||||
}
|
||||
|
||||
.hoverResults{color:white !important;background-color: rgba(0, 0, 0, 0.4);}
|
||||
#channels {
|
||||
width:40%;
|
||||
min-width:300px;
|
||||
padding-top:4%;
|
||||
font-size:25px
|
||||
}
|
||||
|
||||
.main{width:90%; margin: 0 auto 0 auto;transition: 0.75s -webkit-filter linear; -webkit-transform: translate3d(0,0,0);
|
||||
-moz-transform: translate3d(0,0,0);
|
||||
-ms-transform: translate3d(0,0,0);
|
||||
-o-transform: translate3d(0,0,0);
|
||||
transform: translate3d(0,0,0);}
|
||||
.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); }
|
||||
.lthumb{height: 70px; margin:0;margin-right: 10px; display: inline; width: 109px; border-radius: 3px; box-shadow: 0 8px 11px -4px black;}
|
||||
.ltitle{ color:#FFF; overflow: hidden; height: 40px; }
|
||||
.channel {
|
||||
padding:7px;
|
||||
display:inline-block;
|
||||
font-weight:700;
|
||||
color:#C4C4C4!important;
|
||||
font-size:18px
|
||||
}
|
||||
|
||||
.votes{position: relative; margin-top: -0-5em; font-size: 18px; color:#fff;}
|
||||
#plus, #minus {text-decoration: none; color:#eee; margin-left: 2px; padding-left: 3px; padding-right: 3px; }
|
||||
#plus:hover,#minus:hover{color:#000;}
|
||||
#del,#add{float: right; font-weight: bold; margin-right: 20px; margin-top:0px; border-radius: 2px; }
|
||||
#del:hover{color:red;}
|
||||
#add{font-weight: normal; margin-right: 5%; margin-top: -36px;font-size: 30px;padding: 3px 45px; }
|
||||
#add:hover{color:black;}
|
||||
.channel:hover {
|
||||
color:grey!important
|
||||
}
|
||||
|
||||
.noopacity{opacity:0;}
|
||||
.bgimage {
|
||||
-webkit-transition:opacity 1s;
|
||||
background-size:180%;
|
||||
background-repeat:no-repeat;
|
||||
background-position:center center;
|
||||
background-color:#000;
|
||||
/*background-image: url(bg5.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:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%
|
||||
}
|
||||
|
||||
#minus{display:none;}
|
||||
.anim {
|
||||
transition:all .2s ease-in-out;
|
||||
-moz-transition:all .2s ease-in-out;
|
||||
-webkit-transition:all .2s ease-in-out
|
||||
}
|
||||
|
||||
#player{height: 68%; height: calc(87% - 213px); width: 60%; border-radius: 3px; /*box-shadow: 0 8px 11px -4px black;*/}
|
||||
#playlist{-webkit-transition: height 0.5s;transition: height 0.5s;}
|
||||
.nomargin{padding: 0;margin:0;}
|
||||
.chan {
|
||||
color:#CCC;
|
||||
cursor:pointer;
|
||||
display:inline
|
||||
}
|
||||
|
||||
#adminForm{text-align:left; padding-top: 15px;}
|
||||
#adminForm label{display: inline; cursor: pointer; color:#ccc;}
|
||||
.bigchan {
|
||||
color:#fff;
|
||||
font-size:10vw;
|
||||
padding-top:25%
|
||||
}
|
||||
|
||||
#buttons {
|
||||
cursor:default;
|
||||
text-align:right;
|
||||
-webkit-filter:brightness(1.6);
|
||||
margin-top:-65px;
|
||||
margin-bottom:28px;
|
||||
pointer-events:none
|
||||
}
|
||||
|
||||
#buttons:hover {
|
||||
background-color:none!important
|
||||
}
|
||||
|
||||
.skip {
|
||||
cursor:pointer;
|
||||
height:25px;
|
||||
padding:8px 21px 0 0;
|
||||
-webkit-filter:brightness(0.1);
|
||||
pointer-events:auto;
|
||||
opacity:.7;
|
||||
transition:all ease-in-out .2s
|
||||
}
|
||||
|
||||
.skip:hover {
|
||||
-webkit-filter:brightness(1.7)
|
||||
}
|
||||
|
||||
#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:hover,.result:hover #title,.result:hover .result_info {
|
||||
color:#fff!important
|
||||
}
|
||||
|
||||
.result:hover {
|
||||
background-color:rgba(0,0,0,0.4)
|
||||
}
|
||||
|
||||
#title {
|
||||
padding-left:9%;
|
||||
padding-top:16px;
|
||||
color:#FFF;
|
||||
height:36px
|
||||
}
|
||||
|
||||
.result_info {
|
||||
color:#D7D7D7;
|
||||
font-size:12px;
|
||||
/* float:right; */
|
||||
padding-top:6px
|
||||
}
|
||||
|
||||
.thumb {
|
||||
height:55px;
|
||||
border-radius:3px;
|
||||
float:left;
|
||||
margin:7px 0 7px 15px
|
||||
}
|
||||
|
||||
.hoverResults {
|
||||
color:#fff!important;
|
||||
background-color:rgba(0,0,0,0.4)
|
||||
}
|
||||
|
||||
.main {
|
||||
width:90%;
|
||||
margin:0 auto;
|
||||
transition:.75s -webkit-filter linear;
|
||||
-webkit-transform:translate3d(0,0,0);
|
||||
-moz-transform:translate3d(0,0,0);
|
||||
-ms-transform:translate3d(0,0,0);
|
||||
-o-transform:translate3d(0,0,0);
|
||||
transform:translate3d(0,0,0)
|
||||
}
|
||||
|
||||
.playlist {
|
||||
width:37%;
|
||||
margin-left:0;
|
||||
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)
|
||||
}
|
||||
|
||||
.lthumb {
|
||||
height:70px;
|
||||
margin:0;
|
||||
margin-right:10px;
|
||||
display:inline;
|
||||
width:109px;
|
||||
border-radius:3px;
|
||||
box-shadow:0 8px 11px -4px #000
|
||||
}
|
||||
|
||||
.ltitle {
|
||||
color:#FFF;
|
||||
overflow:hidden;
|
||||
height:40px
|
||||
}
|
||||
|
||||
.votes {
|
||||
position:relative;
|
||||
margin-top:-0-5em;
|
||||
font-size:18px;
|
||||
color:#fff
|
||||
}
|
||||
|
||||
#plus,#minus {
|
||||
text-decoration:none;
|
||||
color:#eee;
|
||||
margin-left:2px;
|
||||
padding-left:3px;
|
||||
padding-right:3px
|
||||
}
|
||||
|
||||
#plus:hover,#minus:hover {
|
||||
color:#000
|
||||
}
|
||||
|
||||
#del,#add {
|
||||
float:right;
|
||||
font-weight:700;
|
||||
margin-right:20px;
|
||||
margin-top:0;
|
||||
border-radius:2px
|
||||
}
|
||||
|
||||
#del:hover {
|
||||
color:red
|
||||
}
|
||||
|
||||
#add {
|
||||
font-weight:400;
|
||||
margin-right:5%;
|
||||
margin-top:-36px;
|
||||
font-size:30px;
|
||||
padding:3px 45px
|
||||
}
|
||||
|
||||
#add:hover {
|
||||
color:#000
|
||||
}
|
||||
|
||||
.noopacity {
|
||||
opacity:0
|
||||
}
|
||||
|
||||
#minus {
|
||||
display:none
|
||||
}
|
||||
|
||||
#player {
|
||||
height:68%;
|
||||
height:calc(87% - 213px);
|
||||
width:60%;
|
||||
border-radius:3px
|
||||
/*box-shadow: 0 8px 11px -4px black;*/
|
||||
}
|
||||
|
||||
#playlist {
|
||||
-webkit-transition:height .5s;
|
||||
transition:height .5s
|
||||
}
|
||||
|
||||
.nomargin {
|
||||
padding:0;
|
||||
margin:0
|
||||
}
|
||||
|
||||
#adminForm {
|
||||
text-align:left;
|
||||
padding-top:15px
|
||||
}
|
||||
|
||||
#adminForm label {
|
||||
display:inline;
|
||||
cursor:pointer;
|
||||
color:#ccc
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
display:none
|
||||
}
|
||||
|
||||
.toggler label:hover {
|
||||
border-bottom:solid 1px #fff
|
||||
}
|
||||
|
||||
input[type="radio"]{display: none;}
|
||||
.toggler label:hover{border-bottom: solid 1px white;}
|
||||
.radio:checked + span {
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-weight:700;
|
||||
color:#fff
|
||||
}
|
||||
.toggles{display: inline; float: left; padding-right: 15px;}
|
||||
.toggtext{display: inline;}
|
||||
.adminBox{float:right;}
|
||||
|
||||
.clickthrough{pointer-events: none;}
|
||||
.toggles {
|
||||
display:inline;
|
||||
float:left;
|
||||
padding-right:15px
|
||||
}
|
||||
|
||||
#adminPanel{border-bottom: none; color:white; height:230px; padding: 10px; overflow:hidden; background-color: rgba(0,0,0,0.2); transition: height 0.5s;}
|
||||
.hiddenAdmin{padding:0 !important; margin:0 !important; height: 0 !important;}
|
||||
.button{background-color: rgba(255,255,255,0.2); border-radius: 4px; border: none;color: white;padding: 5px 15px; margin-top: 15px; transition: all 0.1s ease-in-out;}
|
||||
.button:hover{background-color: rgba(255,255,255,0.4); }
|
||||
.toggtext {
|
||||
display:inline
|
||||
}
|
||||
|
||||
#loading{display:none;}
|
||||
#search{padding-left:50px;background: url(search2.png)no-repeat 10px 50%;background-color: rgba(255,255,255,0.2);background-size:2%;transition: box-shadow 0.5s;}
|
||||
#search:focus{ box-shadow: 0px 0px 10px 0.5px #000;}
|
||||
.adminBox {
|
||||
float:right
|
||||
}
|
||||
|
||||
#eBar, #sBar{font-family: 'Open Sans', sans-serif; font-weight: 300; color:white;position:fixed;width:100%;height:35px;z-index: 9001;text-align: center;font-size:23px; opacity: 0;transition:opacity 0.5s linear;}
|
||||
#eBar{background-color:#D8000C;}
|
||||
#sBar{background-color:rgb(91, 207, 43);}
|
||||
.opacityFull{opacity: 1 !important;}
|
||||
.clickthrough {
|
||||
pointer-events:none
|
||||
}
|
||||
|
||||
#zicon{width:15%;}
|
||||
.fchan{color: #fff;
|
||||
font-size: 3vw;
|
||||
padding-top: 25%;padding: 0;
|
||||
margin: 0;}
|
||||
#adminPanel {
|
||||
border-bottom:none;
|
||||
color:#fff;
|
||||
height:230px;
|
||||
padding:10px;
|
||||
overflow:hidden;
|
||||
background-color:rgba(0,0,0,0.2);
|
||||
transition:height .5s
|
||||
}
|
||||
|
||||
.hiddenAdmin {
|
||||
padding:0!important;
|
||||
margin:0!important;
|
||||
height:0!important
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color:rgba(255,255,255,0.2);
|
||||
border-radius:4px;
|
||||
border:none;
|
||||
color:#fff;
|
||||
padding:5px 15px;
|
||||
margin-top:15px;
|
||||
transition:all .1s ease-in-out
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color:rgba(255,255,255,0.4)
|
||||
}
|
||||
|
||||
#loading {
|
||||
display:none
|
||||
}
|
||||
|
||||
#search {
|
||||
padding-left:50px;
|
||||
background:url(search2.png)no-repeat 10px 50%;
|
||||
background-color:rgba(255,255,255,0.2);
|
||||
background-size:2%;
|
||||
transition:box-shadow .5s
|
||||
}
|
||||
|
||||
#search:focus {
|
||||
box-shadow:0 0 10px .5px #000
|
||||
}
|
||||
|
||||
#eBar,#sBar {
|
||||
font-family:'Open Sans',sans-serif;
|
||||
font-weight:300;
|
||||
color:#fff;
|
||||
position:fixed;
|
||||
width:100%;
|
||||
height:35px;
|
||||
z-index:9001;
|
||||
text-align:center;
|
||||
font-size:23px;
|
||||
opacity:0;
|
||||
transition:opacity .5s linear
|
||||
}
|
||||
|
||||
#eBar {
|
||||
background-color:#D8000C
|
||||
}
|
||||
|
||||
#sBar {
|
||||
background-color:#5bcf2b
|
||||
}
|
||||
|
||||
.opacityFull {
|
||||
opacity:1!important
|
||||
}
|
||||
|
||||
#zicon {
|
||||
width:15%
|
||||
}
|
||||
|
||||
.fchan {
|
||||
color:#fff;
|
||||
font-size:3vw;
|
||||
padding-top:25%;
|
||||
padding:0;
|
||||
margin:0
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadein{from {opacity:0;}to{opacity:1;}}@keyframes fadein{from{opacity:0;}to{opacity:1;}}@-moz-keyframes fadein{from{opacity:0;}to{opacity:1;}}@-o-keyframes fadein{from{opacity:0;}to{opacity:1;}}
|
||||
@-webkit-keyframes fadecol{from {background-color:rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}}@keyframes fadecol{background-color: rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-moz-keyframes fadecol{from{background-color: rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-o-keyframes fadecol{background-color: rgba(0,255,0,0.4);}to{background-color: rgba(255,255,255,0);}
|
||||
@@ -129,92 +522,272 @@ margin: 0;}
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 1000px) {
|
||||
#controls{display:none;}
|
||||
body{background-color: #2F2F2F;}
|
||||
.bgimage{background-image: url(bg4.jpg);position:fixed;background-size:500%;background-color:black;-webkit-filter: brightness(70%);filter: brightness(70%);}
|
||||
#player{width: 100%; height:45%; margin-bottom: 20px; box-shadow: none;display:none;}
|
||||
.playlist{width: 100%;}
|
||||
.lresult{font-size: 40px; height: 90px; font-size: 50px;}
|
||||
.votes{float: right; background-color: rgba(0,0,0,0.9); margin-top: -1.5em;font-size: 42px; padding-right: 8px; height: 89px; line-height: 89px; padding-left: 20px; border-radius: 1px;}
|
||||
.lthumb{height: 90px; box-shadow: none; }
|
||||
.ltitle{height: 70px; /*color: #000;*/}
|
||||
#plus,#minus{padding-left: 24px; margin-left: 0; padding-right: 24px;}
|
||||
/*#plus{border-right:solid 3px rgb(172, 172, 172);}*/
|
||||
#search{text-align: left; height: 100px; font-size: 40px; /*border: solid 2px #ccc;*/color:white;width:100%;border-radius:0px;font-weight:bold;
|
||||
padding-left: 65px;
|
||||
background: url(search2.png)no-repeat 10px 30px;
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
background-size: 5%;}
|
||||
#buttons{text-align: center; height: 80px; margin: 0;}
|
||||
.skip{height: 50px; -webkit-filter: brightness(300%);}
|
||||
.vcent{
|
||||
top: inherit;
|
||||
-webkit-transform: translateY(0%);
|
||||
}
|
||||
#title{
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
padding-left: 2%;
|
||||
padding-top: 0;
|
||||
}
|
||||
.footer{font-size: 40px; position:fixed;}
|
||||
::-webkit-input-placeholder {
|
||||
color: white;
|
||||
text-shadow: 0px 0px 12px rgba(0,0,0, 0.56);
|
||||
}
|
||||
#controls {
|
||||
display:none
|
||||
}
|
||||
|
||||
:-moz-placeholder { /* Firefox 18- */
|
||||
color: white;
|
||||
text-shadow: 0px 0px 12px rgba(0,0,0, 0.56);
|
||||
}
|
||||
body {
|
||||
background-color:#2F2F2F
|
||||
}
|
||||
|
||||
::-moz-placeholder { /* Firefox 19+ */
|
||||
color: white;
|
||||
text-shadow: 0px 0px 12px rgba(0,0,0, 0.56);
|
||||
}
|
||||
.bgimage {
|
||||
background-image:url(bg4.jpg);
|
||||
position:fixed;
|
||||
background-size:500%;
|
||||
background-color:#000;
|
||||
-webkit-filter:brightness(70%);
|
||||
filter:brightness(70%)
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: white;
|
||||
text-shadow: 0px 0px 12px rgba(0,0,0, 0.56);
|
||||
}
|
||||
#toptitle{color:white;font-weight:bold;text-shadow: 0px 0px 12px rgba(0,0,0, 0.5);}
|
||||
#mobile-banner{background-repeat: no-repeat;background-position: center center;height:200px;/*position: absolute;*/top: -16px;z-index: -100;background-size: 100%;}
|
||||
#settings{display:none;}
|
||||
#results{position:inherit;background-color: rgba(255,255,255,0.2);}
|
||||
#title{color:white;font-weight:bold;font-family: 'Open Sans', sans-serif;text-shadow: 0px 0px 12px rgba(0,0,0, 0.5);}
|
||||
#add{display:none;}
|
||||
.chan{font-weight:bold;}
|
||||
#playlist{padding-bottom:50px;}
|
||||
.main{width:100%;}
|
||||
#results{width:100%; margin-left:0%;}
|
||||
.lresult{height:120px;font-size: 35px !important;}
|
||||
.lthumb{height:120px;width:initial;}
|
||||
.ltitle{display: table-cell;vertical-align: bottom;width: 100%;position: static;}
|
||||
.nochanvcent{top:50%;-webkit-transform: translateY(0%);}
|
||||
.bigchan{font-size:150px;}
|
||||
#channels{font-size:60px;width:99%;}
|
||||
.channel{font-size:40px;}
|
||||
.channel:hover{color:grey !important;}
|
||||
.votes{background-color: rgba(0,0,0,0.5);}
|
||||
#loading{display:initial;display: table-cell;vertical-align: bottom;width: 50%;position: absolute;/*left:25%;*/top: 50%;left: 50%;transform: translate(-50%, -50%);}
|
||||
/*#results{background-color: white;}
|
||||
#player {
|
||||
width:100%;
|
||||
height:45%;
|
||||
margin-bottom:20px;
|
||||
box-shadow:none;
|
||||
display:none
|
||||
}
|
||||
|
||||
.playlist {
|
||||
width:100%
|
||||
}
|
||||
|
||||
.lresult {
|
||||
font-size:40px;
|
||||
height:90px;
|
||||
font-size:50px
|
||||
}
|
||||
|
||||
.votes {
|
||||
float:right;
|
||||
background-color:rgba(0,0,0,0.9);
|
||||
margin-top:-1.5em;
|
||||
font-size:42px;
|
||||
padding-right:8px;
|
||||
height:89px;
|
||||
line-height:89px;
|
||||
padding-left:20px;
|
||||
border-radius:1px
|
||||
}
|
||||
|
||||
.lthumb {
|
||||
height:90px;
|
||||
box-shadow:none
|
||||
}
|
||||
|
||||
.ltitle {
|
||||
height:70px
|
||||
/*color: #000;*/
|
||||
}
|
||||
|
||||
#plus,#minus {
|
||||
padding-left:24px;
|
||||
margin-left:0;
|
||||
padding-right:24px
|
||||
}
|
||||
|
||||
/*#plus{border-right:solid 3px rgb(172, 172, 172);}*/
|
||||
#search {
|
||||
text-align:left;
|
||||
height:100px;
|
||||
font-size:40px;
|
||||
/*border: solid 2px #ccc;*/
|
||||
color:#fff;
|
||||
width:100%;
|
||||
border-radius:0;
|
||||
font-weight:700;
|
||||
padding-left:65px;
|
||||
background:url(search2.png)no-repeat 10px 30px;
|
||||
background-color:rgba(255,255,255,0.2);
|
||||
background-size:5%
|
||||
}
|
||||
|
||||
#buttons {
|
||||
text-align:center;
|
||||
height:80px;
|
||||
margin:0
|
||||
}
|
||||
|
||||
.skip {
|
||||
height:50px;
|
||||
-webkit-filter:brightness(300%)
|
||||
}
|
||||
|
||||
.vcent {
|
||||
top:inherit;
|
||||
-webkit-transform:translateY(0%)
|
||||
}
|
||||
|
||||
#title {
|
||||
font-size:30px;
|
||||
font-weight:700;
|
||||
overflow:hidden;
|
||||
padding-left:2%;
|
||||
padding-top:0
|
||||
}
|
||||
|
||||
.footer {
|
||||
font-size:40px;
|
||||
position:fixed
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color:#fff;
|
||||
text-shadow:0 0 12px rgba(0,0,0,0.56)
|
||||
}
|
||||
|
||||
:-moz-placeholder {
|
||||
/* Firefox 18- */
|
||||
color:#fff;
|
||||
text-shadow:0 0 12px rgba(0,0,0,0.56)
|
||||
}
|
||||
|
||||
::-moz-placeholder {
|
||||
/* Firefox 19+ */
|
||||
color:#fff;
|
||||
text-shadow:0 0 12px rgba(0,0,0,0.56)
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color:#fff;
|
||||
text-shadow:0 0 12px rgba(0,0,0,0.56)
|
||||
}
|
||||
|
||||
#toptitle {
|
||||
color:#fff;
|
||||
font-weight:700;
|
||||
text-shadow:0 0 12px rgba(0,0,0,0.5)
|
||||
}
|
||||
|
||||
#mobile-banner {
|
||||
background-repeat:no-repeat;
|
||||
background-position:center center;
|
||||
height:200px;
|
||||
/*position: absolute;*/
|
||||
top:-16px;
|
||||
z-index:-100;
|
||||
background-size:100%
|
||||
}
|
||||
|
||||
#settings {
|
||||
display:none
|
||||
}
|
||||
|
||||
#results {
|
||||
position:inherit;
|
||||
background-color:rgba(255,255,255,0.2)
|
||||
}
|
||||
|
||||
#title {
|
||||
color:#fff;
|
||||
font-weight:700;
|
||||
font-family:'Open Sans',sans-serif;
|
||||
text-shadow:0 0 12px rgba(0,0,0,0.5)
|
||||
}
|
||||
|
||||
#add {
|
||||
display:none
|
||||
}
|
||||
|
||||
.chan {
|
||||
font-weight:700
|
||||
}
|
||||
|
||||
#playlist {
|
||||
padding-bottom:50px
|
||||
}
|
||||
|
||||
.main {
|
||||
width:100%
|
||||
}
|
||||
|
||||
#results {
|
||||
width:100%;
|
||||
margin-left:0
|
||||
}
|
||||
|
||||
.lresult {
|
||||
height:120px;
|
||||
font-size:35px!important
|
||||
}
|
||||
|
||||
.lthumb {
|
||||
height:120px;
|
||||
width:initial
|
||||
}
|
||||
|
||||
.ltitle {
|
||||
display:table-cell;
|
||||
vertical-align:bottom;
|
||||
width:100%;
|
||||
position:static
|
||||
}
|
||||
|
||||
.nochanvcent {
|
||||
top:50%;
|
||||
-webkit-transform:translateY(0%)
|
||||
}
|
||||
|
||||
.bigchan {
|
||||
font-size:150px
|
||||
}
|
||||
|
||||
#channels {
|
||||
font-size:60px;
|
||||
width:99%
|
||||
}
|
||||
|
||||
.channel {
|
||||
font-size:40px
|
||||
}
|
||||
|
||||
.channel:hover {
|
||||
color:grey!important
|
||||
}
|
||||
|
||||
.votes {
|
||||
background-color:rgba(0,0,0,0.5)
|
||||
}
|
||||
|
||||
#loading {
|
||||
display:initial;
|
||||
display:table-cell;
|
||||
vertical-align:bottom;
|
||||
width:50%;
|
||||
position:absolute;
|
||||
/*left:25%;*/
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform:translate(-50%,-50%)
|
||||
}
|
||||
|
||||
/*#results{background-color: white;}
|
||||
#title, .result_info{color:#000 !important;}*/
|
||||
/*.blurT{-webkit-filter: blur(0px);}*/
|
||||
#eBar, #sBar{font-size:40px; height:50px;}
|
||||
#zicon{width:35%;}
|
||||
.fchan{font-size: 7vw;}
|
||||
/*.blurT{-webkit-filter: blur(0px);}*/
|
||||
#eBar,#sBar {
|
||||
font-size:40px;
|
||||
height:50px
|
||||
}
|
||||
|
||||
#zicon {
|
||||
width:35%
|
||||
}
|
||||
|
||||
.fchan {
|
||||
font-size:7vw
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1000px) {
|
||||
.blurT{/*filter: blur(10px);*/-webkit-filter: blur(15px);/*-moz-filter: blur(15px);-o-filter: blur(15px);-ms-filter: blur(15px);filter: url(#blur);*/}
|
||||
|
||||
.blurT {
|
||||
/*filter: blur(10px);*/
|
||||
-webkit-filter:blur(15px)
|
||||
/*-moz-filter: blur(15px);-o-filter: blur(15px);-ms-filter: blur(15px);filter: url(#blur);*/
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local('Open Sans Light'), local('OpenSans-Light'), url(open_sans.woff) format('woff');
|
||||
|
||||
font-family:'Open Sans';
|
||||
font-style:normal;
|
||||
font-weight:300;
|
||||
src:local('Open Sans Light'),local(OpenSans-Light),url(open_sans.woff) format("woff")
|
||||
}
|
||||
Reference in New Issue
Block a user