/* * Executive Slate — Waybar whole-swap (themes//waybar.css). * * A theme waybar.css replaces the ENTIRE generated stylesheet and is read * raw (no palette is prepended), so this file MUST define its own colors. * Identity: a solid, non-transparent, edge-to-edge status strip — no * floating island, sharp corners, tight modules, and a single accent * underline marking the active workspace. Companion: waybar.jsonc. */ @define-color base #191C24; @define-color mantle #111319; @define-color surface #2A3040; @define-color overlay #3E4759; @define-color text #D7DDEA; @define-color subtext #9AA5BB; @define-color muted #5C6578; @define-color accent #5A8AE6; @define-color accentAlt #86A9F2; @define-color good #6FAE72; @define-color warn #DBA85A; @define-color bad #D06B71; /* NB: this `*` reset reaches the SNI tray menus Waybar hosts too — the menu-side damage (collapsed arrows) is undone by USER-priority rules in stylix.nix. Do NOT scope it to window#waybar: the id's specificity would beat the class rules below and wreck the bar. */ * { /* Mono Nerd face first for status glyphs: proportional "Symbols Nerd Font" has tight right bearings that make icon+percentage collide. */ font-family: "Symbols Nerd Font Mono", "Inter", "JetBrainsMono Nerd Font", sans-serif; font-size: 13px; font-weight: 500; border: none; border-radius: 0; min-height: 0; } /* Solid bar, crisp edge against the content below. */ window#waybar { background: @base; border-bottom: 1px solid @overlay; color: @text; } .modules-left, .modules-center, .modules-right { margin: 0; padding: 0; } /* Uniform module rhythm; groups get a wider breath below. */ #custom-nomarchy, #clock, #custom-recording, #idle_inhibitor, #custom-nightlight, #language, #custom-updates, #pulseaudio, #custom-powerprofile, #battery, #custom-vpn, #custom-doctor, #custom-notification, #tray, #custom-powermenu { color: @text; padding: 0 11px; margin: 0; } /* Group heads — a wider gap before each functional cluster of the right side (media/toggles · stats · status). Self-hiding heads (e.g. no battery on a desktop) degrade to the uniform spacing. */ #pulseaudio, #battery, #custom-vpn { margin-left: 6px; } /* ── Menu launcher — the branded Nomarchy mark ─────────────────────── The mark lives at U+F000 in the dedicated "Nomarchy" font; pin the family or the Nerd Font's glass glyph at the same codepoint wins. */ #custom-nomarchy { color: @accent; font-family: Nomarchy; font-size: 16px; padding: 0 14px; } #custom-nomarchy:hover { background: @surface; color: @accentAlt; } /* ── Workspaces — flat cells, active carries an accent underline ──── */ #workspaces { padding: 0; margin: 0; } #workspaces button { color: @subtext; padding: 0 11px; margin: 0; border-bottom: 2px solid transparent; transition: color 0.15s ease-in-out, background 0.15s ease-in-out; } #workspaces button:hover { background: @surface; color: @text; border-bottom: 2px solid @overlay; } #workspaces button.active { color: @text; background: @surface; border-bottom: 2px solid @accent; } #workspaces button.urgent { color: @bad; border-bottom: 2px solid @bad; } /* ── Clock — unified time · date in one module ───────────────────── */ #clock { color: @text; font-weight: 600; font-family: "Inter", "Symbols Nerd Font Mono", sans-serif; } /* ── Status cluster: neutral by default, semantic on state ───────── */ #custom-recording.recording { color: @bad; } #idle_inhibitor.activated { color: @warn; } #custom-nightlight.on { color: @warn; } #custom-updates.available { color: @accent; } /* Icon-only status modules carry no text, so they don't get the 13pt Pango icon span the icon+text modules (volume/battery/language) use — bump their font-size to match, or these glyphs read smaller than their neighbours. */ #custom-recording, #custom-nightlight, #custom-updates, #custom-vpn, #custom-doctor, #custom-notification { font-size: 17px; } /* Speedometer + caffeine cup render small in their em box — a touch more. */ #custom-powerprofile, #idle_inhibitor { font-size: 18px; } #pulseaudio.muted { color: @muted; } #battery.charging { color: @good; } #battery.warning:not(.charging) { color: @warn; } #battery.critical:not(.charging) { color: @bad; border-bottom: 2px solid @bad; } #custom-vpn.on { color: @good; } /* Doctor is only rendered when something is ✖, so always the alert. */ #custom-doctor { color: @bad; } #custom-notification.notification { color: @accent; } #custom-notification.dnd-none, #custom-notification.dnd-notification, #custom-notification.inhibited-none, #custom-notification.inhibited-notification { color: @muted; } #tray { color: @text; } #custom-powermenu { color: @subtext; } #custom-powermenu:hover { background: @surface; color: @bad; } /* ── Tooltips ─────────────────────────────────────────────────────── */ tooltip { background: @surface; border: 1px solid @overlay; border-radius: 4px; } tooltip label { color: @text; }