Skip to content

Commit bd95802

Browse files
colonelpanic8colonelpanic8
committed
taffybar: restore end-widget color wraparound
1 parent 7de1b40 commit bd95802

File tree

2 files changed

+122
-34
lines changed

2 files changed

+122
-34
lines changed

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

Lines changed: 64 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,130 @@
11
/* End-widget color rotation.
22
*
3-
* End widgets get semantic palette classes from Haskell (`.end-widget` plus
4-
* `.end-slot-N`) when they are packed into the bar. That keeps the CSS simple
5-
* and avoids relying on GTK's `:nth-child(...)` matching behavior.
6-
*
7-
* To change the palette, edit the @define-color values below.
8-
* To add more colors to the rotation, add end-color-6-* etc. and a matching
9-
* `.end-slot-6` rule.
3+
* Prefer semantic end-slot classes when the bar binary provides them, but keep
4+
* compatibility with older deployed binaries that still attach `right-N`
5+
* classes. We only need the first two 5-color cycles for the current end-widget
6+
* counts on this machine.
107
*/
118

129
/* --- Rotation palette (5 colors) --- */
1310

14-
/* 1 — indigo */
11+
/* 1 - indigo */
1512
@define-color end-color-1-bg rgb(50, 60, 160);
1613
@define-color end-color-1-fg #d5d8f8;
1714
@define-color end-color-1-border rgb(90, 100, 210);
1815

19-
/* 2 — purple */
16+
/* 2 - purple */
2017
@define-color end-color-2-bg rgb(110, 45, 160);
2118
@define-color end-color-2-fg #e8d5f8;
2219
@define-color end-color-2-border rgb(155, 85, 210);
2320

24-
/* 3 — emerald */
21+
/* 3 - emerald */
2522
@define-color end-color-3-bg rgb(25, 130, 75);
2623
@define-color end-color-3-fg #c8f5e0;
2724
@define-color end-color-3-border rgb(55, 190, 115);
2825

29-
/* 4 — teal */
26+
/* 4 - teal */
3027
@define-color end-color-4-bg rgb(20, 120, 140);
3128
@define-color end-color-4-fg #d0f2f8;
3229
@define-color end-color-4-border rgb(50, 175, 200);
3330

34-
/* 5 — rose */
31+
/* 5 - rose */
3532
@define-color end-color-5-bg rgb(160, 40, 70);
3633
@define-color end-color-5-fg #f8d5e0;
3734
@define-color end-color-5-border rgb(210, 80, 115);
3835

3936
/* --- Color rotation rules --- */
4037

