superior_dotfiles/private_dot_config/waybar/style.css

@define-color background #f5f5f5;
@define-color foreground #ffffff;
@define-color font-color #333333;
@define-color accent #7aa6c2;
@define-color accent-hover #5b8da9;
@define-color warning #f0ad4e;
@define-color critical #d9534f;
@define-color success #5cb85c;

* {
    transition: 0.4s all ease-in-out;
    font-family: "Cousine Nerd Font Mono";
    font-size: 16px;
    padding: 2px;
    margin: 1px 4px;
    color: @font-color;
    text-shadow: none;
    border-radius: 12px;
}

*:hover {
    text-shadow: none;
}

window {
    background-color: @background;
    margin: 1px;
}

window#waybar {
    background: @foreground;
    border-radius: 12px;
}

/* modules */

#workspaces button {
    background-color: @foreground;
    margin-left: 5px;
    color: @font-color;
}

#workspaces button:hover {
    background-color: @accent;
    color: @foreground;
}

#workspaces button.urgent {
    background-color: @critical;
    animation: blink;
    animation-duration: 2s;
}

#clock {
    margin: 10px;
}

tooltip {
    background-color: @foreground;
    color: @font-color;
}

menu {
    background-color: @foreground;
    border-radius: 10px;
}

/* moduły */

#media,
#network,
#pulseaudio,
#battery {
    border-radius: 12px;
    margin: 5px;
    background-color: @foreground;
}

#tray {
    background-color: @foreground;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
}

#tray:hover {
    background-color: @accent-hover;
    color: @foreground;
}

/* battery */

#battery.warning:not(.charging) {
    background: @warning;
    color: @foreground;
    animation-name: blink;
    animation-duration: 1s;
    animation-timing-function: steps(12);
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

#battery.charging,
#battery.plugged {
    color: @foreground;
    background-color: @success;
}

#battery.critical:not(.charging) {
    background-color: @critical;
    color: @foreground;
    animation-name: blink;
    animation-duration: 1s;
    animation-timing-function: steps(12);
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes blink {
    to {
        background-color: #ff0000;
        color: #000000;
    }
}

/* spotify */
#custom-spotify {
    background-color: rgba(122, 166, 194, 0.2);
    color: @font-color;
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
}

#custom-spotify:hover {
    background-color: rgba(122, 166, 194, 0.8);
    color: @foreground;
}

/* notifications, hardware */
#custom-notifications {
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
    background-color: @foreground;
}

#custom-hardware {
    border-radius: 10px;
    margin: 4px;
    background-color: @foreground;
}