Skip to content

Example Two Retro Industrial

Jump to bottom
locainin edited this page Mar 26, 2026 · 3 revisions

Example Two (Retro Industrial)

Example Two

This page contains the exact configuration and theme overrides used for the screenshot above.

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 = "SYSTEM IDLE"
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
include_browsers = true
browser_tokens = [
    "firefox",
    "librewolf",
    "waterfox",
    "floorp",
    "brave",
    "chromium",
    "chrome",
    "vivaldi",
    "edge",
    "opera",
    "epiphany",
    "midori",
    "zen",
]
title_char_limit = 32
allowlist = []
denylist = ["playerctld"]

[widgets]
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}%"
watch_cmd = "brightnessctl -w"
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"
# Wrapper scripts keep the command parsing strict while handling rfkill state.
on_cmd = "unixnotis-bluetooth-on"
off_cmd = "unixnotis-bluetooth-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 = "pgrep -x gammastep >/dev/null 2>&1"
on_cmd = "nohup gammastep -m wayland -l 0:0 -t 4500:4500 -P >/dev/null 2>&1 &"
off_cmd = "pkill -x gammastep >/dev/null 2>&1; gammastep -x >/dev/null 2>&1"

[[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"
border_width = 2
card_radius = 0
surface_alpha = 1.0
surface_strong_alpha = 1.0
card_alpha = 1.0
shadow_soft_alpha = 0.0
shadow_strong_alpha = 0.4
base.css 
/* UnixNotis base theme (Bauhaus/Industrial 1930s)
 *
 * A strict, functionalist design.
 * - No gradients.
 * - No transparency.
 * - Sharp contrast.
 */

/*
 * Color palette: "Die Werkstatt" (The Workshop)
 */
@define-color unixnotis-surface-base #e8e6e1;        /* Concrete / Unbleached Paper */
@define-color unixnotis-surface-strong-base #dcdad5; /* Structural Grey */
@define-color unixnotis-card-base #f2f0eb;           /* Bright Paper */

/* Absolute opacity. Structure is solid. */
@define-color unixnotis-surface @unixnotis-surface-base;
@define-color unixnotis-surface-strong @unixnotis-surface-strong-base;
@define-color unixnotis-surface-soft #d4d2cd;
@define-color unixnotis-card @unixnotis-card-base;

/* Typography: Ink Black */
@define-color unixnotis-text #1a1a1a;
@define-color unixnotis-muted #555555;

/* Functional Accents (Bauhaus Primaries) */
@define-color unixnotis-accent #b83618;     /* Brick/Signal Red */
@define-color unixnotis-accent-2 #2b5d8c;   /* Mechanic Blue */
@define-color unixnotis-urgent #d92121;     /* Alarm Red */

/* Toggles: Distinct industrial indicators */
@define-color unixnotis-accent-wifi #2b5d8c;      /* Blue */
@define-color unixnotis-accent-bluetooth #2b5d8c; /* Blue */
@define-color unixnotis-accent-airplane #e09f1f;  /* Amber Signal */
@define-color unixnotis-accent-night #3b557a;     /* Slate Blue */

/* Borders: Heavy Iron */
@define-color unixnotis-card-border #1a1a1a;
@define-color unixnotis-outline #1a1a1a;

/* Shadows: Hard cast shadows, no blur (simulating print/offset) */
@define-color unixnotis-shadow-soft alpha(#000000, 0.15);
@define-color unixnotis-shadow-strong #000000;

/* No Glows. Only ink. */
@define-color unixnotis-glow-cyan transparent;
@define-color unixnotis-glow-violet transparent;
@define-color unixnotis-glow-wifi transparent;
@define-color unixnotis-glow-bluetooth transparent;
@define-color unixnotis-glow-airplane transparent;
@define-color unixnotis-glow-night transparent;

/*
 * Theme hooks
 */
@define-color unixnotis-panel-grad-1 @unixnotis-surface-base;
@define-color unixnotis-panel-grad-2 @unixnotis-surface-base;
@define-color unixnotis-panel-grad-3 @unixnotis-surface-base;

@define-color unixnotis-notification-bg-1 @unixnotis-card-base;
@define-color unixnotis-notification-bg-2 @unixnotis-card-base;

@define-color unixnotis-popup-bg-1 @unixnotis-surface-base;
@define-color unixnotis-popup-bg-2 @unixnotis-surface-base;

@define-color unixnotis-pill-bg #1a1a1a;
@define-color unixnotis-pill-border #1a1a1a;
@define-color unixnotis-pill-hover #333333;

@define-color unixnotis-action-bg #dcdad5;
@define-color unixnotis-action-bg-hover #c0beba;
@define-color unixnotis-action-bg-active @unixnotis-accent;

@define-color unixnotis-popup-action-bg #dcdad5;
@define-color unixnotis-popup-action-hover #c0beba;
@define-color unixnotis-popup-action-active @unixnotis-accent;

/* Global styling */
.unixnotis-panel-window,
.unixnotis-popup-window {
  background: transparent;
  /* Use a clean sans-serif if available, otherwise fallback */
  font-family: "Manrope", "Futura", "Helvetica", sans-serif;
}
panel.css 
/* UnixNotis panel theme (Bauhaus/Industrial) */

.unixnotis-panel {
  background: @unixnotis-surface-base;
  color: @unixnotis-text;
  border-radius: 0;
  padding: 16px;
  border: 3px solid @unixnotis-outline;
  /* Keep the panel width visually stable; keep in sync with config.toml [panel].width. */
  min-width: 420px;
  /* Hard shadow for depth */
  box-shadow: 6px 6px 0 0 @unixnotis-shadow-strong;
}

.unixnotis-panel-window {
  /* Anchor panel width to the configured size to prevent width jitter on open. */
  min-width: 420px;
}

.unixnotis-panel-window scrollbar,
.unixnotis-panel-window scrollbar trough,
.unixnotis-panel-window scrollbar slider {
  min-width: 12px;
}

.unixnotis-panel-window scrollbar:hover,
.unixnotis-panel-window scrollbar trough:hover,
.unixnotis-panel-window scrollbar slider:hover {
  min-width: 12px;
}

.unixnotis-panel-header {
  margin-bottom: 16px;
  padding: 12px;
  border-radius: 0;
  background: @unixnotis-surface-strong;
  border: 2px solid @unixnotis-outline;
  border-bottom-width: 4px;
}

.unixnotis-panel-title {
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.unixnotis-panel-count {
  background: @unixnotis-accent;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 0;
  padding: 2px 8px;
  border: 2px solid @unixnotis-outline;
  min-width: 24px;
}

.unixnotis-panel-action {
  background: @unixnotis-action-bg;
  color: @unixnotis-text;
  border-radius: 0;
  padding: 6px 12px;
  border: 2px solid @unixnotis-outline;
  min-height: 32px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 0 @unixnotis-outline;
}

.unixnotis-panel-action:hover {
  background: @unixnotis-action-bg-hover;
  box-shadow: 2px 2px 0 0 @unixnotis-outline;
}

.unixnotis-panel-action:checked {
  background: @unixnotis-accent;
  color: #ffffff;
  /* Pressed styling avoids motion to keep header width stable on hover. */
  box-shadow: inset 2px 2px 0 0 rgba(0, 0, 0, 0.35);
}

.unixnotis-panel-close,
.unixnotis-popup-close {
  background: #ffffff;
  border-radius: 0;
  border: 2px solid @unixnotis-outline;
  padding: 4px;
  min-width: 32px;
  min-height: 32px;
  color: @unixnotis-text;
  box-shadow: 2px 2px 0 0 @unixnotis-outline;
}

.unixnotis-panel-close:hover,
.unixnotis-popup-close:hover {
  background: @unixnotis-urgent;
  color: #ffffff;
}

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

.unixnotis-group {
  margin-bottom: 16px;
}

.unixnotis-group-header {
  background: @unixnotis-pill-bg;
  color: #ffffff;
  border-radius: 0;
  padding: 8px 12px;
  border: 2px solid @unixnotis-pill-border;
  box-shadow: 4px 4px 0 0 alpha(@unixnotis-shadow-strong, 0.2);
}

.unixnotis-group-header:hover {
  background: @unixnotis-pill-hover;
}

.unixnotis-group-count {
  background: #ffffff;
  color: @unixnotis-text;
  border: 2px solid @unixnotis-text;
  border-radius: 0;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 800;
}

/* 
 * Notification Card Styling - High Contrast Fix 
 */
.unixnotis-panel-card {
  background: @unixnotis-notification-bg-1; /* Light paper color */
  border: 2px solid @unixnotis-card-border;
  border-radius: 0;
  padding: 12px;
  margin-bottom: 8px;
  box-shadow: 4px 4px 0 0 @unixnotis-outline;
  color: @unixnotis-text; /* Force black text */
}

.unixnotis-panel-summary {
  font-weight: 800;
  font-size: 14px;
  color: @unixnotis-text; /* Force black */
  margin-bottom: 4px;
}

.unixnotis-panel-body {
  font-size: 13px;
  color: @unixnotis-text; /* Force black */
  opacity: 0.9;
  font-family: monospace;
}

.unixnotis-stack-ghost {
  background: repeating-linear-gradient(
    45deg,
    @unixnotis-surface-soft,
    @unixnotis-surface-soft 2px,
    @unixnotis-surface-base 2px,
    @unixnotis-surface-base 4px
  );
  border: 2px dashed @unixnotis-outline;
  border-radius: 0;
  margin-top: -12px;
  opacity: 1;
  box-shadow: none;
}

.unixnotis-panel-card.active {
  border-color: @unixnotis-accent;
  box-shadow: 6px 6px 0 0 @unixnotis-accent;
}

.unixnotis-panel-card.critical {
  border-color: @unixnotis-urgent;
  background: #fff0f0; /* Very light red for background */
  color: #000000;
  box-shadow: 6px 6px 0 0 @unixnotis-urgent;
}

.unixnotis-empty-label {
  color: @unixnotis-muted;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background-image: repeating-linear-gradient(
    45deg,
    @unixnotis-surface-strong,
    @unixnotis-surface-strong 2px,
    @unixnotis-surface-base 2px,
    @unixnotis-surface-base 8px
  );
  padding: 12px 24px;
  border: 2px dashed @unixnotis-outline;
}

.unixnotis-panel-app {
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  color: @unixnotis-text;
  border-bottom: 2px solid @unixnotis-accent;
  margin-bottom: 4px;
}

.unixnotis-notification-action {
  background: #ffffff;
  border-radius: 0;
  padding: 6px 12px;
  border: 2px solid @unixnotis-outline;
  color: @unixnotis-text;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 0 @unixnotis-outline;
}

.unixnotis-notification-action:hover {
  background: @unixnotis-action-bg-hover;
  box-shadow: 2px 2px 0 0 @unixnotis-outline;
}
popup.css 
/* UnixNotis popup theme (Bauhaus/Industrial) */

.unixnotis-popup-stack {
  padding: 16px;
  background: transparent;
}

.unixnotis-popup-card {
  background: @unixnotis-popup-bg-1;
  color: @unixnotis-text; /* Force black text */
  border-radius: 0;
  padding: 16px;
  border: 3px solid @unixnotis-outline;
  border-bottom-width: 4px;
  /* Scanline texture reinforces the CRT-inspired look. */
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.08),
    rgba(0, 0, 0, 0.08) 2px,
    transparent 2px,
    transparent 6px
  );
  /* Very prominent hard shadow */
  box-shadow: 8px 8px 0 0 @unixnotis-shadow-strong;
}

.unixnotis-popup-card.critical {
  border-color: @unixnotis-urgent;
  box-shadow: 8px 8px 0 0 @unixnotis-urgent;
  background: #fff0f0;
  color: #000000;
}

.unixnotis-popup-header-row {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid @unixnotis-outline;
  background: @unixnotis-surface-strong;
  padding: 8px 10px;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.35);
}

.unixnotis-popup-header {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: @unixnotis-text;
}

.unixnotis-popup-summary {
  font-weight: 700;
  font-size: 14px;
  margin-top: 4px;
  color: @unixnotis-text;
  border-left: 4px solid @unixnotis-accent;
  padding-left: 8px;
}

.unixnotis-popup-body {
  color: @unixnotis-text;
  font-size: 13px;
  margin-top: 6px;
  font-family: monospace; /* Typewriter feel */
  line-height: 1.35;
}

.unixnotis-popup-actions {
  margin-top: 16px;
}

.unixnotis-popup-action {
  background: @unixnotis-popup-action-bg;
  color: @unixnotis-text;
  border-radius: 0;
  padding: 6px 12px;
  border: 2px solid @unixnotis-outline;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 0 @unixnotis-outline;
}

.unixnotis-popup-action:hover {
  background: @unixnotis-popup-action-hover;
  /* Hover keeps the button position stable to prevent jitter. */
  box-shadow: 3px 3px 0 0 @unixnotis-outline;
}

.unixnotis-popup-action:active {
  background: @unixnotis-popup-action-active;
  color: #ffffff;
  box-shadow: inset 2px 2px 0 0 rgba(0,0,0,0.4);
  /* Active state uses inset shadow without moving the button. */
}
widgets.css 
/* UnixNotis widgets theme (Retro Industrial / pressed-depth) */

/*
 * Sliders (Mechanical Gauges)
 */
.unixnotis-quick-slider {
  background: @unixnotis-surface-strong;
  border-radius: 0;
  padding: 12px;
  border: 2px solid @unixnotis-outline;
  /* "Raised" look: light top/left, dark bottom/right shadow */
  box-shadow: 
    inset 2px 2px 0px rgba(255, 255, 255, 0.4),
    inset -2px -2px 0px rgba(0, 0, 0, 0.4),
    4px 4px 0 0 @unixnotis-shadow-strong;
}

.unixnotis-quick-slider:hover {
  box-shadow: 
    inset 2px 2px 0px rgba(255, 255, 255, 0.5),
    inset -2px -2px 0px rgba(0, 0, 0, 0.5),
    4px 4px 0 0 @unixnotis-shadow-strong;
}

.unixnotis-quick-slider-icon {
  background: @unixnotis-text;
  color: @unixnotis-surface-base;
  border-radius: 0;
  padding: 6px;
  border: 1px solid @unixnotis-text;
}

.unixnotis-quick-slider-scale trough {
  background: #ffffff;
  border-radius: 0;
  min-height: 12px;
  border: 2px solid @unixnotis-outline;
  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.3);
}

