diff options
Diffstat (limited to 'docs/prototypes')
| -rw-r--r-- | docs/prototypes/panel-widget-gallery.html | 15 |
1 files changed, 12 insertions, 3 deletions
diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html index d67034b..839d479 100644 --- a/docs/prototypes/panel-widget-gallery.html +++ b/docs/prototypes/panel-widget-gallery.html @@ -57,6 +57,10 @@ h1{color:var(--gold);font-size:1.5rem;margin:.35rem 0 .4rem} /* size toggle scales the widget stage only; card text stays at its own (slightly raised) size */ body[data-size="2"] .stagew{zoom:1.7} body[data-size="3"] .stagew{zoom:2.4} +/* intrinsically tiny widgets get an extra bump so they do not float in an empty stage */ +.stagew.boost{zoom:1.5} +body[data-size="2"] .stagew.boost{zoom:2.55} +body[data-size="3"] .stagew.boost{zoom:3.6} body[data-size="2"] .grid{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))} body[data-size="3"] .grid{grid-template-columns:repeat(auto-fill,minmax(520px,1fr))} body[data-size="2"] .wrap,body[data-size="3"] .wrap{max-width:none} @@ -390,11 +394,12 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1} .scope polyline{fill:none;stroke:var(--scr-hi,var(--phos));stroke-width:1.6;filter:drop-shadow(0 0 3px var(--scr-glow,rgba(127,224,160,.8)))} /* voice-loop keyset */ -.vloop{display:grid;grid-template-columns:repeat(4,1fr);gap:4px} -.vk{position:relative;font-size:7px;letter-spacing:.05em;text-align:center;padding:7px 4px 9px;cursor:pointer; +.vloop{display:grid;grid-template-columns:repeat(4,52px);gap:4px} +.vk{display:flex;flex-direction:column;align-items:stretch;gap:4px;font-size:7px;letter-spacing:.05em; + text-align:center;padding:6px 4px 4px;cursor:pointer; color:var(--dim);background:linear-gradient(180deg,#23211e,#191715);border:1px solid #33302b;border-radius:4px; font-family:var(--mono)} -.vk .bar{position:absolute;left:4px;right:4px;bottom:3px;height:3px;border-radius:2px;background:#16240f} +.vk .bar{height:3px;width:40px;align-self:center;border-radius:2px;background:#16240f} .vk.mon{color:var(--silver)} .vk.mon .bar{background:var(--pass);box-shadow:0 0 4px rgba(116,147,47,.6)} .vk.mon.act .bar{background:#a8d84a;box-shadow:0 0 7px rgba(150,200,60,.9)} @@ -636,6 +641,8 @@ document.querySelectorAll('.szbar .key').forEach(b=>b.addEventListener('click',( document.body.dataset.size=b.dataset.sz; document.querySelectorAll('.szbar .key').forEach(k=>k.classList.toggle('on',k===b)); })); +/* boost the intrinsically tiny widgets (audit: content under 10% of the stage) */ +const BOOST=['01','07','08','12','13','N14','18']; /* ---- palette section: read the generated :root block live ---- */ (function buildPalette(){ @@ -4130,6 +4137,8 @@ screenChips('R17',$('rcrt'),['green','amber','red','blue','vfd'],'green'); screenChips('R19',$('wregion'),['white','green','amber','blue','vfd'],'white'); 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');}); </script> </body> </html> |