From b8e9f8189dac5296d2241194363049f65ebeafe6 Mon Sep 17 00:00:00 2001 From: "Nicolas A. Tonne" Date: Mon, 20 Oct 2014 15:34:45 +0200 Subject: [PATCH] Redesigned admin panel, refractored a bit of css and cleaned up a bit, and fixed #25 --- index.php | 3 ++- js/admin.js | 17 +------------ js/visualize.js | 5 ---- lists/.gitignore | 0 lists/tritoen.json | 2 +- php/footer.php | 3 ++- static/mobile.css | 27 ++++++++++++++++++++ static/panel.html | 20 --------------- static/style.css | 63 +++++++++++++++++----------------------------- static/toggler.css | 62 +++++++++++++++++++++++++++++++++++++++++++++ 10 files changed, 118 insertions(+), 84 deletions(-) delete mode 100755 js/visualize.js mode change 100644 => 100755 lists/.gitignore mode change 100644 => 100755 php/footer.php create mode 100644 static/mobile.css delete mode 100755 static/panel.html create mode 100644 static/toggler.css diff --git a/index.php b/index.php index bb80b58d..eb690903 100755 --- a/index.php +++ b/index.php @@ -25,8 +25,9 @@ Settings Skip + -
+
diff --git a/js/admin.js b/js/admin.js index cdb40900..df8dd77a 100755 --- a/js/admin.js +++ b/js/admin.js @@ -2,22 +2,7 @@ var adminTogg; function admin() { - adminTogg = !adminTogg; - if(adminTogg){ - $.ajax({ - url:"../static/panel.html", - context: document.body, - success: function(response){ - //$(response).hide().appendTo("#adminPanel").fadeIn(1000); - $("#adminPanel").append(response).hide().fadeIn(300); - } - }); - }else - { - setTimeout(function(){document.getElementById("adminPanel").innerHTML = "";}, 300); - $("#adminPanel").fadeOut(300); - } - $("#playlist").toggleClass("lowOpacity"); + $("#adminPanel").toggleClass("hiddenAdmin"); } diff --git a/js/visualize.js b/js/visualize.js deleted file mode 100755 index a8172e1c..00000000 --- a/js/visualize.js +++ /dev/null @@ -1,5 +0,0 @@ -/*$(document).ready(function() -{ - context = new AudioContext(); - src = context.createMediaElementSource($('#player video')); -}*/ \ No newline at end of file diff --git a/lists/.gitignore b/lists/.gitignore old mode 100644 new mode 100755 diff --git a/lists/tritoen.json b/lists/tritoen.json index f65e0ba8..7809bfb1 100755 --- a/lists/tritoen.json +++ b/lists/tritoen.json @@ -1 +1 @@ -{"nowPlaying":{"MXXRHpVed3M":{"id":"MXXRHpVed3M","title":"Vengaboys - We\\'re Going to Ibiza!","votes":0,"added":1412951860,"guids":[]}},"songs":{"O1OTWCd40bc":{"id":"O1OTWCd40bc","title":"The Weeknd - Wicked Games (Explicit)","votes":0,"added":1412951860,"guids":[]},"Z7YrFLIyYIw":{"id":"Z7YrFLIyYIw","title":"Tuuli - Do It Like A Dru [[WoW Parody]]","votes":0,"added":1412951860,"guids":[]},"ZKuOB1HGWMY":{"id":"ZKuOB1HGWMY","title":"Robert er du neger?","votes":0,"added":1412951860,"guids":[]},"ZyhrYis509A":{"id":"ZyhrYis509A","title":"Aqua - Barbie Girl","votes":0,"added":1412951860,"guids":[]},"_ovdm2yX4MA":{"id":"_ovdm2yX4MA","title":"Avicii - Levels","votes":0,"added":1412951860,"guids":[]},"aZg2pEokcFw":{"id":"aZg2pEokcFw","title":"H\u00f8vlerivisa","votes":0,"added":1412951860,"guids":[]},"afOH2SGDiK0":{"id":"afOH2SGDiK0","title":"dde vi ska f\u00e6st","votes":0,"added":1412951860,"guids":[]},"bESGLojNYSo":{"id":"bESGLojNYSo","title":"Lady Gaga - Poker Face","votes":0,"added":1412951860,"guids":[]},"bLLMPnPK0fU":{"id":"bLLMPnPK0fU","title":"D.D.E. - Bondekn\u00f8l","votes":0,"added":1412951860,"guids":[]},"byp94CCWKSI":{"id":"byp94CCWKSI","title":"Jason Derulo - \\"The Other Side\\" (Official HD Music Video)","votes":0,"added":1412951860,"guids":[]},"cN-ZjkDBaX8":{"id":"cN-ZjkDBaX8","title":"\u00c5ge Aleksandersen - Fire Pils og en Pizza - Rockefeller, 03.2009. HQ.","votes":0,"added":1412951860,"guids":[]},"cNvjKkXFBvU":{"id":"cNvjKkXFBvU","title":"WEKEED - Wild Child","votes":0,"added":1412951860,"guids":[]},"cjEwjDvh_2c":{"id":"cjEwjDvh_2c","title":"Pelle Politibil Intro Sang","votes":0,"added":1412951860,"guids":[]},"fIMz0nTp2sA":{"id":"fIMz0nTp2sA","title":"E-Type ft. Na Na - Life","votes":0,"added":1412951860,"guids":[]},"iMP4BwvJSwo":{"id":"iMP4BwvJSwo","title":"LMFAO - Sexy And I Know It (Mord Fustang Remix)","votes":0,"added":1412951860,"guids":[]},"kHue-HaXXzg":{"id":"kHue-HaXXzg","title":"Demi Lovato - Let It Go (from \\"Frozen\\") [Official]","votes":0,"added":1412951860,"guids":[]},"kTHNpusq654":{"id":"kTHNpusq654","title":"Katy Perry - Hot N Cold","votes":0,"added":1412951860,"guids":[]},"nI_MVldpxDQ":{"id":"nI_MVldpxDQ","title":"Daddy DJ","votes":0,"added":1412951860,"guids":[]},"qQ31INpjXX0":{"id":"qQ31INpjXX0","title":"Albatraoz - Albatraoz","votes":0,"added":1412951860,"guids":[]},"smwj7ISnwXM":{"id":"smwj7ISnwXM","title":"tribalistas ja sei namorar","votes":0,"added":1412951860,"guids":[]},"tenz01ic1D8":{"id":"tenz01ic1D8","title":"Avicii - Levels","votes":0,"added":1412951860,"guids":[]},"w15oWDh02K4":{"id":"w15oWDh02K4","title":"Gigi D\\'Agostino - L\\'Amour Toujours ( Official Video )","votes":0,"added":1412951860,"guids":[]},"-1jPUB7gRyg":{"id":"-1jPUB7gRyg","title":"Aqua - Doctor Jones","votes":0,"added":1412952071,"guids":[]},"llyiQ4I-mcQ":{"id":"llyiQ4I-mcQ","title":"Vengaboys - Boom, Boom, Boom, Boom!!","votes":0,"added":1412952280,"guids":[]},"-N6O0xI3A2o":{"id":"-N6O0xI3A2o","title":"Guy Sebastian - Like a Drum","votes":0,"added":1412952356,"guids":[]},"2CGF_Z3yZAo":{"id":"2CGF_Z3yZAo","title":"Jason Derulo - Don\\'t Wanna Go Home (Official Video)","votes":0,"added":1412955658,"guids":[]},"4fndeDfaWCg":{"id":"4fndeDfaWCg","title":"Backstreet Boys - I Want It That Way","votes":0,"added":1412971020,"guids":[]},"7x3CCKaOlfU":{"id":"7x3CCKaOlfU","title":"Peaches - Rosa Helikopter","votes":0,"added":1412971324,"guids":[]},"87JabMupbB8":{"id":"87JabMupbB8","title":"Bodybangers Inc. - Kompani Linge 2012","votes":0,"added":1413802920,"guids":[]},"CduA0TULnow":{"id":"CduA0TULnow","title":"Britney Spears - Oops!...I Did It Again","votes":0,"added":1413802920,"guids":[]},"Eo-KmOd3i7s":{"id":"Eo-KmOd3i7s","title":"\\'N Sync - Bye Bye Bye","votes":0,"added":1413802922,"guids":[]},"EpbjEttizy8":{"id":"EpbjEttizy8","title":"David Guetta - Lovers On The Sun (Official Audio) ft Sam Martin","votes":0,"added":1413802923,"guids":[]},"GMoud3dub6U":{"id":"GMoud3dub6U","title":"\u00c5ge Aleksandersen - Levva Livet","votes":0,"added":1413802924,"guids":[]},"J_DV9b0x7v4":{"id":"J_DV9b0x7v4","title":"CaramellDansen (Full Version + Lyrics)","votes":0,"added":1413802924,"guids":[]},"LOZuxwVk7TU":{"id":"LOZuxwVk7TU","title":"Britney Spears - Toxic","votes":0,"added":1413803307,"guids":[]}},"conf":{"startTime":1413803307,"views":1,"skips":[]}} \ No newline at end of file +{"nowPlaying":{"O1OTWCd40bc":{"id":"O1OTWCd40bc","title":"The Weeknd - Wicked Games (Explicit)","votes":0,"added":1413804986,"guids":[]}},"songs":{"Z7YrFLIyYIw":{"id":"Z7YrFLIyYIw","title":"Tuuli - Do It Like A Dru [[WoW Parody]]","votes":0,"added":1413805247,"guids":[]},"ZKuOB1HGWMY":{"id":"ZKuOB1HGWMY","title":"Robert er du neger?","votes":0,"added":1413805324,"guids":[]},"ZyhrYis509A":{"id":"ZyhrYis509A","title":"Aqua - Barbie Girl","votes":0,"added":1413805530,"guids":[]},"_ovdm2yX4MA":{"id":"_ovdm2yX4MA","title":"Avicii - Levels","votes":0,"added":1413805733,"guids":[]},"aZg2pEokcFw":{"id":"aZg2pEokcFw","title":"H\u00f8vlerivisa","votes":0,"added":1413805864,"guids":[]},"bESGLojNYSo":{"id":"bESGLojNYSo","title":"Lady Gaga - Poker Face","votes":0,"added":1413806083,"guids":[]},"afOH2SGDiK0":{"id":"afOH2SGDiK0","title":"dde vi ska f\u00e6st","votes":0,"added":1413806149,"guids":[]},"bLLMPnPK0fU":{"id":"bLLMPnPK0fU","title":"D.D.E. - Bondekn\u00f8l","votes":0,"added":1413806157,"guids":[]},"byp94CCWKSI":{"id":"byp94CCWKSI","title":"Jason Derulo - \\"The Other Side\\" (Official HD Music Video)","votes":0,"added":1413806422,"guids":[]},"cN-ZjkDBaX8":{"id":"cN-ZjkDBaX8","title":"\u00c5ge Aleksandersen - Fire Pils og en Pizza - Rockefeller, 03.2009. HQ.","votes":0,"added":1413806661,"guids":[]},"cNvjKkXFBvU":{"id":"cNvjKkXFBvU","title":"WEKEED - Wild Child","votes":0,"added":1413807028,"guids":[]},"cjEwjDvh_2c":{"id":"cjEwjDvh_2c","title":"Pelle Politibil Intro Sang","votes":0,"added":1413807168,"guids":[]},"fIMz0nTp2sA":{"id":"fIMz0nTp2sA","title":"E-Type ft. Na Na - Life","votes":0,"added":1413807409,"guids":[]},"iMP4BwvJSwo":{"id":"iMP4BwvJSwo","title":"LMFAO - Sexy And I Know It (Mord Fustang Remix)","votes":0,"added":1413807542,"guids":[]},"kHue-HaXXzg":{"id":"kHue-HaXXzg","title":"Demi Lovato - Let It Go (from \\"Frozen\\") [Official]","votes":0,"added":1413807545,"guids":[]},"kTHNpusq654":{"id":"kTHNpusq654","title":"Katy Perry - Hot N Cold","votes":0,"added":1413807549,"guids":[]},"nI_MVldpxDQ":{"id":"nI_MVldpxDQ","title":"Daddy DJ","votes":0,"added":1413807552,"guids":[]},"qQ31INpjXX0":{"id":"qQ31INpjXX0","title":"Albatraoz - Albatraoz","votes":0,"added":1413807556,"guids":[]},"smwj7ISnwXM":{"id":"smwj7ISnwXM","title":"tribalistas ja sei namorar","votes":0,"added":1413807780,"guids":[]},"tenz01ic1D8":{"id":"tenz01ic1D8","title":"Avicii - Levels","votes":0,"added":1413808022,"guids":[]},"w15oWDh02K4":{"id":"w15oWDh02K4","title":"Gigi D\\'Agostino - L\\'Amour Toujours ( Official Video )","votes":0,"added":1413808717,"guids":[]},"-1jPUB7gRyg":{"id":"-1jPUB7gRyg","title":"Aqua - Doctor Jones","votes":0,"added":1413808929,"guids":[]},"llyiQ4I-mcQ":{"id":"llyiQ4I-mcQ","title":"Vengaboys - Boom, Boom, Boom, Boom!!","votes":0,"added":1413809137,"guids":[]},"-N6O0xI3A2o":{"id":"-N6O0xI3A2o","title":"Guy Sebastian - Like a Drum","votes":0,"added":1413809333,"guids":[]},"2CGF_Z3yZAo":{"id":"2CGF_Z3yZAo","title":"Jason Derulo - Don\\'t Wanna Go Home (Official Video)","votes":0,"added":1413809590,"guids":[]},"4fndeDfaWCg":{"id":"4fndeDfaWCg","title":"Backstreet Boys - I Want It That Way","votes":0,"added":1413809813,"guids":[]},"7x3CCKaOlfU":{"id":"7x3CCKaOlfU","title":"Peaches - Rosa Helikopter","votes":0,"added":1413810040,"guids":[]},"87JabMupbB8":{"id":"87JabMupbB8","title":"Bodybangers Inc. - Kompani Linge 2012","votes":0,"added":1413810263,"guids":[]},"CduA0TULnow":{"id":"CduA0TULnow","title":"Britney Spears - Oops!...I Did It Again","votes":0,"added":1413810519,"guids":[]},"Eo-KmOd3i7s":{"id":"Eo-KmOd3i7s","title":"\\'N Sync - Bye Bye Bye","votes":0,"added":1413810765,"guids":[]},"EpbjEttizy8":{"id":"EpbjEttizy8","title":"David Guetta - Lovers On The Sun (Official Audio) ft Sam Martin","votes":0,"added":1413810973,"guids":[]},"GMoud3dub6U":{"id":"GMoud3dub6U","title":"\u00c5ge Aleksandersen - Levva Livet","votes":0,"added":1413811320,"guids":[]},"J_DV9b0x7v4":{"id":"J_DV9b0x7v4","title":"CaramellDansen (Full Version + Lyrics)","votes":0,"added":1413811502,"guids":[]},"LOZuxwVk7TU":{"id":"LOZuxwVk7TU","title":"Britney Spears - Toxic","votes":0,"added":1413811718,"guids":[]},"MXXRHpVed3M":{"id":"MXXRHpVed3M","title":"Vengaboys - We\\'re Going to Ibiza!","votes":0,"added":1413811942,"guids":[]}},"conf":{"startTime":1413811942,"views":2,"skips":[]}} \ No newline at end of file diff --git a/php/footer.php b/php/footer.php old mode 100644 new mode 100755 index 2d08052f..1a85bd0a --- a/php/footer.php +++ b/php/footer.php @@ -6,4 +6,5 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/static/mobile.css b/static/mobile.css new file mode 100644 index 00000000..0e821a39 --- /dev/null +++ b/static/mobile.css @@ -0,0 +1,27 @@ +@media (max-width: 1000px) { + body{background-color: #fff;} + .bgimage{display: none;} + #player{width: 100%; height:45%; margin-bottom: 20px; box-shadow: 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;} + #buttons{text-align: center; height: 80px; margin: 0;} + .skip{height: 50px;} + .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; margin-top: 150px;} +} \ No newline at end of file diff --git a/static/panel.html b/static/panel.html deleted file mode 100755 index 29c0656e..00000000 --- a/static/panel.html +++ /dev/null @@ -1,20 +0,0 @@ -Admin Panel -
-
-
-
-
-
-
- -
diff --git a/static/style.css b/static/style.css index ce6437a9..4316024f 100755 --- a/static/style.css +++ b/static/style.css @@ -1,12 +1,12 @@ -body{background:#000; margin:0;} +body{background:#000; margin:0; } .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:#ed207f; text-decoration: none;} -.vcent{position: relative; top: 50%; -webkit-transform: translateY(-50%);} +.vcent{position: relative; /*display: table; height: 100%; width: 100%;*/} .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;} @@ -17,11 +17,11 @@ body{background:#000; margin:0;} } .success{animation: fadecol 1.5s; -moz-animation: fadecol 1.5s; -webkit-animation: fadecol 1.5s; -o-animation: fadecol 1.5s;} .error{animation: fadewrong 1.5s; -moz-animation: fadewrong 1.5s; -webkit-animation: fadewrong 1.5s; -o-animation: fadewrong 1.5s;} -.small{font-size: 5vw; color:#E2E2E2; display:block !important; text-decoration: none; } +.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:#fefefe; text-decoration: none;}.footer a:hover {color:#ed207f;} -.footer{font-size: 15px; position:absolute; width:99%;color:#c0c0c0 !important; margin-top: 0; word-spacing: 2px;} +.footer{font-size: 15px; position: absolute; width:99%;color:#c0c0c0 !important; margin-top: 0px; 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;} @@ -53,18 +53,18 @@ body{background:#000; margin:0;} #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; pointer-events:auto;} -.skip:hover{ -webkit-filter: brightness(0.6);} +.skip{cursor: pointer; height: 25px; padding:8px 21px 0 0; -webkit-filter: brightness(0.6); pointer-events:auto;} +.skip:hover{ -webkit-filter: brightness(0.3);} #results{position:absolute; background-color: white; font-size: 14px; width:90%; margin-left: 5%; margin-top:-5px; z-index: 2; font-family: sans-serif;} -.result{border-bottom:none; padding: 3px 0 3px 10%; text-align: left; height: 55px; cursor: pointer;} +.result{border-bottom:none; padding: 3px 0 3px 10%; text-align: left; height: 55px; cursor: pointer; border-radius: 3px;} .result:hover{background-color: rgba(0,0,0,0.2);} #title{ padding-left: 20%; padding-top:10px; max-width: 76%; color:#ed207f; height: 36px;} .result_info{color:#888; font-size: 12px; float:right;} .thumb{height: 40px; width:80px; float: left;} .main{width:90%; margin: 0 auto 0 auto;} -.playlist{background-color: none; width:37%; margin-left: 0px; display: inline-block; font-size: 14px; border-radius: 3px; vertical-align: top; /*overflow: hidden;*/ 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);} .lthumb{height: 70px; margin-right: 10px; display: inline; width: 109px; border-radius: 3px; box-shadow: 0 8px 11px -4px black;} .ltitle{ color:#FFF; overflow: hidden; height: 40px; } @@ -74,41 +74,24 @@ body{background:#000; margin:0;} #plus:hover,#minus:hover{color:#000;} #player{height: 68%; height: calc(87% - 183px); width: 60%; border-radius: 3px; box-shadow: 0 8px 11px -4px black;} -#adminForm{text-align:left;} -.adminBox{float:right;} -#adminPanel{color:black;background-color:#EEE;position:absolute;z-index:1;width:18%; margin-top: -1px; padding-top: 15px; display: none;} -.lowOpacity{opacity:0.5; -webkit-filter: blur(5px);} #playlist{-webkit-transition: opacity 0.5s;transition: opacity 0.5s;} .nomargin{padding: 0;margin:0;} -@media (max-width: 1000px) { - body{background-color: #fff;} - .bgimage{display: none;} - #player{width: 100%; height:45%; margin-bottom: 20px; box-shadow: 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;} - #buttons{text-align: center; height: 80px; margin: 0;} - .skip{height: 50px;} - .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; margin-top: 150px;} -} +#adminForm{text-align:left;} +#adminForm label{display: block; cursor: pointer;} +.adminBox{float:right;} +#adminPanel{color:white; height:180px; padding: 10px; transition: all 0.5s ease-in-out; overflow:hidden; background-color: rgba(0,0,0,0.2);} +.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); } + + @-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);}} @-webkit-keyframes fadewrong{from {background-color:rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}@keyframes fadewrong{background-color: rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-moz-keyframes fadewrong{from{background-color: rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}}@-o-keyframes fadewrong{background-color: rgba(255,0,0,0.4);}to{background-color: rgba(255,255,255,0);}} + + +/* imports */ +@import url("mobile.css"); +/*@import url("toggler.css");*/ \ No newline at end of file diff --git a/static/toggler.css b/static/toggler.css new file mode 100644 index 00000000..a03f23af --- /dev/null +++ b/static/toggler.css @@ -0,0 +1,62 @@ +.toggle, .toggler { + display: inline-block; + vertical-align: middle; + margin: 10px; +} + +.toggler { + color: slategray; + transition: .2s; +} + +.toggler--is-active { + color: black; +} + +.b { + display: block; +} + +.toggle { + width: 100px; + height: 60px; + border-radius: 100px; + background-color: #2ecc71; + overflow: hidden; + box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.05); +} + +.check { + position: absolute; + display: block; + cursor: pointer; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + z-index: 6; +} + +.check:checked ~ .switch { + right: 2px; + left: 37.5%; + transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86); + transition-property: left, right; + transition-delay: .08s, 0s; +} + +.switch { + position: absolute; + left: 2px; + top: 2px; + bottom: 2px; + right: 37.5%; + background-color: #fff; + border-radius: 36px; + z-index: 1; + transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86); + transition-property: left, right; + transition-delay: 0s, .08s; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); +} \ No newline at end of file