.unixnotis-quick-slider-scale highlight {
  background: @unixnotis-text;
  border-radius: 0;
  border: 2px solid @unixnotis-outline;
  margin: -2px;
}

.unixnotis-quick-slider-scale slider {
  background: @unixnotis-accent;
  border-radius: 0;
  min-width: 14px;
  min-height: 24px;
  margin: -6px;
  border: 2px solid @unixnotis-outline;
  box-shadow: 2px 2px 0 0 rgba(0,0,0,0.5);
}

/*
 * Toggles (Physical Switches)
 */

/* OFF State: "Raised" but inactive */
.unixnotis-toggle {
  background-color: @unixnotis-surface-base;
  background-image: repeating-linear-gradient(
    45deg,
    @unixnotis-surface-strong,
    @unixnotis-surface-strong 2px,
    transparent 2px,
    transparent 8px
  );
  border-radius: 0;
  padding: 10px;
  border: 2px solid @unixnotis-outline;
  /* Fixed minimum width keeps the 4-column toggle grid stable across states. */
  min-width: 90px;
  min-height: 60px;
  box-shadow:
    inset 2px 2px 0px rgba(255, 255, 255, 0.7),
    inset -2px -2px 0px rgba(0, 0, 0, 0.3),
    4px 4px 0 0 @unixnotis-shadow-strong;
  color: @unixnotis-muted;
  /* Immediate feedback keeps toggle state changes snappy. */
}

