dotfiles/waybar/style.css

@import "themes/catppuccin-macchiato.css";

* {
  font-family: NotoSans NF SemBd;
  font-size: 15px;
  margin: 0px;
  min-height: 0;
  border-radius: 0;
  color: @text;
}

#waybar {
  background-color: alpha(@base, 0.7);
  /* background: transparent; */
}

#custom-logo {
  background-image: url("./icons/logo.svg");
  background-color: @base;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
  padding: 0px 8px 0px 24px;
}

#custom-pl-taskbar,
#custom-pl-workspaces,
#custom-pl-window,
#custom-pl-swaync,
#custom-pl-clock,
#custom-pl-idle,
#custom-pl-stats,
#custom-pl-swaync-before,
#custom-pl-pulse,
#custom-pl-idle-before,
#custom-pl-tray {
  font-size: 26px;
}

#workspaces *,
#window *,
#custom-swaync,
#clock,
#idle_inhibitor,
#cpu,
#memory,
#temperature,
#pulseaudio,
#custom-power,
#custom-pl-tray {
  color: @base;
}

#taskbar {
  background-color: @base;
}

#custom-pl-taskbar {
  color: @base;
  background-color: @mauve;
}

#workspaces {
  background-color: @mauve;
}

#workspaces button,
#taskbar button {
  background: transparent;
  box-shadow: inherit;
  text-shadow: inherit;
  border: none;
}

#workspaces button.active {
  box-shadow: inset 0 -4px @base;
  color: @base;
}

#workspaces button:hover {
  background: transparent;
  box-shadow: inherit;
  text-shadow: inherit;
  box-shadow: inset 0 -4px @base;
  color: @base;
}

#taskbar button.active {
  box-shadow: inset 0 -4px @subtext1;
  color: @base;
}

#taskbar button:hover {
  box-shadow: inset 0 -4px @subtext1;
}

#custom-pl-workspaces {
  color: @mauve;
  background-color: @lavender;
}

#window {
  background-color: @lavender;
  color: @base;
}

#custom-pl-window {
  color: @lavender;
  background: transparent;
}

#custom-pl-swaync-before {
  background: transparent;
  color: @teal;
}

#custom-swaync {
  background-color: @teal;
}

#custom-pl-swaync {
  color: @teal;
  background-color: @green;
}

#clock {
  background-color: @green;
}

#custom-pl-clock {
  color: @green;
  background: transparent;
}

#custom-pl-idle-before {
  background: transparent;
  color: @yellow;
}

#idle_inhibitor {
  background-color: @yellow;
  padding: 0px 6px;
}

#custom-pl-idle {
  background: @peach;
  color: @yellow;
}

#cpu,
#memory,
#temperature {
  background: @peach;
  padding: 0px 6px;
}

#custom-pl-stats {
  color: @peach;
  background-color: @red;
}

#pulseaudio {
  background-color: @red;
}

#custom-pl-pulse {
  color: @red;
  background-color: @base;
}

#tray {
  background-color: @base;
  padding: 0px 6px;
}

#custom-pl-tray,
#custom-power {
  background-color: @sky;
}

#custom-power {
  padding-right: 6px;
}

menu {
  background-color: alpha(@base, 0.7);
}

menu button:hover {
  background-color: @sky;
}