From 7fd6277594fd0c8e50481e44d8f500f99c448d98 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sun, 12 Jul 2026 19:46:02 -0500 Subject: feat(gallery): restyle the slide toggle after its hardware lineage Card 01 now wears the iPod-hold-switch skin from the reference: dome thumb, engraved ON/OFF revealed opposite the thumb, amber track when on. Built with flex and fixed pixels only, since absolute insets and stretched widths misrender under stage zoom. The spec sheet records the full lineage: slide switch, iPod hold switch with its orange reveal, then the iOS toggle. --- docs/prototypes/panel-widget-gallery.html | 30 ++++++++++++++------- .../references/2026-07-12-pill-toggle-render.jpg | Bin 0 -> 8023 bytes 2 files changed, 20 insertions(+), 10 deletions(-) create mode 100644 working/retro-stereo-widgets/references/2026-07-12-pill-toggle-render.jpg diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html index 2e479e6..f3a23bd 100644 --- a/docs/prototypes/panel-widget-gallery.html +++ b/docs/prototypes/panel-widget-gallery.html @@ -116,14 +116,24 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1} /* standard pulse: 1s ease-in-out — the norm for every pulsing / flashing element */ @keyframes pulse{50%{opacity:.25}} -.switch{display:inline-block;width:40px;height:21px;border-radius:11px;background:var(--wash);border:1px solid var(--slate); - position:relative;cursor:pointer} -.switch::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%; - background:var(--dim);transition:left .15s} -.switch.on{background:var(--slate);border-color:var(--gold)} -.switch.on::after{left:21px;background:var(--gold)} -.switch.red{background:rgba(203,107,77,.2);border-color:var(--fail)} -.switch.red::after{background:var(--fail);left:2px} +/* slide toggle — after the iPod-hold-switch pill: dome thumb, revealed state engraving. + Flex layout with fixed px only: absolute insets and stretched widths misrender under stage zoom. */ +.switch{display:inline-flex;align-items:center;justify-content:space-between;width:52px;height:23px; + border-radius:12px;padding:2px 7px 2px 2px;cursor:pointer; + background:linear-gradient(180deg,#15130f,#242019);border:1px solid var(--slate); + box-shadow:inset 0 1.5px 3px rgba(0,0,0,.55)} +.switch::before{content:"OFF";order:2;font-size:7px;letter-spacing:.06em;font-weight:700; + font-family:var(--mono);color:var(--dim)} +.switch::after{content:"";order:1;width:17px;height:17px;border-radius:50%; + background:radial-gradient(circle at 35% 28%,#a8a396,#55524a); + box-shadow:0 1px 2.5px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.25)} +.switch.on{background:linear-gradient(180deg,var(--amber-grad-top),var(--gold));border-color:var(--gold-hi); + padding:2px 2px 2px 7px;box-shadow:inset 0 1.5px 3px rgba(0,0,0,.3)} +.switch.on::before{content:"ON";order:1;color:var(--panel)} +.switch.on::after{order:2;background:radial-gradient(circle at 35% 28%,#f6f2e8,#b0aa9a)} +.switch.red{background:linear-gradient(180deg,#d98a6f,var(--fail));border-color:var(--fail);padding:2px 2px 2px 7px} +.switch.red::before{content:"OFF";order:1;color:var(--cream)} +.switch.red::after{order:2} .key{font:inherit;font-size:11.5px;letter-spacing:.06em;color:var(--silver);cursor:pointer; background:linear-gradient(180deg,#23211e,#191715);border:1px solid #33302b;border-bottom-color:#0c0b0a; @@ -766,9 +776,9 @@ const INFO={ solves:'One persistent on/off state, visible at a glance without reading text.', use:'Common in every modern UI. Shines as a master control: power, mute, enable.', limits:'Two states only. Ambiguous if the on-direction is not marked.', - origin:'The touchscreen pill toggle — the digital descendant of the slide switch.',difficulty:'Intuitive.', + origin:'Slide switches (transistor radios, Walkman hold) → the iPod hold switch with its orange reveal → the iOS toggle (2007). This card wears the hardware skin of that lineage.',difficulty:'Intuitive.', prefer:'The state persists and gets glanced at more than changed. For period consoles use R03 or N01 instead.', - period:'Modern (2007+ touchscreen idiom) — the only born-digital control here; it will look wrong beside nixies.'}, + period:'The pill rendering is modern (iPod/iOS era); the slide-switch mechanism underneath is 1950s+.'}, '02':{input:'Click one key to engage it; the others release. Click-only.', solves:'One-of-few mode selection where the active mode must glow.', use:'Common on consoles. Shines for 2-4 modes switched often.', diff --git a/working/retro-stereo-widgets/references/2026-07-12-pill-toggle-render.jpg b/working/retro-stereo-widgets/references/2026-07-12-pill-toggle-render.jpg new file mode 100644 index 0000000..c1c0b14 Binary files /dev/null and b/working/retro-stereo-widgets/references/2026-07-12-pill-toggle-render.jpg differ -- cgit v1.2.3