diff options
Diffstat (limited to 'styles/modules.css')
| -rw-r--r-- | styles/modules.css | 49 |
1 files changed, 31 insertions, 18 deletions
diff --git a/styles/modules.css b/styles/modules.css index cac68da..9131752 100644 --- a/styles/modules.css +++ b/styles/modules.css @@ -10,28 +10,41 @@ * Launcher: the one always-coloured pill, and the desktop's identity. * * ------------------------------------------------------------------ */ -/* The mark itself is the image module's own content, so this only draws the - * pill it sits in. The horizontal padding is wider than the vertical so the - * pill reads as a capsule like its neighbours rather than a circle: an image - * module sizes to its icon, where the others size to their text. */ -#image.launcher { - background: @accent; +/* Launcher: two marks, one per state. + * + * The mark is a CSS background rather than an image module's content, which + * is what makes this possible at all: CSS can swap a background-image on + * :hover, but it cannot reach inside an image module to recolour what that + * module drew. + * + * Two files, same path, different fill: dark on the accent pill at rest, + * light on the dark pill when hovered. install.sh generates both from one + * source, so they cannot drift apart in shape. + * + * The hover background is set explicitly rather than left out. The GTK theme + * paints its own hover shade on the button node underneath, so declining to + * set one does not leave the pill alone, it leaves the shade in charge, and + * the pill went dark with the dark mark on it. That was the second version of + * this bug; the first filled the mark with @accent and drew it on the @accent + * pill. + * + * min-height is load-bearing: the label is a single space, so without it the + * background paints into a box with almost no height. */ +#custom-launcher { + background-color: @accent; + background-image: url("@CONFIG@/slackware.svg"); + background-repeat: no-repeat; + background-position: center; + background-size: 18px 18px; padding: 2px 14px; min-width: 20px; + min-height: 18px; } -/* 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. */ +#custom-launcher:hover { + background-color: @main-bg; + background-image: url("@CONFIG@/slackware-light.svg"); +} /* ---------------------------------------------- * * Clock: the only text, each with a leading icon. * |