Fix taffybar host CSS composition

Author: colonelpanic8

dotfiles/config/taffybar/end-widget-colors.css

@@ -1,82 +1,83 @@
 /* End-widget color rotation.
  *
- * Defines a 5-color palette and cycles through it using :nth-child().
- * End widgets are children of their own container box in taffybar's layout,
- * so nth-child counts only among siblings in that box.
- *
- * NOTE: These rules also match workspace .outer-pad elements.
- * taffybar.css resets workspace pills via `.workspaces .outer-pad` which
- * has equal specificity but comes later in the cascade, so it wins.
+ * End widgets get semantic palette classes from Haskell (`.end-widget` plus
+ * `.end-slot-N`) when they are packed into the bar. That keeps the CSS simple
+ * and avoids relying on GTK's `:nth-child(...)` matching behavior.
  *
  * To change the palette, edit the @define-color values below.
- * To add more colors to the rotation, add end-color-6-* etc. and a
- * corresponding :nth-child(Nn+6) rule block (updating N in all selectors).
+ * To add more colors to the rotation, add end-color-6-* etc. and a matching
+ * `.end-slot-6` rule.
  */
 
 /* --- Rotation palette (5 colors) --- */
 
 /* 1 — indigo */
-@define-color end-color-1-bg      rgba(50, 60, 160, 0.92);
+@define-color end-color-1-bg      rgb(50, 60, 160);
 @define-color end-color-1-fg      #d5d8f8;
-@define-color end-color-1-border  rgba(90, 100, 210, 0.60);
+@define-color end-color-1-border  rgb(90, 100, 210);
 
 /* 2 — purple */
-@define-color end-color-2-bg      rgba(110, 45, 160, 0.92);
+@define-color end-color-2-bg      rgb(110, 45, 160);
 @define-color end-color-2-fg      #e8d5f8;
-@define-color end-color-2-border  rgba(155, 85, 210, 0.60);
+@define-color end-color-2-border  rgb(155, 85, 210);
 
 /* 3 — emerald */
-@define-color end-color-3-bg      rgba(25, 130, 75, 0.92);
+@define-color end-color-3-bg      rgb(25, 130, 75);
 @define-color end-color-3-fg      #c8f5e0;
-@define-color end-color-3-border  rgba(55, 190, 115, 0.60);
+@define-color end-color-3-border  rgb(55, 190, 115);
 
 /* 4 — teal */
-@define-color end-color-4-bg      rgba(20, 120, 140, 0.92);
+@define-color end-color-4-bg      rgb(20, 120, 140);
 @define-color end-color-4-fg      #d0f2f8;
-@define-color end-color-4-border  rgba(50, 175, 200, 0.60);
+@define-color end-color-4-border  rgb(50, 175, 200);
 
 /* 5 — rose */
-@define-color end-color-5-bg      rgba(160, 40, 70, 0.92);
+@define-color end-color-5-bg      rgb(160, 40, 70);
 @define-color end-color-5-fg      #f8d5e0;
-@define-color end-color-5-border  rgba(210, 80, 115, 0.60);
+@define-color end-color-5-border  rgb(210, 80, 115);
 
 /* --- Color rotation rules --- */
 
