Ivan Malison
edd967e163
- Add ASUS widget to laptop bar showing profile icon, CPU freq, and temp - Add dbus-menu and dbus-hslogger flake inputs to fix gtk-sni-tray build - Simplify CSS color rules for end-widget pills - Update taffybar submodule with ASUS Information/Widget modules Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
92 lines
3.1 KiB
CSS
92 lines
3.1 KiB
CSS
/* 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;
|
|
color: @end-color-1-fg;
|
|
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
|
|
}
|
|
|
|
/* 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;
|
|
color: @end-color-2-fg;
|
|
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
|
|
}
|
|
|
|
/* 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;
|
|
color: @end-color-3-fg;
|
|
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
|
|
}
|
|
|
|
/* 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;
|
|
color: @end-color-4-fg;
|
|
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
|
|
}
|
|
|
|
/* 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;
|
|
color: @end-color-5-fg;
|
|
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
|
|
}
|
|
|
|
/* --- 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);
|
|
}
|