dotfiles/waybar/style.css

@define-color base00 #282a36;
@define-color base01 #34353e;
@define-color base02 #43454f;
@define-color base03 #78787e;
@define-color base04 #a5a5a9;
@define-color base05 #e2e4e5;
@define-color base06 #eff0eb;
@define-color base07 #f1f1f0;
@define-color base08 #ff5c57;
@define-color base09 #ff9f43;
@define-color base0A #f3f99d;
@define-color base0B #5af78e;
@define-color base0C #9aedfe;
@define-color base0D #57c7ff;
@define-color base0E #ff6ac1;
@define-color base0F #b2643c;
@define-color basetransparent rgba(40, 42, 54, 0.0);
@define-color backtransparent rgba(40, 42, 54, 0.7);
* {
    border:        1px;
    border-radius: 20;
    font-family:   VictorMono Nerd Font;
    font-size:     15px;
    font-weight:   normal;
    box-shadow:    none;
    text-shadow:   none;
    transition-duration: 0s;
    padding-top: 0px;
    padding-bottom: 0px;
}


window {
    background: transparent;
    /* border-radius: 20px; */
}

window#waybar > box {
    padding-top: 3px;
    padding-bottom: 3px;
    color:      @base05;
    box-shadow: 2px 2px 5px 5px #101010;
    margin: 12px 14px 14px 14px;
    background: @base00;
}

#workspaces {
    border-radius: 20px;
    margin-left: 10px;
    padding-right: 10px;
    background: @backtransparent;
    transition: none;
}

#tags {
    border-radius: 20px;
    margin-left: 6px;
    padding-right: 10px;
    background: @backtransparent;
    transition: none;
}

#workspaces button {
    transition: none;
    color:      rgba(217, 216, 216, 0.4);
    background: transparent;
}

#tags button {
    transition: none;
    color:      rgba(217, 216, 216, 0.4);
    background: transparent;
}

#workspaces button.visible {
    color:      rgba(217, 216, 216, 1);
}

#tags button.occupied {
    color:      rgba(217, 216, 216, 1);
}

#workspaces button.focused {
    color: @base0C;
}

#tags button.focused {
    color: @base0C;
}

#workspaces button:hover {
    transition: none;
    box-shadow: inherit;
    text-shadow: inherit;
    color: @base0E;
}

#workspaces button.urgent {
    color:      @base08;
}

#mode, #battery, #cpu, #memory, #network, #pulseaudio, #idle_inhibitor, #backlight, #custom-storage, #custom-spotify, #custom-weather, #custom-mail {
    margin:     0px 3px 0px 3px;
    /* min-width:  25px; */
}

#clock {
    margin-left: 2px;
    margin-right: 2px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 20px;
    transition: none;
    color: @base0B;
    background: @backtransparent;
}

#backlight {
    margin-left: 2px;
    margin-right: 2px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 20px;
    transition: none;
    color: @base08;
    background: @backtransparent;
}

#battery.warning {
    color:       @base09;
}

#battery.critical {
    color:      @base08;
}

#battery.charging {
    color:      @base0B;
}

#pulseaudio {
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 20px;
    transition: none;
    color: @base09;
    background: @backtransparent;
}

#network {
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 20px;
    transition: none;
    color: @base0B;
    background: @backtransparent;
}

#cpu {
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 20px;
    transition: none;
    color: @base09;
    background: @backtransparent;
}

#battery {
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 20px;
    transition: none;
    color: @base0D;
    background: @backtransparent;
}

#battery.bat2 {
    margin-right: 10px;
}

#memory {
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 20px;
    transition: none;
    color: @base0C;
    background: @backtransparent;
}

#temperature {
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 20px;
    transition: none;
    color: @base0E;
    background: @backtransparent;
}

#tray {
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 20px;
    transition: none;
    color: @base0E;
    background: @backtransparent;
}