adrien/quatuor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ridge

Browse Source
This commit is contained in:
Adrien MALINGREY
2026-03-04 00:17:41 +01:00
parent f6ebe87434
commit 5ba379d968
1 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
css/stereo.css
View File

@@ -1,3 +1,8 @@
:root {
--bw: 4px;
--tl: calc(-1 * var(--bw) + 0.5px);
}
body {
background-image: url(stereo/bg.jpg),
radial-gradient(circle at center,
@@ -120,7 +125,7 @@ tr.matrix td:not(.mino) {
--center-color: hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.1), var(--a));
--edge-color: hsla(var(--h), var(--s), calc(var(--l) * (var(--light) * 0.9)), var(--a));
background: var(--center-color);
border-radius: 2px;
border-radius: 4px;
border: 2px outset var(--center-color);
}
@@ -156,6 +161,8 @@ td.trail-animation {
var(--edge-color) 100%
);
box-shadow: 0 0 7px hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.3), 20%);
border-style: ridge;
border-width: var(--bw);
}
/* Left face */
@@ -168,7 +175,7 @@ tr.cleared-line-animation td::before,
+ (var(--light-x) * -0.2)
+ (var(--light-y) * 0.15)
);
transform: translate3d(-1.5px, -1.5px, calc(-1 * var(--cell-side))) rotateY(-90deg);
transform: translate3d(var(--tl), var(--tl), calc(-1 * var(--cell-side))) rotateY(-90deg);
transform-origin: left;
}
@@ -190,7 +197,7 @@ tr.cleared-line-animation td::before,
}
.right .minoes-table .mino:last-child::before {
transform: translate3d(-1.5px, -1.5px, calc(-1 * var(--cell-side))) rotateY(90deg) !important;
transform: translate3d(var(--tl), var(--tl), calc(-1 * var(--cell-side))) rotateY(90deg) !important;
transform-origin: right !important;
}
@@ -202,7 +209,7 @@ tr.cleared-line-animation td::after {
1.5
+ (var(--light-y) * 0.2)
);
transform: translate3d(-1.5px, -1.5px, calc(-1 * var(--cell-side))) rotateX(90deg);
transform: translate3d(var(--tl), var(--tl), calc(-1 * var(--cell-side))) rotateX(90deg);
transform-origin: top;
}
@@ -217,7 +224,7 @@ tr.cleared-line-animation td::after {
--center-x: calc(65% + var(--light-x) * 10%);
--center-y: calc(65% + var(--light-y) * 10%);
filter: saturate(0.95);
transform: translate3d(-1.5px, -1.5px, calc(-1 * var(--cell-side))) rotateX(-90deg);
transform: translate3d(var(--tl), var(--tl), calc(-1 * var(--cell-side))) rotateX(-90deg);
transform-origin: bottom;
}