97 lines
1.5 KiB
CSS
97 lines
1.5 KiB
CSS
body {
|
|
background-image: url("pop/bg.png");
|
|
background-size: cover;
|
|
}
|
|
|
|
.card {
|
|
background-color: rgba(37, 41, 45, 50%);
|
|
}
|
|
|
|
@supports (backdrop-filter: blur()) {
|
|
.card {
|
|
background-color: rgba(33, 37, 41, 20%);
|
|
backdrop-filter: blur(3px);
|
|
}
|
|
}
|
|
|
|
tr.matrix td:not(.mino) {
|
|
border-left : 1px solid #222;
|
|
border-right : 1px solid #222;
|
|
border-top : 1px solid #111;
|
|
border-bottom: 1px solid #111;
|
|
}
|
|
|
|
.mino {
|
|
background: rgba(255, 255, 255, 33%);
|
|
border: 6px solid var(--color);
|
|
padding: 0;
|
|
opacity: 100%;
|
|
border-radius: 4px;
|
|
filter: blur(1px);
|
|
box-shadow: 0 0 10px var(--color);
|
|
}
|
|
|
|
.I.mino {
|
|
--color: #9bf6ff;
|
|
}
|
|
|
|
.J.mino {
|
|
--color: #a0c4ff;
|
|
}
|
|
|
|
.L.mino {
|
|
--color: #ffd6a5;
|
|
}
|
|
|
|
.O.mino {
|
|
--color: #fdffb6;
|
|
}
|
|
|
|
.T.mino {
|
|
--color: #bdb2ff;
|
|
}
|
|
|
|
.S.mino {
|
|
--color: #caffbf;
|
|
}
|
|
|
|
.Z.mino {
|
|
--color: #ffadad;
|
|
}
|
|
|
|
.ghost.mino {
|
|
filter: brightness(150%) blur(2px);
|
|
opacity: 50%;
|
|
}
|
|
|
|
.moving.mino {
|
|
filter: brightness(120%);
|
|
}
|
|
|
|
.locking.mino {
|
|
--color: white;
|
|
filter: blur(2px);
|
|
}
|
|
|
|
@keyframes locked-animation {
|
|
from {
|
|
background: white;
|
|
--color: white;
|
|
}
|
|
}
|
|
|
|
.locked.mino {
|
|
animation: locked-animation;
|
|
animation-duration: 0.2s;
|
|
}
|
|
|
|
@keyframes cleared-line-animation {
|
|
from {
|
|
background-color: rgb(206, 255, 255, 40%);
|
|
filter: saturate(50%) brightness(300%);
|
|
box-shadow: -200px 0 10px white, 200px 0 10px white;
|
|
}
|
|
to {
|
|
box-shadow: -200px 0 50px transparent, 200px 0 50px transparent;
|
|
}
|
|
} |