119 lines
2.1 KiB
CSS
119 lines
2.1 KiB
CSS
.minoes-table {
|
|
filter:
|
|
drop-shadow(-1px -1px 0 white)
|
|
drop-shadow( 1px 1px 0 white);
|
|
}
|
|
|
|
.minoes-table tr {
|
|
z-index: calc(100 - var(--row));
|
|
position: sticky;
|
|
}
|
|
|
|
tr.matrix td:not(.mino) {
|
|
border-left: none;
|
|
border-bottom: none;
|
|
border-right: 1px solid #30303003;
|
|
border-top: 1px solid #30303003;
|
|
}
|
|
|
|
.mino {
|
|
--color: hsl(var(--hue), var(--saturation), 40%);
|
|
--light: hsl(var(--hue), calc(0.66 * var(--saturation)), 84%);
|
|
--top: hsl(var(--hue), calc(0.6 * var(--saturation)), 68%);
|
|
background-color: var(--color);
|
|
background-image:
|
|
radial-gradient(
|
|
ellipse 22% 8% at 25% 22%,
|
|
#ffffff66,
|
|
#ffffff33 40%,
|
|
transparent 70%
|
|
),
|
|
radial-gradient(
|
|
ellipse 140% 85% at 50% -15%,
|
|
var(--light) 0%,
|
|
#ffffff77 40%,
|
|
#00000005 55%
|
|
),
|
|
radial-gradient(
|
|
ellipse 120% 220% at 50% 140%,
|
|
var(--light) 0%,
|
|
var(--color) 55%,
|
|
#00000066 95%
|
|
);
|
|
border: 4px ridge var(--color);
|
|
border-top-color: var(--light);
|
|
border-radius: 3px;
|
|
box-shadow:
|
|
inset 2px 0 4px rgba(0,0,0,.06),
|
|
inset -2px 0 4px rgba(0,0,0,.12),
|
|
0 -4px 0 var(--top);
|
|
filter: saturate(1.1) contrast(1.05);
|
|
}
|
|
|
|
.I {
|
|
--hue: 193;
|
|
--saturation: 100%;
|
|
}
|
|
|
|
.J {
|
|
--hue: 215;
|
|
--saturation: 100%;
|
|
}
|
|
|
|
.L {
|
|
--hue: 25;
|
|
--saturation: 100%;
|
|
}
|
|
|
|
.O {
|
|
--hue: 42;
|
|
--saturation: 100%;
|
|
}
|
|
|
|
.S {
|
|
--hue: 95;
|
|
--saturation: 100%;
|
|
}
|
|
|
|
.T {
|
|
--hue: 300;
|
|
--saturation: 56%;
|
|
}
|
|
|
|
.Z {
|
|
--hue: 357;
|
|
--saturation: 84%;
|
|
}
|
|
|
|
.ghost {
|
|
border: 3px solid #fff1;
|
|
padding: 2px;
|
|
background-color: #fff1;
|
|
background-clip: content-box;
|
|
background-image: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
@keyframes trail-animation {
|
|
from {
|
|
background-color: #ceffff10;
|
|
}
|
|
to {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
@keyframes cleared-line-animation {
|
|
from {
|
|
background-color: #fff6;
|
|
filter: saturate(50%) brightness(300%);
|
|
box-shadow: 0 0 0 #adb5bd66, 0 0 0 #adb5bd66;
|
|
}
|
|
60% {
|
|
box-shadow: -60px 0 2px #adb5bd33, 60px 0 2px #adb5bd33;
|
|
}
|
|
to {
|
|
background-color: transparent;
|
|
box-shadow: -100px 0 5px transparent, 100px 0 5px transparent;
|
|
}
|
|
} |