doxa-life/doxa-maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Desktop legends: one readable step up in type size (title 14, rows 14/12.5, headers 12/10); mobile sheet unchanged
Some checks are pending
Deploy to GitHub Pages / build (push) Waiting to run
Details
Deploy to GitHub Pages / deploy (push) Blocked by required conditions
Details

Browse source
This commit is contained in:
swift-river542 2026-09-16 16:18:12 -05:00
parent fb1882420f
commit 159e2acf0c
1 changed files with 19 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
library/components/legends/LegendDesktop.vue
View file

@ -31,6 +31,25 @@ useShadowStyles(`
clicks a pin and the detail panel swaps in over the language-family legend
(qa: 2026-05-02). */
.legend-container{position:absolute;top:60px;left:8px;width:var(--map-legend-width,380px);max-height:calc(100vh - 80px);background:#fff;border-radius:var(--map-radius,16px);box-shadow:0 2px 8px rgba(0,0,0,0.12),0 1px 3px rgba(0,0,0,0.08);z-index:1000;overflow:hidden;display:flex;flex-direction:column;transition:width 200ms cubic-bezier(0.2,0,0,1),max-height 200ms cubic-bezier(0.2,0,0,1),min-width 200ms cubic-bezier(0.2,0,0,1),border-radius 200ms linear,box-shadow 200ms linear;will-change:width,max-height;}
/* ── DESKTOP TYPE SCALE — one readable step up (Driver, 2026-09-16: "the desktop font
sizes in the legends need to be increased"). Scoped to the desktop panels only:
the mobile sheet (.legend-mobile-sheet) keeps its own sizes. Base sizes live in
SemanticTreeLegend / LegendRows; this block only overrides size, never layout. ── */
.stl-panel:not(.legend-mobile-sheet *) .stl-tb-text{font-size:14px;}
.stl-panel:not(.legend-mobile-sheet *) .stl-tb-eyebrow{font-size:10px;}
.stl-panel:not(.legend-mobile-sheet *) .stl-tab{font-size:11px;}
.stl-panel:not(.legend-mobile-sheet *) .stl-hdr-name{font-size:12px;}
.stl-panel:not(.legend-mobile-sheet *) .stl-hdr-num{font-size:10px;}
.stl-panel:not(.legend-mobile-sheet *) .stl-name{font-size:14px;}
.stl-panel:not(.legend-mobile-sheet *) .stl-num{font-size:12.5px;}
.stl-panel:not(.legend-mobile-sheet *) .stl-info-pop{font-size:12.5px;}
.stl-panel:not(.legend-mobile-sheet *) .stl-empty,
.stl-panel:not(.legend-mobile-sheet *) .stl-overflow{font-size:12px;}
.legend-container .lrg-title{font-size:15px;}
.legend-container .lrg-header-col{font-size:11px;}
.legend-container .lrg-name{font-size:15px;}
.legend-container .lrg-badge-inner{font-size:12px;}
/* Collapsed: pill imitates SemanticTreeLegend's .stl-reopen —
rounded pill (999px radius), dark background, subtle border,
floating shadow, uppercase monospace font. Hover lifts + glows.