dotfiles/waybar/style.css

/* =============================================================================
   WAYBAR STYLESHEET - GRUVBOX THEME
   Clean, compact design using the Gruvbox color palette
   Updated for Waybar 0.13.0+
   ============================================================================= */

/* -----------------------------------------------------------------------------
   GLOBAL SETTINGS
   ----------------------------------------------------------------------------- */
* {
  font-family: "BlexMono Nerd Font Mono";
  font-weight: 500;
  font-size: 13px;
  color: #ebdbb2;
}

#waybar {
  background-color: transparent;
  border: none;
}

/* -----------------------------------------------------------------------------
   MODULE LAYOUTS & BACKGROUNDS
   ----------------------------------------------------------------------------- */

/* Standard modules with rounded corners */
#workspaces,
#window,
#tray,
#custom-keyboard,
#bluetooth, 
#custom-bitcoin {
  background-color: rgba(60, 56, 54, 0.85);
  padding: 2px 6px;
  margin: 2px 4px 0;
  border-radius: 4px;
}

#custom-keyboard,
#bluetooth {
  font-size: 10px;
}

/* Drawer wrapper modules */
#backlight-wrapper,
#pulseaudio-wrapper {
  background-color: rgba(60, 56, 54, 0.85);
  padding: 0 8px 0 10px;
  margin: 2px 4px 0 4px;
  border-radius: 4px;
}
#backlight,
#pulseaudio{font-size: 1.4rem; padding-right: 4px;}

#custom-audio-settings,
#custom-audio-mute{
  padding: 0px 12px;
}

/* Clock - right edge */
#custom-power {
  background-color: rgba(60, 56, 54, 0.85);
  margin: 2px 2px 0 0;
  padding: 2px 12px;
  border-radius: 0 4px 4px 0;
  font-size: 14px;
}

/* Battery - left edge */
#battery {
  background-color: rgba(60, 56, 54, 0.85);
  margin: 2px 0 0 2px;
  padding: 2px 8px;
  border-radius: 4px 0 0 4px;
}

/* Middle modules - no rounded edges */
#temperature,
#memory,
#cpu,
#clock,
#custom-gpu-power {
  background-color: rgba(60, 56, 54, 0.85);
  margin: 2px 0 0;
  padding: 2px 6px;
  min-width: 18px;
}

/* Audio settings icons */
#custom-audio-settings,
#custom-audio-mute {
  font-size: 16px;
}

/* -----------------------------------------------------------------------------
   SLIDER STYLING - PROPER CSS NODES
   ----------------------------------------------------------------------------- */

/* Slider containers */
#pulseaudio-slider,
#backlight-slider {
  margin: 2px 0 0;
  padding: 2px 6px;
  min-width: 18px;
}

/* Hide the actual slider handle */
#pulseaudio-slider slider,
#backlight-slider slider {
  min-height: 0;
  min-width: 0;
  opacity: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Trough - the unfilled background */
#pulseaudio-slider trough,
#backlight-slider trough {
  min-height: 8px;
  min-width: 80px;
  border-radius: 6px;
  background-color: #282828;
}

/* Highlight - the filled portion */
#backlight-slider highlight {
  min-width: 4px;
  min-height: 8px;
  border-radius: 6px;
  background-color: #fabd2f;
}

#pulseaudio-slider highlight {
  min-width: 4px;
  min-height: 8px;
  border-radius: 6px;
  background-color: #8ec07c;
}

/* Drawer reveal on hover */
.backlight-hidden,
.audio-hidden {
  transition: opacity 300ms;
}

/* -----------------------------------------------------------------------------
   WORKSPACES (NIRI)
   ----------------------------------------------------------------------------- */

/* Workspace buttons default state */
#workspaces button {
  background: transparent;
  border: none;
  color: #928374;
  padding: 1px 6px;
  margin: 0 1px;
  font-weight: 500;
  border-radius: 0;
  transition: all 200ms ease;
}

/* Hovered workspace */
#workspaces button:hover {
  background-color: rgba(131, 165, 152, 0.2);
  padding: 1px 6px;
  margin: 0 1px;
  border-radius: 6px;
}

/* Active workspace - clear distinct styling */
#workspaces button.active {
  background-color: #83a598;
  color: #282828;
  padding: 1px 6px;
  margin: 0 1px;
  border-radius: 6px;
  font-weight: 600;
}

/* Urgent workspace */
#workspaces button.urgent {
  background-color: #fb4934;
  color: #282828;
  padding: 1px 6px;
  margin: 0 1px;
  border-radius: 6px;
}

/* Empty workspace styling */
#workspaces button.empty {
  color: #665c54;
}

/* -----------------------------------------------------------------------------
   WINDOW TITLE
   ----------------------------------------------------------------------------- */
#window {
  font-weight: 400;
  font-style: italic;
  color: #ebdbb2;
}

/* -----------------------------------------------------------------------------
   SYSTEM MODULES - COLORS & STATES
   ----------------------------------------------------------------------------- */

/* Network */
#network {
  color: #8ec07c;
}

/* Battery states */
#battery {
  color: #b8bb26;
}

#battery.warning {
  color: #fabd2f;
}

#battery.critical {
  color: #fb4934;
  animation: blink 1s ease-in-out infinite;
}

@keyframes blink {
  50% {
    opacity: 0.5;
  }
}

/* Audio */
#pulseaudio {
  /* color: #8ec07c; */
  color: #ebdbb2;
}

#pulseaudio.muted {
  color: #fb4934;
}

/* Backlight */
/* #backlight {
  color: #fabd2f;
} */

/* GPU Power */
#custom-gpu-power {
  color: #83a598;
}

/* Temperature states */
#temperature {
  color: #fe8019;
}

#temperature.warning {
  color: #fabd2f;
}

#temperature.critical {
  color: #fb4934;
}

/* Memory states */
#memory {
  color: #d3869b;
}

#memory.warning {
  color: #fabd2f;
}

#memory.critical {
  color: #fb4934;
}

/* CPU states */
#cpu {
  color: #fe8019;
}

#cpu.warning {
  color: #fabd2f;
}

#cpu.critical {
  color: #fb4934;
}

/* Clock */
#clock {
  color: #8ec07c;
}

/* -----------------------------------------------------------------------------
   SYSTEM TRAY
   ----------------------------------------------------------------------------- */
#tray {
  background-color: rgba(60, 56, 54, 0.85);
  padding: 2px 6px;
}

#tray > .passive {
  padding: 1px 3px;
  margin: 0 1px;
}

#tray > .active {
  padding: 1px 3px;
  margin: 0 1px;
}

#tray > .needs-attention {
  padding: 1px 3px;
  margin: 0 1px;
  background-color: #fb4934;
  color: #282828;
  border-radius: 3px;
}

/* -----------------------------------------------------------------------------
   HOVER EFFECTS
   ----------------------------------------------------------------------------- */
#bluetooth:hover,
#network:hover,
#custom-audio-settings:hover,
#custom-audio-mute:hover,
#battery:hover,
#temperature:hover,
#memory:hover,
#cpu:hover,
#clock:hover,
#custom-power:hover,
#window:hover {
  background-color: rgba(80, 73, 69, 0.9);
  transition: background-color 200ms ease;
}