dotfiles-mirror/config/waybar/style.css

@define-color border      #3e3a32;
@define-color background  #1e1e1e;
@define-color surface0    #2a2a2a;
@define-color overlay0    #3a3830;
@define-color text        #dcd7ba;
@define-color text_dim    #8c8a75;

@define-color blue        #7fbbb3;
@define-color green       #55393D;
@define-color yellow      #f9e2af;
@define-color peach       #e69875;
@define-color maroon      #c05a3b;
@define-color lavender    #b4beff;
@define-color pink        #f4b8e4;
@define-color teal        #7fc1ca;
@define-color grey        #5c6773;

* {
    border: none;
    font-family: "JetBrainsMono Nerd Font";
    font-size: 15px;
    min-height: 10px;
}

window#waybar {
    background: linear-gradient(
        to bottom,
        rgba(30, 30, 30, 1) 0%,
        rgba(28, 28, 28, 0.95) 68%,
        rgba(25, 25, 25, 0.75) 82%,
        rgba(20, 20, 20, 0.30) 94%,
        rgba(20, 20, 20, 0.00) 100%
    );
}

#disk,
#pulseaudio,
#window,
#clock,
#network,
#battery,
#privacy,
#memory,
#cpu,
#workspaces,
#tray,
#bluetooth,
#tray menu {
    padding: 5px 10px;
    margin: 3px 0 13px 10px;
    background: @surface0;
    color: @text;
    transition: 0.3s;
    border: 1.5px solid @border;
    border-radius: 8px;
}

#window { transition: none; }

window#waybar.empty #window {
    background: transparent;
    box-shadow: none;
    border: none;
}

#network { color: @text; }
#pulseaudio { margin-right: 12px; color: @text; }
#clock { color: @text; }

#workspaces {
    margin-left: 12px;
    color: @text;
}

#workspaces button {
    margin: 0;
    padding: 1px 3px;
    color: @text;
    transition: none;
}

#workspaces button.empty { color: @text_dim; }
#workspaces button.active { color: @green; }
#workspaces button.urgent { color: @maroon; }

#workspaces button:hover {
    background: @overlay0;
    color: @text;
}

#custom-distro {
    background-color: @accent;
    color: @text;
	font-size: 30;
	margin-bottom: 8px;
	padding-left: 12px;
	padding-right: 12px;
}