dotfiles/waybar/style.css

/* ~/.config/waybar/style.css */
@import "./catppuccin-waybar/themes/mocha.css";

/* ==========================================================================
   Global Reset & Bar
   ========================================================================== */
* {
  border: none;
  border-radius: 12px;
  min-height: 0;
  font-family: "JetBrainsMono Nerd Font", sans-serif;
  font-size: 12px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

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

/* ==========================================================================
   Base Islands (Containers)
   ========================================================================== */
/* Groups and standalone modules receive the floating island styling */
#spaces,
#powertray,
#hardware,
#center,
#custom-bluetooth-audio,
#custom-volume,
#custom-buds,
#custom-mic {
  background-color: alpha(@surface0, 0.8);
  margin: 4px 6px;
  padding: 4px 16px;
  border: 1px solid alpha(@surface1, 0.5);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
  color: @text;
}

/* Group-specific sizing overrides */
#hardware,
#powertray,
#spaces {
  border-radius: 24px;
  padding: 4px 10px;
}

/* Center Pill (Clock + MPRIS) Override */
#center {
  background: linear-gradient(45deg, @mauve, @lavender);
  color: @surface0; 
  font-weight: 900;
  padding: 4px 20px;
}

/* ==========================================================================
   Grouped Modules (Inner Items)
   ========================================================================== */
/* Strip backgrounds and borders from items that live inside groups */
#workspaces,
#window,
#custom-cpu,
#custom-mem,
#custom-sys,
#custom-gpu,
#custom-disk-root,
#custom-mpris,
#custom-network,
#custom-backlight,
#clock, 
#tray, 
#custom-gamemode, 
#custom-dnd, 
#custom-power_status {
  background-color: transparent;
  border: none;
  box-shadow: none;
  margin: 0;
  padding: 0 8px; 
}

/* Subtle vertical separator line between inner items */
#custom-cpu, 
#custom-mem,
#custom-sys,
#custom-gpu,
#custom-disk-root,
#custom-mpris,
#custom-network,
#tray, 
#custom-gamemode, 
#custom-dnd {
  border-right: 1px solid alpha(@surface1, 0.5);
  border-radius: 0;
}

/* ==========================================================================
   Specific Module Overrides & Alerts
   ========================================================================== */

/* --- Workspaces --- */
#workspaces {
  padding: 0px 8px; /* Override the inner item padding */
}

#workspaces button {
  padding: 0;
  margin: 4px;
  min-width: 12px;
  min-height: 12px;
  background-color: @subtext0;
  color: transparent;
  border-radius: 12px;
}

#workspaces button.active,
#workspaces button.active:hover {
  min-width: 30px;
  background-color: @mauve;
}

#workspaces button:hover {
  background-color: @lavender;
  min-width: 20px;
}

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

/* --- Hardware Semantic Alerts --- */
.normal { color: @mauve; }
.high   { color: @peach; }
.max    { color: @red; }

#custom-network { color: @mauve; }
#custom-gamemode.active { color: @mauve; }

/* --- Media / Controls --- */
#custom-volume.unmuted, 
#custom-mic.unmuted {
    color: @mauve;
}
#custom-volume.muted,
#custom-mic.muted {
  color: @overlay1;
}

/* --- Bluetooth Audio --- */
#custom-bluetooth-audio.disabled,
#custom-bluetooth-audio.disconnected {
  color: @overlay1;
}

#custom-bluetooth-audio.connected {
  color: @blue;
}

/* ANC States  */
#custom-bluetooth-audio.anc-active,
#custom-bluetooth-audio.connected.anc-active,
#custom-bluetooth-audio.connected\ anc-active {
  color: @mauve;
}

#custom-bluetooth-audio.anc-aware,
#custom-bluetooth-audio.connected.anc-aware,
#custom-bluetooth-audio.connected\ anc-aware {
  color: @green;
}

#custom-bluetooth-audio.anc-off,
#custom-bluetooth-audio.connected.anc-off,
#custom-bluetooth-audio.connected\ anc-off {
  color: @blue;
}

/* --- Power Status --- */
#custom-power_status.charging { color: @green; }
#custom-power_status.warning  { color: @peach; }
#custom-power_status.critical {
  color: @red;
  animation: blink 1s infinite alternate;
}


/* Interactive Hover States for Standalone Modules */
#custom-volume:hover,
#custom-buds:hover,
#custom-mic:hover,
#custom-bluetooth-audio:hover,
#custom-power_status:hover {
  background-color: @surface1;
  color: @mauve;
}


/* ==========================================================================
   Tooltips & Animations
   ========================================================================== */
tooltip {
  background-color: alpha(@base, 0.9);
  border: 1px solid @surface1;
  border-radius: 8px;
}

tooltip label {
  color: @text;
  padding: 8px;
}

@keyframes blink {
  to {
    color: @base;
    background-color: @red;
  }
}