Dotfiles_ArchAP/waybar/.config/waybar/style.css

@import "mocha.css";

* {
  border: none;
  border-radius: 0;
  font-family: "JetBrainsMono Nerd Font", "Symbols Nerd Font", monospace;
  font-size: 13px;
  min-height: 0;
}

window#waybar {
  background: transparent;
  color: @text;
}

/* Base modules */
#workspaces,
#mpris,
#bluetooth,
#network,
#wireplumber,
#systemd-failed-units,
#clock,
#cpu,
#memory,
#disk,
#battery,
#backlight,
#custom-updates,
#custom-power, 
#custom-tlp {
  background: alpha(@base, 0.32);
  color: @text;
  margin: 4px 4px 4px 0;
  padding: 4px 10px;
  border-bottom: 2px solid alpha(@surface2, 0.9);
  /*border-radius: 8px;*/
}

/* Workspaces */
#workspaces {
  margin-left: 6px;
  padding: 2px 6px;
  background: alpha(@mantle, 0.32);
  border-bottom: 2px solid alpha(@lavender, 0.35);
}

#workspaces button {
  padding: 2px 8px;
  margin: 2px 3px;
  border-radius: 4px;
  color: @subtext0;
  background: transparent;
}

#workspaces button:hover {
  background: alpha(@surface0, 0.65);
  color: @text;
}

#workspaces button.active {
  background: @lavender;
  color: @base;
}

#workspaces button.urgent {
  background: @red;
  color: @base;
}

/* MPRIS */
#mpris {
  min-width: 140px;
  color: @green;
  background: alpha(@mantle, 0.32);
  border-color: alpha(@green, 0.35);
}

/* Bluetooth / network / audio */
#bluetooth {
  color: @blue;
  border-color: alpha(@blue, 0.35);
}

#custom-tlp {
  color: @pink;
  border-color: alpha(@pink, 0.35);
}

#network {
  color: @sky;
  border-color: alpha(@sky, 0.35);
}

#custom-power {
  color: @teal;
  border-color: alpha(@teal, 0.35);
}

#custom-updates {
  color: @blue;
  border-color: alpha(@blue, 0.35);
}

#backlight {
  color: @maroon;
  border-color: alpha(@maroon, 0.35);
}

#wireplumber {
  color: @yellow;
  border-color: alpha(@yellow, 0.35);
}

#wireplumber.muted {
  color: @overlay1;
}

/* systemd failed units */
#systemd-failed-units {
  color: @red;
  border-color: alpha(@red, 0.4);
  background: alpha(@mantle, 0.32);
}

/* Hardware group */
#hardware {
  background: alpha(@base, 0.32);
  color: @text;
  margin: 4px 4px 4px 0;
  padding: 4px 10px;
  border-bottom: 2px solid alpha(@lavender, 0.9);
  /*border-radius: 8px;*/
}

/* modules internes transparents, sans bordure */
#cpu,
#memory,
#disk,
#battery {
  margin: 0;
  padding: 4px 8px;
  background: transparent;
  border: none;
  border-radius: 0;
  min-width: 0;
}

/* couleurs par module */
#cpu {
  color: @peach;
}

#memory {
  color: @mauve;
}

#disk {
  color: @teal;
}

#battery {
  color: @lavender;
}

#battery.warning {
  color: @yellow;
}

#battery.critical {
  color: @red;
}

#battery.charging {
  color: @sky;
}

/* Clock */
#clock {
  margin-right: 6px;
  color: @rosewater;
  background: alpha(@mantle, 0.32);
  border-color: alpha(@rosewater, 0.35);
  font-weight: bold;
  padding-left: 12px;
  padding-right: 12px;
}

/* Tooltips */
tooltip {
  background: @mantle;
  color: @text;
  border: 1px solid @surface2;
  border-radius: 8px;
}

tooltip label {
  color: @text;
}

/* hyprwhspr Waybar Styling - Waybar Compatible */

/* Base styles - same icon for all states, only colors change */
#custom-hyprwhspr {
  font-size: 16px;
  font-weight: bold;
  margin: 4px;
  padding-left: 14px;
  padding-right: 14px;
  background: alpha(@mantle, 0.32);
  border-bottom: 2px solid alpha(@lavender, 0.35);
  /*border-radius: 8px;*/
}

#custom-hyprwhspr.ready {
  color: inherit;
}

#custom-hyprwhspr.recording {
  color: @red;
  font-family: monospace;    /* Better rendering of dot characters */
  background: alpha(@red, 0.30);
  letter-spacing: 0.5px;     /* Slight spacing for better dot visibility */
}

#custom-hyprwhspr.stopped {
  color: inherit;
}

#custom-hyprwhspr.error {
  color: @peach;
}

/* Hover effects - Waybar doesn't support filter, so we use opacity instead */
#custom-hyprwhspr:hover {
  opacity: 0.8;
}