dotfiles/private_dot_config/waybar/style.css

* {
    /* `otf-font-awesome` is required to be installed for icons */
    /* font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif; */
    font-family: JetBrainsMono Nerd Font, FontAwesome;
    font-size: 14px;
    font-weight: 500;
}

/* @define-color primary_color #8BD0F0;
@define-color secondary_color #393e46; */

@import "colors.css";

window#waybar {
    background-color: rgba(0,0,0,0);
    color: @primary;
    transition-property: background-color;
    transition-duration: .5s;
}

label:focus {
    background-color: #000000;
}


/* WORKSPACES */
button {
    /* Use box-shadow instead of border so the text isn't offset */
    box-shadow: inset 0 -3px transparent;
    /* Avoid rounded borders under each button name */
    border: none;
    border-radius: 0;
}

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

#workspaces button {
    padding: 0 5px;
    background-color: transparent;
}

#workspaces button:hover {
    background: rgba(0, 0, 0, 0.2);
}

#workspaces button.focused {
    background-color: #64727D;
    box-shadow: inset 0 -3px #ffffff;
}

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


/* MODULES */

.modules-left,
.modules-center,
.modules-right
{
    background: @primary_container;
    opacity: 0.8;
    margin: 4px 10px;
    padding: 0 10px;
    border-radius: 15px;
}

.modules-left {
    padding: 0;
}
.modules-center {
    padding: 0 10px;
}

#clock,
#pulseaudio,
#bluetooth,
#cpu,
#memory,
#disk,
#custom-gpu-usage,
#privacy,
#cava,
#mpris,
#scratchpad,
#workspaces,
#tray,
#power,
#custom-privacydots
{
    margin: 0 5px;
    padding: 0 5px;
}

#custom-privacydots {
  padding: 0 10px;
  font-size: 16px;
  letter-spacing: 3px;
}

#clock {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

#pulseaudio {
}

#pulseaudio.muted {
    background-color: rgba(255, 0, 55, 0.05);
}

#pulseaudio:not(.muted):hover {
    background-color: rgba(255, 255, 0, 0.1);
}

#bluetooth {
}

#bluetooth:hover {
    background-color: rgba(0, 149, 255, 0.1);
}

#hardware {
}

#music{
}

#cava {
    color: @secondary;
    opacity: 0.3;
}

#mpris {
}

#scratchpad {
}

#scratchpad.empty {
	background-color: transparent;
}

#tray {
    background-color: @on_primary;
}

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

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