dotfiles/config/waybar/style.css

/*    GRUVBOX DARK PALETTE
      --------------------
*/

@define-color bg        #282828;
@define-color gray1     #928374;
@define-color red1      #cc241d;
@define-color red2      #fb4934;
@define-color green1    #98971a;
@define-color green2    #b8bb26;
@define-color yellow1   #d79921;
@define-color yellow2   #fabd2f;
@define-color blue1     #458588;
@define-color blue2     #83a598;
@define-color purple1   #b16286;
@define-color purple2   #d3869b;
@define-color aqua1     #689d6a;
@define-color aqua2     #8ec07c;
@define-color gray2     #a89984;
@define-color fg        #ebdbb2;
@define-color bg0_h     #1d2021;
@define-color bg0       @bg;
@define-color bg1       #3c3836;
@define-color bg2       #504945;
@define-color bg3       #665c54;
@define-color bg4       #7c6f64;
@define-color bg-gray   @gray1;
@define-color bg0_s     #32302f;
@define-color fg4       #a89984;
@define-color fg3       #bdae93;
@define-color fg2       #d5c4a1;
@define-color fg1       @fg;
@define-color fg0       #fbf1c7;
@define-color orange1   #d65d0e;
@define-color orange2   #af3a03;

/*	COLOR BINDS
	-----------			*/
@define-color theme_base_color            @bg;
@define-color theme_bg_color            @bg;
@define-color theme_text_color         @fg;
@define-color text-opposite     @bg;
@define-color text-alert        @red2;
@define-color error_color             @red1;
@define-color warning_color           @orange1;
@define-color ok                @aqua2;
@define-color workspaces-text-color  @fg4;
@define-color workspaces-hover  @yellow2;
@define-color workspaces-focused  @aqua1;
@define-color day               @orange1;
@define-color time              @orange2;
@define-color date              @orange1;
@define-color backlight         @bg-gray;
@define-color network           @bg4;
@define-color audio             @bg3;
@define-color battery           @bg2;

@define-color theme_selected_bg_color @blue1;

/* =============================================================================
 *
 * Waybar configuration
 *
 * Configuration reference: https://github.com/Alexays/Waybar/wiki/Configuration
 *
 * =========================================================================== */

/* import css definitions for current theme */

/* -----------------------------------------------------------------------------
 * Keyframes
 * -------------------------------------------------------------------------- */

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

    to {
        color: @wm_icon_bg;
        background-color: @warning_color;
    }
}

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

    to {
        color: @wm_icon_bg;
        background-color: @error_color;
    }
}

/* -----------------------------------------------------------------------------
 * Base styles
 * -------------------------------------------------------------------------- */

/* Reset all styles */
* {
    border: none;
    border-radius: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    font-family: "Iosevka Custom";
}

/* The whole bar */
window#waybar {
    background: @bg0_h;
    color: @theme_text_color;
    font-size: 14px;
}

/* Each module */
#custom-help,
#custom-scratchpad,
#custom-github,
#custom-clipboard,
#custom-dnd,
#custom-valent,
#custom-idle_inhibitor,
#bluetooth,
#battery,
#clock,
#cpu,
#memory,
#mode,
#network,
#pulseaudio,
#temperature,
#backlight,
#language,
#custom-adaptive-light,
#custom-sunset,
#custom-playerctl,
#custom-weather,
#custom-theme,
#tray {
    padding-left: 8px;
    padding-right: 8px;
}

/* -----------------------------------------------------------------------------
 * Module styles
 * -------------------------------------------------------------------------- */

#custom-scratchpad,
#workspaces button.focused {
    color: @theme_bg_color;
    background-color: @workspaces-focused;
}

#battery {
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

#battery.warning {
    color: @warning_color;
}

#battery.critical {
    color: @error_color;
}

#battery.warning.discharging {
    animation-name: blink-warning;
    animation-duration: 3s;
}

#battery.critical.discharging {
    animation-name: blink-critical;
    animation-duration: 2s;
}

#clock {
    font-weight: bold;
}

#cpu.warning {
    color: @warning_color;
}

#cpu.critical {
    color: @error_color;
}

#memory {
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

#memory.warning {
    color: @warning_color;
}

#memory.critical {
    color: @error_color;
    animation-name: blink-critical;
    animation-duration: 2s;
}

#mode {
    background-color: @background_color;
    color: @aqua2;
}

#network.disconnected {
    color: @warning_color;
}

#pulseaudio.muted {
    color: @warning_color;
}

#temperature.critical {
    color: @error_color;
}

#workspaces button {
    margin-left: 2px;
    margin-right: 2px;
    padding-left: 8px;
    padding-right: 8px;
    color: @workspaces-text-color;
    background: @theme_bg_color;
}

#workspaces button.focused {
    border-color: @workspaces-focused;
}

#workspaces button.urgent {
    border-color: @error_color;
    color: @error_color;
}

#workspaces button:hover {
    border-color: @yellow1;
    color: @yellow1;
}

#bluetooth.disabled {
    color: @warning_color;
}

#custom-wf-recorder {
    color: @error_color;
    padding-right: 10px;
}

#custom-taskwarrior {
    background-color: @green1;
    color: @theme_base_color;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
}

#custom-playerctl {
    background-color: @blue1;
    color: @theme_base_color;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
}

#custom-valent.dangerously-empty {
    color: @warning_color;
}