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

taffybar: restore end-widget color wraparound

Browse Source
This commit is contained in:
Ivan Malison
2026-04-14 00:21:54 -07:00
committed by Kat Huang
parent 1d831f0aef
commit 74d00e7ca3
2 changed files with 122 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
dotfiles/config/taffybar/end-widget-colors.css
View File

@@ -1,37 +1,34 @@
/* End-widget color rotation. /* End-widget color rotation.
* *
* End widgets get semantic palette classes from Haskell (`.end-widget` plus * Prefer semantic end-slot classes when the bar binary provides them, but keep
* `.end-slot-N`) when they are packed into the bar. That keeps the CSS simple * compatibility with older deployed binaries that still attach `right-N`
* and avoids relying on GTK's `:nth-child(...)` matching behavior. * classes. We only need the first two 5-color cycles for the current end-widget
* * counts on this machine.
* 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.
*/ */
/* --- Rotation palette (5 colors) --- */ /* --- Rotation palette (5 colors) --- */
/* 1 — indigo */ /* 1 - indigo */
@define-color end-color-1-bg rgb(50, 60, 160); @define-color end-color-1-bg rgb(50, 60, 160);
@define-color end-color-1-fg #d5d8f8; @define-color end-color-1-fg #d5d8f8;
@define-color end-color-1-border rgb(90, 100, 210); @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-bg rgb(110, 45, 160);
@define-color end-color-2-fg #e8d5f8; @define-color end-color-2-fg #e8d5f8;
@define-color end-color-2-border rgb(155, 85, 210); @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-bg rgb(25, 130, 75);
@define-color end-color-3-fg #c8f5e0; @define-color end-color-3-fg #c8f5e0;
@define-color end-color-3-border rgb(55, 190, 115); @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-bg rgb(20, 120, 140);
@define-color end-color-4-fg #d0f2f8; @define-color end-color-4-fg #d0f2f8;
@define-color end-color-4-border rgb(50, 175, 200); @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-bg rgb(160, 40, 70);
@define-color end-color-5-fg #f8d5e0; @define-color end-color-5-fg #f8d5e0;
@define-color end-color-5-border rgb(210, 80, 115); @define-color end-color-5-border rgb(210, 80, 115);
@@ -39,7 +36,29 @@
/* --- Color rotation rules --- */ /* --- Color rotation rules --- */
.outer-pad.end-widget, .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; background-image: none;
box-shadow: box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.10),
@@ -47,36 +66,56 @@
0 10px 24px rgba(0, 0, 0, 0.30); 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; background-color: @end-color-1-bg;
border-color: @end-color-1-border; border-color: @end-color-1-border;
color: @end-color-1-fg; 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; background-color: @end-color-2-bg;
border-color: @end-color-2-border; border-color: @end-color-2-border;
color: @end-color-2-fg; 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; background-color: @end-color-3-bg;
border-color: @end-color-3-border; border-color: @end-color-3-border;
color: @end-color-3-fg; 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; background-color: @end-color-4-bg;
border-color: @end-color-4-border; border-color: @end-color-4-border;
color: @end-color-4-fg; 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; background-color: @end-color-5-bg;
border-color: @end-color-5-border; border-color: @end-color-5-border;
color: @end-color-5-fg; color: @end-color-5-fg;
@@ -84,7 +123,8 @@
/* --- SNI tray (center widget, not part of the rotation) --- */ /* --- 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); background-color: rgb(65, 70, 100);
border-color: rgb(110, 115, 160); border-color: rgb(110, 115, 160);
} }

68
dotfiles/config/taffybar/end-widget-solid.css
View File

@@ -1,48 +1,96 @@
/* Final pass overrides for end-widget pill chrome. /* Final pass overrides for end-widget pill chrome.
* *
* This is loaded after the main bar/theme CSS so the end-widget palette stays * Keep this in sync with end-widget-colors.css so the solid-background pass
* vivid even if earlier rules or theme rendering make the pills read too * preserves both semantic end-slot styling and compatibility with older
* transparent on some hosts. * `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-color: rgb(50, 60, 160);
background-image: none; background-image: none;
border-color: rgb(90, 100, 210); 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-color: rgb(110, 45, 160);
background-image: none; background-image: none;
border-color: rgb(155, 85, 210); 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-color: rgb(25, 130, 75);
background-image: none; background-image: none;
border-color: rgb(55, 190, 115); 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-color: rgb(20, 120, 140);
background-image: none; background-image: none;
border-color: rgb(50, 175, 200); 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-color: rgb(160, 40, 70);
background-image: none; background-image: none;
border-color: rgb(210, 80, 115); 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-color: rgb(65, 70, 100);
background-image: none; background-image: none;
border-color: rgb(110, 115, 160); border-color: rgb(110, 115, 160);
} }
.outer-pad.end-widget, .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: box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.10),
inset 0 0 0 1px rgba(255, 255, 255, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.10),