dotfiles/waybar/style.css

@import 'macchiato.css';
* {
  font-family: "Roboto";
  font-size: 16px;
  min-width: 15px;
}

window#waybar {
  background-color: transparent;
}

window#waybar.hidden {
  opacity: 0.5;
}

button {
  box-shadow: inset 0 -3px transparent;
  border: none;
  border-radius: 10px;
}


#workspaces button.active { 
  background-color:  	@blue;
  border: 1px solid  	@blue;
  border-radius: 10px;
  color: @base;
}

#workspaces button.urgent {
  background-color: @red;
  border: 1px solid  	@red;
  border-radius: 10px;
  color: @base;
}

#clock,
#battery{
  background-color: @base; /* Change this to any gray color you want */
  border-radius: 10px; /* Adjust as needed */
  padding: 3px 10px;
  color: @text;
}

#mpd {
  padding: 0 10px;
  color: @subtext1;
}

#tray {
  background-color: @base; /* Change this to any gray color you want */
  border-radius: 10px 0px 0px 10px; /* Adjust as needed */
  padding: 3px 10px;
  color: @text;
}

#custom-notification,
#pulseaudio,
#network,
#bluetooth {
  background-color: @base; /* Change this to any gray color you want */
  border-radius: 0px; /* Adjust as needed */
  padding: 3px 7px;
  color: @text;
  margin: 0px;
}

#backlight {
  background-color: @base; /* Change this to any gray color you want */
  border-radius: 0px 10px 10px 0px; /* Adjust as needed */
  padding: 3px 10px;
  color: @text;
}

#custom-junkyard {
  background-color: @base; /* Change this to any gray color you want */
  border-radius: 10px 0px 0px 10px; /* Adjust as needed */
  padding: 3px 10px;
  color: @text;
}

#workspaces {
  background-color: @base; /* Change this to any gray color you want */
  border-radius: 0px 10px 10px 0px; /* Adjust as needed */
  padding: 3px 10px;
  color: @text;
}


#clock {
  background-color: @base; /* Change this to any gray color you want */
  border-radius: 10px;
  padding: 3px 10px;
  color: @text;
}

#battery {
  background-color: @base; /* Change this to any gray color you want */
  color: @text;
  margin-left: 7px;
}

#battery.charging, #battery.plugged {
  color: @base;
  background-color: @teal;
  border-radius: 10px;
  padding: 3px 10px;
}

@keyframes blink {
  to {
    background-color: @subtext1;
    color: @crust;
  }
}

#battery.critical:not(.charging) {
  background-color: @red;
  color: @subtext1;
  animation-name: blink;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  border-radius: 10px;
  padding: 3px 10px;
}

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

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

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