chezmoi/dot_config/waybar/style.css

@define-color dark0_hard #1d2021;
@define-color dark0 #282828;
@define-color dark0_soft #32302f;
@define-color dark1 #3c3836;
@define-color dark2 #504945;
@define-color dark3 #665c54;
@define-color dark4 #7c6f64;
@define-color dark4_256 #7c6f64;

@define-color gray_245 #928374;
@define-color gray_244 #928374;

@define-color light0_hard #f9f5d7;
@define-color light0 #fbf1c7;
@define-color light0_soft #f2e5bc;
@define-color light1 #ebdbb2;
@define-color light2 #d5c4a1;
@define-color light3 #bdae93;
@define-color light4 #a89984;
@define-color light4_256 #a89984;

@define-color bright_red #fb4934;
@define-color bright_green #b8bb26;
@define-color bright_yellow #fabd2f;
@define-color bright_blue #83a598;
@define-color bright_purple #d3869b;
@define-color bright_aqua #8ec07c;
@define-color bright_orange #fe8019;

@define-color neutral_red #cc241d;
@define-color neutral_green #98971a;
@define-color neutral_yellow #d79921;
@define-color neutral_blue #458588;
@define-color neutral_purple #b16286;
@define-color neutral_aqua #689d6a;
@define-color neutral_orange #d65d0e;

@define-color faded_red #9d0006;
@define-color faded_green #79740e;
@define-color faded_yellow #b57614;
@define-color faded_blue #076678;
@define-color faded_purple #8f3f71;
@define-color faded_aqua #427b58;
@define-color faded_orange #af3a03;

* {
    font-family: Hack, sans-serif;
    font-size: 12px;
}


window#waybar {
    background-color: alpha(@dark0_hard, 0.2);
    color: @light0_hard;
    transition-property: background-color;
    transition-duration: .5s;
}

window#waybar.hidden {
    opacity: 0.2;
}

/*
window#waybar.empty {
    background-color: transparent;
}
window#waybar.solo {
    background-color: @light0_hard;
}
*/

window#waybar.kitty {
    background-color: alpha(@dark2, 0.2);
}

window#waybar.chromium {
    background-color: @dark0_hard;
    border: none;
}

#workspaces button {
    padding: 0 5px;
    background-color: transparent;
    color: @light0;
    /* Use box-shadow instead of border so the text isn't offset */
    box-shadow: inset 0 -3px transparent;
    /* Avoid rounded borders under each workspace name */
    border: none;
    border-radius: 0;
}

/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
#workspaces button:hover {
    background: @dark1;
    box-shadow: inset 0 -3px @light0_hard;
}

#workspaces button.focused {
    background-color: @dark2;
    box-shadow: inset 0 -3px @light0_hard;
}

#workspaces button.urgent {
    background-color: @neutral_red;
}

#workspaces button.active {
    background-color: @neutral_blue;
}

#workspaces button.visible {
    background-color: @dark3;
}

/* #workspaces button.visible.active { */
/*     background-color: @neutral_blue; */
/* } */

#workspaces button.hosting-monitor.visible {
    background-color: @dark3;
}

#workspaces button.hosting-monitor.active {
    background-color: @neutral_blue;
}

#clock,
#battery,
#cpu,
#memory,
#disk,
#temperature,
#backlight,
#network,
#pulseaudio,
#custom-media,
#tray,
#mode,
#idle_inhibitor,
#upower,
#wireplumber,
#mpd {
    padding: 0 10px;
    color: @light0_hard;
}

#window,
#workspaces {
    margin: 0 4px;
}

/* If workspaces is the leftmost module, omit left margin */
.modules-left > widget:first-child > #workspaces {
    margin-left: 0;
}

/* If workspaces is the rightmost module, omit right margin */
.modules-right > widget:last-child > #workspaces {
    margin-right: 0;
}

#clock {
    background-color: @dark2;
}

#upower {
    background-color: @light2;
    color: @dark0_hard;
}

#upower.charging {
    color: @light0_hard;
    background-color: @bright_green;
}

#wireplumber {
    background-color: @neutral_aqua;
}

#wireplumber.muted {
    background-color: @faded_aqua;
}

@keyframes blink {
    to {
        background-color: @light0_hard;
        color: @dark0_hard;
    }
}

label:focus {
    background-color: @dark0_hard;
}

#cpu {
    background-color: @neutral_green;
}

#memory {
    background-color: @neutral_purple;
}

#network {
    background-color: @neutral_blue;
}

#network.disconnected {
    background-color: @faded_blue;
}

#temperature {
    background-color: @neutral_yellow;
}

#temperature.critical {
    background-color: @bright_red;
}

#tray {
    background-color: @dark3;
}

#tray > .passive {
    -gtk-icon-effect: dim;
}

#tray > .needs-attention {
    -gtk-icon-effect: highlight;
    background-color: @neutral_red;
}

#idle_inhibitor {
    background-color: @dark2;
}

#idle_inhibitor.activated {
    background-color: @light4;
    color: @dark0_hard;
}