dotfiles/.config/hypr/waybar/style.css

* {
  /*font-family: "JetBrainsMono NFM:style=Bold", "Noto Sans", "Roboto Condensed", sans-serif;*/
  font-family: "SauceCodePro nerd", "Noto Sans", "Roboto Condensed", sans-serif;
  font-size: 15px;
  /* color: #3A3B3C; */
}

window#waybar {
  /* Transparent waybar. Make sure to comment out background-color: and border: */
  background: rgba(0, 0, 0, 0.5);
  /* background-color: #1e1e2e; */
  /* border: 2px solid #313244; */
  transition-property: background-color;
  transition-duration: .5s;
}

window#waybar.hidden {
  opacity: 0.5;
}

#backlight,
#battery,
#clock,
#cpu,
#disk,
#memory,
#tray,
#temperature,
#bluetooth,
#idle_inhibitor,
#pulseaudio,
#custom-change-waybar,
#custom-menu,
#custom-power,
#custom-weather,
#custom-updater,
#custom-updater-improved,
#custom-keybindings,
#custom-cycle_wall,
#network {
  border-radius: 4px;
  margin: 4px 0px;
  padding: 0px 4px;
  color: #3A3B3C;
  /*border: 2px solid #3a3b3c; */
}

#workspaces {
  border-radius: 4px;
  margin: 4px 0px;
  padding: 0px 4px;
  color: #3A3B3C;
}

#backlight {
  background-color: #cba6f7;
}

#battery {
  background-color: #f9e2af;
}

@keyframes blink {
  to {
    color: #000000;
  }
}

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

#clock {
  background-color: #a6e3a1;
}

#cpu {
  background-color: #89dceb;
}

#memory {
  background-color: #eba0ac;
}

#disk {
  background-color: #b4befe;
}

#tray {
  background-color: #b4befe;
}

#idle_inhibitor {
  background-color: #f4befe;
}

#temperature {
  background-color: #b4befe;
}

#bluetooth {
  background-color: #b4beae;
}

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

#tray>.needs-attention {
  -gtk-icon-effect: highlight;
}

#workspaces button {
  background-color: #d9e0ee;
  color: #3A3B3C;
  /* border: 2px solid #3a3b3c; */
  margin-right: 2px;
  border-radius: 4px;
}

#workspaces button.active {
  background-color: rgb(249, 226, 175);
  color: #3A3B3C;
}

#custom-menu {
  background-color: #f5c2e7;
}

#custom-power {
  background-color: #f38ba8;
  margin-right: 4px;
  font-size: 24px;
}

#custom-updater {
  background-color: #e6ed7b;
}

#custom-updater-improved {
  background-color: #e6ed7b;
}

#custom-uptime {
  background-color: #e6ed7b;
}

#custom-changewaybar {
  border-radius: 4px;
  margin: 4px 0px;
  padding: 0px 4px;
  color: #3A3B3C;
  background-color: #ebcb8b;
}

#custom-weather {
  background-color: #cba6f7;
}

#custom-cycle_wall {
  background-color: #89dceb;
}

#custom-vpn_check {
  background-color: #a6e3a1;
}

#custom-cputemp {
  background-color: #86b4fa;
}

#custom-keybindings {
  background-color: #86b4fa;
  font-size: 18px;
}

#pulseaudio {
  background-color: #fab387;
}

#pulseaudio.bluetooth {
  background-color: #f5c2e7;
}

#pulseaudio.muted {
  background-color: #313244;
  color: #cdd6f4;
}

#network {
  background-color: #89b4fa;
}

#network.disconnected,
#network.disabled {
  background-color: #313244;
  color: #cdd6f4;
}