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

feat(client_web): update checkers appearance with engraved rings

Browse source
This commit is contained in:
Henri Bourcereau 2026-04-09 20:14:48 +02:00
parent cdadb26f14
commit e7c0a390e3
1 changed files with 30 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

37
client_web/assets/style.css
View file

@ -876,23 +876,46 @@ body {
justify-content: center;
font-size: 0.78rem;
font-weight: 600;
border: 2px solid var(--checker-ring);
box-shadow:
inset 0 2px 5px rgba(255,255,255,0.35),
inset 0 -1px 3px rgba(0,0,0,0.2),
0 2px 4px rgba(0,0,0,0.35);
flex-shrink: 0;
}
.checker + .checker { margin-top: -4px; }
.checker.white {
background: radial-gradient(circle at 38% 32%, #ffffff, var(--checker-white) 65%, #d8cdb0);
background-image:
radial-gradient(ellipse 50% 35% at 36% 30%,
rgba(255,255,255,0.65) 0%, transparent 100%),
radial-gradient(circle,
transparent 68%, rgba(160,130,70,0.22) 68.5%,
rgba(160,130,70,0.22) 71.5%, transparent 72%),
radial-gradient(circle,
transparent 43%, rgba(160,130,70,0.17) 43.5%,
rgba(160,130,70,0.17) 46.5%, transparent 47%),
radial-gradient(circle at 38% 32%,
#ffffff 0%, var(--checker-white) 52%, #c0b288 100%);
border: 1.8px solid var(--checker-ring);
box-shadow:
0 2px 6px rgba(0,0,0,0.4),
inset 0 -1px 3px rgba(0,0,0,0.15);
color: #443322;
}
.checker.black {
background: radial-gradient(circle at 38% 32%, #444444, #1c1008 65%, var(--checker-black));
background-image:
radial-gradient(ellipse 40% 28% at 36% 30%,
rgba(110,65,30,0.38) 0%, transparent 100%),
radial-gradient(circle,
transparent 68%, rgba(200,164,72,0.18) 68.5%,
rgba(200,164,72,0.18) 71.5%, transparent 72%),
radial-gradient(circle,
transparent 43%, rgba(200,164,72,0.13) 43.5%,
rgba(200,164,72,0.13) 46.5%, transparent 47%),
radial-gradient(circle at 38% 32%,
#4a2e1a 0%, #1c1008 45%, var(--checker-black) 100%);
border: 1.8px solid var(--checker-ring);
box-shadow:
0 2px 6px rgba(0,0,0,0.55),
inset 0 -1px 3px rgba(0,0,0,0.4);
color: #c8b898;
}