hyprcosmic/config/waybar/rules.css

/* Geometry and layout for the HyprCosmic bar.
 *
 * No colour literals: every colour here is a name defined by palette.css and
 * possibly re-pointed by bridge-hyde.css. That separation is what lets a theme
 * change the palette without touching a single rule.
 *
 * The look is HyDE's: a strip carrying rounded pills rather than a flat row of
 * text. HyDE gets its pills to float by making the bar itself transparent and
 * letting the compositor blur the desktop behind them; cosmic-comp has no
 * rule-driven blur, so the bar keeps a background here and the pills lift off
 * it instead. See bridge-hyde.css for the two colours that implements.
 */

* {
    /* JetBrainsMono Nerd Font first, and it has to be first.
     *
     * This previously named "FontAwesome 6 Free", which is not even the
     * installed family's real name ("Font Awesome 6 Free") -- fontconfig's
     * fuzzy matching resolved it anyway, to the Regular face, which carries
     * only a small subset of the icon set. Every glyph outside that subset
     * then came from whatever fallback fontconfig picked per character, so the
     * bar's icons were only accidentally consistent.
     *
     * The Nerd Font carries the whole icon set and the text, so naming it
     * first makes one font answer for both. Every codepoint in config.jsonc
     * was checked against this family specifically. */
    font-family: "JetBrainsMono Nerd Font", "Noto Sans", sans-serif;
    font-size: 13px;
    border: none;
    border-radius: 0;
    min-height: 0;
}

window#waybar {
    background: @bar-bg;
    color: @bar-fg;
}

/* Workspaces: pills, with the active one filled rather than underlined. */
#workspaces {
    margin: 0 4px;
}

#workspaces button {
    padding: 0 10px;
    margin: 4px 2px;
    border-radius: 10px;
    color: @muted;
    background: transparent;
}

#workspaces button.active {
    color: @wb-act-fg;
    background: @accent;
}

#workspaces button:hover {
    color: @wb-hvr-fg;
    background: @wb-hvr-bg;
}

#taskbar button {
    padding: 0 6px;
    margin: 4px 1px;
    border-radius: 10px;
    background: transparent;
}

#taskbar button.active {
    background: @module-bg;
}

#taskbar button:hover {
    background: @wb-hvr-bg;
}

/* Every status module gets the same pill. Listed one per line because waybar
 * takes the CSS id from the module name with `/` turned into `-`, so these are
 * not guessable from the config and are worth being able to read down. */
#custom-keybinds,
#window,
#mpris,
#clock,
#privacy,
#systemd-failed-units,
#idle_inhibitor,
#custom-swaync,
#bluetooth,
#pulseaudio,
#network,
#disk,
#temperature,
#custom-fan,
#cpu,
#memory,
#power-profiles-daemon,
#battery,
#tray,
#custom-power {
    padding: 0 10px;
    margin: 4px 2px;
    border-radius: 10px;
    background: @module-bg;
}

/* The only module here that is a button rather than a readout, so it is the
 * only one that gains anything from a hover state. Colour rather than
 * background, to match how the status colours below signal without moving
 * anything. */
#custom-power:hover {
    color: @critical;
}

/* The other button on the bar. Accent rather than critical, because this one is
 * safe to press. */
#custom-keybinds:hover {
    color: @accent;
}

#clock {
    font-weight: bold;
}

/* mpris renders nothing when no player is running. Without this it would still
 * draw an empty pill, so the padding goes away with the content. */
#mpris {
    padding: 0;
    background: transparent;
}

#mpris.playing,
#mpris.paused {
    padding: 0 10px;
    background: @module-bg;
}

/* Same reasoning: privacy is only present while something is capturing. */
#privacy {
    padding: 0;
    background: transparent;
}

#privacy-item {
    padding: 0 8px;
    margin: 4px 2px;
    border-radius: 10px;
    background: @module-bg;
    color: @warning;
}

/* Same reasoning as mpris, but the class is not on the widget. waybar puts
 * `empty` on the whole bar rather than on #window, so the selector has to
 * descend into it -- waybar-hyprland-window(5) gives it as exactly this:
 *
 *     window#waybar.empty #window   When no windows are in the workspace
 *
 * The first `window` is the GTK window, the second is our module; they are
 * unrelated names that collide, which is why this reads so oddly. */
window#waybar.empty #window {
    padding: 0;
    background: transparent;
}

/* States. These recolour the text inside the pill rather than the pill, so a
 * warning cannot make a module unreadable against its own background. */
#battery.warning  { color: @warning; }
#battery.critical { color: @critical; }
#temperature.critical { color: @critical; }
#network.disconnected { color: @critical; }

/* No state class needed: hide-on-ok removes the module entirely at zero, so it
 * is on screen only when there is something to report and can be coloured
 * unconditionally. */
#systemd-failed-units { color: @critical; }

/* Set by hyprcosmic-fan: `high` above 4000 rpm, `idle` when every fan has
 * stopped. `normal` is left alone. */
#custom-fan.high { color: @warning; }
#custom-fan.idle { color: @muted; }
#pulseaudio.muted { color: @muted; }
#idle_inhibitor.activated { color: @accent; }
#custom-swaync.notification { color: @accent; }
#custom-swaync.dnd-none,
#custom-swaync.dnd-notification { color: @muted; }

/* No `#tray:empty` rule to hide the pill when nothing is in the tray: GTK's
 * CSS has no :empty pseudo-class and rejects the whole stylesheet for it,
 * which is fatal rather than cosmetic. waybar exits and the bar never appears.
 */