From 7f52e94d2386858cb32c18d5a5982dbb966cb174 Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Tue, 15 Sep 2026 17:19:40 +0200 Subject: fix: stop the launcher hover from erasing its own mark The mark is filled with @main-bg so it contrasts against the accent pill, and the hover rule set that pill's background to @main-bg. Identical colours, so hovering painted the mark in its own colour and the pill went blank. This is the same fault as the first version, one state over: that one filled the mark with @accent and drew it on the @accent pill. The mark is a rendered image inside the module rather than a CSS background, so CSS cannot recolour it per state, and any hover colour would have to contrast with both @accent and @main-bg at once. So the pill holds its colour: it is dropped from the shared hover rule and its own override is gone, leaving the cursor to signal that it is clickable. Both stylesheets carry a comment saying why, because the obvious edit is to add a hover back. Co-Authored-By: Claude Opus 5 --- styles/modules.css | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) (limited to 'styles/modules.css') diff --git a/styles/modules.css b/styles/modules.css index 9044455..cac68da 100644 --- a/styles/modules.css +++ b/styles/modules.css @@ -20,11 +20,18 @@ min-width: 20px; } -/* The accent pill inverts on hover rather than lightening: it is already the - * brightest thing on the bar. */ -#image.launcher:hover { - background-color: @main-bg; -} +/* This pill deliberately has NO hover background. + * + * The mark is a rendered image inside the module, not a CSS background, so + * CSS cannot recolour it for a hover state. It is filled with @main-bg to + * contrast against the accent pill, which means any hover that sets the + * background to @main-bg paints the mark in its own colour and the pill goes + * blank. That shipped twice: first filled with @accent on an @accent pill, + * then hovering to @main-bg with an @main-bg mark. + * + * Changing the background here at all requires a colour that contrasts with + * BOTH @accent and @main-bg, which the palette does not owe us. So the pill + * holds its colour and the cursor alone signals it is clickable. */ /* ---------------------------------------------- * * Clock: the only text, each with a leading icon. * -- cgit v1.2.3