.unixnotis-toggle:hover {
  background-image: none;
  background-color: #ffffff;
  box-shadow:
    inset 2px 2px 0px rgba(255, 255, 255, 0.9),
    inset -2px -2px 0px rgba(0, 0, 0, 0.4),
    4px 4px 0 0 @unixnotis-shadow-strong;
  color: @unixnotis-text;
}

/* ON State: "Depressed/Pressed In" */
.unixnotis-toggle:checked {
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.08) 2px,
    transparent 2px,
    transparent 4px
  );
  /* Keep border width stable; rely on inset shadow for the pressed effect. */
  border-color: @unixnotis-text;
  border-width: 2px;
  box-shadow:
    inset 4px 4px 0px rgba(0, 0, 0, 0.6),
    inset -2px -2px 0px rgba(255, 255, 255, 0.18),
    inset 0 0 0 2px rgba(255, 255, 255, 0.12),
    2px 2px 0 0 @unixnotis-shadow-strong;
  color: #ffffff;
}

/* Checked typography is separated to avoid duplicate selector overrides. */
.unixnotis-toggle:checked .unixnotis-toggle-label {
  color: #ffffff;
  text-shadow: 1px 1px 0px rgba(0,0,0,0.5);
}

/* Toggle content typography keeps the control legible at small widths. */
.unixnotis-toggle-content {
  letter-spacing: 0.04em;
}

