henri/trictrac
1
1
Fork 0
Code Issues 10 Pull requests Projects 1 Releases Packages Wiki Activity Actions

feat(client_web): checkers slide animation

Browse source
This commit is contained in:
Henri Bourcereau 2026-04-09 20:17:21 +02:00
parent e7c0a390e3
commit 784dc1c4f7
7 changed files with 180 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

18
client_web/assets/style.css
View file

@ -999,6 +999,24 @@ body {
letter-spacing: 0.14em;
}
/* ── §4a — Checker slide animation ─────────────────────────────────── */
@keyframes checker-slide-in {
from { transform: translate(var(--slide-dx, 0px), var(--slide-dy, 0px)); }
to { transform: none; }
}
.checker-stack.sliding {
animation: checker-slide-in 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Lift the field that owns a sliding stack above its siblings so the
checker doesn't slide under adjacent fields (isolation:isolate traps
z-index within each field's stacking context, so we must elevate the
field itself). */
.field:has(.checker-stack.sliding) {
isolation: auto;
z-index: 10;
position: relative;
}
/* ── Checker lift on selected field (§4b) ───────────────────────────── */
.field.selected .checker-stack {
transform: translateY(-5px);