diff options
| -rw-r--r-- | styles/modules.css | 17 | ||||
| -rw-r--r-- | styles/pills.css | 4 |
2 files changed, 15 insertions, 6 deletions
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. * diff --git a/styles/pills.css b/styles/pills.css index 93a8855..1794523 100644 --- a/styles/pills.css +++ b/styles/pills.css @@ -34,7 +34,9 @@ /* Hover. The one rule that makes the bar feel alive, and the reason every * pill declares a transition above. */ -#image.launcher:hover, +/* The launcher is absent on purpose: its mark is an image CSS cannot recolour, + * so a hover background would paint the mark in its own colour. See + * modules.css. */ #clock.date:hover, #clock.time:hover, #custom-vmdot:hover, |