/* * Boreal — 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 floating "aurora frost" bar — three frosted-glass pills * (launcher+clock · workspaces · status) over the wallpaper's blur. The * whole right side is ONE continuous pill: the system tray shares its * glass with the status modules, no separators, no boxes. Companion: * waybar.jsonc. */ @define-color base #21272F; @define-color mantle #1A1F26; @define-color surface #303A46; @define-color overlay #404D5C; @define-color text #D3DAE0; @define-color subtext #97A3B2; @define-color muted #5E6A78; @define-color accent #B79BE8; @define-color accentAlt #86C7C0; @define-color good #A3CF88; @define-color warn #E6C384; @define-color bad #E2818A; /* Scoped to the bar window: Waybar's stylesheet applies process-wide, so a bare `*` also hits the SNI tray menus Waybar hosts (nm-applet & co) — `min-height: 0` there collapses the submenu arrow node to invisible. */ window#waybar, window#waybar * { /* Mono Nerd face for status glyphs (tight right bearings on the proportional Symbols face make icon+percentage collide). */ font-family: "GeistMono Nerd Font", "Symbols Nerd Font Mono"; font-size: 13px; font-weight: 500; border: none; border-radius: 0; min-height: 0; } /* The bar itself is invisible — the pills float over the wallpaper. */ window#waybar { background: transparent; color: @text; } /* ── The three frosted-glass pills ──────────────────────────────────── Global blur turns the translucent @base into frosted glass; a faint frost-cyan edge lifts each pill off the wallpaper. */ .modules-left, .modules-center, .modules-right { background: alpha(@base, 0.72); border: 1px solid alpha(@accentAlt, 0.14); border-radius: 14px; padding: 0 6px; margin: 0; } /* Every module sits ON its pill: transparent, so nothing boxes the tray off from the status icons — the seamless-cluster requirement. */ #custom-nomarchy, #clock, #custom-recording, #custom-updates, #custom-doctor, #idle_inhibitor, #custom-nightlight, #language, #custom-vpn, #pulseaudio, #battery, #custom-powerprofile, #tray, #custom-notification, #custom-powermenu { background: transparent; color: alpha(@text, 0.9); padding: 0 8px; margin: 0; } /* ── Launcher — the aurora-violet Nomarchy mark opens the pill ──────── 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: 18px; padding: 0 12px 0 14px; } #custom-nomarchy:hover { color: @accentAlt; } /* ── Clock — unified time · date ─────────────────────────────────────*/ #clock { color: @text; font-weight: 600; padding-left: 4px; } /* ── Workspaces — dots that bloom to an aurora pill when active ───────*/ #workspaces { padding: 0 2px; } #workspaces button { color: @muted; padding: 0 9px; margin: 3px 1px; border-radius: 9px; transition: color 0.2s ease, background 0.2s ease; } #workspaces button:hover { color: @text; background: alpha(@overlay, 0.5); } #workspaces button.active { color: @base; background: @accent; } #workspaces button.urgent { color: @base; background: @bad; } /* ── Status semantics (neutral until a state fires) ──────────────────*/ #custom-recording.recording { color: @bad; } #custom-updates.available { color: @accent; } #custom-doctor { color: @bad; } #idle_inhibitor.activated { color: @warn; } #custom-nightlight.on { color: @warn; } #custom-vpn.on { color: @good; } #pulseaudio.muted { color: @muted; } #battery.charging { color: @good; } #battery.warning:not(.charging) { color: @warn; } #battery.critical:not(.charging) { color: @bad; } /* 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 noticeably smaller than their neighbours. */ #custom-recording, #custom-updates, #custom-doctor, #custom-nightlight, #custom-vpn, #custom-notification { font-size: 17px; } /* Speedometer + caffeine cup render small in their em box — a touch more. */ #custom-powerprofile, #idle_inhibitor { font-size: 18px; } #custom-notification.notification { color: @accent; } #custom-notification.dnd-none, #custom-notification.dnd-notification, #custom-notification.inhibited-none, #custom-notification.inhibited-notification { color: @muted; } /* Tray shares the pill's glass — same transparent background, its own modest padding so nm-applet & friends breathe with the status icons. */ #tray { padding: 0 6px; } #tray > .passive { -gtk-icon-effect: dim; } #tray > .needs-attention { -gtk-icon-effect: highlight; } /* Power button closes the pill on the right; warms to alert on hover. */ #custom-powermenu { color: @subtext; padding: 0 12px 0 8px; } #custom-powermenu:hover { color: @bad; } /* ── Tooltips — frosted, frost-cyan edge ─────────────────────────────*/ tooltip { background: alpha(@base, 0.96); border: 1px solid alpha(@accentAlt, 0.3); border-radius: 10px; /* Tooltips are separate toplevels, outside the window#waybar scope — restate the bar font (calendar/calcurse columns need the mono face). */ font-family: "GeistMono Nerd Font", "Symbols Nerd Font Mono"; font-size: 13px; font-weight: 500; } tooltip label { color: @text; }