dotfiles/waybar/.config/waybar/style.css

@define-color foreground #e0def4;
@define-color background #191724;

* {
    border: none;
    border-radius: 0;
    font-family: Iosevka, FontAwesome, Noto Sans CJK;
    font-size: 14px;
    min-height: 0;
}

window#waybar {
    background: rgba(25, 23, 36, 0.8);
    border-bottom: 1px solid #26233a;
    border-radius: 10px;
    color: @foreground;
}

tooltip {
    background: @background;
    border-radius: 10px;
}

#workspaces button {
    color: @foreground;
    border-radius: 10px;
    padding: 5px;
    margin: 4px 4px;
}

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

#workspaces button:hover,
#workspaces button.focused {
    background: #c4a7e7;
    color: @background;
}

#cpu,
#memory,
#network,
#bluetooth,
#pulseaudio,
#battery,
#clock,
#custom-playerctl,
#custom-playerlabel,
#custom-screenrecording-indicator,
#custom-randwall {
    color: @foreground;
    padding: 0px 8px;
}

#temperature.critical {
    color: #eb6f92;
}

#custom-playerctl,
#custom-playerlabel {
    background: #26233a;
    border-radius: 16px;
    margin: 5px 8px;
}

#custom-playerctl {
    font-size: 16px;
    padding: 0 17px 0 15px;
}

#custom-playerlabel {
    margin-left: 10px;
    padding: 0 15px 0 10px;
}

#custom-screenrecording-indicator {
    border-radius: 4px;
    transition: all 0.3s ease;
}

#custom-screenrecording-indicator.idle {
    background-color: @background;
    color: @foreground;
}

#custom-screenrecording-indicator.active {
    color: #cc3436;
    animation: blink 1s infinite;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

#custom-notification {
    margin-right: 12px;
}

#custom-randwall {
    color: #f6c177;
}

#custom-expand-icon {
    color: #9ccfd8;
}