neodotfiles/config/waybar/style.css

/* Styles */

/* Colors (catppuccin-mocha) */
@define-color white     #cdd6f4;
@define-color black     #1e1e2e;
@define-color red       #e78284;
@define-color green     #a6d189;
@define-color yellow    #e5c890;
@define-color orange    #ef9f76;
@define-color blue      #8caaee;
@define-color purple    #ca9ee6;
@define-color aqua      #81c8be;
@define-color gray      #313244;
/* Brigher variants */
@define-color brred     #f38ba8;
@define-color brgreen   #a6e3a1;
@define-color brpurple  #cba6f7;
@define-color brorange  #fab387;
@define-color brgray    #45475a;
@define-color brblue    #89b4fa;
@define-color braqua    #94e2d5;
@define-color bryellow  #f9e2af;

/* Color definitions for modules */
@define-color critical              @brred;
@define-color unfocused             @braqua;
@define-color focused               @brblue;
@define-color inactive              @gray;
@define-color clock                 @purple;
@define-color monitor               @blue;
@define-color language              @aqua;
@define-color idle                  @green;
@define-color powerprofile          @green;
@define-color battery               @green;
@define-color volume                @yellow;
@define-color backlight             @orange;
@define-color network               @red;
@define-color wbackground           rgba(30, 30, 46, 0.90);

/* Keyframes */
@keyframes blink {
    to {
        color: @critical;
    }
}

/* Reset all styles */
* {
    border: none;
    border-radius: 0;
    min-height: 0;
    padding: 0;
    box-shadow: none;
    text-shadow: none;
}

button {
    box-shadow: inset 0 -3px transparent;
    border: none;
    border-radius: 0;
}

/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
button:hover {
    background: inherit;
}

/* The whole bar */
window#waybar {
    background-color: @wbackground;
    font-family:
        Symbols Nerd Font Mono,
        Mononoki Nerd Font;
    font-size: 14px;
}

/* Workspaces */

#workspaces button {
    border-top: 2px solid @inactive;
    padding: 0 8px;
    color: @white;
}

#workspaces button.active {
    background-color: @inactive;
    border-top: 2px solid @focused;
    color: @focused;
    transition-property: color;
    transition-duration: 0.5s;
}

#workspaces button:hover {
    color: @unfocused;
    transition-property: color;
    transition-duration: 0.5s;
}

#workspaces button.urgent {
    background-color: @inactive;
    animation-name: blink;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: 3;
    animation-direction: alternate;
}

#window {
    color: @white;
    padding: 0 10px;
}

/* =====================================
   Individual Module Styles
   ===================================== */
#cpu,
#memory,
#language,
#idle_inhibitor,
#power-profiles-daemon,
#battery,
#pulseaudio,
#backlight,
#network,
#bluetooth,
#clock {
    color: @wbackground;
    padding-left: 4px;
}

#clock {
    background-color: @clock;
}

#cpu {
    background-color: @monitor;
}

#memory {
    background-color: @monitor;
}

#language {
    background-color: @language;
}

#idle_inhibitor {
    background-color: @battery;
}

#power-profiles-daemon {
    background-color: @powerprofile;
}

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

#battery.critical:not(.charging) {
    color: @white;
    animation: blink 0.5s linear infinite alternate;
}

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

#bluetooth,
#bluetooth.disconnected {
    background-color: @network;
    padding-right: 10px;
}

#pulseaudio,
#pulseaudio.muted {
    background-color: @volume;
}

#backlight {
    background-color: @backlight;
}

/* All Modeline arrows */
#custom-arrow1,
#custom-arrow2,
#custom-arrow3,
#custom-arrow4,
#custom-arrow5,
#custom-arrow6,
#custom-arrow7 {
    font-size: 18pt;
}

/* Individual Modeline arrows */

#custom-arrow1 {
    background: transparent;
    color: @clock;
}

#custom-arrow2 {
    background: @clock;
    color: @monitor;
}

#custom-arrow3 {
    background: @monitor;
    color: @language;
}

#custom-arrow4 {
    background: @language;
    color: @battery;
}

#custom-arrow5 {
    background: @battery;
    color: @volume;
}

#custom-arrow6 {
    background: @volume;
    color: @backlight;
}

#custom-arrow7 {
    background: @backlight;
    color: @network;
}