MoodClicker/assets/css/upgrades.css

121 lines
1.7 KiB
CSS

#upg-saves {
display: flex;
flex-direction: column;
font-size: 0.9em;
visibility: hidden;
position: absolute;
left: 1rem;
bottom: 1rem;
}
#upg-saves-reset {
cursor: pointer;
}
#upg-saves-reset:hover {
text-decoration: underline;
}
.upg-emojis {
position: absolute;
font-size: 2.5em;
animation: 5s emojis linear infinite;
}
@keyframes emojis {
0% {
left: 0;
opacity: 0;
transform: rotate(0deg);
}
50% {
opacity: 1;
}
100% {
left: 90%;
opacity: 0;
transform: rotate(360deg);
}
}
#upg-music {
position: absolute;
top: 6rem;
left: 1rem;
opacity: 0.6;
}
#upg-music > img {
width: 2.5rem;
height: 2.5rem;
}
#upg-mixer {
visibility: hidden;
display: flex;
gap: 0.6rem;
flex-direction: column;
position: absolute;
right: 1rem;
bottom: 1rem;
}
#upg-mixer > div {
display: flex;
align-items: center;
gap: 0.6rem;
}
#upg-mixer > div > img {
width: 2rem;
height: 2rem;
border-radius: 8px;
}
#upg-cuteface {
visibility: hidden;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
opacity: 0.3;
z-index: -5;
}
#upg-credits {
display: none;
position: absolute;
width: 100%;
height: 100%;
background-color: var(--color-dark);
top: 0;
left: 0;
overflow: hidden;
text-align: center;
}
.upg-credits-inner {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
width: 100%;
left: 50%;
transform: translateX(-50%);
animation: 5s credits linear;
}
@keyframes credits {
0% {
top: 100%;
}
100% {
top: 0%;
}
}
.upg-credits-footer {
margin-top: 1rem;
text-align: center;
}
.upg-credits-play-again {
margin-top: 2rem;
}