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 <noreply@anthropic.com>

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`. */
+   labels painting their own backgrounds on top of `.outer-pad`.
-.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
+   .taffy-window menu (0,1,1) beats .taffy-window * (0,1,0) for background.
-   popup menus via GTK's menuAttachToWidget CSS parent chain.
+   .outer-pad.sni-tray menu (0,2,1) beats .outer-pad.sni-tray * (0,2,0). */
-   We use compound class selectors (0,2,0+) to match or exceed that. */
+menu,
-.dbusmenu-menu.dbusmenu-root,
+.taffy-window menu,
-menu, menu.background,
+.outer-pad menu {
-.dbusmenu-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
+/* --- Menu items ---
-   (.outer-pad.sni-tray) plus menu descendant types → specificity 0,2,2+. */
+   High specificity to beat .outer-pad.sni-tray * color bleed (0,2,0). */
-.outer-pad.sni-tray menu,
 .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. */
+/* Children: transparent bg so hover shows through; override color bleed.
-.outer-pad.sni-tray menu menuitem *,
+   Use :not(menu) to avoid forcing transparency on nested submenu containers. */
-.outer-pad menu menuitem *,
+.outer-pad.sni-tray menu menuitem :not(menu),
-menu menuitem * {
+.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.sni-tray menu menuitem:hover :not(menu),
-.outer-pad menu menuitem:hover *,
+.outer-pad menu menuitem:hover :not(menu),
-menu menuitem:hover * {
+menu menuitem:hover :not(menu),
-	background-color: transparent;
+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 --- */
+/* --- Background/decoration nodes in popup windows ---
-.dbusmenu-submenu,
+   Submenus are separate popup windows that may NOT be CSS descendants of
-.dbusmenu-menu menu {
+   .taffy-window or .outer-pad.  Cover every popup window layer. */
-	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 --- */
 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;
 }