falkan/dickloads
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: correct invisible text in result tiles (light mode)

Browse Source 
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:
Falkan
2026-03-17 11:19:00 -04:00
parent 510e61a553
commit 0f648ab9b8
1 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/app.css
View File

@@ -75,6 +75,11 @@
gap: 0.2rem; gap: 0.2rem;
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
user-select: none; 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, .result-tile:hover,
@@ -88,9 +93,7 @@
font-weight: 600; font-weight: 600;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
word-break: break-all; word-break: break-all;
/* No explicit color — inherit from body. Pico sets this correctly for both /* color inherits from .result-tile which has already corrected for Pico's button reset */
light (#373c44) and dark (#c2c7d0). Overriding with a CSS var here is
what caused the invisible-text regression. */
} }
.result-label { .result-label {