neodotfiles/config/waybar/style.css

/* =====================================
   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               @red;
@define-color inactive              @brgray;
@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 Styles
   ===================================== */
* {
    border: none;
    border-radius: 0;
    min-height: 0;
    padding: 0;
    box-shadow: none;
    text-shadow: none;
}

/* =====================================
   Button Styles
   ===================================== */
button {
    box-shadow: inset 0 -3px transparent;
    border: none;
    border-radius: 0;
}

/* Prevent strange hover effect on workspace buttons */
button:hover {
    background: inherit;
}

/* =====================================
   General Bar Styles
   ===================================== */
window#waybar {
    background-color: @wbackground;
    font-family: Symbols Nerd Font Mono, Mononoki Nerd Font;
    font-size: 14px;
}

/* =====================================
   Workspaces Module
   ===================================== */
#workspaces button {
    font-family: Symbols Nerd Font Mono;
    font-size: 16px;
    padding: 0px 0px;
    margin: 0 0;
    color: @white;
}

#workspaces button.visible {
    color: @white;
}

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

#workspaces button.unfocused {
    color: @white;
}

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

#workspaces button:hover {
    background: @yellow;
    color: @black;
}

/* =====================================
   Mode Module
   ===================================== */
#mode {
    color: @black;
    background-color: @red;
    border-bottom: 3px solid @white;
    padding: 3px;
}

/* =====================================
   Window Module
   ===================================== */
#window {
    color: @white;
    padding: 0 10px;
    margin: 5px 0;
}

/* =====================================
   Margins and Layout Adjustments
   ===================================== */
#window, #workspaces {
    margin: 0 4px;
}

.modules-left > widget:first-child > #workspaces {
    margin-left: 0;
}

.modules-right > widget:last-child > #workspaces {
    margin-right: 0;
}

/* =====================================
   Individual Module Styles
   ===================================== */
#cpu,
#memory,
#language,
#idle_inhibitor,
#power-profiles-daemon,
#battery,
#pulseaudio,
#backlight,
#network,
#bluetooth,
#clock {
    color: @black;
    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;
}

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

/* Individual Modeline Arrow Styles */
#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;
}