neodotfiles/config/waybar/style.css

/* =====================================
   Colors (Gruvbox Dark)
   ===================================== */
@define-color white     #fbf1c7;
@define-color black     #1d2021;
@define-color red       #cc241d;
@define-color green     #98971a;
@define-color yellow    #d79921;
@define-color orange    #d65d0e;
@define-color blue      #458588;
@define-color purple    #b16286;
@define-color aqua      #689d6a;
@define-color gray      #a89984;
/* Brighter variants */
@define-color brwhite   #ebdbb2;
@define-color brblack   #504945;
@define-color brgray    #928374;
@define-color brred     #fb4934;
@define-color brgreen   #b8bb26;
@define-color bryellow  #fabd2f;
@define-color brorange  #fe8019;
@define-color brblue    #83a598;
@define-color brpurple  #d3869b;
@define-color braqua    #8ec07c;
/* Darker variants */
@define-color drred     #9d0006;
@define-color drgreen   #79740e;
@define-color drpurple  #8f3f71;
@define-color drorange  #af3a03;
@define-color drgray    #3c3836;
@define-color drblue    #076678;
@define-color draqua    #427b58;
@define-color dryellow  #b57614;

/* =====================================
   Color Definitions for Modules
   ===================================== */
@define-color critical              @brred;
@define-color unfocused             @braqua;
@define-color focused               @red;
@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(29, 32, 33, 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: @wbackground;
    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: @wbackground;
    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: @white;
    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;
}