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

speed up css

Browse Source
This commit is contained in:
Adrien MALINGREY
2026-01-18 05:29:07 +01:00
parent a4117b782a
commit e196d931ca
2 changed files with 24 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
css/stereo.css
View File

@@ -64,10 +64,6 @@ body {
.card,
.card-header {
text-shadow:
calc(-0.01px * var(--rY) - 1px) calc(0.02px * var(--rX) - 1px) #ccc,
calc(-0.02px * var(--rY) - 1px) calc(0.04px * var(--rX) - 1px) #ccc,
calc(-0.01px * var(--rY) + 1px) calc(0.02px * var(--rX) + 1px) #222,
calc(-0.02px * var(--rY) + 1px) calc(0.04px * var(--rX) + 1px) #222,
calc(-0.3px * var(--rY)) calc(0.4px * var(--rX)) 5px #0008;
}
@@ -105,8 +101,6 @@ body {
tr.matrix td:not(.mino) {
border: 0;
will-change: transform;
transform: translateZ(0);
}
.minoes-table td {
@@ -121,18 +115,11 @@ tr.matrix td:not(.mino) {
.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);
--center-x: calc(35% + var(--light-x) * 10%);
--center-y: calc(35% + var(--light-y) * 10%);
--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: radial-gradient(
circle at var(--center-x) var(--center-y),
var(--center-color) 10%,
var(--edge-color) 100%
);
background: var(--center-color);
border-radius: 2px;
border: 2px outset var(--center-color);
box-shadow: 0 0 7px hsla(var(--h), var(--s), calc(var(--l) * var(--light) * 1.3), 20%);
}
.minoes-table .mino::before,
@@ -159,10 +146,18 @@ td.trail-animation {
+ (var(--light-y) * 0.3)
+ (var(--light-x) * 0.2)
);
--center-x: calc(35% + var(--light-x) * 10%);
--center-y: calc(35% + var(--light-y) * 10%);
background: radial-gradient(
circle at var(--center-x) var(--center-y),
var(--center-color) 10%,
var(--edge-color) 100%
);
}
/* Left face */
.minoes-table .mino::before,
td.trail-animation::before,
tr.cleared-line-animation td::before,
.left .minoes-table .mino + .mino::before {
--light: calc(
@@ -170,13 +165,14 @@ tr.cleared-line-animation td::before,
+ (var(--light-x) * -0.2)
+ (var(--light-y) * 0.15)
);
transform: translate3d(-2px, -2px, calc(-1 * var(--cell-side))) rotateY(-90deg);
transform: translate3d(-1.5px, -1.5px, calc(-1 * var(--cell-side))) rotateY(-90deg);
transform-origin: left;
}
/* Right face */
.right .minoes-table .mino + .mino::before,
.minoes-table .mino + :not(.mino)::before,
.right td.trail-animation::before,
.right tr.cleared-line-animation td::before {
--light: calc(
0.85
@@ -191,23 +187,25 @@ tr.cleared-line-animation td::before,
}
.right .minoes-table .mino:last-child::before {
transform: translate3d(-2px, -2px, calc(-1 * var(--cell-side))) rotateY(90deg) !important;
transform: translate3d(-1.5px, -1.5px, calc(-1 * var(--cell-side))) rotateY(90deg) !important;
transform-origin: right !important;
}
/* Top face */
.minoes-table .mino::after,
td.trail-animation::after,
tr.cleared-line-animation td::after {
--light: calc(
1.5
+ (var(--light-y) * 0.2)
);
transform: translate3d(-2px, -2px, calc(-1 * var(--cell-side))) rotateX(90deg);
transform: translate3d(-1.5px, -1.5px, calc(-1 * var(--cell-side))) rotateX(90deg);
transform-origin: top;
}
/* Bottom face */
.bottom .minoes-table .mino::after,
.bottom td.trail-animation::after,
.bottom tr.cleared-line-animation td::after {
--light: calc(
1.1
@@ -216,7 +214,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(-2px, -2px, calc(-1 * var(--cell-side))) rotateX(-90deg);
transform: translate3d(-1.5px, -1.5px, calc(-1 * var(--cell-side))) rotateX(-90deg);
transform-origin: bottom;
}
@@ -231,8 +229,6 @@ tr.cleared-line-animation td::after {
.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; }
.disabled.mino, .disabled.mino + :not(.mino) { --h: 0deg; --s: 0%; --l: 45%; --a: 0.72; }
td.trail-animation { --h: 180deg; --s: 50%; --l: 90%; --a: 0.4; }
#holdTable .J + :not(.mino),
#holdTable .L + :not(.mino),
@@ -250,13 +246,19 @@ td.trail-animation { --h: 180deg; --s: 50%; --l: 90%; --a: 0.4; }
@keyframes trail-animation {
from {
background-color: hsla(180, 100%, 100%, 0.1);
box-shadow: 0 0 10px hsla(180, 100%, 100%, 0.2);
border-color: hsla(180, 100%, 100%, 0.1);
}
to {
background-color: transparent;
border-color: transparent;
}
}
td.trail-animation::before,
td.trail-animation::after {
animation: trail-animation ease-out .3s;
}
@keyframes locked-animation {
from {
--h: 0deg; --s: 0%; --l: 100%; --a: 1;