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

optimization

Browse Source
This commit is contained in:
Adrien MALINGREY
2026-03-04 23:54:27 +01:00
parent b72276b76c
commit 49e56427b1
4 changed files with 371 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
css/stereo.css
View File

@@ -1,6 +1,8 @@
:root {
--bw: 4px;
--tl: calc(-1 * var(--bw) + 0.5px);
--rbw: 4px;
--tl: calc(-1 * var(--rbw));
--cell-side-opposite: calc(-1 * var(--cell-side));
--t3d: translate3d(var(--tl), var(--tl), var(--cell-side-opposite));
}
body {
@@ -31,17 +33,24 @@ body {
cursor: grabbing;
}
#sceneDiv * {
transform-style: preserve-3d;
}
#screenRow {
--light-rX: calc(-1 * var(--rY) / 30);
--light-rY: calc(var(--rX) / 20);
display: block;
transform: translateZ(var(--tZ)) rotateX(calc((var(--rX)) * 1deg)) rotateY(calc((var(--rY)) * 1deg));
}
#screenRow * {
#sceneDiv,
#screenRow,
#screenRow .col,
#screenRow .card,
#screenRow .card-body,
.minoes-table,
.minoes-table tbody,
.minoes-table tr,
.minoes-table td {
display: block;
transform-style: preserve-3d;
}
#screenRow .col {
@@ -111,17 +120,20 @@ tr.matrix td:not(.mino) {
}
.minoes-table td {
width: var(--cell-side) !important;
height: var(--cell-side) !important;
width: var(--cell-side);
height: var(--cell-side);
overflow: visible;
position: relative;
}
.minoes-table .mino,
.minoes-table .mino::before,
.minoes-table .mino + :not(.mino)::before,
.minoes-table .mino::after {
--light-x: calc(-0.5 - var(--rY) / 30 - var(--column) / 10 + 1);
--light-y: calc(-0.5 + var(--rX) / 20 - var(--row) / 6 + 4);
.mino,
.mino::before,
.mino + :not(.mino)::before,
.mino::after {
--light-pX: calc(0.5 - var(--column) / 10);
--light-pY: calc(3.5 - var(--row) / 6);
--light-x: calc(var(--light-rX) + var(--light-pX));
--light-y: calc(var(--light-rY) + var(--light-pY));
--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);
@@ -129,9 +141,9 @@ tr.matrix td:not(.mino) {
border: 2px outset var(--center-color);
}
.minoes-table .mino::before,
.minoes-table .mino + :not(.mino)::before,
.minoes-table .mino::after,
.mino::before,
.mino + :not(.mino)::before,
.mino::after,
td.trail-animation::before,
td.trail-animation::after,
tr.cleared-line-animation td::before,
@@ -146,7 +158,7 @@ tr.cleared-line-animation td::after {
}
/* Front face */
.minoes-table .mino,
.mino,
td.trail-animation {
--light: calc(
1
@@ -160,28 +172,28 @@ td.trail-animation {
var(--center-color) 15%,
var(--edge-color) 100%
);
box-shadow: 0 0 7px hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.3), 20%);
box-shadow: 0 0 7px hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.3), 40%);
border-style: ridge;
border-width: var(--bw);
border-width: var(--rbw);
}
/* Left face */
.minoes-table .mino::before,
.mino::before,
td.trail-animation::before,
tr.cleared-line-animation td::before,
.left .minoes-table .mino + .mino::before {
.mino + .mino::before {
--light: calc(
1.1
+ (var(--light-x) * -0.2)
+ (var(--light-y) * 0.15)
);
transform: translate3d(var(--tl), var(--tl), calc(-1 * var(--cell-side))) rotateY(-90deg);
transform: var(--t3d) rotateY(-90deg);
transform-origin: left;
}
/* Right face */
.right .minoes-table .mino + .mino::before,
.minoes-table .mino + :not(.mino)::before,
.mino + :not(.mino)::before,
.right .mino + .mino::before,
.right td.trail-animation::before,
.right tr.cleared-line-animation td::before {
--light: calc(
@@ -192,29 +204,29 @@ tr.cleared-line-animation td::before,
--center-x: calc(65% + var(--light-x) * 10%);
--center-y: calc(35% + var(--light-y) * 10%);
filter: saturate(0.95);
transform: translate3d(0, 0, calc(-1 * var(--cell-side))) rotateY(-90deg);
transform: translate3d(0, 0, var(--cell-side-opposite)) rotateY(-90deg);
transform-origin: left;
}
.right .minoes-table .mino:last-child::before {
transform: translate3d(var(--tl), var(--tl), calc(-1 * var(--cell-side))) rotateY(90deg) !important;
.right .mino:last-child::before {
transform: var(--t3d) rotateY(90deg) !important;
transform-origin: right !important;
}
/* Top face */
.minoes-table .mino::after,
.mino::after,
td.trail-animation::after,
tr.cleared-line-animation td::after {
--light: calc(
1.5
+ (var(--light-y) * 0.2)
);
transform: translate3d(var(--tl), var(--tl), calc(-1 * var(--cell-side))) rotateX(90deg);
transform: var(--t3d) rotateX(90deg);
transform-origin: top;
}
/* Bottom face */
.bottom .minoes-table .mino::after,
.bottom .mino::after,
.bottom td.trail-animation::after,
.bottom tr.cleared-line-animation td::after {
--light: calc(
@@ -224,17 +236,17 @@ 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(var(--tl), var(--tl), calc(-1 * var(--cell-side))) rotateX(-90deg);
transform: var(--t3d) rotateX(-90deg);
transform-origin: bottom;
}
.J.mino, .J.mino + :not(.mino) { --h: 210deg; --s: 78%; --l: 52%; --a: 0.75; }
.L.mino, .L.mino + :not(.mino) { --h: 28deg; --s: 85%; --l: 52%; --a: 0.75; }
.O.mino, .O.mino + :not(.mino) { --h: 48deg; --s: 88%; --l: 52%; --a: 0.75; }
.I.mino, .I.mino + :not(.mino) { --h: 200deg; --s: 70%; --l: 52%; --a: 0.75; }
.S.mino, .S.mino + :not(.mino) { --h: 118deg; --s: 45%; --l: 52%; --a: 0.75; }
.T.mino, .T.mino + :not(.mino) { --h: 293deg; --s: 48%; --l: 52%; --a: 0.75; }
.Z.mino, .Z.mino + :not(.mino) { --h: 352deg; --s: 75%; --l: 52%; --a: 0.75; }
.J, .J + :not(.mino) { --h: 210deg; --s: 78%; --l: 52%; --a: 0.75; }
.L, .L + :not(.mino) { --h: 28deg; --s: 85%; --l: 52%; --a: 0.75; }
.O, .O + :not(.mino) { --h: 48deg; --s: 88%; --l: 52%; --a: 0.75; }
.I, .I + :not(.mino) { --h: 200deg; --s: 70%; --l: 52%; --a: 0.75; }
.S, .S + :not(.mino) { --h: 118deg; --s: 45%; --l: 52%; --a: 0.75; }
.T, .T + :not(.mino) { --h: 293deg; --s: 48%; --l: 52%; --a: 0.75; }
.Z, .Z + :not(.mino) { --h: 352deg; --s: 75%; --l: 52%; --a: 0.75; }
.ghost.mino, .ghost.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 55%; --a: 0.40; }
.locking.mino, .locking.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 92%; --a: 0.72; }
@@ -347,8 +359,7 @@ tr.cleared-line-animation td::after {
}
30% {
transform: translateZ(0);
transform: scale3d(1, 1, 1);
transform: translateZ(0) scale3d(1, 1, 1);
}
80% {