diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/prototypes/panel-widget-gallery.html | 30 |
1 files changed, 20 insertions, 10 deletions
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.', |