waybar/catppuccin-macchiato/style.css

@import url("./colors.css");

* {
  border: none;
  font-family: "JetBrainsMono Nerd Font", "Font Awesome", "Noto Sans CJK JP";
  font-size: 13px;
  min-height: 0;
  border-radius: 0.69em;
}

window#waybar {
  background-color: @mantle;
  color: @text;
  /* border-radius: 0.69em; */
}

window#waybar.hidden {
  opacity: 0.2;
}

#window {
  background-color: inherit;
  padding: 0 10px;
  margin: 5px 1px;
}

tooltip {
  background-color: @base;
  border: 1px solid @subtext0;
}

tooltip label {
  color: @text;
}

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

button:hover {
  background: inherit;
  box-shadow: inset 0 -3px @text;
}

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

#workspaces button {
  border-radius: 0;
  margin: 5px 0;
  padding: 0.24em;
  color: @mauve;
}

#workspaces button:hover {
  text-shadow: inherit;
  background-image: linear-gradient(0deg, @surface1, @mantle);
  margin: 5px 0;
  background-color: @overlay3;
  box-shadow: inset 0 -3px @green;
}

#workspaces button.focused {
  background-image: linear-gradient(0deg, @mauve, @surface1);
  /* box-shadow: inset 0 -3px @text; */
  margin: 5px 0;
  /* box-shadow: inset 0 -3px @mauve; */
  background-color: transparent;
  box-shadow: inset 0 -3px @mauve;
}

#workspaces button.empty {
  color: @subtext0;
}

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

#workspaces button.urgent {
  background-image: linear-gradient(0deg, @red, @mantle);
  margin: 5px 0;
}

#taskbar button.active {
  background-image: linear-gradient(0deg, @surface1, @mantle);
}

#submap {
  background-color: @base;
  box-shadow: inset 0 -2px @text;
}

#custom-weather,
#clock,
#language,
#pulseaudio,
#bluetooth,
#network,
#memory,
#cpu,
#temperature,
#disk,
#custom-kernel,
#idle_inhibitor,
#scratchpad,
#submap,
#tray {
  padding: 0 10px;
  margin: 5px 1px;
  color: @text;
}

.modules-left > widget:first-child > #workspaces {
  margin-left: 0;
}

.modules-right > widget:last-child > #workspaces {
  margin-right: 0;
}

#custom-weather {
  background-color: @teal;
  color: @mantle;
  margin-right: 5px;
}

#custom-kernel {
  background-color: @mauve;
  color: @mantle;
}

#clock {
  background-color: @green;
  color: @mantle;
}

@keyframes blink {
  to {
    background-color: @mantle;
    color: @text;
  }
}

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

#cpu {
  background-color: @mauve;
  color: @mantle;
  min-width: 45px;
}

#memory {
  background-color: @red;
  color: @mantle;
}

#disk {
  background-color: @flamingo;
  color: @mantle;
}

#network {
  background-color: @peach;
  color: @mantle;
}

#network.disconnected {
  background-color: @red;
  color: @mantle;
}

#bluetooth {
  background-color: @maroon;
  color: @mantle;
  min-width: 40px;
}

#pulseaudio {
  background-color: @sapphire;
  color: @mantle;
}

#pulseaudio.muted {
  background-color: red;
  color: @mantle;
}

#temperature {
  background-color: @pink;
  color: @mantle;
  min-width: 37px;
}

#temperature.critical {
  background-color: red;
  color: @mantle;
  min-width: 37px;
}

#tray {
  /* background-color: @overlay0; */
  background-color: @surface0;
  color: @mantle;
}

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

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

#idle_inhibitor {
  background-color: @base;
  color: @text;
  font-family: Inter;
}

#idle_inhibitor.activated {
  background-color: @text;
  color: @base;
}

#scratchpad {
  background-color: @base;
  color: @text;
}

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

#custom-launcher {
  margin: 0 4px;
  padding: 0 10px;
  color: #1793d1;
}

#custom-mpd-scroll {
  color: @mantle;
  background-color: @mauve;
  padding: 0 10px;
  margin: 5px 1px;
}
#custom-updates {
  background-color: @yellow;
  color: @mantle;
  padding: 0 10px;
  margin: 5px 1px;
}

#custom-launcher {
  color: #1793d1;
  background-color: inherit;
  margin: 0 0 0 0.24em;
}

#custom-firefox-scroll {
  color: @mantle;
  background-color: @peach;
  padding: 0 10px;
  margin: 5px 1px;
}

#cava {
  background-color: @blue;
  color: @crust;
  padding: 0 10px;
  margin: 5px 1px;
}

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

#battery {
  background-color: @rosewater;
  color: @base;
  padding: 0 10px;
  margin: 5px 1px;
}

#battery.charging,
#battery.plugged {
  color: @base;
  background-color: @green;
}

#custom-mpv-scroll {
  background-color: @flamingo;
  color: @base;
  padding: 0 10px;
  margin: 5px 1px;
}