dotfiles/config/waybar/style.css

@define-color fg #F5F5F5;
@define-color bg #1F1F28;
@define-color bordercolor #C8C093;
@define-color highlight #D59C5C;
@define-color disabled #A5A5A5;
@define-color alert #E67E80;
@define-color activegreen #26A65B;

* {
  min-height: 0;
  font-family: "JetBrainsMono Nerd Font", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
}

window#waybar {
  color: @fg;
  background: @bg;
  border-radius: 10px;
  transition-property: background-color;
  transition-duration: 0.5s;
  border: 2px solid @bordercolor;
}

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: 0px;
  padding: 0px 5px;
  margin: 15px 0px;
}

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

#workspaces button {
  color: @fg;
  margin-left: 10px;
}

#workspaces button.urgent {
  color: @alert;
}
#workspaces button.empty {
  color: @bordercolor;
}

#workspaces button.active {
  color: @highlight;
}

/*River Tags/Workspaces*/
#tags {
  border-radius: 0px;
  padding: 0px 5px;
}

#tags button {
  color: @bordercolor;
  background: @bg;

  /*If you need round border icons*/
  border-radius: 0px;
  padding: 0px 0px;
  margin: 5px 0px;
}

#tags button.occupied {
  color: @fg;
}

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

#tags button.urgent {
  color: @alert;
}

#clock,
#cava,
#battery,
#cpu,
#memory,
#disk,
#temperature,
#language,
#backlight,
#backlight-slider,
#network,
#pulseaudio,
#wireplumber,
#custom-media,
#taskbar,
#tray,
#tray menu,
#tray > .needs-attention,
#tray > .passive,
#tray > .active,
#mode,
#scratchpad,
#custom-notification,
#custom-wifi,
#custom-kdeconnect,
#custom-bluetooth,
#custom-power,
#custom-separator,
#idle_inhibitor,
#window,
#mpd {
  padding: 0px 10px;
  margin: 0px 5px;
  color: @bordercolor;
}

#custom-notification,
#custom-wifi,
#custom-kdeconnect,
#custom-bluetooth,
#custom-power,
#idle_inhibitor {
  color: @bg;
}

#clock,
#custom-group {
  color: @bg;
  background-color: @bordercolor;
  margin: 10px;
  padding: 0px 15px;
  border-radius: 5px;
}

#custom-separator {
  padding: 0px;
  margin: 0px;
  color: @disabled;
}

#custom-power {
  color: @alert;
}


#tray {
  /*background-color: @bordercolor;*/
  border: 1px solid @bordercolor;
  margin: 10px;
  padding: 0px 15px;
  border-radius: 5px;
}

#network.disconnected,
#pulseaudio.muted,
#wireplumber.muted {
  color: @alert;
}

#battery.charging,
#battery.plugged {
  color: @activegreen;
}

label:focus {
  background-color: @bg;
}

#battery.critical:not(.charging) {
  background-color: @alert;
  color: @fg;
  animation-name: blink;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#tray > .passive {
  background-color: red;
  color: @bg;
} 
#tray menu {
  background-color: @bg;
  border: 1px solid @bordercolor;
  color: @bordercolor;
  border-radius: 10px;
  padding: 5px;
}
#tray menuitem {
  background-color: @bg;
  color: @bordercolor;
  border-radius: 3px;
  border: 1px solid transparent;
}
#tray menuitem:hover {
  background-color: #000000;
  border: 1px solid @bordercolor;
}

/*
#tray menu {
  background-color: @bg;
  border: 1px solid @bordercolor;
  color: @bordercolor;
  border-radius: 10px;
  padding: 5px;
}

#tray menuitem {
  background-color: @bg;
  color: @bordercolor;
  border-radius: 3px;
  padding: 5px 10px;
}

#tray menuitem:hover {
  background-color: #000000;
  border: 1px solid @bordercolor;
}
*/