birch-dots/.config/waybar/style.css

/* ============================================================
   WAYBAR STYLE — Dark Industrial / Refined Utility
   Palette: deep charcoal base, amber accents, cool greys
   ============================================================ */

/* ── Root Variables ───────────────────────────────────────── */
/* Fonts: install JetBrains Mono & Geist Mono via your package manager
   e.g. yay -S ttf-jetbrains-mono ttf-geist-mono
   or place .ttf files in ~/.local/share/fonts/ and run fc-cache -fv     */
* {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  border: none;
  border-radius: 0;

}

/* ── Bar ──────────────────────────────────────────────────── */
window#waybar {
  background: transparent;
  color: #c8c8d4;
  border-bottom: 1px solid rgba(255, 180, 60, 0.15);
}

/* ── Tooltip ──────────────────────────────────────────────── */
tooltip {
  background: #0e0e12;
  border: 1px solid rgba(255, 180, 60, 0.35);
  color: #c8c8d4;
  padding: 6px 10px;
}

tooltip label {
  color: #c8c8d4;
}

/* ── Shared Module Base ───────────────────────────────────── */
#clock,
#cpu,
#memory,
#pulseaudio,
#bluetooth,
#battery,
#tray,
#custom-micmute,
#custom-power {
  padding: 6px 12px;
  margin: 5px 0;
  color: #c8c8d4;
  background: transparent;
  transition: color 0.2s ease, background 0.2s ease;
}

/* ── Separator dots between modules ──────────────────────── */
#cpu,
#memory,
#pulseaudio,
#bluetooth,
#custom-micmute,
#battery {
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}


/* ═══════════════════════════════════════════════════════════
   LEFT — System Info: Clock · CPU · Memory
   ═══════════════════════════════════════════════════════════ */

#clock {
  font-family: 'Geist Mono', monospace;
  font-weight: 400;
  font-size: 12.5px;
  color: #e8d5a3;
  letter-spacing: 0.04em;
  padding-left: 16px;
  border-left: 3px solid rgba(255, 180, 60, 0.6);
}

#cpu {
  color: #a0c4d8;
}

#cpu:hover {
  color: #c8e8f8;
  background: rgba(160, 196, 216, 0.08);
}

#memory {
  color: #9dbfad;
}

#memory:hover {
  color: #bcdece;
  background: rgba(157, 191, 173, 0.08);
}


/* ═══════════════════════════════════════════════════════════
   CENTER — Workspaces
   ═══════════════════════════════════════════════════════════ */

#workspaces {
  margin: 0;
  padding: 0;
  background: transparent;
}

#workspaces button {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  padding: 2px 10px;
  margin: 4px 2px;
  color: #5a5a6e;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  border-radius: 3px;
  transition: all 0.15s ease;
  min-width: 32px;
}

#workspaces button:hover {
  color: #b0b0c8;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.1);
}

#workspaces button.active {
  color: #f0c060;
  background: rgba(255, 180, 60, 0.1);
  border-color: rgba(255, 180, 60, 0.4);
  font-weight: 600;
}

#workspaces button.urgent {
  color: #f08080;
  background: rgba(240, 80, 80, 0.12);
  border-color: rgba(240, 80, 80, 0.4);
}


/* ═══════════════════════════════════════════════════════════
   RIGHT — Audio · Bluetooth · Mic · Battery · Power
   ═══════════════════════════════════════════════════════════ */

/* ── Tray ─────────────────────────────────────────────────── */
#tray {
  padding: 2px 10px;
}

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

#tray > .needs-attention {
  -gtk-icon-effect: highlight;
  background-color: rgba(240, 120, 60, 0.2);
}

/* ── Audio ────────────────────────────────────────────────── */
#pulseaudio {
  color: #b0a8d8;
}

#pulseaudio:hover {
  color: #d0c8f8;
  background: rgba(176, 168, 216, 0.08);
}

#pulseaudio.muted {
  color: #4a4a5e;
}

/* ── Bluetooth ────────────────────────────────────────────── */
#bluetooth {
  color: #80b8e0;
}

#bluetooth.connected {
  color: #60d0ff;
}

#bluetooth:hover {
  background: rgba(128, 184, 224, 0.08);
}

/* ── Microphone Mute ──────────────────────────────────────── */
#custom-micmute {
  color: #9dbfad;
}

#custom-micmute.muted {
  color: #4a4a5e;
}

#custom-micmute:hover {
  background: rgba(157, 191, 173, 0.08);
}

/* ── Battery ──────────────────────────────────────────────── */
#battery {
  color: #a8cc88;
}

#battery.charging,
#battery.plugged {
  color: #c8e888;
}

#battery.warning:not(.charging) {
  color: #e8c060;
}

#battery.critical:not(.charging) {
  color: #f07060;
  animation: battery-pulse 1.5s ease-in-out infinite;
}

@keyframes battery-pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

#battery:hover {
  background: rgba(168, 204, 136, 0.08);
}

/* ── Power Button ─────────────────────────────────────────── */
#custom-power {
  color: #c06060;
  font-size: 14px;
  padding: 2px 14px 2px 12px;
  margin-right: 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

#custom-power:hover {
  color: #f08080;
  background: rgba(200, 60, 60, 0.15);
}