/* * Kiln — 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: "the workbench" — ONE continuous floating island, a solid * worktop plank spanning the screen width minus margins, with a faint * copper edge-glow border. No pills, no edge-to-edge strip: every module * — including the tray — sits directly on the one plank, seamless. * Companion: waybar.jsonc. */ @define-color base #1D1815; @define-color mantle #151110; @define-color surface #2C241E; @define-color overlay #41362D; @define-color text #EADFD3; @define-color subtext #B5A695; @define-color muted #77685A; @define-color accent #D68C5C; @define-color accentAlt #C8A94E; @define-color good #A0B36A; @define-color warn #E0A458; @define-color bad #E26D5A; /* NB: this `*` reset reaches the SNI tray menus Waybar hosts too (its stylesheet applies process-wide, at a priority user gtk.css cannot out-rank). The menu block right below undoes the damage — keep the two in sync. Do NOT scope `*` to window#waybar instead: the id's specificity would beat the class rules below (the plank) and wreck the bar. */ * { /* Mono Nerd face for status glyphs (tight right bearings on the proportional Symbols face make icon+percentage collide). */ font-family: "CaskaydiaCove Nerd Font", "Symbols Nerd Font Mono"; font-size: 13px; font-weight: 500; border: none; border-radius: 0; min-height: 0; } /* ── Tray menus (nm-applet & co live in Waybar's process) ───────────── Undo the `*` reset for them: same stylesheet, higher specificity. Arrows/checks are CSS-sized nodes — min-height 0 makes them invisible; separators die the same way; the bar's mono face reads wrong in text menus. */ menu, menu * { font-family: "Inter", sans-serif; } menu menuitem arrow { min-width: 16px; min-height: 16px; } menu check, menu radio { min-width: 14px; min-height: 14px; } menu separator { min-height: 1px; margin: 5px 0; background: alpha(@text, 0.15); } /* The plank itself — one solid worktop spanning the island, a faint ember-copper edge-glow lifting it off the wallpaper. */ window#waybar { background: alpha(@base, 0.92); border: 1px solid alpha(@accent, 0.25); border-radius: 8px; color: @text; } .modules-left, .modules-center, .modules-right { background: transparent; padding: 0 6px; margin: 0; } /* Every module sits ON the plank: 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, #custom-airplane, #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 ember-copper Nomarchy mark opens the plank ──────── 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 fire to an ember pill when active ─────────*/ #workspaces { padding: 0 2px; } #workspaces button { color: @muted; padding: 0 9px; margin: 3px 1px; border-radius: 6px; transition: color 0.2s ease, background 0.2s ease; } #workspaces button:hover { color: @text; background: alpha(@overlay, 0.6); } #workspaces button.active { color: @base; background: @accent; border-radius: 6px; } #workspaces button.urgent { color: @base; background: @bad; border-radius: 6px; } /* ── 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-airplane.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-airplane, #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 plank — 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 plank on the right; warms to alert on hover. */ #custom-powermenu { color: @subtext; padding: 0 12px 0 8px; } #custom-powermenu:hover { color: @bad; } /* ── Tooltips — solid clay, ember-copper edge ────────────────────────*/ tooltip { background: alpha(@mantle, 0.96); border: 1px solid alpha(@accent, 0.35); border-radius: 8px; } tooltip label { color: @text; }