Nomarchy/themes/kiln/waybar.css

/*
 * Kiln — Waybar whole-swap (themes/<slug>/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; }