taffybar: restore end-widget color wraparound
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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),
|
||||
|
||||
Reference in New Issue
Block a user