130 lines
2.1 KiB
CSS
130 lines
2.1 KiB
CSS
@-webkit-keyframes bgscroll {
|
|
from {background-position:0 0;}
|
|
to {background-position:-200px 0;}
|
|
}
|
|
|
|
@keyframes bgscroll {
|
|
from {background-position:0 0;}
|
|
to {background-position:-200px 0;}
|
|
}
|
|
|
|
#song-select{
|
|
width: 100%;
|
|
height:100%;
|
|
background: url('/assets/img/bg-pattern-1.png');
|
|
animation: bgscroll 3s infinite linear;
|
|
-webkit-animation: bgscroll 3s infinite linear;
|
|
}
|
|
|
|
#song-container{
|
|
width:98%;
|
|
height:80%;
|
|
padding: 5% 1% 1% 1%;
|
|
text-align: center;
|
|
}
|
|
|
|
ul li{
|
|
list-style:none;
|
|
}
|
|
|
|
.difficulties{
|
|
float:left;
|
|
display:inline-block;
|
|
width:70%;
|
|
height: 100%;
|
|
}
|
|
|
|
.song-title-char {
|
|
text-align: center;
|
|
width: 45px;
|
|
display: block;
|
|
}
|
|
|
|
.song-title-char:before {
|
|
content: attr(alt);
|
|
position: absolute;
|
|
-webkit-text-stroke: 0.25em #000;
|
|
z-index: -1;
|
|
}
|
|
|
|
.song-title{
|
|
float: right;
|
|
width: 45px;
|
|
padding: 10px 2px;
|
|
word-wrap: break-word;
|
|
font-size: 22pt;
|
|
color: white;
|
|
position: relative;
|
|
z-index: 1;
|
|
line-height: 28px;
|
|
}
|
|
|
|
.song-title-space {
|
|
line-height: 25px;
|
|
}
|
|
|
|
.song{
|
|
font-size: 14pt;
|
|
width: 50px;
|
|
margin-right:15px;
|
|
height:100%;
|
|
color: black;
|
|
display: inline-block;
|
|
background: rgba(255, 220, 47, 0.90);
|
|
border: 7px outset #f4ae00;
|
|
box-shadow: 2px 2px 10px black;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.opened{
|
|
width:375px;
|
|
}
|
|
|
|
.difficulty{
|
|
display:none;
|
|
cursor:pointer;
|
|
width: 35px;
|
|
height: 70%;
|
|
border-radius: 5px;
|
|
display: inline-block;
|
|
margin: 5px;
|
|
float: left;
|
|
background:white;
|
|
border:10px solid #ae7a26;
|
|
position:relative;
|
|
}
|
|
|
|
.difficulty .diffname{
|
|
word-wrap: break-word;
|
|
width: 20px;
|
|
display: block;
|
|
margin: auto;
|
|
margin-top:10px;
|
|
font-size: 20pt;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.difficulty .stars{
|
|
position:absolute;
|
|
color: #f12b69;
|
|
margin-left: -17px;
|
|
width:100%;
|
|
bottom:10px;
|
|
}
|
|
|
|
.difficulty:hover{
|
|
border-color:#fa5d3a;
|
|
color:white;
|
|
background:#0c6577;
|
|
}
|
|
|
|
.difficulty:hover .diffname{
|
|
-webkit-text-stroke-width: 1px;
|
|
-webkit-text-stroke-color: black;
|
|
}
|
|
|
|
.difficulty:hover .stars{
|
|
color:white;
|
|
}
|