funman300/dotfiles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

waybar: drop unsupported CSS transform from tray drawer arrow

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
funman300
2026-04-30 21:29:58 -07:00
parent 8b35df2989
commit 1646dfcd90
2 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/superpowers/specs/2026-04-30-waybar-tray-drawer-design.md
+7 -7
View File
@@ -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
waybar/style.css
+2 -2
View File
@@ -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;
}