89 lines
1.5 KiB
CSS
89 lines
1.5 KiB
CSS
.minoes-table tr {
|
|
z-index: calc(100 - var(--row));
|
|
position: sticky;
|
|
}
|
|
|
|
tr.matrix td:not(.mino) {
|
|
border-left: none;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.mino {
|
|
--color: hsl(var(--hue), var(--saturation), 60%);
|
|
--dark: hsl(var(--hue), var(--saturation), 28%);
|
|
--light: hsl(var(--hue), calc(0.66 * var(--saturation)), 90%);
|
|
--border: hsl(var(--hue), var(--saturation), 40%);
|
|
--top: hsl(var(--hue), calc(0.6 * var(--saturation)), 75%);
|
|
position: relative;
|
|
background-color: var(--dark);
|
|
background-image: radial-gradient(
|
|
ellipse 200% 120% at 50% 75%,
|
|
#fff8 10%,
|
|
var(--dark) 28%,
|
|
#fff8 38%,
|
|
var(--dark) 48%
|
|
);
|
|
border: 1px outset var(--border);
|
|
border-radius: 3px;
|
|
box-shadow:
|
|
inset 3px 0 4px rgba(0,0,0,.06),
|
|
inset -3px 0 4px rgba(0,0,0,.12),
|
|
0 -3px 0 var(--top),
|
|
0 2px 2px #0004;
|
|
}
|
|
|
|
.mino:after {
|
|
--size: calc(var(--cell-side) - 12px);
|
|
position: absolute;
|
|
content: "";
|
|
box-sizing: content-box;
|
|
width: var(--size);
|
|
height: var(--size);
|
|
opacity: 40%;
|
|
background: var(--color);
|
|
left: 3px;
|
|
top: 3px;
|
|
border: 2px solid var(--border);
|
|
border-top-color: white;
|
|
}
|
|
|
|
.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 {
|
|
--hue: 0;
|
|
--saturation: 0%;
|
|
opacity: 30%;
|
|
} |