diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/prototypes/panel-widget-gallery.html | 30 |
1 files changed, 27 insertions, 3 deletions
diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html index 410e559..42aa5e3 100644 --- a/docs/prototypes/panel-widget-gallery.html +++ b/docs/prototypes/panel-widget-gallery.html @@ -122,14 +122,16 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1} Flex layout with fixed px only: absolute insets and stretched widths misrender under stage zoom. */ .switch{display:inline-flex;vertical-align:middle;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); + background:var(--sw-off-bg,linear-gradient(180deg,#15130f,#242019)); + border:1px solid var(--sw-off-brd,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)} + font-family:var(--mono);color:var(--sw-off-ink,var(--dim))} .switch::after{content:"";order:1;width:17px;height:17px;border-radius:50%; background:radial-gradient(circle at 35% 28%,#f6f2e8,#b0aa9a); 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); +.switch.on{background:var(--sw-on-bg,linear-gradient(180deg,var(--amber-grad-top),var(--gold))); + border-color:var(--sw-on-brd,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} @@ -4192,6 +4194,28 @@ screenChips('R31',$('radar'),['amber','green','red','blue','vfd'],'amber'); screenChips('N11',$('scopep').closest('.scope'),['green','amber','red','blue','vfd'],'green'); BOOST.forEach(no=>{const rd=document.getElementById('rd-'+no); if(rd)rd.closest('.card').querySelector('.stagew').classList.add('boost');}); + +/* slide-toggle color choices: track color per state, thumb never changes */ +(function(){const sw=document.querySelector('.switch');if(!sw)return; + const cardEl=sw.closest('.card'); + const ON_OPTS={amber:{dot:'var(--gold-hi)',vars:{'--sw-on-bg':'linear-gradient(180deg,var(--amber-grad-top),var(--gold))','--sw-on-brd':'var(--gold-hi)'}}, + green:{dot:'#8fb944',vars:{'--sw-on-bg':'linear-gradient(180deg,#a9c95f,var(--pass))','--sw-on-brd':'#a9c95f'}}}; + const OFF_OPTS={dark:{dot:'#242019',vars:{'--sw-off-bg':'linear-gradient(180deg,#15130f,#242019)','--sw-off-brd':'var(--slate)','--sw-off-ink':'var(--dim)'}}, + red:{dot:'var(--fail)',vars:{'--sw-off-bg':'linear-gradient(180deg,#d98a6f,var(--fail))','--sw-off-brd':'var(--fail)','--sw-off-ink':'var(--cream)'}}}; + const row=document.createElement('div'); row.className='famchips'; + const group=(label,opts,def)=>{ + const lab=document.createElement('span'); lab.className='lab'; lab.textContent=label; row.appendChild(lab); + const chips=[]; + for(const [name,o] of Object.entries(opts)){ + const b=document.createElement('span'); b.className='fc'+(name===def?' on':''); + b.style.background=o.dot; b.title=name; chips.push(b); + b.addEventListener('click',()=>{ + for(const [k,v] of Object.entries(o.vars)) sw.style.setProperty(k,v); + chips.forEach(x=>x.classList.toggle('on',x===b));}); + row.appendChild(b);}}; + group('on',ON_OPTS,'amber'); + group('off',OFF_OPTS,'dark'); + cardEl.insertBefore(row,cardEl.querySelector('.wrd'));})(); </script> </body> </html> |