.unixnotis-toggle-label {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 1.1;
}

.unixnotis-toggle-icon {
  padding: 4px;
  border: 2px solid @unixnotis-outline;
  background: #ffffff;
  /* Small bezel to reinforce the physical switch look. */
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.6);
}

/* Icon styling keeps the bezel readable without redefining the label rule. */
.unixnotis-toggle:checked .unixnotis-toggle-icon {
  color: #ffffff;
  text-shadow: 1px 1px 0px rgba(0,0,0,0.5);
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(0, 0, 0, 0.6);
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.25),
    inset 1px 1px 0 rgba(255, 255, 255, 0.2);
}

/* Specific Colors for ON state - Deep, Industrial Tones */
.unixnotis-toggle.unixnotis-toggle-kind-wifi:checked {
  background-color: @unixnotis-accent-wifi;
  border-color: shade(@unixnotis-accent-wifi, 0.6);
  box-shadow:
    inset 4px 4px 0px rgba(0, 0, 0, 0.55),
    inset -2px -2px 0px rgba(255, 255, 255, 0.18),
    2px 2px 0 0 shade(@unixnotis-accent-wifi, 0.6);
}

.unixnotis-toggle.unixnotis-toggle-kind-bluetooth:checked {
  background-color: @unixnotis-accent-bluetooth;
  border-color: shade(@unixnotis-accent-bluetooth, 0.6);
  box-shadow:
    inset 4px 4px 0px rgba(0, 0, 0, 0.55),
    inset -2px -2px 0px rgba(255, 255, 255, 0.18),
    2px 2px 0 0 shade(@unixnotis-accent-bluetooth, 0.6);
}

