diff --git a/static/style.css b/static/style.css index 3fda10c9..a44f4a68 100755 --- a/static/style.css +++ b/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") +} \ No newline at end of file