mirror of
https://github.com/KevinMidboe/zoff.git
synced 2025-10-29 18:00:23 +00:00
Redesigned admin panel, refractored a bit of css and cleaned up a bit, and fixed #25
This commit is contained in:
Nicolas A. Tonne
27
static/mobile.css
Normal file
27
static/mobile.css
Normal file
@@ -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;}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
<b>Admin Panel</b>
|
||||
<br>
|
||||
<form id="adminForm" name="ufo" action="" class="daform nomargin" id="base">
|
||||
<label>Anyone can vote:
|
||||
<label> <input class="adminBox" type="checkbox" name="vote" value="1"></input></label>
|
||||
</label><br>
|
||||
<label>Anyone can add songs:
|
||||
<label><input class="adminBox" type="checkbox" name="addSongs" value="1"></input></label>
|
||||
</label><br>
|
||||
<label>Allow long songs:
|
||||
<label><input class="adminBox" type="checkbox" name="longSongs" value="1"></input></label>
|
||||
</label><br>
|
||||
<label>Show playlist on frontpage::
|
||||
<label><input class="adminBox" type="checkbox" name="frontPage" value="1"></input></label>
|
||||
</label><br>
|
||||
<label>Allow only music:
|
||||
<label><input class="adminBox" type="checkbox" name="onlyMusic" value="1"></input></label>
|
||||
</label><br>
|
||||
<input type="button" value="Save Settings" onclick="submitAdmin(this.form)">
|
||||
</form>
|
||||
@@ -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");*/
|
||||
62
static/toggler.css
Normal file
62
static/toggler.css
Normal file
@@ -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);
|
||||
}
|
||||
Reference in New Issue
Block a user