[Bug]: Margins Don't Work Properly

[DevWizard13]

Tested versions

Branch master @ 28aad2a
Also reproducible in dev @ 7f71ef2

It's been like this for as long as I've been using it.

Environment

Distro: CachyOS Linux
WM: niri
Display Server: Wayland (obviously)
Hardware: I don't know the specifics, but this happens on both my Dell laptop with an Intel GPU and tiny screen and my main PC with a 32" 4K monitor and NVIDIA GPU, both with relatively the same setup. If you need more details, ask me.

Issue description

In both the panel and notifications, there is no padding around the text. Changing the padding in the config doesn't change anything, I tried setting it to 1 and 999 (and many other values in between). Other changes, such as that to the background color, do have an effect.

Also, there's a square shadow behind the notifications with harsh edges. It's semitransparent and dark.

Steps to reproduce

1. Start UnixNotis
2. Send a notification or open the panel
3. It does it

I think it may have something to do with niri. I'm not sure.

Expected behavior

There should be padding around the text. There should not be the odd shadow with harsh edges under things.

Logs or terminal output

Checks

• I searched existing issues before opening this report
• I included enough detail for someone else to try to reproduce the issue
• I tested this on the current master branch or the latest release available to me, or explained why I could not

[locainin]

Can you send the output of:

noticenterctl css-check

Also, if possible, please upload your exported .unixnotis preset so I can test the exact config/theme.
the wiki is frequently updated and if something is unclear that can be fixed as well: https://github.com/locainin/UnixNotis/wiki

[DevWizard13]

css-check summary
  root: $HOME/.config/unixnotis
  checked: 5 files
  errors: 0
  warnings: 0

css-check result: clean

Also, something that may be important, I can't find a :root block anywhere in the CSS themes. I think that's where the variables are set. I've tried manually overriding the variables and replacing them with exact values, though, and that didn't fix anything.

It doesn't seem to let me attach files today. Technical difficulties, I guess. I'll copy and paste them all.

[DevWizard13]

Config files (result of cat on each file) here. Sorry I can't attach files normally, github is being stubborn and nothing happens when I click on the attach files button. Please note that I just used the default configuration too. Also, where in the code is the section that actually renders stuff to the screen using gtk? I can't seem to find it, but I wanna look at it and maybe mess with it.

base.css

/* UnixNotis base theme (ExampleOne+)
 *
 * Purpose:
 * - Owns the shared palette and reusable theme tokens.
 * - Keeps higher-level CSS files (panel/popup/widgets) mostly declarative.
 *
 * Notes:
 * - GTK CSS does not support every web-CSS feature; this theme sticks to
 *   conservative constructs already used elsewhere in the project.
 * - Alpha values are also configurable in config.toml; these colors provide the
 *   visual direction while the config controls overall translucency.
 */

/*
 * Color palette: "Neon Noir"
 *
 * Deep navy base with a cyan -> hotpink accent split.
 * Designed for translucent panels that sit over bright wallpapers.
 */
@define-color unixnotis-surface-base #0b1020;        /* primary backdrop */
@define-color unixnotis-surface-strong-base #0c1430; /* headers / focus surfaces */
@define-color unixnotis-card-base #111a33;           /* cards / pills */

/* The surface/card colors are expected to be semi-transparent; the alphas here
 * are aligned with the current config.toml defaults for a consistent look. */
