161 lines
2.2 KiB
CSS
161 lines
2.2 KiB
CSS
*::before,
|
|
*,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
font-family: "Open Sans", sans-serif;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background-color: #333;
|
|
color: #ddd;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.alert p {
|
|
text-align: center;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.alert img {
|
|
display: block;
|
|
max-height: 200px;
|
|
margin: auto;
|
|
}
|
|
|
|
/*
|
|
* Karaoke time
|
|
*/
|
|
|
|
.light {
|
|
position: absolute;
|
|
z-index: -1;
|
|
height: 140vh;
|
|
width: 40%;
|
|
margin-left: 30%;
|
|
margin-top: -1rem;
|
|
clip-path: polygon(
|
|
45% 0,
|
|
55% 0,
|
|
100% 100%,
|
|
0% 100%
|
|
);
|
|
|
|
transform-origin: top center;
|
|
}
|
|
|
|
.light-left {
|
|
animation:
|
|
rotateLights 1.75s infinite ease-in-out alternate,
|
|
lightsColor .75s infinite linear alternate;
|
|
}
|
|
|
|
.light-right {
|
|
animation:
|
|
rotateLights 1.75s infinite ease-in-out alternate-reverse,
|
|
lightsColor .75s infinite linear alternate-reverse;
|
|
}
|
|
|
|
@keyframes rotateLights {
|
|
from {
|
|
transform: rotateZ(-30deg);
|
|
}
|
|
to {
|
|
transform: rotateZ(30deg);
|
|
}
|
|
}
|
|
|
|
@keyframes lightsColor {
|
|
from {
|
|
background-color: var(--light-color-left);
|
|
}
|
|
|
|
to {
|
|
background-color: var(--light-color-right);
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Russian roulette
|
|
*/
|
|
|
|
.shoot {
|
|
transform-origin: center;
|
|
animation: shoot .3s ease-in-out -.05s alternate;
|
|
}
|
|
|
|
@keyframes shoot {
|
|
from {
|
|
transform: rotateZ(0deg);
|
|
}
|
|
|
|
50% {
|
|
transform: rotateZ(4deg);
|
|
}
|
|
|
|
to {
|
|
transform: rotateZ(0deg);
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Card
|
|
*/
|
|
.card {
|
|
position: absolute;
|
|
left: calc(50% - 25rem / 2);
|
|
top: .5rem;
|
|
width: 25rem;
|
|
height: 6.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
border: 1px solid var(--card-border-color);
|
|
border-radius: .5rem;
|
|
background-color: var(--card-background-color);
|
|
}
|
|
|
|
.card.open {
|
|
animation: cardAnimation .75s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
|
|
}
|
|
|
|
.card.close {
|
|
animation: cardAnimation .75s cubic-bezier(0.18, 0.89, 0.32, 1.28) reverse;
|
|
}
|
|
|
|
@keyframes cardAnimation {
|
|
from {
|
|
top: -6.25rem;
|
|
}
|
|
to {
|
|
top: .5rem;
|
|
}
|
|
}
|
|
|
|
.card-light {
|
|
color: #222;
|
|
}
|
|
|
|
.card .card-image {
|
|
height: 3.5rem;
|
|
margin: .5rem;
|
|
}
|
|
|
|
.card .card-body {
|
|
width: 100%;
|
|
}
|
|
|
|
.card .card-body .title,
|
|
.card .card-body .message {
|
|
margin: 0;
|
|
}
|
|
|
|
.card .card-body .title {
|
|
font-size: 1.25rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.card .card-body .message {
|
|
font-size: 1rem;
|
|
margin: 0 .5rem;
|
|
}
|