dotfiles/.config/waybar/style.css

/* -----------------------------------------------------
 * General
 * ----------------------------------------------------- */
* {
    font-size: 14px;
    font-family: JetBrainsMono Nerd Font;
}

@define-color basecolor #f8f8f2;
@define-color focused #8084a8;
@define-color warning #fabd2f;
@define-color critical #cc241d;

window#waybar {
    background-color: rgba(40, 42, 54, 0.4);
    border-bottom: 1px solid rgba(40, 42, 55, 0.1);
    border-radius: 0px;
    color: @basecolor;
}

@keyframes blink-warning {
    70% {
        color: @basecolor;
    }

    to {
        color: @basecolor;
        background-color: @warning;
    }
}

@keyframes blink-critical {
    70% {
        color: @basecolor;
    }

    to {
        color: @basecolor;
        background-color: @critical;
    }
}

/* -----------------------------------------------------
 * Workspaces
 * ----------------------------------------------------- */
#workspaces {
    background-color: inherit;
}

#workspaces button {
    background-color: inherit;
    padding: 0 0.5em;
    color: @basecolor;
    margin: 0.25em;
}

#workspaces button.focused {
    background: @focused;
}

#workspaces button:hover {
    background: inherit;
}

/* -----------------------------------------------------
 * Tooltips
 * ----------------------------------------------------- */
tooltip {
    background: #282a36;
    border: 1px solid #bd93f9;
    border-radius: 10px;
}

tooltip label {
    color: @basecolor;
}

/* -----------------------------------------------------
 * Blinking modules
 * ----------------------------------------------------- */
#mode,
#memory {
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

#memory.critical,
#cpu.critical {
    color: @critical;
}

#mode,
#memory.critical {
    animation-name: blink-critical;
    animation-duration: 2s;
}

#memory.warning,
#cpu.warning {
    color: @warning;
}

/* -----------------------------------------------------
 * Window
 * ----------------------------------------------------- */
#window {
    color: @basecolor;
    padding: 4px 10px;
}

#memory,
#cpu {
    color: #8be9fd;
    padding: 4px 10px;
}

#clock {
    color: #50fa7b;
    padding: 4px 10px;
}

#tray {
    padding: 2px 10px;
}