.unixnotis-toggle.unixnotis-toggle-kind-airplane:checked {
  background-color: @unixnotis-accent-airplane;
  border-color: shade(@unixnotis-accent-airplane, 0.6);
  color: #ffffff;
  box-shadow:
    inset 4px 4px 0px rgba(0, 0, 0, 0.55),
    inset -2px -2px 0px rgba(255, 255, 255, 0.18),
    2px 2px 0 0 shade(@unixnotis-accent-airplane, 0.6);
}

.unixnotis-toggle.unixnotis-toggle-kind-night:checked {
  background-color: @unixnotis-accent-night;
  border-color: shade(@unixnotis-accent-night, 0.6);
  box-shadow:
    inset 4px 4px 0px rgba(0, 0, 0, 0.55),
    inset -2px -2px 0px rgba(255, 255, 255, 0.18),
    2px 2px 0 0 shade(@unixnotis-accent-night, 0.6);
}


/*
 * Stats & Info Cards
 */
.unixnotis-stat-card,
.unixnotis-info-card {
  background: @unixnotis-surface-base;
  border-radius: 0;
  padding: 10px;
  border: 2px solid @unixnotis-outline;
  box-shadow:
    inset 1px 1px 0px rgba(255, 255, 255, 0.5),
    4px 4px 0 0 @unixnotis-shadow-strong;
}

.unixnotis-stat-card:hover {
  background: #ffffff;
}

.unixnotis-stat-icon {
  border: 2px solid @unixnotis-text;
  padding: 4px;
}

.unixnotis-stat-value {
  font-weight: 800;
  font-size: 16px;
  font-family: monospace;
}

/*
 * Weather Card: "LCD Display" Look
 */
