Styling

Styling

UnixNotis uses GTK4 CSS. Theme files live in the config directory and are hot-reloaded when edited.

CSS files

Theme files are stored under $XDG_CONFIG_HOME/unixnotis:

• base.css: palette and shared tokens
• panel.css: control-center panel rules
• popup.css: toast popup rules
• widgets.css: widgets and media widget rules

If a file is missing, a default template is created on startup.

Load order

Panel UI:

1. base.css
2. panel.css
3. widgets.css

Popup UI:

1. base.css
2. popup.css

Later files override earlier rules.

Theme tokens

base.css defines the palette and theme hooks. Adjust these first to re-skin the UI without touching component rules.

Common tokens:

• unixnotis-surface-base, unixnotis-card-base
• unixnotis-text, unixnotis-muted, unixnotis-accent
• unixnotis-panel-grad-1/2/3
• unixnotis-notification-bg-1/2

Config-driven theme knobs

The [theme] section in config.toml controls alpha and geometry values applied at runtime:

[theme]
border_width = 1
card_radius = 16
surface_alpha = 0.88
surface_strong_alpha = 0.96
card_alpha = 0.94
shadow_soft_alpha = 0.30
shadow_strong_alpha = 0.55

Common selectors

Panel shell and header:

• .unixnotis-panel
• .unixnotis-panel-header
• .unixnotis-panel-title
• .unixnotis-panel-action

Notification list:

• .unixnotis-group, .unixnotis-group-header
• .unixnotis-panel-card
• .unixnotis-stack-ghost

Popup cards:

• .unixnotis-popup-card
• .unixnotis-popup-actions button

Empty state (no notifications):

• .unixnotis-empty
• .unixnotis-empty-label

Widgets:

• .unixnotis-quick-controls
• .unixnotis-quick-slider
• .unixnotis-toggle
• .unixnotis-toggle-kind-<kind> (added when a toggle kind is set)
• .unixnotis-stat-card
• .unixnotis-info-card
• .unixnotis-media-card

Empty state layout

The empty-state text is configurable in two ways:

• panel.empty_text controls the label text.
• panel.empty_offset_top shifts the label down when widgets are visible.

When no widgets are visible, the empty state is centered in the list area.

Example:

.unixnotis-empty-label {
  letter-spacing: 0.35em;
  font-size: 12px;
  text-transform: uppercase;
  color: @unixnotis-muted;
}

Widget styling examples

.unixnotis-quick-slider {
  border-radius: 16px;
}

.unixnotis-toggle:checked {
  background: alpha(@unixnotis-accent, 0.25);
}

.unixnotis-toggle.unixnotis-toggle-kind-wifi:checked {
  background: alpha(@unixnotis-accent, 0.25);
}

.unixnotis-toggle.unixnotis-toggle-kind-bluetooth:checked {
  background: alpha(@unixnotis-accent-2, 0.25);
}

.unixnotis-stat-value {
  font-weight: 700;
  letter-spacing: 0.03em;
}

Reload behavior

CSS files are watched for changes and reloaded on write. Large edits are coalesced into a single reload to avoid flicker.