snowflake/config/waybar/leftbar.css

@define-color bg #010F1D;
@define-color warning-bg #D8C15E;
@define-color urgent-bg #EF5350;
@define-color disabled-bg #204462;
@define-color module-bg #0B253A;
@define-color module-fg white;
@define-color workspace-bg-hover #D8C15E;
@define-color workspace-bg-active #D6DEEB;

* {
    /* `otf-font-awesome` is required to be installed for icons */
    font-family: FontAwesome, Symbols Nerd Font, Inter, sans-serif;
    font-weight: 700;
    font-size: 14px;
}

window#waybar {
    background-color: @bg;
    color: @module-fg;
}

button {
    border-radius: 0;
    transition: none;
}

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

#workspaces {
    margin: 5px;
}

/* MODULE/WORKSPACES */
#workspaces button {
    padding: 0;
    background-color: @module-bg;
    color: @module-fg;
    border: none;
    margin-bottom: 5px;
}

#workspaces button:hover {
    color: @bg;
    background: @workspace-bg-hover;
}

#workspaces button.active {
    color: @bg;
    background: @workspace-bg-active;
}

#workspaces button.urgent {
    color: @bg;
    background: @urgent-bg;
}

#workspaces button:last-child {
    margin-bottom: 0;
}

/* MODULE/BATTERY */
#battery {
    font-size: 20px;
    margin: 0 5px;
    padding: 5px 0;
    background-color: @module-bg;
    color: @module-fg;
}

#battery.warning {
    color: @bg;
    background-color: @warning-bg;
}

#battery.critical {
    background-color: @urgent-bg;
    color: @module-fg;
}

/* MODULE/CLOCK */
#clock,
#clock.date {
    font-family: Iosudo, monospace;
    font-size: 16px;
    background-color: @module-bg;
    color: @module-fg;
    padding: 3px 0;
}

#clock {
    margin: 0 5px;
}

#clock.date {
    margin: 5px;
}

/* MODULE/PULSEAUDIO-SLIDER */
#pulseaudio-slider {
    margin: 0 5px;
    padding: 14px 0;
    background-color: @module-bg;
    min-height: 60px;
}

#pulseaudio-slider trough {
    border: none;
    border-radius: 0;
    min-width: 10px;
}

#pulseaudio-slider highlight {
    border: none;
    border-radius: 0;
}

#custom-audio-icon,
#custom-brightness-icon {
    font-size: 16px;
    padding: 3px 0 5px 0;
    background-color: @module-bg;
}

#custom-audio-icon {
    margin: 0px 5px;
}

#custom-brightness-icon {
    margin: 0 5px 5px 5px;
}

/* MODULE/BACKLIGHT-SLIDER */
#backlight-slider {
    margin: 5px 5px 0 5px;
    padding: 14px 0;
    background-color: @module-bg;
    min-height: 60px;
}

#backlight-slider trough {
    border: none;
    border-radius: 0;
    min-width: 10px;
}

#backlight-slider highlight {
    border: none;
    border-radius: 0;
}

/* MODULE/NETWORK */
#network {
    margin: 5px;
    padding: 4px 5px 4px 4px;
    background-color: @module-bg;
    color: @module-fg;
}

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

/* MODULE/TRAY */
#tray {
    margin: 0px 5px;
    background-color: @module-bg;
    padding: 5px;
}

#tray > .passive {
    -gtk-icon-effect: dim;
}

#tray > .needs-attention {
    -gtk-icon-effect: highlight;
    background-color: @urgent-bg;
}

#custom-power {
    font-size: 18px;
    margin: 5px;
    padding: 3px 5px;
    background-color: @urgent-bg;
}