.unixnotis-info-card-weather {
  background-color: @unixnotis-card;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.04),
    rgba(0, 0, 0, 0.04) 2px,
    transparent 2px,
    transparent 6px
  );
  color: @unixnotis-text;
  border: 2px solid @unixnotis-outline;
  border-radius: 0;
  box-shadow: 
    inset 1px 1px 0 rgba(255, 255, 255, 0.45),
    4px 4px 0 0 @unixnotis-shadow-strong;
  padding: 12px;
}

.unixnotis-info-card-weather .unixnotis-info-header {
  /* Header band separates the title from the readout. */
  background: @unixnotis-surface-strong;
  border: 2px solid @unixnotis-outline;
  padding: 4px 6px;
  margin-bottom: 10px;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.45);
}

.unixnotis-info-card-weather .unixnotis-info-title {
  color: @unixnotis-text;
  text-transform: uppercase;
  font-weight: 800;
  font-family: monospace;
  font-size: 12px;
  opacity: 0.8;
  letter-spacing: 0.12em;
}

.unixnotis-info-card-weather .unixnotis-info-body {
  color: @unixnotis-text;
  font-weight: 900;
  font-size: 22px;
  font-family: monospace;
  letter-spacing: 0.06em;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.15);
  line-height: 1.2;
}

.unixnotis-info-icon-weather {
  color: @unixnotis-text;
  border: 2px solid @unixnotis-outline;
  background: @unixnotis-surface-base;
  padding: 3px;
}

/*
 * Calendar: "Paper Schedule" Look
 */
.unixnotis-calendar {
  background-color: #ffffff;
  color: @unixnotis-text;
  border: 2px solid @unixnotis-outline;
  font-family: monospace;
  padding: 8px;
}

.unixnotis-calendar .header {
  color: @unixnotis-text;
  font-weight: 800;
  text-transform: uppercase;
  border-bottom: 2px solid @unixnotis-outline;
}

.unixnotis-calendar:selected {
  background-color: @unixnotis-accent;
  color: #ffffff;
  border-radius: 0;
  font-weight: 900;
  box-shadow: 2px 2px 0 0 @unixnotis-outline;
}

/*
 * Media Player (Radio Console)
 */
.unixnotis-media-card {
  background: @unixnotis-card-base;
  border-radius: 0;
  border: 3px solid @unixnotis-outline;
  padding: 12px;
  box-shadow: 6px 6px 0 0 @unixnotis-shadow-strong;
}

.unixnotis-media-art-frame {
  border-radius: 0;
  border: 2px solid @unixnotis-outline;
  padding: 2px;
  background: #ffffff;
}

.unixnotis-media-title {
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.unixnotis-media-artist {
  font-family: monospace;
  color: @unixnotis-muted;
}

.unixnotis-media-button {
  background: @unixnotis-surface-strong;
  border-radius: 0;
  border: 2px solid @unixnotis-outline;
  padding: 6px;
  min-width: 32px;
  min-height: 32px;
  color: @unixnotis-text;
  box-shadow: 2px 2px 0 0 @unixnotis-outline;
}

.unixnotis-media-button:hover {
  background: #ffffff;
  box-shadow: 2px 2px 0 0 @unixnotis-outline;
}

.unixnotis-media-button:active {
  background: @unixnotis-text;
  color: #ffffff;
  box-shadow: inset 2px 2px 0 0 rgba(0,0,0,0.5);
}

.unixnotis-media-button.primary {
  background: @unixnotis-accent;
  color: #ffffff;
}

.unixnotis-media-button.primary:hover {
  background: @unixnotis-urgent;
}

.unixnotis-media-nav {
  background: @unixnotis-surface-strong;
  color: @unixnotis-text;
  border: 2px solid @unixnotis-outline;
  border-radius: 0;
  padding: 0;
  min-width: 28px;
  min-height: 28px;
  font-weight: 900;
}

.unixnotis-media-nav image {
  margin: 0;
}

.unixnotis-media-nav:hover {
  background: #ffffff;
  color: @unixnotis-accent;
}
installer.toml 
# UnixNotis installer settings
# Backup retention for config/theme resets.
[backups]
keep = 3

UnixNotis

Examples

Clone this wiki locally