superior_dotfiles/private_dot_config/waybar/style.css

@import "./colors.css";

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

*:hover {
    text-shadow: none;
}

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

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

/* modules */
#workspaces button {
    background-color: @surface1;
    margin-left: 5px;
    color: @text;
}

#workspaces button:hover {
    background-color: @blue;
    color: @base;
}

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

#clock {
    margin: 10px;
}

tooltip {
    background-color: @surface1;
    color: @text;
}

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

/* moduły */
#media,
#network,
#pulseaudio,
#battery {
    border-radius: 12px;
    margin: 5px;
    background-color: @surface2;
}

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

#tray:hover {
    background-color: @blue;
    color: @base;
}

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

#battery.charging,
#battery.plugged {
    color: @base;
    background-color: @green;
}

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

@keyframes blink {
    to {
        background-color: @red;
        color: @base;
    }
}

/* spotify */
#custom-spotify {
    background-color: rgba(100, 149, 237, 0.2);
    /* delikatny niebieski */
    color: @text;
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
}

#custom-spotify:hover {
    background-color: rgba(100, 149, 237, 0.8);
    color: @base;
}

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

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