4138
.outer-pad.end-widget,
42-
.outer-pad.sni-tray {
39+
.end-widget .outer-pad,
40+
.outer-pad.right-1,
41+
.outer-pad.right-2,
42+
.outer-pad.right-3,
43+
.outer-pad.right-4,
44+
.outer-pad.right-5,
45+
.outer-pad.right-6,
46+
.outer-pad.right-7,
47+
.outer-pad.right-8,
48+
.outer-pad.right-9,
49+
.outer-pad.right-10,
50+
.right-1 .outer-pad,
51+
.right-2 .outer-pad,
52+
.right-3 .outer-pad,
53+
.right-4 .outer-pad,
54+
.right-5 .outer-pad,
55+
.right-6 .outer-pad,
56+
.right-7 .outer-pad,
57+
.right-8 .outer-pad,
58+
.right-9 .outer-pad,
59+
.right-10 .outer-pad,
60+
.outer-pad.sni-tray,
61+
.sni-tray .outer-pad {
4362
background-image: none;
4463
box-shadow:
4564
inset 0 1px 0 rgba(255, 255, 255, 0.10),
4665
inset 0 0 0 1px rgba(255, 255, 255, 0.10),
4766
0 10px 24px rgba(0, 0, 0, 0.30);
4867
}
4968

50-
/* Slot 1: indigo */
51-
.outer-pad.end-widget.end-slot-1 {
69+
.outer-pad.end-widget.end-slot-1,
70+
.end-widget.end-slot-1 .outer-pad,
71+
.outer-pad.right-1,
72+
.outer-pad.right-6,
73+
.right-1 .outer-pad,
74+
.right-6 .outer-pad {
5275
background-color: @end-color-1-bg;
5376
border-color: @end-color-1-border;
5477
color: @end-color-1-fg;
5578
}
5679

57-
/* Slot 2: purple */
58-
.outer-pad.end-widget.end-slot-2 {
80+
.outer-pad.end-widget.end-slot-2,
81+
.end-widget.end-slot-2 .outer-pad,
82+
.outer-pad.right-2,
83+
.outer-pad.right-7,
84+
.right-2 .outer-pad,
85+
.right-7 .outer-pad {
5986
background-color: @end-color-2-bg;
6087
border-color: @end-color-2-border;
6188
color: @end-color-2-fg;
6289
}
6390

64-
/* Slot 3: emerald */
65-
.outer-pad.end-widget.end-slot-3 {
91+
.outer-pad.end-widget.end-slot-3,
92+
.end-widget.end-slot-3 .outer-pad,
93+
.outer-pad.right-3,
94+
.outer-pad.right-8,
95+
.right-3 .outer-pad,
96+
.right-8 .outer-pad {
6697
background-color: @end-color-3-bg;
6798
border-color: @end-color-3-border;
6899
color: @end-color-3-fg;
69100
}
70101

71-
/* Slot 4: teal */
72-
.outer-pad.end-widget.end-slot-4 {
102+
.outer-pad.end-widget.end-slot-4,
103+
.end-widget.end-slot-4 .outer-pad,
104+
.outer-pad.right-4,
105+
.outer-pad.right-9,
106+
.right-4 .outer-pad,
107+
.right-9 .outer-pad {
73108
background-color: @end-color-4-bg;
74109
border-color: @end-color-4-border;
75110
color: @end-color-4-fg;
76111
}
77112

78-
/* Slot 5: rose */
79-
.outer-pad.end-widget.end-slot-5 {
113+
.outer-pad.end-widget.end-slot-5,
114+
.end-widget.end-slot-5 .outer-pad,
115+
.outer-pad.right-5,
116+
.outer-pad.right-10,
117+
.right-5 .outer-pad,
118+
.right-10 .outer-pad {
80119
background-color: @end-color-5-bg;
81120
border-color: @end-color-5-border;
82121
color: @end-color-5-fg;
83122
}
84123

85124
/* --- SNI tray (center widget, not part of the rotation) --- */
86125

87-
.outer-pad.sni-tray {
126+
.outer-pad.sni-tray,
127+
.sni-tray .outer-pad {
88128
background-color: rgb(65, 70, 100);
89129
border-color: rgb(110, 115, 160);
90130
}

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

Lines changed: 58 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,96 @@
11
/* Final pass overrides for end-widget pill chrome.
22
*
3-
* This is loaded after the main bar/theme CSS so the end-widget palette stays
4-
* vivid even if earlier rules or theme rendering make the pills read too
5-
* transparent on some hosts.
3+
* Keep this in sync with end-widget-colors.css so the solid-background pass
4+
* preserves both semantic end-slot styling and compatibility with older
5+
* `right-N` binaries.
66
*/
77

8-
.outer-pad.end-widget.end-slot-1 {
8+
.outer-pad.end-widget.end-slot-1,
9+
.end-widget.end-slot-1 .outer-pad,
10+
.outer-pad.right-1,
11+
.outer-pad.right-6,
12+
.right-1 .outer-pad,
13+
.right-6 .outer-pad {
914
background-color: rgb(50, 60, 160);
1015
background-image: none;
1116
border-color: rgb(90, 100, 210);
1217
}
1318

14-
.outer-pad.end-widget.end-slot-2 {
19+
.outer-pad.end-widget.end-slot-2,
20+
.end-widget.end-slot-2 .outer-pad,
21+
.outer-pad.right-2,
22+
.outer-pad.right-7,
23+
.right-2 .outer-pad,
24+
.right-7 .outer-pad {
1525
background-color: rgb(110, 45, 160);
1626
background-image: none;
1727
border-color: rgb(155, 85, 210);
1828
}
1929

20-
.outer-pad.end-widget.end-slot-3 {
30+
.outer-pad.end-widget.end-slot-3,
31+
.end-widget.end-slot-3 .outer-pad,
32+
.outer-pad.right-3,
33+
.outer-pad.right-8,
34+
.right-3 .outer-pad,
35+
.right-8 .outer-pad {
2136
background-color: rgb(25, 130, 75);
2237
background-image: none;
2338
border-color: rgb(55, 190, 115);
2439
}
2540

26-
.outer-pad.end-widget.end-slot-4 {
41+
.outer-pad.end-widget.end-slot-4,
42+
.end-widget.end-slot-4 .outer-pad,
43+
.outer-pad.right-4,
44+
.outer-pad.right-9,
45+
.right-4 .outer-pad,
46+
.right-9 .outer-pad {
2747
background-color: rgb(20, 120, 140);
2848
background-image: none;
2949
border-color: rgb(50, 175, 200);
3050
}
3151

32-
.outer-pad.end-widget.end-slot-5 {
52+
.outer-pad.end-widget.end-slot-5,
53+
.end-widget.end-slot-5 .outer-pad,
54+
.outer-pad.right-5,
55+
.outer-pad.right-10,
56+
.right-5 .outer-pad,
57+
.right-10 .outer-pad {
3358
background-color: rgb(160, 40, 70);
3459
background-image: none;
3560
border-color: rgb(210, 80, 115);
3661
}
3762

38-
.outer-pad.sni-tray {
63+
.outer-pad.sni-tray,
64+
.sni-tray .outer-pad {
3965
background-color: rgb(65, 70, 100);
4066
background-image: none;
4167
border-color: rgb(110, 115, 160);
4268
}
4369

4470
.outer-pad.end-widget,
45-
.outer-pad.sni-tray {
71+
.end-widget .outer-pad,
72+
.outer-pad.right-1,
73+
.outer-pad.right-2,
74+
.outer-pad.right-3,
75+
.outer-pad.right-4,
76+
.outer-pad.right-5,
77+
.outer-pad.right-6,
78+
.outer-pad.right-7,
79+
.outer-pad.right-8,
80+
.outer-pad.right-9,
81+
.outer-pad.right-10,
82+
.right-1 .outer-pad,
83+
.right-2 .outer-pad,
84+
.right-3 .outer-pad,
85+
.right-4 .outer-pad,
86+
.right-5 .outer-pad,
87+
.right-6 .outer-pad,
88+
.right-7 .outer-pad,
89+
.right-8 .outer-pad,
90+
.right-9 .outer-pad,
91+
.right-10 .outer-pad,
92+
.outer-pad.sni-tray,
93+
.sni-tray .outer-pad {
4694
box-shadow:
4795
inset 0 1px 0 rgba(255, 255, 255, 0.10),
4896
inset 0 0 0 1px rgba(255, 255, 255, 0.10),

0 commit comments

Comments
 (0)