mirror of https://github.com/kurisufriend/0x40-web
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
2.2 KiB
105 lines
2.2 KiB
.WeedUI {
|
|
font-family: 'PetMe64Web';
|
|
}
|
|
|
|
.hues-w-controls {
|
|
display:-webkit-flex;
|
|
display:flex;
|
|
-webkit-align-items:center;
|
|
align-items:center;
|
|
position: absolute;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
font-size: 30px;
|
|
}
|
|
|
|
.hues-w-subcontrols {
|
|
position: absolute;
|
|
right: 0px;
|
|
bottom: 30px;
|
|
font-size: 25px;
|
|
text-align: center;
|
|
}
|
|
|
|
.hues-w-subcontrols > div{
|
|
margin: 3px;
|
|
cursor: pointer;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.hues-w-subcontrols > div:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.hues-w-controls, .hues-w-subcontrols {
|
|
transform: translateY(0px);
|
|
-webkit-transform: translateY(0px);
|
|
transition: transform 1s ease-out;
|
|
-webkit-transition: -webkit-transform 1s ease-out;
|
|
}
|
|
|
|
.hues-w-controls.hidden, .hues-w-subcontrols.hidden {
|
|
transform: translateY(200px);
|
|
-webkit-transform: translateY(200px);
|
|
}
|
|
|
|
.hues-w-beatbar {
|
|
transform: translateY(0px);
|
|
-webkit-transform: translateY(0px);
|
|
transition: transform 1s ease-out;
|
|
-webkit-transition: -webkit-transform 1s ease-out;
|
|
}
|
|
|
|
.hues-w-beatbar.hidden {
|
|
transform: translateY(-40px);
|
|
-webkit-transform: translateY(-40px);
|
|
}
|
|
|
|
.hues-w-beatleft, .hues-w-beatright {
|
|
font-size: 13px;
|
|
position: absolute;
|
|
padding: 0 0 0 5px;
|
|
top: 5px;
|
|
overflow: hidden;
|
|
border-radius: 0 10px 10px 0;
|
|
white-space: nowrap;
|
|
}
|
|
.hues-w-beatleft {
|
|
transform: scaleX(-1);
|
|
-webkit-transform: scaleX(-1);
|
|
left: 8px;
|
|
right: 50%;
|
|
}
|
|
.hues-w-beatright {
|
|
left: 50%;
|
|
right: 8px;
|
|
}
|
|
|
|
.hues-w-beataccent {
|
|
position: absolute;
|
|
left: 0; right: 0;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
margin-top: 15px;
|
|
text-align:center;
|
|
font-size: 35px;
|
|
opacity: 0;
|
|
text-shadow: -2px 2px 0px #666;
|
|
|
|
animation-name: fallspin;
|
|
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
animation-duration: 0.5s;
|
|
|
|
-webkit-animation-name: fallspin;
|
|
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
-webkit-animation-duration: 0.5s;
|
|
}
|
|
|
|
@keyframes fallspin {
|
|
from {transform: rotate(0deg) translate(0px, 0px);
|
|
opacity: 1;}
|
|
}
|
|
@-webkit-keyframes fallspin {
|
|
from {-webkit-transform: rotate(0deg) translate(0px, 0px);
|
|
opacity: 1;}
|
|
} |