/* ══════════════════════════════════════════ * WAYBAR STYLES — Gruvbox Dark * ══════════════════════════════════════════ * Gruvbox palette: * bg0_h = #1d2021 (hardest dark) * bg0 = #282828 (dark background) * bg1 = #3c3836 * bg2 = #504945 * fg = #ebdbb2 (light foreground) * yellow = #d79921 * green = #b8bb26 * red = #cc241d * aqua = #689d6a * orange = #d65d0e * blue = #458588 * ══════════════════════════════════════════ */ * { font-family: "JetBrainsMono Nerd Font", monospace; font-size: 13px; min-height: 0; border: none; border-radius: 0; } window#waybar { background: rgba(29, 32, 33, 0.92); color: #ebdbb2; border-radius: 10px; } /* ── Module defaults ─────────────────── */ #workspaces, #window, #clock, #pulseaudio, #network, #bluetooth, #battery, #tray, #custom-power { padding: 0 10px; margin: 4px 2px; border-radius: 6px; background: transparent; } /* ── Workspaces ──────────────────────── */ #workspaces button { color: #a89984; padding: 0 6px; margin: 2px; border-radius: 4px; background: transparent; transition: all 0.2s ease; } #workspaces button.active { color: #1d2021; background: #d79921; font-weight: bold; } #workspaces button:hover { color: #ebdbb2; background: #504945; } /* ── Window Title ────────────────────── */ #window { color: #a89984; font-style: italic; } /* ── Clock ───────────────────────────── */ #clock { color: #ebdbb2; font-weight: bold; } /* ── Audio ───────────────────────────── */ #pulseaudio { color: #b8bb26; } #pulseaudio.muted { color: #928374; } /* ── Network ─────────────────────────── */ #network { color: #83a598; } #network.disconnected { color: #cc241d; } /* ── Bluetooth ───────────────────────── */ #bluetooth { color: #458588; } /* ── Battery ─────────────────────────── */ #battery { color: #b8bb26; } #battery.charging { color: #d79921; } #battery.warning:not(.charging) { color: #d65d0e; } #battery.critical:not(.charging) { color: #cc241d; animation: blink 1s steps(2) infinite; } @keyframes blink { to { color: #ebdbb2; } } /* ── System Tray ─────────────────────── */ #tray > .passive { -gtk-icon-effect: dim; } /* ── Power Button ────────────────────── */ #custom-power { color: #cc241d; padding: 0 8px; } #custom-power:hover { color: #fb4934; } /* ── Tooltips ────────────────────────── */ tooltip { background: #282828; border: 1px solid #504945; border-radius: 6px; } tooltip label { color: #ebdbb2; }