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

taffybar: fix popup menu styling and submenu color bleed

Browse Source 
Use :not(menu):not(menuitem):not(popover) selectors to prevent
forcing transparent backgrounds on popup menus attached via
menuAttachToWidget. Add dedicated .dbusmenu-submenu styling.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ivan Malison
2026-02-09 01:33:00 -08:00
committed by Kat Huang
parent 8a75f7a8f4
commit 46156387a7
2 changed files with 100 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dotfiles/config/taffybar/taffybar

Submodule dotfiles/config/taffybar/taffybar updated: ac0f3f3141...2c0ddcab23

150
dotfiles/config/taffybar/taffybar.css
View File

@@ -66,8 +66,10 @@
}
/* Make each widget's squircle background feel "solid": avoid GTK nodes and
labels painting their own backgrounds on top of `.outer-pad`. */
.outer-pad *,
labels painting their own backgrounds on top of `.outer-pad`.
Exclude menu/menuitem/popover so popup menus attached via
menuAttachToWidget aren't forced transparent. */
.outer-pad :not(menu):not(menuitem):not(popover),
.inner-pad,
.inner-pad *,
.contents,
@@ -325,15 +327,17 @@
/* ── Menu styling ───────────────────────────────────────────────────────
Force a clean white-background / black-text look on all popup menus
(GtkMenu, DBusMenu, popovers) regardless of the active GTK theme.
The CSS provider runs at priority 900 (above USER = 800). */
The CSS provider runs at priority 900 (above USER = 800).
The .outer-pad background rule uses :not(menu):not(menuitem) to avoid
forcing transparency on popup menu containers. For color, we need
high-specificity overrides since labels inside menus still match :not(menu). */
/* --- Popup menu containers ---
.outer-pad.sni-tray * (specificity 0,2,0) bleeds tray colors into
popup menus via GTK's menuAttachToWidget CSS parent chain.
We use compound class selectors (0,2,0+) to match or exceed that. */
.dbusmenu-menu.dbusmenu-root,
menu, menu.background,
.dbusmenu-menu {
.taffy-window menu (0,1,1) beats .taffy-window * (0,1,0) for background.
.outer-pad.sni-tray menu (0,2,1) beats .outer-pad.sni-tray * (0,2,0). */
menu,
.taffy-window menu,
.outer-pad menu {
background-color: #ffffff;
background-image: none;
color: #000000;
@@ -346,39 +350,36 @@ menu, menu.background,
padding: 4px 0;
}
/* Override tray color bleed using the SAME parent that causes it
(.outer-pad.sni-tray) plus menu descendant types → specificity 0,2,2+. */
.outer-pad.sni-tray menu,
/* --- Menu items ---
High specificity to beat .outer-pad.sni-tray * color bleed (0,2,0). */
.outer-pad.sni-tray menu menuitem,
.outer-pad.sni-tray menu menuitem *,
.outer-pad menu,
.outer-pad menu menuitem,
.outer-pad menu menuitem *,
.taffy-window menu menuitem,
.taffy-window menu menuitem * {
color: #000000;
text-shadow: none;
font-family: "Noto Sans", sans-serif;
font-size: 10pt;
font-weight: 400;
}
/* Menu items: white bg. */
.outer-pad.sni-tray menu menuitem,
.outer-pad menu menuitem,
menu menuitem {
background-color: #ffffff;
background-image: none;
color: #000000;
font-family: "Noto Sans", sans-serif;
font-size: 10pt;
font-weight: 400;
text-shadow: none;
padding: 4px 12px;
min-height: 20px;
}
/* Children transparent so hover bg shows through. */
.outer-pad.sni-tray menu menuitem *,
.outer-pad menu menuitem *,
menu menuitem * {
/* Children: transparent bg so hover shows through; override color bleed.
Use :not(menu) to avoid forcing transparency on nested submenu containers. */
.outer-pad.sni-tray menu menuitem :not(menu),
.outer-pad menu menuitem :not(menu),
.taffy-window menu menuitem :not(menu),
menu menuitem :not(menu) {
background-color: transparent;
background-image: none;
color: #000000;
font-family: "Noto Sans", sans-serif;
font-size: 10pt;
font-weight: 400;
text-shadow: none;
}
/* --- Hover --- */
@@ -388,15 +389,14 @@ menu menuitem:hover {
background-color: #4a90d9;
}
.outer-pad.sni-tray menu menuitem:hover *,
.outer-pad menu menuitem:hover *,
menu menuitem:hover * {
background-color: transparent;
.outer-pad.sni-tray menu menuitem:hover :not(menu),
.outer-pad menu menuitem:hover :not(menu),
menu menuitem:hover :not(menu),
menu menuitem:hover {
color: #ffffff;
}
/* --- Separators --- */
.dbusmenu-menu .dbusmenu-separator,
menuitem separator {
background-color: transparent;
min-height: 1px;
@@ -405,30 +405,19 @@ menuitem separator {
}
/* --- Arrows & toggle indicators --- */
.dbusmenu-menu.dbusmenu-root menuitem arrow,
menuitem arrow {
background-color: transparent;
color: rgba(0, 0, 0, 0.4);
}
.dbusmenu-menu.dbusmenu-root menuitem check,
.dbusmenu-menu.dbusmenu-root menuitem radio,
menuitem check, menuitem radio {
background-color: transparent;
color: #000000;
}
/* --- Submenus --- */
.dbusmenu-submenu,
.dbusmenu-menu menu {
background-color: #ffffff;
background-image: none;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 6px;
padding: 4px 0;
}
/* --- Background/decoration nodes in popup windows --- */
/* --- Background/decoration nodes in popup windows ---
Submenus are separate popup windows that may NOT be CSS descendants of
.taffy-window or .outer-pad. Cover every popup window layer. */
window.popup, window.popup.background,
window.menu, window.menu.background {
background-color: #ffffff;
@@ -440,6 +429,64 @@ window.popup decoration, window.menu decoration {
background-image: none;
}
/* Catch submenus that aren't CSS descendants of .taffy-window/.outer-pad.
Use .dbusmenu-submenu class (added by DBusMenu.hs) plus type selectors. */
/* Submenu rules need specificity > 0,2,0 to beat .outer-pad.sni-tray *
which bleeds tray colors into submenus via the CSS parent chain. */
.outer-pad .dbusmenu-submenu,
.dbusmenu-submenu {
background-color: #ffffff;
background-image: none;
color: #000000;
font-family: "Noto Sans", sans-serif;
font-size: 10pt;
font-weight: 400;
text-shadow: none;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 6px;
padding: 4px 0;
}
.outer-pad.sni-tray .dbusmenu-submenu menuitem,
.outer-pad .dbusmenu-submenu menuitem,
.dbusmenu-submenu menuitem {
background-color: #ffffff;
background-image: none;
color: #000000;
font-family: "Noto Sans", sans-serif;
font-size: 10pt;
font-weight: 400;
text-shadow: none;
padding: 4px 12px;
min-height: 20px;
}
.outer-pad.sni-tray .dbusmenu-submenu menuitem *,
.outer-pad .dbusmenu-submenu menuitem *,
.dbusmenu-submenu menuitem * {
background-color: transparent;
background-image: none;
color: #000000;
font-family: "Noto Sans", sans-serif;
font-size: 10pt;
font-weight: 400;
text-shadow: none;
}
.outer-pad.sni-tray .dbusmenu-submenu menuitem:hover,
.outer-pad .dbusmenu-submenu menuitem:hover,
.dbusmenu-submenu menuitem:hover {
background-color: #4a90d9;
}
.outer-pad.sni-tray .dbusmenu-submenu menuitem:hover *,
.outer-pad .dbusmenu-submenu menuitem:hover *,
.dbusmenu-submenu menuitem:hover *,
.outer-pad.sni-tray .dbusmenu-submenu menuitem:hover,
.dbusmenu-submenu menuitem:hover {
color: #ffffff;
}
/* --- Popovers (some SNI apps use these instead of GtkMenu) --- */
popover, popover.background, popover > contents {
background-color: #ffffff;
@@ -463,7 +510,8 @@ popover modelbutton {
}
popover modelbutton:hover {
background-color: #e0e0e0;
background-color: #4a90d9;
color: #ffffff;
}
.clock label,
@@ -472,6 +520,6 @@ popover modelbutton:hover {
letter-spacing: 0.2px;
}
r.mpris label {
.mpris label {
color: @font-muted;
}