chris/dex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Who's that Pokémon?: accent-tinted spotlight instead of the white panel

Browse Source 
The near-white stage was too bright. Swap it for a radial gradient off
var(--accent): a pale centre (accent mixed 35% white) for the silhouette
to read against, through the full accent colour, to a soft dark rim.
Adapts to the chosen accent and works in every theme.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017Ve7HLspzeG2xDPtJQ8vmu
This commit is contained in:
chris 2026-09-10 13:01:09 -04:00
parent a57e516f16
commit 6c6158ad5e
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/styles/layout.css
View File

@ -3760,17 +3760,21 @@
color: var(--text-dim);
font-weight: 600;
}
/* A bright "TV screen" so the black silhouette reads in any theme. */
/* Accent-tinted spotlight: a pale centre for the silhouette to read
against, fading out to the full accent colour and a soft dark rim. */
.wtp__stage {
display: grid;
place-items: center;
padding: 20px;
border-radius: var(--radius-lg);
background:
radial-gradient(70% 60% at 50% 38%, #ffffff, transparent 75%),
linear-gradient(165deg, #cfe7ff 0%, #eaf4ff 55%, #f6fbff 100%);
border: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.5);
background: radial-gradient(
circle at 50% 46%,
color-mix(in srgb, var(--accent) 35%, #fff) 0%,
color-mix(in srgb, var(--accent) 88%, #fff) 42%,
var(--accent) 68%,
color-mix(in srgb, var(--accent) 78%, #000) 100%
);
border: 1px solid color-mix(in srgb, var(--accent) 60%, #000);
}
.wtp__art {
width: 260px;