diff --git a/client_web/assets/style.css b/client_web/assets/style.css index bc6d5d7..b8ddd05 100644 --- a/client_web/assets/style.css +++ b/client_web/assets/style.css @@ -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; }