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

taffybar CSS: extract per-widget colors to nth-child rotation

Browse Source 
Replace individual .outer-pad.audio, .outer-pad.network, etc. color
rules with a 5-color palette in end-widget-colors.css that cycles via
:nth-child(5n+N). Add workspace pill reset to prevent the rotation
from bleeding into workspace widgets. Move per-widget color variables
from theme.css into end-widget-colors.css (keep tray colors in theme
since the SNI tray is a center widget outside the rotation).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ivan Malison
2026-02-09 16:41:33 -08:00
committed by Kat Huang
parent a258af58d6
commit ba952b4b57
3 changed files with 129 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
dotfiles/config/taffybar/end-widget-colors.css Normal file
View File

@@ -0,0 +1,106 @@
/* 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.
*
* 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).
*/
/* --- Rotation palette (5 colors) --- */
/* 1 — indigo */
@define-color end-color-1-bg rgba(50, 60, 160, 0.92);
@define-color end-color-1-fg #d5d8f8;
@define-color end-color-1-border rgba(90, 100, 210, 0.60);
/* 2 — purple */
@define-color end-color-2-bg rgba(110, 45, 160, 0.92);
@define-color end-color-2-fg #e8d5f8;
@define-color end-color-2-border rgba(155, 85, 210, 0.60);
/* 3 — emerald */
@define-color end-color-3-bg rgba(25, 130, 75, 0.92);
@define-color end-color-3-fg #c8f5e0;
@define-color end-color-3-border rgba(55, 190, 115, 0.60);
/* 4 — teal */
@define-color end-color-4-bg rgba(20, 120, 140, 0.92);
@define-color end-color-4-fg #d0f2f8;
@define-color end-color-4-border rgba(50, 175, 200, 0.60);
/* 5 — rose */
@define-color end-color-5-bg rgba(160, 40, 70, 0.92);
@define-color end-color-5-fg #f8d5e0;
@define-color end-color-5-border rgba(210, 80, 115, 0.60);
/* --- Color rotation rules --- */
/* Slot 1: indigo (child 1, 6, 11, ...) */
.outer-pad:nth-child(5n+1) {
background-color: @end-color-1-bg;
border-color: @end-color-1-border;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
}
.outer-pad:nth-child(5n+1) :not(menu):not(menuitem):not(popover):not(window),
.outer-pad:nth-child(5n+1) :not(menu):not(menuitem):not(popover):not(window) * {
color: @end-color-1-fg;
}
/* Slot 2: purple (child 2, 7, 12, ...) */
.outer-pad:nth-child(5n+2) {
background-color: @end-color-2-bg;
border-color: @end-color-2-border;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
}
.outer-pad:nth-child(5n+2) :not(menu):not(menuitem):not(popover):not(window),
.outer-pad:nth-child(5n+2) :not(menu):not(menuitem):not(popover):not(window) * {
color: @end-color-2-fg;
}
/* Slot 3: emerald (child 3, 8, 13, ...) */
.outer-pad:nth-child(5n+3) {
background-color: @end-color-3-bg;
border-color: @end-color-3-border;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
}
.outer-pad:nth-child(5n+3) :not(menu):not(menuitem):not(popover):not(window),
.outer-pad:nth-child(5n+3) :not(menu):not(menuitem):not(popover):not(window) * {
color: @end-color-3-fg;
}
/* Slot 4: teal (child 4, 9, 14, ...) */
.outer-pad:nth-child(5n+4) {
background-color: @end-color-4-bg;
border-color: @end-color-4-border;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
}
.outer-pad:nth-child(5n+4) :not(menu):not(menuitem):not(popover):not(window),
.outer-pad:nth-child(5n+4) :not(menu):not(menuitem):not(popover):not(window) * {
color: @end-color-4-fg;
}
/* Slot 5: rose (child 5, 10, 15, ...) */
.outer-pad:nth-child(5n+5) {
background-color: @end-color-5-bg;
border-color: @end-color-5-border;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
}
.outer-pad:nth-child(5n+5) :not(menu):not(menuitem):not(popover):not(window),
.outer-pad:nth-child(5n+5) :not(menu):not(menuitem):not(popover):not(window) * {
color: @end-color-5-fg;
}
/* --- SNI tray (center widget, not part of the rotation) --- */
.outer-pad.sni-tray {
background-color: @widget-tray-bg;
border-color: @widget-tray-border;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
}