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

Use nth-last-child for end widget pills

Browse Source
This commit is contained in:
Ivan Malison
2026-04-15 12:39:16 -07:00
committed by Kat Huang
parent 4587f3a7af
commit 9c8335ec2b
4 changed files with 43 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,64 +1,42 @@
/* End-widget color rotation. /* End-widget palette definitions.
* *
* Prefer semantic end-slot classes when the bar binary provides them, but keep * End widget coloring is driven from the shared bar stylesheet so the runtime
* compatibility with older deployed binaries that still attach `right-N` * widget tree can determine which pill gets which slot without extra per-widget
* classes. We only need the first two 5-color cycles for the current end-widget * CSS providers. The actual nth-last-child selectors live in
* counts on this machine. * end-widget-solid.css, which is loaded after the main theme as a final pass.
*/ */
/* --- 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);
/* --- Color rotation rules --- */ /* --- Shared end-widget chrome --- */
.outer-pad.end-widget, .outer-pad.end-widget,
.end-widget .outer-pad, .outer-pad.sni-tray {
.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),
@@ -66,65 +44,9 @@
0 10px 24px rgba(0, 0, 0, 0.30); 0 10px 24px rgba(0, 0, 0, 0.30);
} }
.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;
}
.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;
}
.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;
}
.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;
}
.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;
}
/* --- 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);
} }

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

@@ -1,96 +1,53 @@
/* Final pass overrides for end-widget pill chrome. /* Final pass overrides for end-widget pill chrome.
* *
* Keep this in sync with end-widget-colors.css so the solid-background pass * End widgets are packed with Gtk.boxPackEnd, so the visible right-hand pills
* preserves both semantic end-slot styling and compatibility with older * stay contiguous at the end of the GtkBox child list. Use nth-last-child to
* `right-N` binaries. * rotate colors from the right edge without depending on extra slot classes.
*/ */
.outer-pad.end-widget.end-slot-1, .taffy-box > .outer-pad.end-widget:nth-last-child(5n + 1) {
.end-widget.end-slot-1 .outer-pad, background-color: @end-color-1-bg;
.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; background-image: none;
border-color: rgb(90, 100, 210); border-color: @end-color-1-border;
color: @end-color-1-fg;
} }
.outer-pad.end-widget.end-slot-2, .taffy-box > .outer-pad.end-widget:nth-last-child(5n + 2) {
.end-widget.end-slot-2 .outer-pad, background-color: @end-color-2-bg;
.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; background-image: none;
border-color: rgb(155, 85, 210); border-color: @end-color-2-border;
color: @end-color-2-fg;
} }
.outer-pad.end-widget.end-slot-3, .taffy-box > .outer-pad.end-widget:nth-last-child(5n + 3) {
.end-widget.end-slot-3 .outer-pad, background-color: @end-color-3-bg;
.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; background-image: none;
border-color: rgb(55, 190, 115); border-color: @end-color-3-border;
color: @end-color-3-fg;
} }
.outer-pad.end-widget.end-slot-4, .taffy-box > .outer-pad.end-widget:nth-last-child(5n + 4) {
.end-widget.end-slot-4 .outer-pad, background-color: @end-color-4-bg;
.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; background-image: none;
border-color: rgb(50, 175, 200); border-color: @end-color-4-border;
color: @end-color-4-fg;
} }
.outer-pad.end-widget.end-slot-5, .taffy-box > .outer-pad.end-widget:nth-last-child(5n + 5) {
.end-widget.end-slot-5 .outer-pad, background-color: @end-color-5-bg;
.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; background-image: none;
border-color: rgb(210, 80, 115); border-color: @end-color-5-border;
color: @end-color-5-fg;
} }
.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,
.end-widget .outer-pad, .outer-pad.sni-tray {
.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),

8
dotfiles/config/taffybar/flake.lock generated
View File

@@ -154,11 +154,11 @@
"xmonad-contrib": "xmonad-contrib" "xmonad-contrib": "xmonad-contrib"
}, },
"locked": { "locked": {
"lastModified": 1776034538, "lastModified": 1776035803,
"narHash": "sha256-X/EwzEOGMi1kRHRavS5x4s6Zs8zrE4o97l2uE6PR7q0=", "narHash": "sha256-JnZKgFeZrh7P4zgLeNJGqTdPm425BJj003CXUR0nvPs=",
"ref": "refs/heads/master", "ref": "refs/heads/master",
"rev": "a504c8fc77a9ec9b5e1083b9cef15324a2a060ef", "rev": "3c7014217875a7ab8554c3c07cc3e7aacd82f1ca",
"revCount": 2282, "revCount": 2283,
"type": "git", "type": "git",
"url": "file:///home/imalison/dotfiles/dotfiles/config/taffybar/taffybar" "url": "file:///home/imalison/dotfiles/dotfiles/config/taffybar/taffybar"
}, },

2
dotfiles/config/taffybar/taffybar

Submodule dotfiles/config/taffybar/taffybar updated: a504c8fc77...3c70142178