@define-color unixnotis-surface alpha(@unixnotis-surface-base, 0.88);
@define-color unixnotis-surface-strong alpha(@unixnotis-surface-strong-base, 0.96);
@define-color unixnotis-surface-soft alpha(#14224a, 0.70);
@define-color unixnotis-card alpha(@unixnotis-card-base, 0.94);

/* Text colors are intentionally high contrast to preserve legibility over glass. */
@define-color unixnotis-text #eef4ff;
@define-color unixnotis-muted #a4b5d6;

/* Accent split:
 * - unixnotis-accent: "electric cyan" (primary interaction / fill)
 * - unixnotis-accent-2: "hotpink" (secondary glow / gradient tail) */
@define-color unixnotis-accent #66f2e6;
@define-color unixnotis-accent-2 #ff4fb7;
@define-color unixnotis-urgent #ff5a78;

/* Per-toggle accents
 *
 * These are intentionally bright and distinct so the toggle grid reads as
 * individual "controls" rather than a uniform set of pills. */
@define-color unixnotis-accent-wifi #66f2e6;      /* cyan */
@define-color unixnotis-accent-bluetooth #6aa6ff; /* blue */
@define-color unixnotis-accent-airplane #ffb86b;  /* amber */
@define-color unixnotis-accent-night #b28cff;     /* violet */

/* Borders and outlines are subtle to avoid "boxed UI" on translucent surfaces. */
@define-color unixnotis-card-border alpha(#7aa8ff, 0.22);
@define-color unixnotis-outline alpha(#8db3ff, 0.22);

/* Shadow tokens are tuned for large radius + soft glow. */
@define-color unixnotis-shadow-soft alpha(#000000, 0.30);
@define-color unixnotis-shadow-strong alpha(#000000, 0.64);

/* Extra glow helpers (used by the panel/popup/widget CSS for highlights). */
@define-color unixnotis-glow-cyan alpha(@unixnotis-accent, 0.22);
@define-color unixnotis-glow-pink alpha(@unixnotis-accent-2, 0.24);
@define-color unixnotis-glow-wifi alpha(@unixnotis-accent-wifi, 0.28);
@define-color unixnotis-glow-bluetooth alpha(@unixnotis-accent-bluetooth, 0.26);
@define-color unixnotis-glow-airplane alpha(@unixnotis-accent-airplane, 0.26);
@define-color unixnotis-glow-night alpha(@unixnotis-accent-night, 0.26);

/*
 * Theme hooks
 *
 * These are the primary knobs to recolor the UI without rewriting selectors.
 * Most rules should reference these tokens, not hard-coded hex values.
 */
@define-color unixnotis-panel-grad-1 alpha(#0c1226, 0.92);
@define-color unixnotis-panel-grad-2 alpha(#121a35, 0.94);
/* Bottom-right fade accent to hotpink (the "Example One" signature). */
@define-color unixnotis-panel-grad-3 alpha(#ff4fb7, 0.58);

@define-color unixnotis-notification-bg-1 alpha(#15254a, 0.92);
@define-color unixnotis-notification-bg-2 alpha(#101b37, 0.94);
@define-color unixnotis-popup-bg-1 #0f1733;
@define-color unixnotis-popup-bg-2 #1a2a53;

@define-color unixnotis-pill-bg alpha(#142447, 0.92);
@define-color unixnotis-pill-border alpha(#7aa8ff, 0.24);
@define-color unixnotis-pill-hover alpha(@unixnotis-accent, 0.20);

@define-color unixnotis-action-bg alpha(#131f3c, 0.92);
@define-color unixnotis-action-bg-hover alpha(@unixnotis-accent, 0.18);
@define-color unixnotis-action-bg-active alpha(@unixnotis-accent, 0.30);

@define-color unixnotis-popup-action-bg alpha(#131f3a, 0.92);
@define-color unixnotis-popup-action-hover alpha(@unixnotis-accent, 0.18);
@define-color unixnotis-popup-action-active alpha(@unixnotis-accent, 0.30);

/*
 * Global window styling
 *
 * Applied to both the panel and the popup surfaces.
 */
.unixnotis-panel-window,
.unixnotis-popup-window {
  background: transparent;
  font-family: "Manrope", "SF Pro Text", "CaskaydiaCove Nerd Font Propo", "Noto Sans", sans-serif;
}
/* End of base theme. */

config.toml

rules = []

[general]
dnd_default = false

[inhibit]
mode = "no_popups"

[popups]
anchor = "top-right"
width = 360
spacing = 12
max_visible = 4
default_timeout_ms = 5000
allow_click_through = false

[popups.margin]
top = 14
right = 14
bottom = 14
left = 14

[panel]
anchor = "right"
width = 420
# Vertical size as a percent of usable monitor height after margins
# and reserved work area
height = 84

# Exact pixel height override for advanced users
# height_override = 1487
keyboard_interactivity = "on-demand"
empty_text = "NO NOTIFICATIONS"
title = "Notifications"
subtitle = ""
search_placeholder = "Search app, title, or message"
search_visible = false
action_row_visible = true
notification_section_visible = false
notification_list_expand = true
clear_button_placement = "action-row"
quick_actions_label = ""
system_status_label = ""
recent_notifications_label = "Notifications"
clear_label = "Clear"
footer_label = ""
widget_order = [
    "sliders",
    "media",
    "toggles",
    "stats",
    "cards",
]
empty_offset_top = 120
close_on_blur = false
close_on_click_outside = true
respect_work_area = true

[panel.margin]
top = 16
right = 10
bottom = 14
left = 10

[history]
max_entries = 200
max_active = 12
transient_to_history = false

[media]
enabled = true
layout = "carousel"
include_browsers = true
browser_tokens = [
    "firefox",
    "librewolf",
    "waterfox",
    "floorp",
    "brave",
    "chromium",
    "chrome",
    "vivaldi",
    "edge",
    "opera",
    "epiphany",
    "midori",
    "zen",
]
title_char_limit = 32
show_source = true
show_source_when_single_player = true
show_position = true
show_position_when_single_player = false
show_title = true
show_artist = true
show_art = true
show_controls = true
show_navigation = true
title_fallback = "identity"
position_format = "fraction"
art_position = "auto"
controls_position = "auto"
navigation_position = "auto"
art_size_px = 50
text_width_floor_px = 140
content_spacing_px = 10
control_spacing_px = 6
navigation_spacing_px = 6
allowlist = []
denylist = ["playerctld"]
remote_art_policy = "native_only"

[media.source_aliases]

[widgets]
toggle_tooltips = false
toggle_layout = "horizontal"
toggle_columns = 4
stat_columns = 2
card_columns = 2
refresh_interval_ms = 1000
refresh_interval_slow_ms = 3000

[widgets.volume]
enabled = true
label = "Volume"
icon = "audio-volume-high-symbolic"
icon_muted = "audio-volume-muted-symbolic"
get_cmd = "wpctl get-volume @DEFAULT_AUDIO_SINK@"
set_cmd = "wpctl set-volume @DEFAULT_AUDIO_SINK@ {value}%"
toggle_cmd = "wpctl set-mute @DEFAULT_AUDIO_SINK@ toggle"
min = 0.0
max = 100.0
step = 1.0
parse_mode = "auto"

[widgets.brightness]
enabled = true
label = "Brightness"
icon = "display-brightness-symbolic"
get_cmd = "brightnessctl -m"
set_cmd = "brightnessctl s {value}%"
min = 0.0
max = 100.0
step = 1.0
parse_mode = "auto"

[[widgets.toggles]]
enabled = true
kind = "wifi"
label = "Wi-Fi"
icon = "network-wireless-signal-excellent-symbolic"
state_cmd = "nmcli radio wifi"
on_cmd = "nmcli radio wifi on"
off_cmd = "nmcli radio wifi off"
watch_cmd = "nmcli -t monitor"

[[widgets.toggles]]
enabled = true
kind = "bluetooth"
label = "Bluetooth"
icon = "bluetooth-active-symbolic"
state_cmd = "bluetoothctl show"
on_cmd = "bluetoothctl power on"
off_cmd = "bluetoothctl power off"
watch_cmd = "dbus-monitor --system type=signal,sender=org.bluez"

[[widgets.toggles]]
enabled = true
kind = "airplane"
label = "Airplane"
icon = "airplane-mode-symbolic"
state_cmd = """rfkill list all | awk '/Soft blocked:/ { seen=1; if ($3 != "yes") bad=1 } END { exit (seen && !bad) ? 0 : 1 }'"""
on_cmd = "rfkill block all"
off_cmd = "rfkill unblock all"
watch_cmd = "udevadm monitor --udev --subsystem-match=rfkill"

[[widgets.toggles]]
enabled = true
kind = "night"
label = "Night"
icon = "weather-clear-night-symbolic"
state_cmd = "scripts/unixnotis-blue-light-state"
on_cmd = "scripts/unixnotis-blue-light-on"
off_cmd = "scripts/unixnotis-blue-light-off"

[[widgets.stats]]
enabled = true
label = "CPU"
icon = "utilities-system-monitor-symbolic"
cmd = "builtin:cpu"
min_height = 72

[[widgets.stats]]
enabled = true
label = "RAM"
icon = "drive-harddisk-symbolic"
cmd = "builtin:memory"
min_height = 72

[[widgets.stats]]
enabled = true
label = "Battery"
icon = "battery-full-symbolic"
cmd = "builtin:battery"
min_height = 72

[[widgets.cards]]
enabled = true
kind = "calendar"
title = "Calendar"
icon = "x-office-calendar-symbolic"
min_height = 180
monospace = false

[[widgets.cards]]
enabled = true
kind = "weather"
title = "Weather"
subtitle = "No data"
icon = "weather-clear-symbolic"
min_height = 160
monospace = false

[sound]
enabled = true
default_name = "message-new-instant"

[theme]
base_css = "base.css"
popup_css = "popup.css"
panel_css = "panel.css"
widgets_css = "widgets.css"
media_css = "media.css"
border_width = 1
card_radius = 22
surface_alpha = 0.8799999952316284
surface_strong_alpha = 0.9599999785423279
card_alpha = 0.9399999976158142
shadow_soft_alpha = 0.30000001192092896
shadow_strong_alpha = 0.6399999856948853

installer.toml

# UnixNotis installer settings
# Backup retention for config/theme resets.
[backups]
keep = 3

media.css

/*
 * Media widget
 *
 * Keeps media styling in its own layer so users can rice the player card
 * without touching the rest of widgets.css
 */
.unixnotis-media-container {
  margin-bottom: 10px;
}

.unixnotis-media-stack {
  background: transparent;
}

.unixnotis-media-row {
  background: transparent;
}

.unixnotis-media-stack-carousel,
.unixnotis-media-stack-inline,
.unixnotis-media-stack-stacked,
.unixnotis-media-stack-showcase,
.unixnotis-media-row-carousel,
.unixnotis-media-row-inline,
.unixnotis-media-row-stacked,
.unixnotis-media-row-showcase,
.unixnotis-media-header,
.unixnotis-media-body,
.unixnotis-media-text,
.unixnotis-media-main,
.unixnotis-media-meta,
.unixnotis-media-control-strip,
.unixnotis-media-action-rail,
.unixnotis-media-nav-strip {
  background: transparent;
}

.unixnotis-media-nav {
  background-image: linear-gradient(150deg, @unixnotis-action-bg, alpha(@unixnotis-surface, 0.9));
  border-radius: 12px;
  padding: 4px;
  border: 1px solid alpha(@unixnotis-accent, 0.2);
  font-weight: 700;
  font-size: 12px;
  min-width: 22px;
  color: @unixnotis-text;
  box-shadow:
    0 6px 12px -10px @unixnotis-shadow-soft,
    0 0 16px -14px @unixnotis-glow-cyan;
}

.unixnotis-media-nav:hover {
  background-image: linear-gradient(150deg, @unixnotis-action-bg-hover, alpha(@unixnotis-accent-2, 0.16));
  border-color: alpha(@unixnotis-accent, 0.5);
}

.unixnotis-media-nav-prev,
.unixnotis-media-nav-next {
  min-width: 22px;
}

.unixnotis-media-position {
  color: @unixnotis-muted;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.unixnotis-media-card {
  background-image: linear-gradient(165deg, @unixnotis-notification-bg-1, alpha(#0f1828, 0.94));
  border-radius: 18px;
  border: 1px solid @unixnotis-card-border;
  padding: 8px 10px;
  min-height: 68px;
  box-shadow:
    0 14px 26px -20px @unixnotis-shadow-strong,
    0 0 22px -20px alpha(@unixnotis-accent-2, 0.16),
    inset 0 0 0 1px alpha(#ffffff, 0.04);
}

.unixnotis-media-card-carousel {
  padding: 8px 10px;
  min-height: 68px;
}

.unixnotis-media-card-inline {
  padding: 10px 12px;
  min-height: 88px;
}

.unixnotis-media-card-stacked {
  padding: 12px;
  min-height: 108px;
}

.unixnotis-media-card-showcase {
  padding: 10px 12px;
  min-height: 92px;
}

.unixnotis-media-card.playing {
  border-left: 1px solid @unixnotis-card-border;
}

/*
 * Shell state hooks
 *
 * These keep the default theme sensible even when users move art, controls,
 * or navigation away from the stock preset
 */
.unixnotis-media-art-top .unixnotis-media-art-frame,
.unixnotis-media-art-hidden .unixnotis-media-art-frame {
  margin-left: 0;
  margin-right: 0;
}

.unixnotis-media-controls-hidden .unixnotis-media-controls,
.unixnotis-media-nav-hidden .unixnotis-media-nav-strip,
.unixnotis-media-nav-hidden .unixnotis-media-nav {
  opacity: 0.94;
}

.unixnotis-media-no-source .unixnotis-media-meta,
.unixnotis-media-no-position .unixnotis-media-meta {
  min-height: 0;
}

.unixnotis-media-art {
  min-width: 50px;
  min-height: 50px;
  border-radius: 12px;
  background: alpha(#000000, 0.12);
}

.unixnotis-media-art-frame {
  min-width: 54px;
  min-height: 54px;
  border-radius: 14px;
  background: alpha(#000000, 0.12);
  border: 1px solid alpha(@unixnotis-outline, 0.35);
  box-shadow: inset 0 0 0 1px alpha(#ffffff, 0.04);
}

.unixnotis-media-art.empty {
  background: alpha(#000000, 0.18);
}

.unixnotis-media-source {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: @unixnotis-muted;
}

.unixnotis-media-title {
  font-weight: 700;
  font-size: 13px;
}

.unixnotis-marquee {
  background: transparent;
  padding: 0;
  margin: 0;
}

.unixnotis-media-artist {
  color: @unixnotis-muted;
  font-size: 12px;
}

.unixnotis-media-artist.empty {
  color: transparent;
}

.unixnotis-media-controls {
  background: transparent;
}

.unixnotis-media-button {
  background-image: linear-gradient(160deg, @unixnotis-action-bg, alpha(@unixnotis-surface, 0.95));
  border-radius: 10px;
  border: 1px solid alpha(@unixnotis-accent, 0.2);
  padding: 4px 6px;
  box-shadow:
    0 6px 14px -12px @unixnotis-shadow-soft,
    0 0 14px -14px @unixnotis-glow-cyan;
}

.unixnotis-media-button:hover {
  background-image: linear-gradient(160deg, @unixnotis-action-bg-hover, alpha(@unixnotis-accent-2, 0.2));
  border-color: alpha(@unixnotis-accent, 0.5);
}

.unixnotis-media-button.primary {
  background-image: linear-gradient(160deg, @unixnotis-action-bg-active, alpha(@unixnotis-accent-2, 0.28));
  border-color: alpha(@unixnotis-accent, 0.75);
}

panel.css

/* UnixNotis panel theme
 *
 * Panel shell, list, and notification group styling.
 */
.unixnotis-panel {
  /* Primary surface gradient.
   * The last stop (panel-grad-3) is intentionally hotpink-leaning to create a
   * bottom-right glow without changing any layout logic. */
  background-image: linear-gradient(155deg, @unixnotis-panel-grad-1 0%, @unixnotis-panel-grad-2 55%, @unixnotis-panel-grad-3 100%);
  color: @unixnotis-text;
  border-radius: 30px;
  border-radius: var(--unixnotis-panel-radius);
  padding: 16px;
  padding: var(--unixnotis-panel-padding);
  border: 1px solid @unixnotis-outline;
  box-shadow:
    0 28px 70px -38px @unixnotis-glow-cyan,
    0 22px 60px -42px @unixnotis-glow-pink,
    0 12px 28px -20px @unixnotis-shadow-soft,
    inset 0 0 0 1px alpha(#ffffff, 0.04);
}


.unixnotis-panel-header {
  margin-bottom: 12px;
  padding: 12px;
  padding: var(--unixnotis-panel-header-padding);
  border-radius: 18px;
  border-radius: var(--unixnotis-panel-header-radius);
  background-image: linear-gradient(160deg, alpha(@unixnotis-surface-soft, 0.7), alpha(@unixnotis-surface, 0.9));
  border: 1px solid alpha(@unixnotis-accent, 0.16);
  box-shadow:
    0 10px 24px -18px @unixnotis-shadow-soft,
    0 0 22px -18px @unixnotis-glow-cyan,
    inset 0 0 0 1px alpha(#ffffff, 0.03);
}

.unixnotis-panel-header-top {
  min-height: 32px;
}

.unixnotis-panel-title-stack {
  min-width: 0;
}

.unixnotis-panel-title-row {
  min-height: 30px;
}

.unixnotis-panel-title {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.3px;
}

.unixnotis-panel-count {
  background-image: linear-gradient(160deg, alpha(@unixnotis-accent, 0.22), alpha(@unixnotis-accent-2, 0.18));
  color: @unixnotis-text;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 2px 8px;
  border: 1px solid alpha(@unixnotis-accent, 0.35);
  min-width: 26px;
  /* Slight bloom improves readability over complex wallpapers. */
  box-shadow: 0 0 12px -10px @unixnotis-glow-cyan;
}

.unixnotis-panel-actions {
  /* Dedicated control row avoids widening the title row on narrow panels. */
  border-radius: 999px;
  margin-top: 2px;
}

.unixnotis-panel-action-group {
  border-radius: 999px;
}

.unixnotis-panel-action {
  background-image: linear-gradient(160deg, @unixnotis-action-bg, alpha(@unixnotis-surface, 0.9));
  color: @unixnotis-text;
  border-radius: 999px;
  padding: 6px 10px;
  padding: var(--unixnotis-panel-action-gap) calc(var(--unixnotis-panel-action-gap) + 4px);
  border: 1px solid alpha(@unixnotis-accent, 0.18);
  min-height: 28px;
  box-shadow:
    0 8px 16px -12px @unixnotis-shadow-soft,
    0 0 18px -16px @unixnotis-glow-cyan,
    inset 0 0 0 1px alpha(#ffffff, 0.04);
  font-size: 11px;
}

.unixnotis-panel-action-focus,
.unixnotis-panel-action-muted {
  /* Keep compact labels readable while honoring fixed panel width. */
  min-width: 86px;
}

.unixnotis-panel-action-primary {
  /* DND text is intentionally short ("DND") to cap horizontal growth. */
  min-width: 78px;
}

.unixnotis-panel-action-search {
  /* Search toggle is icon-only; expanded search input is revealed below. */
  min-width: 32px;
}

.unixnotis-panel-action-with-icon {
  padding-left: 9px;
  padding-right: 9px;
  padding-left: calc(var(--unixnotis-panel-action-gap) + 3px);
  padding-right: calc(var(--unixnotis-panel-action-gap) + 3px);
}

.unixnotis-panel-action-content {
  min-height: 18px;
}

.unixnotis-panel-action-glyph {
  min-width: 14px;
  min-height: 14px;
}

.unixnotis-panel-action-label {
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 10px;
}

.unixnotis-panel-action:hover {
  background-image: linear-gradient(160deg, @unixnotis-action-bg-hover, alpha(@unixnotis-accent-2, 0.16));
  border-color: alpha(@unixnotis-accent, 0.5);
  box-shadow:
    0 10px 18px -14px @unixnotis-shadow-soft,
    0 0 22px -18px @unixnotis-glow-cyan,
    0 0 20px -18px @unixnotis-glow-pink,
    inset 0 0 0 1px alpha(#ffffff, 0.05);
}

.unixnotis-panel-action:checked {
  background-image: linear-gradient(140deg, @unixnotis-action-bg-active, alpha(@unixnotis-accent-2, 0.3));
  border-color: alpha(@unixnotis-accent, 0.75);
}

.unixnotis-panel-action:checked .unixnotis-panel-action-glyph,
.unixnotis-panel-action:checked .unixnotis-panel-action-label {
  color: @unixnotis-text;
}

.unixnotis-panel-action-icon {
  min-width: 32px;
  min-height: 32px;
  padding: 0;
}

.unixnotis-panel-action-close {
  /* Close action is visually isolated from destructive list actions. */
  margin-left: 6px;
  background-image: linear-gradient(160deg, alpha(@unixnotis-surface-strong, 0.88), alpha(@unixnotis-surface-soft, 0.84));
  border-color: alpha(@unixnotis-accent, 0.26);
  box-shadow:
    0 8px 14px -12px @unixnotis-shadow-soft,
    0 0 14px -14px @unixnotis-glow-cyan,
    inset 0 0 0 1px alpha(#ffffff, 0.05);
}

.unixnotis-panel-action-close:hover {
  background-image: linear-gradient(160deg, alpha(@unixnotis-action-bg-hover, 0.88), alpha(@unixnotis-accent-2, 0.18));
  border-color: alpha(@unixnotis-accent, 0.58);
}

.unixnotis-panel-search-revealer {
  margin-top: 2px;
}

.unixnotis-panel-search {
  min-height: 34px;
  min-height: var(--unixnotis-panel-search-min-height);
  border-radius: 12px;
  background-image: linear-gradient(150deg, alpha(@unixnotis-surface-soft, 0.84), alpha(@unixnotis-surface-strong, 0.92));
  border: 1px solid alpha(@unixnotis-accent, 0.18);
  padding: 0 10px;
  padding: 0 var(--unixnotis-panel-search-padding-x);
  box-shadow: inset 0 0 0 1px alpha(#ffffff, 0.03);
}

.unixnotis-panel-search:focus-within {
  border-color: alpha(@unixnotis-accent, 0.45);
  box-shadow:
    inset 0 0 0 1px alpha(#ffffff, 0.05),
    0 0 20px -16px @unixnotis-glow-cyan;
}

.unixnotis-panel-close {
  background: alpha(#0b111d, 0.5);
  border-radius: 999px;
  border: 1px solid alpha(@unixnotis-accent, 0.18);
  padding: 2px;
  min-width: 28px;
  min-width: var(--unixnotis-panel-close-size);
  min-height: 28px;
  min-height: var(--unixnotis-panel-close-size);
  box-shadow: 0 0 16px -14px @unixnotis-glow-cyan;
}

.unixnotis-panel-close:hover {
  background: alpha(@unixnotis-urgent, 0.2);
  border-color: alpha(@unixnotis-urgent, 0.6);
}

.unixnotis-panel-list {
  background: transparent;
}

.unixnotis-panel-list row {
  background: transparent;
  padding: 0;
  margin: 0;
}

/*
 * Group headers (app pills)
 */
.unixnotis-group {
  background: transparent;
  margin-bottom: 8px;
}

.unixnotis-group-header {
  background-image: linear-gradient(160deg, @unixnotis-pill-bg, alpha(@unixnotis-surface-soft, 0.86));
  color: @unixnotis-text;
  border-radius: 999px;
  padding: 6px 12px;
  border: 1px solid @unixnotis-pill-border;
  box-shadow: 0 10px 18px -16px @unixnotis-shadow-soft;
  outline: none;
}

.unixnotis-group-header:hover {
  background-image: linear-gradient(160deg, @unixnotis-pill-hover, alpha(@unixnotis-accent-2, 0.18));
}

.unixnotis-group-header:focus,
.unixnotis-group-header:active {
  outline: none;
  box-shadow:
    0 10px 18px -16px @unixnotis-shadow-soft,
    inset 0 0 0 1px alpha(#ffffff, 0.05);
}

.unixnotis-panel-list row:selected,
.unixnotis-panel-list row:focus,
.unixnotis-panel-list row:active {
  background: transparent;
  outline: none;
  box-shadow: none;
}

.unixnotis-group-title {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2px;
}

.unixnotis-group-count {
  background-image: linear-gradient(160deg, alpha(@unixnotis-accent, 0.22), alpha(@unixnotis-accent-2, 0.2));
  color: @unixnotis-text;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid alpha(@unixnotis-accent, 0.35);
  min-width: 22px;
}

.unixnotis-group-chevron {
  color: @unixnotis-muted;
}

.unixnotis-group-row-collapsed .unixnotis-group-count {
  border-color: alpha(@unixnotis-accent-2, 0.3);
}

.unixnotis-group-row-no-icon .unixnotis-group-title {
  margin-left: 2px;
}

.unixnotis-panel-card-grouped {
  margin-left: 8px;
}

/*
 * Notification cards (panel)
 */
.unixnotis-panel-card-row {
  margin: 0;
  padding: 0;
}

.unixnotis-panel-card {
  background-image: linear-gradient(165deg, @unixnotis-notification-bg-1, @unixnotis-notification-bg-2);
  border: 1px solid @unixnotis-card-border;
  border-radius: 20px;
  border-radius: var(--unixnotis-notification-card-radius);
  padding: 10px 12px;
  padding: var(--unixnotis-panel-card-padding-y) var(--unixnotis-panel-card-padding-x);
  margin-bottom: 8px;
  box-shadow:
    0 12px 26px -20px @unixnotis-shadow-strong,
    0 0 22px -18px alpha(@unixnotis-accent, 0.16),
    inset 0 0 0 1px alpha(#ffffff, 0.05);
}

.unixnotis-panel-card.stacked {
  box-shadow:
    0 8px 0 -4px alpha(@unixnotis-accent, 0.18),
    0 16px 0 -8px alpha(@unixnotis-accent, 0.14),
    0 0 0 1px alpha(@unixnotis-accent, 0.16),
    0 24px 32px -22px @unixnotis-shadow-soft;
}

.unixnotis-panel-card-group-collapsed {
  margin-bottom: 2px;
}

.unixnotis-panel-card-group-expanded {
  margin-bottom: var(--unixnotis-panel-card-gap);
}

.unixnotis-stack-ghost {
  /* Internal ghost cards read as tucked depth, not separate notifications */
  background-image: linear-gradient(165deg, alpha(@unixnotis-notification-bg-1, 0.88), alpha(@unixnotis-notification-bg-2, 0.82));
  border-radius: 18px;
  padding: 0;
  min-height: 8px;
  opacity: 0.44;
  margin-left: 16px;
  margin-right: 16px;
  margin-top: -10px;
  margin-bottom: 0;
  border: 1px solid alpha(@unixnotis-card-border, 0.75);
  box-shadow:
    0 10px 18px -16px @unixnotis-shadow-soft,
    0 0 0 1px alpha(@unixnotis-accent, 0.12),
    inset 0 0 0 1px alpha(#ffffff, 0.07);
}

.unixnotis-stack-ghost-2 {
  min-height: 7px;
  opacity: 0.26;
  margin-left: 28px;
  margin-right: 28px;
  margin-top: -7px;
  margin-bottom: 0;
  box-shadow:
    0 12px 20px -18px @unixnotis-shadow-soft,
    0 0 0 1px alpha(@unixnotis-accent, 0.08),
    inset 0 0 0 1px alpha(#ffffff, 0.05);
}

.unixnotis-panel-card.active {
  box-shadow:
    0 0 0 1px alpha(@unixnotis-accent, 0.28),
    0 12px 26px -20px @unixnotis-shadow-strong,
    0 0 26px -20px @unixnotis-glow-cyan,
    inset 0 0 0 1px alpha(#ffffff, 0.05);
}

.unixnotis-panel-card.critical {
  box-shadow:
    0 0 0 1px alpha(@unixnotis-urgent, 0.35),
    0 12px 26px -20px @unixnotis-shadow-strong,
    0 0 26px -20px alpha(@unixnotis-urgent, 0.35),
    inset 0 0 0 1px alpha(#ffffff, 0.05);
}

.unixnotis-panel-card.stacked.active {
  /* Active state should not erase the collapsed-stack shadow */
  box-shadow:
    0 8px 0 -4px alpha(@unixnotis-accent, 0.18),
    0 16px 0 -8px alpha(@unixnotis-accent, 0.14),
    0 0 0 1px alpha(@unixnotis-accent, 0.28),
    0 12px 26px -20px @unixnotis-shadow-strong,
    0 0 26px -20px @unixnotis-glow-cyan,
    inset 0 0 0 1px alpha(#ffffff, 0.05);
}

.unixnotis-panel-card.stacked.critical,
.unixnotis-panel-card.stacked.active.critical {
  /* Urgent stacks keep the same depth while using the urgent border color */
  box-shadow:
    0 8px 0 -4px alpha(@unixnotis-urgent, 0.20),
    0 16px 0 -8px alpha(@unixnotis-urgent, 0.14),
    0 0 0 1px alpha(@unixnotis-urgent, 0.35),
    0 12px 26px -20px @unixnotis-shadow-strong,
    0 0 26px -20px alpha(@unixnotis-urgent, 0.35),
    inset 0 0 0 1px alpha(#ffffff, 0.05);
}

.unixnotis-panel-card-has-actions .unixnotis-notification-actions {
  margin-top: calc(var(--unixnotis-panel-action-gap) - 4px);
}

.unixnotis-panel-card-no-actions .unixnotis-panel-body {
  margin-bottom: 2px;
}

.unixnotis-panel-card-has-summary .unixnotis-panel-summary {
  color: @unixnotis-text;
}

/*
 * Empty-state
 *
 * The list uses a centered overlay label; styling is kept here so the empty
 * state visually matches the rest of the panel.
 */
.unixnotis-empty {
  background: transparent;
}

.unixnotis-empty-label {
  color: alpha(@unixnotis-text, 0.78);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  /* GTK does not support text-shadow; rely on high contrast + layout instead. */
}

.unixnotis-panel-app {
  font-weight: 700;
  font-size: 14px;
}

.unixnotis-panel-summary {
  font-size: 13px;
}

.unixnotis-panel-body {
  color: @unixnotis-muted;
  font-size: 12px;
}

.unixnotis-panel-icon {
  margin-right: 8px;
}

.unixnotis-notification-actions {
  margin-top: 2px;
}

.unixnotis-notification-action {
  background-image: linear-gradient(160deg, alpha(@unixnotis-surface-soft, 0.9), alpha(@unixnotis-surface, 0.95));
  color: @unixnotis-text;
  border-radius: 10px;
  padding: 4px 10px;
  padding: var(--unixnotis-notification-action-padding-y) var(--unixnotis-notification-action-padding-x);
  border: 1px solid alpha(@unixnotis-accent, 0.18);
  min-height: 28px;
  font-size: 12px;
}

.unixnotis-notification-action:hover {
  background-image: linear-gradient(160deg, alpha(@unixnotis-accent, 0.2), alpha(@unixnotis-accent-2, 0.2));
  border-color: alpha(@unixnotis-accent, 0.5);
}

popup.css

/* UnixNotis popup theme */

/* Shared close button styling for popup surfaces. */
.unixnotis-popup-close {
  background: alpha(#0b111d, 0.5);
  border-radius: 999px;
  border: 1px solid alpha(@unixnotis-accent, 0.18);
  padding: 3px;
  min-width: 24px;
  min-width: var(--unixnotis-popup-close-size);
  min-height: 24px;
  min-height: var(--unixnotis-popup-close-size);
  box-shadow: 0 0 14px -12px @unixnotis-glow-cyan;
}

.unixnotis-popup-close:hover {
  background: alpha(@unixnotis-urgent, 0.2);
  border-color: alpha(@unixnotis-urgent, 0.6);
}

/* Popup stack */
.unixnotis-popup-stack {
  padding: 8px;
  padding: var(--unixnotis-popup-stack-padding);
  border-radius: 16px;
  border-radius: calc(var(--unixnotis-popup-card-radius) - 4px);
  background: transparent;
}

.unixnotis-popup-revealer {
  background: transparent;
}

.unixnotis-popup-card {
  background-image: linear-gradient(155deg, @unixnotis-popup-bg-1, @unixnotis-popup-bg-2);
  color: @unixnotis-text;
  border-radius: 20px;
  border-radius: var(--unixnotis-popup-card-radius);
  padding: 14px 16px;
  padding: var(--unixnotis-popup-card-padding-y) var(--unixnotis-popup-card-padding-x);
  border: 1px solid alpha(@unixnotis-card-border, 0.85);
  box-shadow:
    0 18px 32px -18px @unixnotis-shadow-strong,
    0 10px 18px -16px @unixnotis-shadow-soft,
    0 0 26px -22px @unixnotis-glow-pink,
    inset 0 0 0 1px alpha(#ffffff, 0.04);
}

.unixnotis-popup-card.critical {
  border-left: 3px solid @unixnotis-urgent;
}

.unixnotis-popup-header-row {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid alpha(@unixnotis-card-border, 0.4);
}

.unixnotis-popup-header {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2px;
}

.unixnotis-popup-summary {
  font-weight: 600;
  font-size: 13px;
  margin-top: 4px;
}

.unixnotis-popup-icon {
  margin-right: 8px;
  min-width: 18px;
  min-height: 18px;
}

.unixnotis-popup-body {
  color: @unixnotis-muted;
  font-size: 12px;
  margin-top: 2px;
}

.unixnotis-popup-actions {
  margin-top: 8px;
  margin-top: var(--unixnotis-popup-actions-gap);
}

.unixnotis-popup-card-has-summary .unixnotis-popup-summary {
  color: @unixnotis-text;
}

.unixnotis-popup-card-has-actions .unixnotis-popup-actions {
  border-top: 1px solid alpha(@unixnotis-card-border, 0.24);
  padding-top: calc(var(--unixnotis-popup-actions-gap) - 2px);
}

.unixnotis-popup-card-no-icon .unixnotis-popup-header-row {
  padding-left: 0;
}

.unixnotis-popup-action {
  background-image: linear-gradient(160deg, @unixnotis-popup-action-bg, alpha(@unixnotis-surface, 0.95));
  color: @unixnotis-text;
  border-radius: 10px;
  padding: 4px 10px;
  border: 1px solid alpha(@unixnotis-accent, 0.2);
  font-size: 12px;
}

.unixnotis-popup-action:hover {
  background-image: linear-gradient(160deg, @unixnotis-popup-action-hover, alpha(@unixnotis-accent-2, 0.2));
  border-color: alpha(@unixnotis-accent, 0.5);
}

.unixnotis-popup-action:checked {
  background-image: linear-gradient(160deg, @unixnotis-popup-action-active, alpha(@unixnotis-accent-2, 0.25));
}
/* End of popup theme. */

widgets.css

/* UnixNotis widgets + media theme
 *
 * Quick controls, toggles, stats, info cards, and media carousel.
 */
.unixnotis-quick-controls {
  margin-bottom: 6px;
}

.unixnotis-quick-slider {
  background-image: linear-gradient(160deg, alpha(@unixnotis-surface-soft, 0.92), alpha(@unixnotis-surface, 0.97));
  border-radius: 18px;
  border-radius: var(--unixnotis-quick-slider-radius);
  padding: 8px 12px;
  padding: var(--unixnotis-quick-slider-padding-y) var(--unixnotis-quick-slider-padding-x);
  border: 1px solid alpha(@unixnotis-accent, 0.26);
  box-shadow:
    0 12px 24px -20px @unixnotis-shadow-soft,
    0 0 18px -14px @unixnotis-glow-cyan,
    0 0 18px -16px @unixnotis-glow-pink,
    inset 0 1px 0 alpha(#ffffff, 0.06),
    inset 0 -1px 0 alpha(#000000, 0.24),
    inset 0 0 0 1px alpha(#ffffff, 0.06);
}

.unixnotis-quick-slider:hover {
  border-color: alpha(@unixnotis-accent, 0.45);
  box-shadow:
    0 16px 26px -20px @unixnotis-shadow-soft,
    0 0 22px -14px @unixnotis-glow-cyan,
    0 0 22px -16px @unixnotis-glow-pink,
    inset 0 1px 0 alpha(#ffffff, 0.07),
    inset 0 -1px 0 alpha(#000000, 0.26),
    inset 0 0 0 1px alpha(#ffffff, 0.08);
}

.unixnotis-quick-slider-volume {
  border-color: alpha(@unixnotis-accent, 0.35);
}

.unixnotis-quick-slider-brightness {
  border-color: alpha(@unixnotis-accent-2, 0.35);
}

.unixnotis-quick-slider-icon {
  background-image: linear-gradient(150deg, alpha(@unixnotis-surface, 0.9), alpha(@unixnotis-surface-soft, 0.65));
  border-radius: 999px;
  border: 1px solid alpha(@unixnotis-accent, 0.3);
  padding: 4px;
  min-width: 32px;
  min-width: var(--unixnotis-quick-slider-icon-size);
  min-height: 32px;
  min-height: var(--unixnotis-quick-slider-icon-size);
  box-shadow:
    0 6px 12px -10px @unixnotis-shadow-soft,
    inset 0 0 0 1px alpha(#ffffff, 0.05);
}

.unixnotis-quick-slider-icon:hover {
  background-image: linear-gradient(150deg, alpha(@unixnotis-accent, 0.2), alpha(@unixnotis-accent-2, 0.18));
  border-color: alpha(@unixnotis-accent, 0.5);
}

.unixnotis-quick-slider-value {
  color: @unixnotis-muted;
  font-size: 12px;
  letter-spacing: 0.06em;
  min-width: 42px;
  /* Alignment is controlled by the widget code (set_xalign) for GTK compatibility. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.unixnotis-quick-slider-scale trough {
  background-image: linear-gradient(90deg, alpha(#000000, 0.3), alpha(#000000, 0.15));
  border-radius: 999px;
  min-height: 6px;
  border: 1px solid alpha(#ffffff, 0.05);
}

.unixnotis-quick-slider-scale highlight {
  /* Slider fill leans cyan but fades toward hotpink to match the panel gradient. */
  background-image: linear-gradient(90deg, alpha(@unixnotis-accent, 0.78), alpha(@unixnotis-accent-2, 0.64));
  border-radius: 999px;
}

.unixnotis-quick-slider-scale slider {
  /* Knob keeps the "neon" look by mixing both accents. */
  background-image: linear-gradient(140deg, alpha(@unixnotis-accent-2, 0.92), alpha(@unixnotis-accent, 0.66));
  border-radius: 999px;
  min-width: 16px;
  min-width: var(--unixnotis-quick-slider-knob-size);
  min-height: 16px;
  min-height: var(--unixnotis-quick-slider-knob-size);
  border: 1px solid alpha(@unixnotis-accent, 0.6);
  margin: 0;
  padding: 0;
  box-shadow:
    0 6px 12px -10px @unixnotis-shadow-soft,
    0 0 10px -6px @unixnotis-glow-pink;
}

/*
 * Toggle grid
 */
.unixnotis-toggle-section {
  margin-bottom: 4px;
}

.unixnotis-toggle-grid {
  padding: 0;
}

.unixnotis-toggle {
  /* Base toggle: "glass pill" with a consistent outline and subtle 3D depth. */
  background-image: linear-gradient(165deg, alpha(@unixnotis-surface-soft, 0.94), alpha(@unixnotis-surface, 0.98));
  border-radius: 18px;
  border-radius: calc(var(--unixnotis-quick-slider-radius));
  padding: 10px 12px;
  padding: var(--unixnotis-toggle-padding-y) var(--unixnotis-toggle-padding-x);
  border: 1px solid alpha(@unixnotis-outline, 0.9);
  min-height: 56px;
  min-height: var(--unixnotis-toggle-min-height);
  min-width: 104px;
  min-width: var(--unixnotis-toggle-min-width);
  box-shadow:
    0 16px 28px -22px alpha(#000000, 0.40),
    0 0 0 1px alpha(@unixnotis-accent, 0.10),
    0 0 20px -18px alpha(@unixnotis-accent, 0.12),
    inset 0 1px 0 alpha(#ffffff, 0.07),
    inset 0 2px 4px -3px alpha(#ffffff, 0.14),
    inset 0 -1px 0 alpha(#000000, 0.22),
    inset 0 -3px 6px -5px alpha(#000000, 0.45);
}

/* Kind-specific toggle accents
 *
 * The center UI assigns a stable class: `.unixnotis-toggle-kind-<kind>`.
 * These overrides provide a distinct accent per control while preserving the
 * same layout and interaction behavior. */
.unixnotis-toggle.unixnotis-toggle-kind-wifi {
  border-color: alpha(@unixnotis-accent-wifi, 0.55);
  box-shadow:
    0 16px 28px -22px alpha(#000000, 0.40),
    0 0 0 1px alpha(@unixnotis-accent-wifi, 0.14),
    0 0 20px -18px @unixnotis-glow-wifi,
    inset 0 1px 0 alpha(#ffffff, 0.07),
    inset 0 -1px 0 alpha(#000000, 0.22);
}

.unixnotis-toggle.unixnotis-toggle-kind-bluetooth {
  border-color: alpha(@unixnotis-accent-bluetooth, 0.55);
  box-shadow:
    0 16px 28px -22px alpha(#000000, 0.40),
    0 0 0 1px alpha(@unixnotis-accent-bluetooth, 0.14),
    0 0 20px -18px @unixnotis-glow-bluetooth,
    inset 0 1px 0 alpha(#ffffff, 0.07),
    inset 0 -1px 0 alpha(#000000, 0.22);
}

.unixnotis-toggle.unixnotis-toggle-kind-airplane {
  border-color: alpha(@unixnotis-accent-airplane, 0.55);
  box-shadow:
    0 16px 28px -22px alpha(#000000, 0.40),
    0 0 0 1px alpha(@unixnotis-accent-airplane, 0.14),
    0 0 20px -18px @unixnotis-glow-airplane,
    inset 0 1px 0 alpha(#ffffff, 0.07),
    inset 0 -1px 0 alpha(#000000, 0.22);
}

.unixnotis-toggle.unixnotis-toggle-kind-night {
  border-color: alpha(@unixnotis-accent-night, 0.55);
  box-shadow:
    0 16px 28px -22px alpha(#000000, 0.40),
    0 0 0 1px alpha(@unixnotis-accent-night, 0.14),
    0 0 20px -18px @unixnotis-glow-night,
    inset 0 1px 0 alpha(#ffffff, 0.07),
    inset 0 2px 4px -3px alpha(#ffffff, 0.14),
    inset 0 -1px 0 alpha(#000000, 0.22),
    inset 0 -3px 6px -5px alpha(#000000, 0.45);
}

.unixnotis-toggle:hover {
  border-color: alpha(@unixnotis-accent, 0.62);
  box-shadow:
    0 18px 30px -22px alpha(#000000, 0.44),
    0 0 22px -18px alpha(@unixnotis-accent, 0.14),
    inset 0 1px 0 alpha(#ffffff, 0.08),
    inset 0 2px 4px -3px alpha(#ffffff, 0.16),
    inset 0 -1px 0 alpha(#000000, 0.24),
    inset 0 -3px 6px -5px alpha(#000000, 0.48);
}

.unixnotis-toggle.unixnotis-toggle-kind-wifi:hover {
  border-color: alpha(@unixnotis-accent-wifi, 0.62);
  box-shadow:
    0 18px 30px -22px alpha(#000000, 0.44),
    0 0 24px -18px @unixnotis-glow-wifi,
    0 0 0 1px alpha(@unixnotis-accent-wifi, 0.22),
    inset 0 1px 0 alpha(#ffffff, 0.08),
    inset 0 2px 4px -3px alpha(#ffffff, 0.16),
    inset 0 -1px 0 alpha(#000000, 0.24),
    inset 0 -3px 6px -5px alpha(#000000, 0.48);
}
.unixnotis-toggle.unixnotis-toggle-kind-bluetooth:hover {
  border-color: alpha(@unixnotis-accent-bluetooth, 0.62);
  box-shadow:
    0 18px 30px -22px alpha(#000000, 0.44),
    0 0 24px -18px @unixnotis-glow-bluetooth,
    0 0 0 1px alpha(@unixnotis-accent-bluetooth, 0.22),
    inset 0 1px 0 alpha(#ffffff, 0.08),
    inset 0 2px 4px -3px alpha(#ffffff, 0.16),
    inset 0 -1px 0 alpha(#000000, 0.24),
    inset 0 -3px 6px -5px alpha(#000000, 0.48);
}
.unixnotis-toggle.unixnotis-toggle-kind-airplane:hover {
  border-color: alpha(@unixnotis-accent-airplane, 0.62);
  box-shadow:
    0 18px 30px -22px alpha(#000000, 0.44),
    0 0 24px -18px @unixnotis-glow-airplane,
    0 0 0 1px alpha(@unixnotis-accent-airplane, 0.22),
    inset 0 1px 0 alpha(#ffffff, 0.08),
    inset 0 2px 4px -3px alpha(#ffffff, 0.16),
    inset 0 -1px 0 alpha(#000000, 0.24),
    inset 0 -3px 6px -5px alpha(#000000, 0.48);
}
.unixnotis-toggle.unixnotis-toggle-kind-night:hover {
  border-color: alpha(@unixnotis-accent-night, 0.62);
  box-shadow:
    0 18px 30px -22px alpha(#000000, 0.44),
    0 0 24px -18px @unixnotis-glow-night,
    0 0 0 1px alpha(@unixnotis-accent-night, 0.22),
    inset 0 1px 0 alpha(#ffffff, 0.08),
    inset 0 2px 4px -3px alpha(#ffffff, 0.16),
    inset 0 -1px 0 alpha(#000000, 0.24),
    inset 0 -3px 6px -5px alpha(#000000, 0.48);
}

.unixnotis-toggle:checked {
  /* Active toggles should feel "energized" without turning into a solid block.
   * A light accent bloom layered over the base glass achieves this. */
  background-image:
    radial-gradient(circle at 22% 20%, alpha(@unixnotis-accent, 0.18), transparent 64%),
    radial-gradient(circle at 88% 92%, alpha(@unixnotis-accent-2, 0.14), transparent 60%),
    linear-gradient(165deg, alpha(@unixnotis-surface-soft, 0.94), alpha(@unixnotis-surface, 0.98));
  border-color: alpha(@unixnotis-accent, 0.78);
  box-shadow:
    0 18px 30px -22px alpha(@unixnotis-accent, 0.35),
    0 0 0 1px alpha(@unixnotis-accent, 0.35),
    0 0 22px -16px @unixnotis-glow-pink,
    inset 0 1px 0 alpha(#ffffff, 0.12),
    inset 0 2px 4px -3px alpha(#ffffff, 0.18),
    inset 0 -2px 6px -5px alpha(#000000, 0.38);
}

.unixnotis-toggle.unixnotis-toggle-kind-wifi:checked {
  background-image:
    radial-gradient(circle at 22% 20%, alpha(@unixnotis-accent-wifi, 0.2), transparent 64%),
    radial-gradient(circle at 88% 92%, alpha(@unixnotis-accent-2, 0.12), transparent 60%),
    linear-gradient(165deg, alpha(@unixnotis-surface-soft, 0.94), alpha(@unixnotis-surface, 0.98));
  border-color: alpha(@unixnotis-accent-wifi, 0.75);
}
.unixnotis-toggle.unixnotis-toggle-kind-bluetooth:checked {
  background-image:
    radial-gradient(circle at 22% 20%, alpha(@unixnotis-accent-bluetooth, 0.2), transparent 64%),
    radial-gradient(circle at 88% 92%, alpha(@unixnotis-accent-2, 0.12), transparent 60%),
    linear-gradient(165deg, alpha(@unixnotis-surface-soft, 0.94), alpha(@unixnotis-surface, 0.98));
  border-color: alpha(@unixnotis-accent-bluetooth, 0.75);
}
.unixnotis-toggle.unixnotis-toggle-kind-airplane:checked {
  background-image:
    radial-gradient(circle at 22% 20%, alpha(@unixnotis-accent-airplane, 0.18), transparent 64%),
    radial-gradient(circle at 88% 92%, alpha(@unixnotis-accent-2, 0.12), transparent 60%),
    linear-gradient(165deg, alpha(@unixnotis-surface-soft, 0.94), alpha(@unixnotis-surface, 0.98));
  border-color: alpha(@unixnotis-accent-airplane, 0.75);
}
.unixnotis-toggle.unixnotis-toggle-kind-night:checked {
  background-image:
    radial-gradient(circle at 22% 20%, alpha(@unixnotis-accent-night, 0.2), transparent 64%),
    radial-gradient(circle at 88% 92%, alpha(@unixnotis-accent-2, 0.12), transparent 60%),
    linear-gradient(165deg, alpha(@unixnotis-surface-soft, 0.94), alpha(@unixnotis-surface, 0.98));
  border-color: alpha(@unixnotis-accent-night, 0.75);
}

/* Keep outlines and depth visible when the panel is unfocused (GTK backdrop). */
.unixnotis-toggle:backdrop {
  border-color: alpha(@unixnotis-outline, 0.9);
  box-shadow:
    0 14px 26px -22px alpha(#000000, 0.35),
    0 0 0 1px alpha(@unixnotis-accent, 0.08),
    inset 0 1px 0 alpha(#ffffff, 0.06),
    inset 0 2px 4px -3px alpha(#ffffff, 0.12),
    inset 0 -2px 6px -5px alpha(#000000, 0.4);
}

.unixnotis-toggle.unixnotis-toggle-kind-wifi:backdrop {
  border-color: alpha(@unixnotis-accent-wifi, 0.55);
}
.unixnotis-toggle.unixnotis-toggle-kind-bluetooth:backdrop {
  border-color: alpha(@unixnotis-accent-bluetooth, 0.55);
}
.unixnotis-toggle.unixnotis-toggle-kind-airplane:backdrop {
  border-color: alpha(@unixnotis-accent-airplane, 0.55);
}
.unixnotis-toggle.unixnotis-toggle-kind-night:backdrop {
  border-color: alpha(@unixnotis-accent-night, 0.55);
}

.unixnotis-toggle-icon {
  -gtk-icon-size: 18px;
  /* Force symbolic rendering so toggle icons follow accent tint consistently */
  -gtk-icon-style: symbolic;
  /* Palette pins symbolic icon channels to the shared accent color */
  -gtk-icon-palette: success @unixnotis-accent, warning @unixnotis-accent, error @unixnotis-accent;
  min-width: 24px;
  min-height: 24px;
  /* Icons inherit widget state; base color uses the cyan accent for clarity. */
  color: @unixnotis-accent;
}

.unixnotis-toggle-label {
  font-size: 12px;
  letter-spacing: 0.04em;
}

.unixnotis-toggle-has-icon .unixnotis-toggle-content {
  min-width: calc(var(--unixnotis-toggle-min-width) - 24px);
}

.unixnotis-stat-header,
.unixnotis-info-header {
  margin-bottom: 6px;
}

.unixnotis-stat-icon {
  background-image: linear-gradient(150deg, alpha(@unixnotis-surface, 0.9), alpha(@unixnotis-surface-soft, 0.7));
  border-radius: 10px;
  padding: 4px;
  border: 1px solid alpha(@unixnotis-outline, 0.5);
  box-shadow:
    0 8px 16px -14px alpha(#000000, 0.45),
    inset 0 0 0 1px alpha(#ffffff, 0.06);
  color: @unixnotis-accent;
}

.unixnotis-info-icon {
  background-image: linear-gradient(150deg, alpha(@unixnotis-surface, 0.9), alpha(@unixnotis-surface-soft, 0.7));
  border-radius: 12px;
  padding: 6px;
  border: 1px solid alpha(@unixnotis-outline, 0.5);
  box-shadow:
    0 8px 16px -14px alpha(#000000, 0.45),
    inset 0 0 0 1px alpha(#ffffff, 0.06);
  color: @unixnotis-accent-2;
}

/*
 * Stat grid
 */
.unixnotis-stat-section {
  margin-bottom: 4px;
}

.unixnotis-stat-grid {
  padding: 0;
}

.unixnotis-stat-card {
  background-image: linear-gradient(165deg, alpha(@unixnotis-surface-soft, 0.95), alpha(@unixnotis-surface, 0.98));
  border-radius: 18px;
  border-radius: var(--unixnotis-stat-card-radius);
  padding: 10px 12px;
  padding: var(--unixnotis-stat-card-padding-y) var(--unixnotis-stat-card-padding-x);
  /* Keep the outline always visible so the stat grid reads as "cards"
   * even when not hovered. */
  border: 1px solid alpha(@unixnotis-outline, 0.88);
  min-height: 56px;
  min-height: var(--unixnotis-stat-card-min-height);
  box-shadow:
    0 18px 30px -22px alpha(#000000, 0.35),
    0 0 0 1px alpha(@unixnotis-accent, 0.1),
    0 0 22px -18px alpha(@unixnotis-accent, 0.16),
    inset 0 1px 0 alpha(#ffffff, 0.06),
    inset 0 2px 4px -3px alpha(#ffffff, 0.12),
    inset 0 -1px 0 alpha(#000000, 0.22),
    inset 0 -3px 6px -5px alpha(#000000, 0.38),
    inset 0 0 0 1px alpha(#ffffff, 0.05);
}

.unixnotis-stat-card:hover {
  border-color: alpha(@unixnotis-accent, 0.45);
  box-shadow:
    0 20px 32px -24px alpha(#000000, 0.4),
    0 0 24px -20px alpha(@unixnotis-accent, 0.18),
    inset 0 1px 0 alpha(#ffffff, 0.07),
    inset 0 2px 4px -3px alpha(#ffffff, 0.14),
    inset 0 -1px 0 alpha(#000000, 0.24),
    inset 0 -3px 6px -5px alpha(#000000, 0.42),
    inset 0 0 0 1px alpha(#ffffff, 0.06);
}

.unixnotis-stat-card:backdrop {
  border-color: alpha(@unixnotis-outline, 0.88);
  box-shadow:
    0 16px 28px -22px alpha(#000000, 0.32),
    0 0 0 1px alpha(@unixnotis-accent, 0.08),
    inset 0 1px 0 alpha(#ffffff, 0.05),
    inset 0 2px 4px -3px alpha(#ffffff, 0.1),
    inset 0 -2px 6px -5px alpha(#000000, 0.35);
}

.unixnotis-stat-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: @unixnotis-muted;
}

.unixnotis-stat-card-plugin .unixnotis-stat-title {
  color: alpha(@unixnotis-accent, 0.9);
}

.unixnotis-stat-card-no-icon .unixnotis-stat-title {
  letter-spacing: 0.1em;
}

.unixnotis-stat-value {
  font-size: 15px;
  font-weight: 600;
}

/*
 * Info cards
 */
.unixnotis-card-section {
  margin-bottom: 4px;
}

.unixnotis-card-grid {
  padding: 0;
}

.unixnotis-info-card {
  background-image: linear-gradient(165deg, alpha(@unixnotis-surface-soft, 0.92), alpha(@unixnotis-surface, 0.98));
  border-radius: 22px;
  border-radius: var(--unixnotis-info-card-radius);
  padding: 12px;
  padding: var(--unixnotis-info-card-padding);
  border: 1px solid alpha(@unixnotis-outline, 0.7);
  min-height: 56px;
  min-height: var(--unixnotis-info-card-min-height);
  box-shadow:
    0 20px 32px -24px alpha(#000000, 0.4),
    0 0 0 1px alpha(@unixnotis-accent-2, 0.1),
    inset 0 0 0 1px alpha(#ffffff, 0.06),
    inset 0 2px 4px -3px alpha(#ffffff, 0.12),
    inset 0 -3px 6px -5px alpha(#000000, 0.35);
}

.unixnotis-info-card:hover {
  border-color: alpha(@unixnotis-accent-2, 0.45);
  box-shadow:
    0 22px 36px -24px alpha(#000000, 0.4),
    inset 0 0 0 1px alpha(#ffffff, 0.07),
    inset 0 2px 4px -3px alpha(#ffffff, 0.14),
    inset 0 -3px 6px -5px alpha(#000000, 0.38);
}

.unixnotis-info-card:backdrop {
  border-color: alpha(@unixnotis-outline, 0.7);
  box-shadow:
    0 18px 30px -24px alpha(#000000, 0.34),
    0 0 0 1px alpha(@unixnotis-accent-2, 0.08),
    inset 0 2px 4px -3px alpha(#ffffff, 0.1),
    inset 0 -3px 6px -5px alpha(#000000, 0.32);
}

.unixnotis-info-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.unixnotis-info-body {
  font-size: 12px;
  color: @unixnotis-muted;
}

.unixnotis-info-card-mono .unixnotis-info-body {
  font-family: "CaskaydiaCove Nerd Font Mono", "JetBrains Mono", monospace;
}

.unixnotis-info-card-calendar .unixnotis-info-title {
  color: alpha(@unixnotis-accent, 0.88);
}

/*
 * Calendar: "Neon Glass Ledger"
 *
 * Purpose: make the calendar read as a premium card while keeping retro cues.
 */
.unixnotis-calendar {
  background-image:
    radial-gradient(circle at 14% 18%, alpha(@unixnotis-accent, 0.16), transparent 55%),
    linear-gradient(160deg, alpha(@unixnotis-card, 0.96), alpha(@unixnotis-surface, 0.98));
  border: 1px solid alpha(@unixnotis-outline, 0.6);
  border-radius: 18px;
  border-radius: var(--unixnotis-calendar-radius);
  padding: 10px 12px;
  padding: var(--unixnotis-info-card-padding);
  color: @unixnotis-text;
  box-shadow:
    0 18px 28px -22px alpha(#000000, 0.6),
    0 0 18px -12px @unixnotis-glow-cyan,
    inset 0 0 0 1px alpha(#ffffff, 0.05),
    inset 0 -8px 16px -14px alpha(#000000, 0.5);
}

.unixnotis-calendar button {
  /* Calendar nav controls are custom-styled so the arrow icons remain visible. */
  background-image: linear-gradient(160deg, alpha(@unixnotis-action-bg, 0.8), alpha(@unixnotis-surface-strong, 0.9));
  border-radius: 999px;
  border: 1px solid alpha(@unixnotis-outline, 0.7);
  padding: 3px;
  min-width: 22px;
  min-height: 22px;
  color: @unixnotis-accent;
  -gtk-icon-size: 12px;
  -gtk-icon-style: symbolic;
  -gtk-icon-shadow: 0 0 6px alpha(@unixnotis-accent, 0.45);
  -gtk-icon-palette: success @unixnotis-accent, warning @unixnotis-accent, error @unixnotis-accent;
  box-shadow:
    0 8px 14px -12px alpha(#000000, 0.6),
    inset 0 0 0 1px alpha(#ffffff, 0.06);
}

.unixnotis-calendar button:hover {
  background-image: linear-gradient(160deg, alpha(@unixnotis-action-bg-hover, 0.78), alpha(@unixnotis-accent, 0.28));
  border-color: alpha(@unixnotis-accent, 0.7);
  color: @unixnotis-accent;
}

.unixnotis-calendar button:active {
  background-image: linear-gradient(160deg, alpha(@unixnotis-action-bg-active, 0.74), alpha(@unixnotis-accent, 0.35));
  border-color: alpha(@unixnotis-accent, 0.8);
  color: @unixnotis-accent;
}

.unixnotis-calendar button:disabled {
  color: alpha(@unixnotis-muted, 0.6);
  border-color: alpha(@unixnotis-outline, 0.4);
}

.unixnotis-calendar button image,
.unixnotis-calendar button label,
.unixnotis-calendar button arrow,
.unixnotis-calendar button .image,
.unixnotis-calendar button .icon {
  /* Force symbolic icons to render with the same contrast as text. */
  color: inherit;
  -gtk-icon-shadow: 0 0 0 transparent;
  -gtk-icon-palette: success @unixnotis-text, warning @unixnotis-text, error @unixnotis-text;
}

.unixnotis-calendar .header button image,
.unixnotis-calendar .header button label,
.unixnotis-calendar .header button arrow {
  /* Header arrows sometimes inherit muted colors; force the accent to ensure visibility. */
  color: @unixnotis-accent;
  -gtk-icon-shadow: 0 0 6px alpha(@unixnotis-accent, 0.35);
}

.unixnotis-calendar header > button:nth-child(1) {
  /* Prev month */
  -gtk-icon-source: -gtk-icontheme("go-previous-symbolic");
  background-image:
    -gtk-icontheme("go-previous-symbolic"),
    linear-gradient(160deg, alpha(@unixnotis-action-bg, 0.8), alpha(@unixnotis-surface-strong, 0.9));
  background-size: 12px 12px, auto;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
}

.unixnotis-calendar header > button:nth-child(3) {
  /* Next month */
  -gtk-icon-source: -gtk-icontheme("go-next-symbolic");
  background-image:
    -gtk-icontheme("go-next-symbolic"),
    linear-gradient(160deg, alpha(@unixnotis-action-bg, 0.8), alpha(@unixnotis-surface-strong, 0.9));
  background-size: 12px 12px, auto;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
}

.unixnotis-calendar header > button:nth-child(4) {
  /* Prev year */
  -gtk-icon-source: -gtk-icontheme("go-down-symbolic");
  background-image:
    -gtk-icontheme("go-down-symbolic"),
    linear-gradient(160deg, alpha(@unixnotis-action-bg, 0.8), alpha(@unixnotis-surface-strong, 0.9));
  background-size: 12px 12px, auto;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
}

.unixnotis-calendar header > button:nth-child(6) {
  /* Next year */
  -gtk-icon-source: -gtk-icontheme("go-up-symbolic");
  background-image:
    -gtk-icontheme("go-up-symbolic"),
    linear-gradient(160deg, alpha(@unixnotis-action-bg, 0.8), alpha(@unixnotis-surface-strong, 0.9));
  background-size: 12px 12px, auto;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
}

.unixnotis-calendar .header {
  color: @unixnotis-text;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid alpha(@unixnotis-outline, 0.5);
  padding-bottom: 6px;
  margin-bottom: 6px;
}

.unixnotis-calendar .day-name {
  color: alpha(@unixnotis-muted, 0.9);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
}

.unixnotis-calendar .day-number {
  color: @unixnotis-text;
  font-weight: 600;
}

.unixnotis-calendar .day-number.other-month {
  color: alpha(@unixnotis-muted, 0.45);
}

.unixnotis-calendar:selected,
.unixnotis-calendar .day-number:selected {
  background-image: linear-gradient(135deg, alpha(@unixnotis-accent, 0.85), alpha(@unixnotis-accent-2, 0.75));
  color: #0b1020;
  border-radius: 8px;
  box-shadow:
    0 0 0 1px alpha(@unixnotis-accent, 0.5),
    0 10px 16px -12px alpha(@unixnotis-accent, 0.7);
}

.unixnotis-calendar .day-number.today {
  box-shadow:
    inset 0 0 0 1px alpha(@unixnotis-accent-2, 0.45),
    0 0 12px -10px @unixnotis-glow-pink;
  border-radius: 8px;
}

.unixnotis-info-card-weather {
  background-image:
    radial-gradient(circle at 20% 20%, alpha(@unixnotis-accent-2, 0.18), transparent 60%),
    linear-gradient(165deg, alpha(@unixnotis-surface-soft, 0.92), alpha(@unixnotis-surface, 0.98));
  border-color: alpha(@unixnotis-accent-2, 0.45);
  box-shadow:
    0 22px 36px -24px alpha(#000000, 0.5),
    0 0 0 1px alpha(@unixnotis-accent-2, 0.12),
    inset 0 0 0 1px alpha(#ffffff, 0.07);
}

.unixnotis-info-card-weather .unixnotis-info-title {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: @unixnotis-muted;
}

.unixnotis-info-card-weather .unixnotis-info-body {
  font-size: 13px;
  font-weight: 600;
}

.unixnotis-info-card-has-icon .unixnotis-info-title {
  min-height: 18px;
}

.unixnotis-info-icon-weather {
  background-image: linear-gradient(150deg, alpha(@unixnotis-accent-2, 0.35), alpha(@unixnotis-accent, 0.2));
  border-color: alpha(@unixnotis-accent-2, 0.6);
  color: @unixnotis-accent-2;
  box-shadow:
    0 12px 18px -14px alpha(@unixnotis-accent-2, 0.6),
    inset 0 0 0 1px alpha(#ffffff, 0.1);
}

unixnotis-blue-light-lib

#!/bin/sh
set -eu

: "${UNIXNOTIS_BLUE_LIGHT_TEMP:=4500}"
: "${UNIXNOTIS_BLUE_LIGHT_GAMMA:=90}"

STATE_DIR="${XDG_RUNTIME_DIR:-${TMPDIR:-/tmp}}/unixnotis"
STATE_FILE="$STATE_DIR/blue-light-backend"

has_backend() {
    command -v "$1" >/dev/null 2>&1
}

backend_running() {
    pgrep -x "$1" >/dev/null 2>&1
}

active_backend() {
    # Prefer the backend already in charge so the toggle does not switch tools
    for candidate in hyprsunset gammastep wlsunset sunsetr; do
        if backend_running "$candidate"; then
            printf '%s\n' "$candidate"
            return 0
        fi
    done

    return 1
}

installed_backend() {
    # Fall back to the first supported tool installed on the system
    for candidate in hyprsunset gammastep wlsunset sunsetr; do
        if has_backend "$candidate"; then
            printf '%s\n' "$candidate"
            return 0
        fi
    done

    return 1
}

selected_backend() {
    active_backend || installed_backend
}

remember_backend() {
    # Runtime state keeps off clicks paired with the backend started by on
    mkdir -p "$STATE_DIR"
    printf '%s\n' "$1" > "$STATE_FILE"
}

remembered_backend() {
    if [ -r "$STATE_FILE" ]; then
        read -r backend < "$STATE_FILE"
        if [ "$backend" != "" ]; then
            printf '%s\n' "$backend"
            return 0
        fi
    fi

    return 1
}

forget_backend() {
    rm -f "$STATE_FILE"
}

stop_backend() {
    case "$1" in
        hyprsunset)
            pkill -x hyprsunset >/dev/null 2>&1 || true
            ;;
        gammastep)
            if has_backend gammastep; then
                gammastep -x >/dev/null 2>&1 || true
            fi
            pkill -x gammastep >/dev/null 2>&1 || true
            ;;
        wlsunset)
            pkill -x wlsunset >/dev/null 2>&1 || true
            ;;
        sunsetr)
            if has_backend sunsetr; then
                sunsetr stop >/dev/null 2>&1 || true
            fi
            pkill -x sunsetr >/dev/null 2>&1 || true
            ;;
    esac
}

stop_conflicting_backends() {
    active="$1"

    # Only one color-temperature process should own the display pipeline
    for candidate in hyprsunset gammastep wlsunset sunsetr; do
        if [ "$candidate" != "$active" ] && backend_running "$candidate"; then
            stop_backend "$candidate"
        fi
    done
}

stop_active_backends() {
    # Off should clean stale state and any active supported backend
    for candidate in hyprsunset gammastep wlsunset sunsetr; do
        if backend_running "$candidate"; then
            stop_backend "$candidate"
        fi
    done
}

start_backend() {
    case "$1" in
        hyprsunset)
            nohup hyprsunset --temperature "$UNIXNOTIS_BLUE_LIGHT_TEMP" >/dev/null 2>&1 &
            ;;
        gammastep)
            nohup gammastep -m wayland -l 0:0 -t "$UNIXNOTIS_BLUE_LIGHT_TEMP:$UNIXNOTIS_BLUE_LIGHT_TEMP" -P >/dev/null 2>&1 &
            ;;
        wlsunset)
            nohup wlsunset -t "$UNIXNOTIS_BLUE_LIGHT_TEMP" -T "$UNIXNOTIS_BLUE_LIGHT_TEMP" -l 0 -L 0 >/dev/null 2>&1 &
            ;;
        sunsetr)
            nohup sunsetr test "$UNIXNOTIS_BLUE_LIGHT_TEMP" "$UNIXNOTIS_BLUE_LIGHT_GAMMA" >/dev/null 2>&1 &
            ;;
        *)
            return 127
            ;;
    esac
}

unixnotis-blue-light-off

#!/bin/sh
set -eu

script_dir=$(CDPATH='' cd -- "$(dirname -- "$0")" && pwd)
# shellcheck source=crates/unixnotis-core/assets/scripts/unixnotis-blue-light-lib
. "$script_dir/unixnotis-blue-light-lib"

if backend=$(remembered_backend); then
    stop_backend "$backend"
    forget_backend
fi

stop_active_backends

unixnotis-blue-light-on

#!/bin/sh
set -eu

script_dir=$(CDPATH='' cd -- "$(dirname -- "$0")" && pwd)
# shellcheck source=crates/unixnotis-core/assets/scripts/unixnotis-blue-light-lib
. "$script_dir/unixnotis-blue-light-lib"

# Keep the user's active backend when possible, otherwise use the first installed one
backend=$(selected_backend)
stop_conflicting_backends "$backend"
stop_backend "$backend"
start_backend "$backend"
remember_backend "$backend"

unixnotis-blue-light-state

#!/bin/sh
set -eu

script_dir=$(CDPATH='' cd -- "$(dirname -- "$0")" && pwd)
# shellcheck source=crates/unixnotis-core/assets/scripts/unixnotis-blue-light-lib
. "$script_dir/unixnotis-blue-light-lib"

# The toggle is checked when any supported backend owns night-light state
active_backend >/dev/null

[DevWizard13]

I'm gonna see if I can spin up a VM running a distro with hyprland to see if this still happens. I'll also continue to search for the code that does the actual rendering with gtk.

[locainin]

I believe this may be a niri-related issue, but please try the latest dev branch first. A few theme/layout fixes landed recently, so it is worth checking whether current dev changes either the padding or shadow behavior.

css-check being clean means UnixNotis is loading valid theme CSS. The missing :root block is expected: UnixNotis generates those custom properties at runtime when the GTK version supports them, so they will not appear in the on-disk CSS files.

For debugging, please send the output of: if anything stands out

noticenterctl open-panel --debug verbose

For the square shadow: niri’s layer-rule docs mention that layer surfaces cannot tell niri their exact visual geometry, so niri may draw a shadow around the full rectangular layer surface instead of the rounded visible widget. Source: https://niri-wm.github.io/niri/Configuration%3A-Layer-Rules.html

Can you also send:

rg -n 'layer-rule|unixnotis|shadow|geometry-corner-radius|background-effect|opacity' ~/.config/niri

The UnixNotis layer namespaces should be:

unixnotis-panel
unixnotis-popups

If you have a broad niri layer-rule with shadow { on }, try disabling it for those namespaces or setting a matching geometry-corner-radius and see if the square shadow changes.

[locainin]

niri is also out-of-scope for me, it is nothing I have used before or have experience with unfortunately.

The square harsh notification shadow strongly matches niri behavior. niri docs say layer-surface shadows are drawn around the full layer surface because niri cannot know the client’s rounded visual geometry. That would explain a rectangular shadow behind rounded GTK notifications/panel surfaces.

UnixNotis should in theory be able to work on niri, but this particular shadow is likely controlled by niri layer rules rather than UnixNotis CSS. The UnixNotis side is already exposing stable layer namespaces.

If a broad niri layer-rule enables shadows for overlay/layer-shell surfaces, try either disabling shadows for those namespaces or setting a matching geometry-corner-radius.

[DevWizard13]

I did try the latest dev branch. Same behavior. I'll be back to do some testing and further reading in a half hour (and I'll give you the output of these commands), but until then, please answer a few questions:

• If UnixNotis doesn't have a :root block, where are variables set? I'm not too familiar with this stuff.
• Where in the code is the actual rendering done? Like, where does it tell GTK to render the popups and panel?
• Are you aware of anything in niri that would cause the lack of padding? Like, is UnixNotis dependent on hyprland or related libraries for information on how much padding there should be?

I hope to fix these issues myself and ideally merge them into the main branch, if that's ok.

[locainin]

For the :root question: UnixNotis does not write the generated :root block into your CSS files. The stock CSS files define normal GTK colors with @define-color, and then UnixNotis injects runtime overrides when it loads the CSS.

The runtime custom properties are generated here:

crates/unixnotis-core/src/css/tokens.rs

They are merged into the loaded CSS here:

crates/unixnotis-ui/src/css/css_loader.rs
crates/unixnotis-ui/src/css/css_manager.rs

So not seeing :root in the files under ~/.config/unixnotis is expected.

For rendering: GTK does the actual drawing. UnixNotis builds GTK widgets, gives them CSS classes, then GTK renders them with the loaded CSS.

Panel window/widget construction is mainly here:

crates/unixnotis-center/src/ui/panel/build.rs
crates/unixnotis-center/src/ui/panel/layout.rs
crates/unixnotis-center/src/ui/list/list_row/notification/build.rs

Popup window/widget construction is mainly here:

crates/unixnotis-popups/src/ui/ui_window.rs
crates/unixnotis-popups/src/ui/ui_entry/mod.rs

The layer-shell namespaces are set in those window files:

unixnotis-panel
unixnotis-popups

For niri: I do not think niri should be able to remove GTK widget padding directly. Padding is GTK CSS/layout state inside the UnixNotis window. UnixNotis uses gtk4-layer-shell for Wayland layer surfaces; padding is not Hyprland-driven.

There is some Hyprland-specific code, but it is for panel close-on-click-outside and reserved work-area height behavior, not notification/card padding.

The square harsh shadow does still strongly match niri behavior. niri docs say layer-surface shadows are drawn around the full rectangular layer surface because niri cannot know the client’s rounded visual geometry. That would explain a rectangular shadow behind rounded GTK notifications/panel surfaces.

Source:
https://niri-wm.github.io/niri/Configuration%3A-Layer-Rules.html

[DevWizard13]

I just installed hyprland and I'll give you an overview of how it behaves differently on hyprland in a moment.

Output of noticenterctl open-panel --verbose:

2026-05-31T15:39:45.210602Z  WARN unixnotis_center::ui::hyprland: failed to query hyprland monitors err=Custom { kind: NotFound, error: "Hyprland environment not available" }
2026-05-31T15:39:45.233664Z  WARN unixnotis_center::ui::widgets::utils::command::command_exec: widget command is using shell fallback command=rfkill list all | awk '/Soft blocked:/ { seen=1; if ($3 != "yes") bad=1 } END { exit (seen && !bad) ? 0 : 1 }' command_hash=3db131bc7a700632
2026-05-31T16:28:18.237349Z  WARN unixnotis_center::ui::hyprland: failed to query hyprland monitors err=Custom { kind: NotFound, error: "Hyprland environment not available" }
GtkGizmo 0x55bda12b9240 (slider) reported min width -2, but sizes must be >= 0
GtkGizmo 0x55bda10fc4a0 (slider) reported min height -2, but sizes must be >= 0
2026-05-31T16:56:20.661077Z  WARN unixnotis_center::ui::hyprland: failed to query hyprland monitors err=Custom { kind: NotFound, error: "Hyprland environment not available" }
2026-05-31T16:56:20.662796Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Info debug mode enabled: Verbose
2026-05-31T16:56:20.662804Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose media updated: 1 players
2026-05-31T16:56:20.663008Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose enqueue fast command: scripts/unixnotis-blue-light-state
2026-05-31T16:56:20.663031Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose command start kind=Fast queue_wait_ms=0 cmd=scripts/unixnotis-blue-light-state
2026-05-31T16:56:20.725023Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose command start kind=Slow queue_wait_ms=62 cmd=wpctl get-volume @DEFAULT_AUDIO_SINK@
2026-05-31T16:56:20.738441Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose command start kind=Slow queue_wait_ms=75 cmd=brightnessctl -m
2026-05-31T16:56:20.783009Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose watch event: dbus-monitor --system type=signal,sender=org.bluez
2026-05-31T16:56:20.783031Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose toggle refresh start cmd="bluetoothctl show"
2026-05-31T16:56:20.783044Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose watch event: udevadm monitor --udev --subsystem-match=rfkill
2026-05-31T16:56:20.783050Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose toggle refresh start cmd="rfkill list all | awk '/Soft blocked:/ { seen=1; if ($3 != "yes") bad=1 } END { exit (seen && !bad) ? 0 : 1 }'"
2026-05-31T16:56:20.783074Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose enqueue fast command: bluetoothctl show
2026-05-31T16:56:20.783085Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose enqueue fast command: rfkill list all | awk '/Soft blocked:/ { seen=1; if ($3 != "yes") bad=1 } END { exit (seen && !bad) ? 0 : 1 }'
2026-05-31T16:56:20.793369Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose watch event: nmcli -t monitor
2026-05-31T16:56:20.793404Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose toggle refresh start cmd="nmcli radio wifi"
2026-05-31T16:56:20.793451Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose enqueue fast command: nmcli radio wifi
2026-05-31T16:56:20.913017Z  INFO unixnotis_center::ui::refresh: widget refresh tick force=false fast_ms=1000 slow_ms=3000
2026-05-31T16:56:20.913046Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Info refresh timer armed for 749 ms
2026-05-31T16:56:20.966362Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose command start kind=Slow queue_wait_ms=183 cmd=bluetoothctl show
2026-05-31T16:56:20.966384Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose command start kind=Slow queue_wait_ms=183 cmd=rfkill list all | awk '/Soft blocked:/ { seen=1; if ($3 != "yes") bad=1 } END { exit (seen && !bad) ? 0 : 1 }'
2026-05-31T16:56:20.986718Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose command start kind=Slow queue_wait_ms=193 cmd=nmcli radio wifi
2026-05-31T16:56:21.662260Z  INFO unixnotis_center::ui::refresh: widget refresh tick force=false fast_ms=1000 slow_ms=3000
2026-05-31T16:56:21.662308Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose slider refresh start cmd="brightnessctl -m"
2026-05-31T16:56:21.662343Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose enqueue fast command: brightnessctl -m
2026-05-31T16:56:21.662379Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Info refresh timer armed for 999 ms
2026-05-31T16:56:21.724657Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose command start kind=Slow queue_wait_ms=62 cmd=brightnessctl -m
2026-05-31T16:56:22.661725Z  INFO unixnotis_center::ui::refresh: widget refresh tick force=false fast_ms=1000 slow_ms=3000
2026-05-31T16:56:22.661782Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose slider refresh start cmd="brightnessctl -m"
2026-05-31T16:56:22.661823Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose enqueue fast command: brightnessctl -m
2026-05-31T16:56:22.661870Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Info refresh timer armed for 999 ms
2026-05-31T16:56:22.723240Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose command start kind=Slow queue_wait_ms=61 cmd=brightnessctl -m
2026-05-31T16:56:23.660971Z  INFO unixnotis_center::ui::refresh: widget refresh tick force=false fast_ms=1000 slow_ms=3000
2026-05-31T16:56:23.661020Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose slider refresh start cmd="brightnessctl -m"
2026-05-31T16:56:23.661053Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose enqueue fast command: brightnessctl -m
2026-05-31T16:56:23.661084Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Info refresh timer armed for 1 ms
2026-05-31T16:56:23.662291Z  INFO unixnotis_center::ui::refresh: widget refresh tick force=false fast_ms=1000 slow_ms=3000
2026-05-31T16:56:23.662336Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose toggle refresh start cmd="scripts/unixnotis-blue-light-state"
2026-05-31T16:56:23.662366Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Info refresh timer armed for 101 ms
2026-05-31T16:56:23.662409Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose enqueue fast command: scripts/unixnotis-blue-light-state
2026-05-31T16:56:23.662554Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose command start kind=Fast queue_wait_ms=0 cmd=scripts/unixnotis-blue-light-state
2026-05-31T16:56:23.722351Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose command start kind=Slow queue_wait_ms=61 cmd=brightnessctl -m
2026-05-31T16:56:23.763734Z  INFO unixnotis_center::ui::refresh: widget refresh tick force=false fast_ms=1000 slow_ms=3000
2026-05-31T16:56:23.763753Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Info refresh timer armed for 1 ms
2026-05-31T16:56:23.764831Z  INFO unixnotis_center::ui::refresh: widget refresh tick force=false fast_ms=1000 slow_ms=3000
2026-05-31T16:56:23.764849Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose stat refresh: RAM
2026-05-31T16:56:23.764864Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Info refresh timer armed for 2 ms
2026-05-31T16:56:23.767035Z  INFO unixnotis_center::ui::refresh: widget refresh tick force=false fast_ms=1000 slow_ms=3000
2026-05-31T16:56:23.767058Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Info refresh timer armed for 1 ms
2026-05-31T16:56:23.768130Z  INFO unixnotis_center::ui::refresh: widget refresh tick force=false fast_ms=1000 slow_ms=3000
2026-05-31T16:56:23.768150Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose stat refresh: CPU
2026-05-31T16:56:23.768170Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Info refresh timer armed for 250 ms
2026-05-31T16:56:24.018383Z  INFO unixnotis_center::ui::refresh: widget refresh tick force=false fast_ms=1000 slow_ms=3000
2026-05-31T16:56:24.018420Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Info refresh timer armed for 642 ms
2026-05-31T16:56:24.660651Z  INFO unixnotis_center::ui::refresh: widget refresh tick force=false fast_ms=1000 slow_ms=3000
2026-05-31T16:56:24.660697Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose slider refresh start cmd="brightnessctl -m"
2026-05-31T16:56:24.660730Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose enqueue fast command: brightnessctl -m
2026-05-31T16:56:24.660765Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Info refresh timer armed for 999 ms
2026-05-31T16:56:24.721017Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose command start kind=Slow queue_wait_ms=60 cmd=brightnessctl -m
2026-05-31T16:56:25.659775Z  INFO unixnotis_center::ui::refresh: widget refresh tick force=false fast_ms=1000 slow_ms=3000
2026-05-31T16:56:25.659791Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose slider refresh start cmd="brightnessctl -m"
2026-05-31T16:56:25.659801Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose enqueue fast command: brightnessctl -m
2026-05-31T16:56:25.659811Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Info refresh timer armed for 999 ms
2026-05-31T16:56:25.719025Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose command start kind=Slow queue_wait_ms=59 cmd=brightnessctl -m
2026-05-31T16:56:26.659059Z  INFO unixnotis_center::ui::refresh: widget refresh tick force=false fast_ms=1000 slow_ms=3000
2026-05-31T16:56:26.659114Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose slider refresh start cmd="brightnessctl -m"
2026-05-31T16:56:26.659155Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose enqueue fast command: brightnessctl -m
2026-05-31T16:56:26.659200Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Info refresh timer armed for 3 ms
2026-05-31T16:56:26.662398Z  INFO unixnotis_center::ui::refresh: widget refresh tick force=false fast_ms=1000 slow_ms=3000
2026-05-31T16:56:26.662455Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose toggle refresh start cmd="scripts/unixnotis-blue-light-state"
2026-05-31T16:56:26.662494Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Info refresh timer armed for 101 ms
2026-05-31T16:56:26.662552Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose enqueue fast command: scripts/unixnotis-blue-light-state
2026-05-31T16:56:26.662673Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose command start kind=Fast queue_wait_ms=0 cmd=scripts/unixnotis-blue-light-state
2026-05-31T16:56:26.718471Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose command start kind=Slow queue_wait_ms=59 cmd=brightnessctl -m
2026-05-31T16:56:26.763605Z  INFO unixnotis_center::ui::refresh: widget refresh tick force=false fast_ms=1000 slow_ms=3000
2026-05-31T16:56:26.763643Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Info refresh timer armed for 1 ms
2026-05-31T16:56:26.764765Z  INFO unixnotis_center::ui::refresh: widget refresh tick force=false fast_ms=1000 slow_ms=3000
2026-05-31T16:56:26.764793Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose stat refresh: Battery
2026-05-31T16:56:26.764824Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Info refresh timer armed for 1 ms
2026-05-31T16:56:26.766039Z  INFO unixnotis_center::ui::refresh: widget refresh tick force=false fast_ms=1000 slow_ms=3000
2026-05-31T16:56:26.766071Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose stat refresh: RAM
2026-05-31T16:56:26.766080Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose stat refresh: Battery
2026-05-31T16:56:26.766104Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Info refresh timer armed for 2 ms
2026-05-31T16:56:26.768334Z  INFO unixnotis_center::ui::refresh: widget refresh tick force=false fast_ms=1000 slow_ms=3000
2026-05-31T16:56:26.768371Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Info refresh timer armed for 1 ms
2026-05-31T16:56:26.769489Z  INFO unixnotis_center::ui::refresh: widget refresh tick force=false fast_ms=1000 slow_ms=3000
2026-05-31T16:56:26.769527Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose stat refresh: CPU
2026-05-31T16:56:26.769538Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose stat refresh: RAM
2026-05-31T16:56:26.769545Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Verbose stat refresh: Battery
2026-05-31T16:56:26.769574Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Info refresh timer armed for 250 ms
2026-05-31T16:56:27.019808Z  INFO unixnotis_center::ui::refresh: widget refresh tick force=false fast_ms=1000 slow_ms=3000
2026-05-31T16:56:27.019871Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Info refresh timer armed for 639 ms
2026-05-31T16:56:27.109536Z  INFO unixnotis_center::debug: unixnotis debug debug_level=Info panel request: PanelRequest { action: Close, debug: Off }

[DevWizard13]

So, anyway, I just installed hyprland performed some tests. You're correct that the square shadow was a niri specific issue. However, even in hyprland, the problem of padding being nonresistant persisted. I'm more confused than anything at this point. Have you never run into this issue?

Anyway, I'll spin up a VM to see if it's a CachyOS or my setup specific issue. I don't know what's going on.

[locainin]

Thanks, that confirms the shadow part pretty well: the square shadow is niri-specific/compositor-side.

The padding issue persisting under Hyprland is more interesting. I have not run into that locally, and it should not depend on niri or Hyprland. Padding is handled by GTK CSS inside the UnixNotis widgets.

A couple notes from the log:

• failed to query hyprland monitors means UnixNotis did not see the Hyprland IPC environment. That affects reserved work-area sizing only, not card/text padding.
• GtkGizmo ... slider reported min width -2 is worth tracking, but that looks slider-specific and should not remove padding from notification cards or the panel.

Can you try one very direct CSS test? Put these at the very end of the active CSS files, not near the top.

In panel.css:

.unixnotis-panel {
  padding: 80px;
}

.unixnotis-panel-card {
  padding: 80px;
}

In popup.css:

.unixnotis-popup-card {
  padding: 80px;
}

Then restart UnixNotis fully and test the panel + a popup again.

If that changes spacing, then CSS is applying and the issue is probably that the previous padding edits were being overridden or placed in the wrong file/selector.

If that still does nothing, then the active CSS provider is not applying those rules to the expected GTK nodes, or the edited files are not the files actually being loaded. In that case, please send:

noticenterctl css-check
pkg-config --modversion gtk4

Also, for reference, the relevant selectors are:

.unixnotis-panel
.unixnotis-panel-card
.unixnotis-popup-card

Those are attached in code here:

crates/unixnotis-center/src/ui/panel/build.rs
crates/unixnotis-center/src/ui/list/list_row/notification/build.rs
crates/unixnotis-popups/src/ui/ui_entry/mod.rs

[locainin]

I went ahead and tested the padding path locally. I added large padding overrides to the active panel and popup CSS files reported by noticenterctl css-check, restarted/reloaded UnixNotis, and the panel, notification rows, and popups all changed as expected.

The main places I checked for a possible bug were:

• wrong active CSS file being edited
• a later CSS rule overriding the padding
• missing/wrong GTK CSS selectors
• CSS reload not picking up file changes
• GTK/runtime-specific CSS behavior

I was not able to find a UnixNotis-side issue in those paths so far. One thing worth calling out: the config margin values are layer-shell margins around the panel/popup surface, not internal text padding. Internal padding is currently controlled through CSS.

[DevWizard13]

So a few things, the logs I sent you were from niri, not hyprland. I didn't want to go to all the effort to set up hyprland until it's usable, so the only thing I did was use it to show that this bug persisted across WMs.

As for the modifications you asked me to make to the file, I did that, and it still did nothing. The CSS files are not being loaded properly, apparently. I ran the commands, and the output was the same as last time, only it told me there were duplicate sections and that it didn't have enough room to render stuff (I ran this command last time, and it gave a perfectly ok result despite the fact that I was having the same issue as last time). Result of css-check:

css-check summary
  root: $HOME/.config/unixnotis
  checked: 5 files
  errors: 0
  warnings: 7

diagnostic categories
  lint: 3
  geometry: 4

top problem files
  $HOME/.config/unixnotis/config.toml: 4 issue(s)
  $HOME/.config/unixnotis/panel.css: 2 issue(s)
  $HOME/.config/unixnotis/popup.css: 1 issue(s)

active theme files
  [theme].base_css    -> $HOME/.config/unixnotis/base.css
  [theme].panel_css   -> $HOME/.config/unixnotis/panel.css
  [theme].popup_css   -> $HOME/.config/unixnotis/popup.css
  [theme].widgets_css -> $HOME/.config/unixnotis/widgets.css
  [theme].media_css   -> $HOME/.config/unixnotis/media.css

warnings

  $HOME/.config/unixnotis/config.toml (4)
    geometry: card grid looks like it needs about 548px of panel width, but [panel].width=420; GTK natural width can still widen the panel when configured card columns ask for more room
    geometry: media row looks like it needs about 548px of panel width, but [panel].width=420; GTK natural width can still widen the panel when the media widget asks for more room
    geometry: stat grid looks like it needs about 548px of panel width, but [panel].width=420; GTK natural width can still widen the panel when configured stat columns ask for more room
    geometry: toggle grid looks like it needs about 548px of panel width, but [panel].width=420; GTK natural width can still widen the panel when fixed columns ask for more room

  $HOME/.config/unixnotis/panel.css (2)
    lint: line 473, col 1: duplicate selector '.unixnotis-panel' (later rules override earlier)
    lint: line 477, col 1: duplicate selector '.unixnotis-panel-card' (later rules override earlier)

  $HOME/.config/unixnotis/popup.css (1)
    lint: line 120, col 1: duplicate selector '.unixnotis-popup-card' (later rules override earlier)

css-check result: warnings found

pkg-config says I'm using v4.22.4 of gtk4. What version does UnixNotis expect?

[DevWizard13]

When I remove the modifications to the files you instructed me to make, then the result of css-check is:

css-check summary
  root: $HOME/.config/unixnotis
  checked: 5 files
  errors: 0
  warnings: 0

css-check result: clean