fix+feat: fix invisible result values, inline symbol into label
Fix: .result-value was using color: var(--pico-color) which broke when our custom palette variables weren't in scope. Now inherits body color — Pico handles light/dark correctly without us needing to re-assert it. Feat: unit symbol merged inline into label as 'Blurbs (bl)', replacing the separate third line. Removes .result-symbol CSS rule. Cards are shorter and less cluttered.
This commit is contained in:
10
src/app.css
10
src/app.css
@@ -88,7 +88,9 @@
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
word-break: break-all;
|
||||
color: var(--pico-color); /* explicit; do not rely on inheritance */
|
||||
/* No explicit color — inherit from body. Pico sets this correctly for both
|
||||
light (#373c44) and dark (#c2c7d0). Overriding with a CSS var here is
|
||||
what caused the invisible-text regression. */
|
||||
}
|
||||
|
||||
.result-label {
|
||||
@@ -96,11 +98,7 @@
|
||||
color: var(--color-label);
|
||||
}
|
||||
|
||||
.result-symbol {
|
||||
font-size: 0.75rem;
|
||||
color: var(--pico-muted-color);
|
||||
font-style: italic;
|
||||
}
|
||||
/* .result-symbol removed — symbol is now rendered inline in the label */
|
||||
|
||||
/* ── Highlighted result (above grid) ──────────────────────────────────────── */
|
||||
.highlighted-result {
|
||||
|
||||
@@ -57,6 +57,5 @@
|
||||
aria-pressed={highlighted}
|
||||
>
|
||||
<span class="result-value">{formattedValue}</span>
|
||||
<span class="result-label">{unit.labelPlural}</span>
|
||||
<span class="result-symbol">{unit.symbol}</span>
|
||||
<span class="result-label">{unit.labelPlural} ({unit.symbol})</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user