Files
Nomarchy/themes/boreal/waybar.css
Bernardo Magri 907d3123ea
All checks were successful
Check / eval (push) Successful in 3m11s
style(themes): brand the launcher mark and rework waybar icon sizing
- Pin `font-family: Nomarchy` on #custom-nomarchy (boreal, executive-slate)
  so the branded mark at U+F000 wins over the Nerd Font's glass glyph at
  the same codepoint (summer bars already pinned it).
- Enlarge the icons on icon+text modules via a Pango span, with a gap so
  the glyph no longer crowds the value. The volume module gets a wider
  gap: its level glyph is unusually wide and overlapped the % otherwise.
- Bump icon-only status modules (caffeine, speedometer, …) to match, so
  they don't read smaller than their neighbours. The generated bar sizes
  everything relative to fonts.size (+2/+3pt) so it scales per theme.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-07 17:36:01 +01:00

167 lines
5.1 KiB
CSS

/*
* Boreal — 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: 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;
* {
font-family: "GeistMono Nerd Font", "Symbols Nerd Font";
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 — mono digits align; date recedes to frost-grey ───────────*/
#clock {
color: @text;
font-weight: 600;
padding-left: 4px;
}
#clock.date { color: @subtext; font-weight: 500; }
/* ── 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 { 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;
}
tooltip label { color: @text; }