From 0f648ab9b819487a808d5cb25e3ee78d7093beca Mon Sep 17 00:00:00 2001 From: Falkan Date: Tue, 17 Mar 2026 11:19:00 -0400 Subject: [PATCH] fix: correct invisible text in result tiles (light mode) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- src/app.css | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/app.css b/src/app.css index 59bb195..e7320a4 100644 --- a/src/app.css +++ b/src/app.css @@ -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 {