From 1646dfcd90f256467da448b38eb9756cb9443697 Mon Sep 17 00:00:00 2001 From: funman300 Date: Thu, 30 Apr 2026 21:29:58 -0700 Subject: [PATCH] waybar: drop unsupported CSS transform from tray drawer arrow GTK 3 CSS (used by waybar) treats `transform` as a fatal parse error, so the rotation approach killed waybar entirely. Use a color shift from @tn-fg-muted to @tn-fg as the expanded-state feedback instead. Matches the existing style.css convention (battery/cpu/temperature states all use color shifts, not transforms). Co-Authored-By: Claude Opus 4.7 (1M context) --- .../specs/2026-04-30-waybar-tray-drawer-design.md | 14 +++++++------- waybar/style.css | 4 ++-- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/superpowers/specs/2026-04-30-waybar-tray-drawer-design.md b/docs/superpowers/specs/2026-04-30-waybar-tray-drawer-design.md index 402f548..2769360 100644 --- a/docs/superpowers/specs/2026-04-30-waybar-tray-drawer-design.md +++ b/docs/superpowers/specs/2026-04-30-waybar-tray-drawer-design.md @@ -56,25 +56,25 @@ Replace `"tray"` in `modules-right` with `"group/tray-drawer"`. Add the group de The arrow is the first module in the group, so it stays visible when collapsed; `tray` is revealed/hidden by the drawer. -Glyph `` is `nf-fa-chevron_right` from Nerd Fonts. Pointing right when collapsed reads as "more stuff is hidden over here — click to reveal"; CSS rotates it to point left when expanded, signalling "click to put it back". +Glyph `` is `nf-fa-chevron_right` from Nerd Fonts. Pointing right when collapsed reads as "more stuff is hidden over here — click to reveal". The arrow does not rotate when expanded — GTK 3 CSS (which waybar uses) does not support the `transform` property and treats it as a fatal parse error. Instead, the chevron's color brightens from muted to full foreground as visual feedback that the drawer is open. ### `waybar/style.css` -Add styling for the chevron and a rotation rule keyed off the drawer's expanded state: +Add a base style for the chevron and a brightened-color rule keyed off the drawer's expanded state: ```css #custom-tray-arrow { - padding: 0 8px; - color: @fg-dim; - transition: transform 200ms ease; + padding: 0 12px; + color: @tn-fg-muted; + transition: color 200ms ease; } #group-tray-drawer.expanded #custom-tray-arrow { - transform: rotate(180deg); + color: @tn-fg; } ``` -Reuse the existing dim foreground colour variable so the arrow blends with other inactive-state glyphs and doesn't read as a status icon. Match `transition-duration` to the drawer's 200 ms. +`@tn-fg-muted` matches the unfocused-workspace color elsewhere in the bar — the chevron reads as an inactive control, not a status icon. When the drawer is open, the arrow brightens to `@tn-fg` (full foreground) over 200 ms — same duration as the drawer's slide. This matches the existing `style.css` pattern of using color shifts (not transforms) to convey state, e.g. `battery.warning`, `cpu.critical`, `temperature.warm`. ### Compatibility diff --git a/waybar/style.css b/waybar/style.css index e7e2702..6648601 100644 --- a/waybar/style.css +++ b/waybar/style.css @@ -60,9 +60,9 @@ window#waybar { #custom-tray-arrow { padding: 0 12px; color: @tn-fg-muted; - transition: transform 200ms ease; + transition: color 200ms ease; } #group-tray-drawer.expanded #custom-tray-arrow { - transform: rotate(180deg); + color: @tn-fg; }