diff options
| -rw-r--r-- | docs/prototypes/panel-widget-gallery.html | 11 |
1 files changed, 6 insertions, 5 deletions
diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html index a4a4264..42ba252 100644 --- a/docs/prototypes/panel-widget-gallery.html +++ b/docs/prototypes/panel-widget-gallery.html @@ -450,7 +450,8 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1} /* screen-family chips (alt phosphor / tube colors per screen widget) */ .famchips{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:1px} -.famchips .lab{color:var(--steel);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;margin-right:2px} +.famchips .lab{color:var(--steel);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase; + margin-right:2px;min-width:64px} .famchips .fc{width:13px;height:13px;border-radius:50%;cursor:pointer; border:1px solid rgba(255,255,255,.22);box-shadow:0 1px 3px rgba(0,0,0,.5)} .famchips .fc.on{outline:2px solid var(--silver);outline-offset:1px} @@ -4260,8 +4261,8 @@ BOOST.forEach(no=>{const rd=document.getElementById('rd-'+no); dark:{dot:'#2c2824',vars:{'--sw-thumb':'radial-gradient(circle at 35% 28%,#4a453e,#16130f)'}}, chrome:{dot:'#9aa2b4',vars:{'--sw-thumb':'radial-gradient(circle at 35% 28%,#dfe6f2,#6d7484)'}}, brass:{dot:'#b8944a',vars:{'--sw-thumb':'radial-gradient(circle at 35% 28%,#e2c47a,#8a6a24)'}}}; - const row=document.createElement('div'); row.className='famchips'; const group=(label,opts,def)=>{ + const row=document.createElement('div'); row.className='famchips'; const lab=document.createElement('span'); lab.className='lab'; lab.textContent=label; row.appendChild(lab); const chips=[]; for(const [name,o] of Object.entries(opts)){ @@ -4270,12 +4271,12 @@ BOOST.forEach(no=>{const rd=document.getElementById('rd-'+no); 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);}}; + row.appendChild(b);} + cardEl.querySelector('.opts').appendChild(row);}; group('on',ON_OPTS,'amber'); group('off',OFF_OPTS,'dark'); group('off text',OFFTXT_OPTS,'white'); - group('thumb',THUMB_OPTS,'light'); - cardEl.querySelector('.opts').appendChild(row);})(); + group('thumb',THUMB_OPTS,'light');})(); </script> </body> </html> |