fix: correct invisible text in result tiles (light mode)
Root cause: .result-tile has role="button", which triggers Pico's button rule setting --pico-color: var(--pico-primary-inverse) = #fff in light mode. Text inherited this white color, invisible on white card backgrounds. Fix: override --pico-color: initial and set explicit color: var(--pico-contrast) on .result-tile. --pico-contrast is #181c25 in light mode and #dfe3eb in dark — both legible against their respective card backgrounds.
This commit is contained in:
@@ -75,6 +75,11 @@
|
||||
gap: 0.2rem;
|
||||
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
user-select: none;
|
||||
/* Pico's [role=button] rule sets --pico-color: var(--pico-primary-inverse)
|
||||
which is #fff in light mode — making text invisible on white cards.
|
||||
Override it back to the body text color on the tile itself so children inherit correctly. */
|
||||
--pico-color: initial;
|
||||
color: var(--pico-contrast, #181c25);
|
||||
}
|
||||
|
||||
.result-tile:hover,
|
||||
@@ -88,9 +93,7 @@
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
word-break: break-all;
|
||||
/* 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. */
|
||||
/* color inherits from .result-tile which has already corrected for Pico's button reset */
|
||||
}
|
||||
|
||||
.result-label {
|
||||
|
||||
Reference in New Issue
Block a user