From 46156387a7ca4f04065e48b935e1bd028ce09e7c Mon Sep 17 00:00:00 2001 From: Ivan Malison Date: Mon, 9 Feb 2026 01:33:00 -0800 Subject: [PATCH] taffybar: fix popup menu styling and submenu color bleed 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 --- dotfiles/config/taffybar/taffybar | 2 +- dotfiles/config/taffybar/taffybar.css | 150 +++++++++++++++++--------- 2 files changed, 100 insertions(+), 52 deletions(-) diff --git a/dotfiles/config/taffybar/taffybar b/dotfiles/config/taffybar/taffybar index ac0f3f31..2c0ddcab 160000 --- a/dotfiles/config/taffybar/taffybar +++ b/dotfiles/config/taffybar/taffybar @@ -1 +1 @@ -Subproject commit ac0f3f31411a8ac405229d668c171c60b9f02e56 +Subproject commit 2c0ddcab23a5898d1442282a27daf6695c1b6c24 diff --git a/dotfiles/config/taffybar/taffybar.css b/dotfiles/config/taffybar/taffybar.css index cb3db201..8912b92a 100644 --- a/dotfiles/config/taffybar/taffybar.css +++ b/dotfiles/config/taffybar/taffybar.css @@ -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; }