diff --git a/dotfiles/config/taffybar/end-widget-colors.css b/dotfiles/config/taffybar/end-widget-colors.css index b72ecf85..a671bd1f 100644 --- a/dotfiles/config/taffybar/end-widget-colors.css +++ b/dotfiles/config/taffybar/end-widget-colors.css @@ -1,37 +1,34 @@ /* End-widget color rotation. * - * 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 matching - * `.end-slot-6` rule. + * Prefer semantic end-slot classes when the bar binary provides them, but keep + * compatibility with older deployed binaries that still attach `right-N` + * classes. We only need the first two 5-color cycles for the current end-widget + * counts on this machine. */ /* --- Rotation palette (5 colors) --- */ -/* 1 — indigo */ +/* 1 - indigo */ @define-color end-color-1-bg rgb(50, 60, 160); @define-color end-color-1-fg #d5d8f8; @define-color end-color-1-border rgb(90, 100, 210); -/* 2 — purple */ +/* 2 - purple */ @define-color end-color-2-bg rgb(110, 45, 160); @define-color end-color-2-fg #e8d5f8; @define-color end-color-2-border rgb(155, 85, 210); -/* 3 — emerald */ +/* 3 - emerald */ @define-color end-color-3-bg rgb(25, 130, 75); @define-color end-color-3-fg #c8f5e0; @define-color end-color-3-border rgb(55, 190, 115); -/* 4 — teal */ +/* 4 - teal */ @define-color end-color-4-bg rgb(20, 120, 140); @define-color end-color-4-fg #d0f2f8; @define-color end-color-4-border rgb(50, 175, 200); -/* 5 — rose */ +/* 5 - rose */ @define-color end-color-5-bg rgb(160, 40, 70); @define-color end-color-5-fg #f8d5e0; @define-color end-color-5-border rgb(210, 80, 115); @@ -39,7 +36,29 @@ /* --- Color rotation rules --- */ .outer-pad.end-widget, -.outer-pad.sni-tray { +.end-widget .outer-pad, +.outer-pad.right-1, +.outer-pad.right-2, +.outer-pad.right-3, +.outer-pad.right-4, +.outer-pad.right-5, +.outer-pad.right-6, +.outer-pad.right-7, +.outer-pad.right-8, +.outer-pad.right-9, +.outer-pad.right-10, +.right-1 .outer-pad, +.right-2 .outer-pad, +.right-3 .outer-pad, +.right-4 .outer-pad, +.right-5 .outer-pad, +.right-6 .outer-pad, +.right-7 .outer-pad, +.right-8 .outer-pad, +.right-9 .outer-pad, +.right-10 .outer-pad, +.outer-pad.sni-tray, +.sni-tray .outer-pad { background-image: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), @@ -47,36 +66,56 @@ 0 10px 24px rgba(0, 0, 0, 0.30); } -/* Slot 1: indigo */ -.outer-pad.end-widget.end-slot-1 { +.outer-pad.end-widget.end-slot-1, +.end-widget.end-slot-1 .outer-pad, +.outer-pad.right-1, +.outer-pad.right-6, +.right-1 .outer-pad, +.right-6 .outer-pad { background-color: @end-color-1-bg; border-color: @end-color-1-border; color: @end-color-1-fg; } -/* Slot 2: purple */ -.outer-pad.end-widget.end-slot-2 { +.outer-pad.end-widget.end-slot-2, +.end-widget.end-slot-2 .outer-pad, +.outer-pad.right-2, +.outer-pad.right-7, +.right-2 .outer-pad, +.right-7 .outer-pad { background-color: @end-color-2-bg; border-color: @end-color-2-border; color: @end-color-2-fg; } -/* Slot 3: emerald */ -.outer-pad.end-widget.end-slot-3 { +.outer-pad.end-widget.end-slot-3, +.end-widget.end-slot-3 .outer-pad, +.outer-pad.right-3, +.outer-pad.right-8, +.right-3 .outer-pad, +.right-8 .outer-pad { background-color: @end-color-3-bg; border-color: @end-color-3-border; color: @end-color-3-fg; } -/* Slot 4: teal */ -.outer-pad.end-widget.end-slot-4 { +.outer-pad.end-widget.end-slot-4, +.end-widget.end-slot-4 .outer-pad, +.outer-pad.right-4, +.outer-pad.right-9, +.right-4 .outer-pad, +.right-9 .outer-pad { background-color: @end-color-4-bg; border-color: @end-color-4-border; color: @end-color-4-fg; } -/* Slot 5: rose */ -.outer-pad.end-widget.end-slot-5 { +.outer-pad.end-widget.end-slot-5, +.end-widget.end-slot-5 .outer-pad, +.outer-pad.right-5, +.outer-pad.right-10, +.right-5 .outer-pad, +.right-10 .outer-pad { background-color: @end-color-5-bg; border-color: @end-color-5-border; color: @end-color-5-fg; @@ -84,7 +123,8 @@ /* --- SNI tray (center widget, not part of the rotation) --- */ -.outer-pad.sni-tray { +.outer-pad.sni-tray, +.sni-tray .outer-pad { background-color: rgb(65, 70, 100); border-color: rgb(110, 115, 160); } diff --git a/dotfiles/config/taffybar/end-widget-solid.css b/dotfiles/config/taffybar/end-widget-solid.css index eda2dbb0..80f000cf 100644 --- a/dotfiles/config/taffybar/end-widget-solid.css +++ b/dotfiles/config/taffybar/end-widget-solid.css @@ -1,48 +1,96 @@ /* 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. + * Keep this in sync with end-widget-colors.css so the solid-background pass + * preserves both semantic end-slot styling and compatibility with older + * `right-N` binaries. */ -.outer-pad.end-widget.end-slot-1 { +.outer-pad.end-widget.end-slot-1, +.end-widget.end-slot-1 .outer-pad, +.outer-pad.right-1, +.outer-pad.right-6, +.right-1 .outer-pad, +.right-6 .outer-pad { background-color: rgb(50, 60, 160); background-image: none; border-color: rgb(90, 100, 210); } -.outer-pad.end-widget.end-slot-2 { +.outer-pad.end-widget.end-slot-2, +.end-widget.end-slot-2 .outer-pad, +.outer-pad.right-2, +.outer-pad.right-7, +.right-2 .outer-pad, +.right-7 .outer-pad { background-color: rgb(110, 45, 160); background-image: none; border-color: rgb(155, 85, 210); } -.outer-pad.end-widget.end-slot-3 { +.outer-pad.end-widget.end-slot-3, +.end-widget.end-slot-3 .outer-pad, +.outer-pad.right-3, +.outer-pad.right-8, +.right-3 .outer-pad, +.right-8 .outer-pad { background-color: rgb(25, 130, 75); background-image: none; border-color: rgb(55, 190, 115); } -.outer-pad.end-widget.end-slot-4 { +.outer-pad.end-widget.end-slot-4, +.end-widget.end-slot-4 .outer-pad, +.outer-pad.right-4, +.outer-pad.right-9, +.right-4 .outer-pad, +.right-9 .outer-pad { background-color: rgb(20, 120, 140); background-image: none; border-color: rgb(50, 175, 200); } -.outer-pad.end-widget.end-slot-5 { +.outer-pad.end-widget.end-slot-5, +.end-widget.end-slot-5 .outer-pad, +.outer-pad.right-5, +.outer-pad.right-10, +.right-5 .outer-pad, +.right-10 .outer-pad { background-color: rgb(160, 40, 70); background-image: none; border-color: rgb(210, 80, 115); } -.outer-pad.sni-tray { +.outer-pad.sni-tray, +.sni-tray .outer-pad { background-color: rgb(65, 70, 100); background-image: none; border-color: rgb(110, 115, 160); } .outer-pad.end-widget, -.outer-pad.sni-tray { +.end-widget .outer-pad, +.outer-pad.right-1, +.outer-pad.right-2, +.outer-pad.right-3, +.outer-pad.right-4, +.outer-pad.right-5, +.outer-pad.right-6, +.outer-pad.right-7, +.outer-pad.right-8, +.outer-pad.right-9, +.outer-pad.right-10, +.right-1 .outer-pad, +.right-2 .outer-pad, +.right-3 .outer-pad, +.right-4 .outer-pad, +.right-5 .outer-pad, +.right-6 .outer-pad, +.right-7 .outer-pad, +.right-8 .outer-pad, +.right-9 .outer-pad, +.right-10 .outer-pad, +.outer-pad.sni-tray, +.sni-tray .outer-pad { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.10),