-/* Slot 1: indigo (child 1, 6, 11, ...) */
-.outer-pad:nth-child(5n+1) {
+/* Slot 1: indigo */
+.outer-pad.end-widget.end-slot-1 {
 	background-color: @end-color-1-bg;
+	background-image: none;
 	border-color: @end-color-1-border;
 	color: @end-color-1-fg;
 	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
 }
 
-/* Slot 2: purple (child 2, 7, 12, ...) */
-.outer-pad:nth-child(5n+2) {
+/* Slot 2: purple */
+.outer-pad.end-widget.end-slot-2 {
 	background-color: @end-color-2-bg;
+	background-image: none;
 	border-color: @end-color-2-border;
 	color: @end-color-2-fg;
 	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
 }
 
-/* Slot 3: emerald (child 3, 8, 13, ...) */
-.outer-pad:nth-child(5n+3) {
+/* Slot 3: emerald */
+.outer-pad.end-widget.end-slot-3 {
 	background-color: @end-color-3-bg;
+	background-image: none;
 	border-color: @end-color-3-border;
 	color: @end-color-3-fg;
 	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
 }
 
-/* Slot 4: teal (child 4, 9, 14, ...) */
-.outer-pad:nth-child(5n+4) {
+/* Slot 4: teal */
+.outer-pad.end-widget.end-slot-4 {
 	background-color: @end-color-4-bg;
+	background-image: none;
 	border-color: @end-color-4-border;
 	color: @end-color-4-fg;
 	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
 }
 
-/* Slot 5: rose (child 5, 10, 15, ...) */
-.outer-pad:nth-child(5n+5) {
+/* Slot 5: rose */
+.outer-pad.end-widget.end-slot-5 {
 	background-color: @end-color-5-bg;
+	background-image: none;
 	border-color: @end-color-5-border;
 	color: @end-color-5-fg;
 	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
@@ -85,7 +86,8 @@
 /* --- SNI tray (center widget, not part of the rotation) --- */
 
 .outer-pad.sni-tray {
-	background-color: @widget-tray-bg;
-	border-color: @widget-tray-border;
+	background-color: rgb(65, 70, 100);
+	background-image: none;
+	border-color: rgb(110, 115, 160);
 	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
 }

dotfiles/config/taffybar/end-widget-solid.css

@@ -0,0 +1,50 @@
+/* Final pass overrides for end-widget pill chrome.
+ *
+ * This is loaded after the main bar/theme CSS so the end-widget palette stays
+ * vivid even if earlier rules or theme rendering make the pills read too
+ * transparent on some hosts.
+ */
+
+.outer-pad.end-widget.end-slot-1 {
+	background-color: rgb(50, 60, 160);
+	background-image: none;
+	border-color: rgb(90, 100, 210);
+}
+
+.outer-pad.end-widget.end-slot-2 {
+	background-color: rgb(110, 45, 160);
+	background-image: none;
+	border-color: rgb(155, 85, 210);
+}
+
+.outer-pad.end-widget.end-slot-3 {
+	background-color: rgb(25, 130, 75);
+	background-image: none;
+	border-color: rgb(55, 190, 115);
+}
+
+.outer-pad.end-widget.end-slot-4 {
+	background-color: rgb(20, 120, 140);
+	background-image: none;
+	border-color: rgb(50, 175, 200);
+}
+
+.outer-pad.end-widget.end-slot-5 {
+	background-color: rgb(160, 40, 70);
+	background-image: none;
+	border-color: rgb(210, 80, 115);
+}
+
+.outer-pad.sni-tray {
+	background-color: rgb(65, 70, 100);
+	background-image: none;
+	border-color: rgb(110, 115, 160);
+}
+
+.outer-pad.end-widget,
+.outer-pad.sni-tray {
+	box-shadow:
+		inset 0 1px 0 rgba(255, 255, 255, 0.10),
+		inset 0 0 0 1px rgba(255, 255, 255, 0.10),
+		0 10px 24px rgba(0, 0, 0, 0.30);
+}

dotfiles/config/taffybar/ryzen-shine.css

@@ -1,55 +1,9 @@
+@import url("taffybar.css");
+
 /* Host-specific density tweaks for ryzen-shine. Keep the same visual style,
  * but shrink the bar back down after the upstream sizing change.
  */
 
 .taffy-box {
 	font-size: 10pt;
 }
-
-.outer-pad {
-	margin: 2px 3px;
-}
-
-.inner-pad {
-	padding: 1px 8px;
-}
-
-.icon-label > .icon {
-	padding-right: 8px;
-}
-
-.ram-swap .icon-label > .icon {
-	min-width: 18px;
-	padding-right: 6px;
-}
-
-.workspaces .outer-pad {
-	margin: 2px 2px;
-}
-
-.workspaces .inner-pad {
-	padding: 1px 2px 1px 8px;
-}
-
-.workspace-label {
-	font-size: 9pt;
-}
-
-.workspaces .overlay-box .workspace-label {
-	padding: 1px 4px 3px 10px;
-}
-
-.window-icon-container {
-	padding: 0px 3px;
-}
-
-.auto-size-image, .sni-tray {
-	padding: 0px 3px;
-}
-
-.sni-tray-expand-toggle,
-.sni-tray-edit-toggle,
-.sni-tray-settings-toggle {
-	padding: 0px 3px;
-	margin-left: 2px;
-}

dotfiles/config/taffybar/taffybar.css

@@ -1,8 +1,12 @@
+@import url("theme.css");
+@import url("end-widget-colors.css");
+@import url("end-widget-solid.css");
+
 /* Widget/layout styling for taffybar.
  *
- * Colors live in `theme.css`, and the end-widget palette lives in
- * `end-widget-colors.css`. Both are loaded explicitly from `cssPaths` so they
- * hot-reload reliably and do not depend on GTK's `@import` handling.
+ * This file is the single CSS entrypoint for the shared bar theme. Supporting
+ * stylesheets are pulled in via `@import` so GTK sees one user stylesheet per
+ * host rather than several separately loaded files with fragile precedence.
  */
 
 /* Base typography + foreground color for the bar itself.
@@ -15,7 +19,7 @@
 	/* Most text should come from Iosevka Aile; icon glyphs (Font Awesome / Nerd
 	   Font PUA) should come from a Nerd Font family to avoid tiny fallback glyphs. */
 	font-family: "Iosevka Aile", "Iosevka Nerd Font", "Iosevka NF", "Noto Sans", sans-serif;
-	font-size: 11pt;
+	font-size: 10.5pt;
 	font-weight: 600;
 	color: @font-color;
 	text-shadow: none;
@@ -48,26 +52,27 @@
 	padding: 0px 4px;
 }
 
-/* The main bar container. border-radius matches the widget squircles (6px)
-   so the bar itself has softly rounded corners. */
+/* The main bar container. Keep the bar and widget pills aligned so the whole
+   surface reads as one rounded system rather than a mix of sharp and round
+   shapes. */
 .taffy-box {
 	border-width: 0px;
 	padding: 0px;
 	margin: 0px;
-	border-radius: 6px;
+	border-radius: 10px;
 	box-shadow: none;
 	background-color: @bar-background;
 	background-image: none;
 }
 
 /* Each widget is wrapped in outer-pad > inner-pad > contents by
    buildContentsBox (Haskell).  The outer-pad draws the squircle
-   background pill.  border-radius kept low (6px) for a more squared
-   "squircle" shape rather than a fully rounded pill. */
+   background pill. Use a clearly rounded radius so the pill silhouette stays
+   visible even on the denser desktop monitor. */
 .outer-pad {
 	background-color: @pill-background;
 	border: 0px;
-	border-radius: 6px;
+	border-radius: 10px;
 	margin: 4px 4px;
 	/* No white outline; define shape with subtle inner highlight + dark stroke. */
 	box-shadow:
@@ -78,7 +83,7 @@
 
 .inner-pad {
 	padding: 2px 10px;
-	border-radius: 4px;
+	border-radius: 8px;
 }
 
 .contents {
@@ -142,7 +147,7 @@
 
 .workspaces .contents {
 	box-shadow: none;
-	border-radius: 5px;
+	border-radius: 8px;
 	border-width: 0px;
 	border-style: solid;
 	border-color: @transparent;
@@ -153,7 +158,7 @@
 	/* Overlay label (workspace number) that sits inside the icon "squircle". */
 	padding: 1px 3px;
 	margin: 0px;
-	font-size: 10pt;
+	font-size: 9.5pt;
 	opacity: 0.92;
 	font-weight: 700;
 	transition: color .2s;
@@ -231,7 +236,7 @@
 .workspaces .window-icon-container.active {
 	background-color: rgba(255, 255, 255, 0.10);
 	border: 1px solid rgba(255, 255, 255, 0.5);
-	border-radius: 4px;
+	border-radius: 7px;
 	padding: 2px 4px;
 }
 
@@ -247,7 +252,7 @@
 .window-icon-container {
 	transition: opacity .2s, box-shadow .2s;
 	opacity: 1;
-	border-radius: 5px;
+	border-radius: 8px;
 	transition: background-color .2s;
 	background-color: rgba(255, 255, 255, 0.04);
 	padding: 1px 4px;
@@ -266,7 +271,7 @@
 .sni-tray-settings-toggle {
 	background-color: rgba(255, 255, 255, 0.08);
 	border: 1px solid rgba(255, 255, 255, 0.18);
-	border-radius: 6px;
+	border-radius: 8px;
 	padding: 0px 4px;
 	margin-left: 3px;
 }
@@ -343,7 +348,7 @@
 
 .wakeup-debug-hit {
 	background-color: rgba(255, 255, 255, 0.22);
-	border-radius: 5px;
+	border-radius: 8px;
 }
 
 

dotfiles/config/taffybar/taffybar.hs

@@ -246,13 +246,13 @@ workspaceWindowIconGetter =
 -- ** Host Overrides
 
 defaultCssFiles :: [FilePath]
-defaultCssFiles = ["theme.css", "end-widget-colors.css", "taffybar.css"]
+defaultCssFiles = ["taffybar.css"]
 
 cssFilesByHostname :: [(String, [FilePath])]
 cssFilesByHostname =
-  [ ("imalison-home", ["theme.css", "end-widget-colors.css", "taffybar.css"]),
-    ("ryzen-shine", ["theme.css", "end-widget-colors.css", "taffybar.css", "ryzen-shine.css"]),
-    ("stevie-nixos", ["theme.css", "end-widget-colors.css", "taffybar.css"])
+  [ ("imalison-home", ["taffybar.css"]),
+    ("ryzen-shine", ["ryzen-shine.css"]),
+    ("stevie-nixos", ["taffybar.css"])
   ]
 
 laptopHosts :: [String]
@@ -509,6 +509,8 @@ cpuWidget =
     cpuMonitorNew
       defaultGraphConfig
         { graphDataColors = [(0, 1, 0.5, 0.8), (1, 0, 0, 0.5)],
+          graphBackgroundColor = (0, 0, 0, 0),
+          graphBorderWidth = 0,
           graphLabel = Just "CPU",
           graphWidth = 50,
           graphDirection = LEFT_TO_RIGHT