fix(ui): make toast notifications opaque instead of ~50% transparent

[schubydoo]

Reported: the toast/notification box is too transparent — dashboard content shows through it.

Root cause: toasts are Tabler .alert cards (.toast-stack → .alert.alert-*). Tabler computes .alert background as color-mix(in srgb, var(--tblr-alert-bg), var(--tblr-bg-surface)) where --tblr-alert-bg is itself color-mix(… 10%, transparent) — so the fill lands ~50% opaque over the fixed-position toast and the page shows through.

Fix: one CSS rule scoped to .toast-stack .alert that re-mixes the per-type tint (var(--tblr-alert-color)) into the solid var(--tblr-bg-surface), so the toast is opaque while keeping its per-type colour. Theme-safe (both vars are theme-reactive).

.toast-stack .alert { background-color: color-mix(in srgb, var(--tblr-alert-color) 12%, var(--tblr-bg-surface)); }

Reviewed by clauster-frontend-reviewer: APPROVE — specificity (0,2,0) wins over Tabler .alert (0,1,0) without !important, scoped to only the toast region (no collateral on the ~15 other .alert uses), contrast-neutral (≤0.2 delta), holds in light + dark themes, zero XSS surface.

[greptile-apps]

Greptile Summary

Fixes toast/notification transparency by adding one scoped CSS rule that overrides Tabler's default semi-transparent alert background with a solid color-mix of the per-type tint and the solid surface variable.

• .toast-stack .alert gets background-color: color-mix(in srgb, var(--tblr-alert-color) 12%, var(--tblr-bg-surface)) — specificity 0-2-0 beats Tabler's 0-1-0, stays scoped to the toast region only, and is theme-reactive.
• No other alert uses across the page are touched; --tblr-alert-color is already set per-type by Tabler's modifier classes (.alert-success, .alert-danger, etc.).

Confidence Score: 5/5

Minimal, well-scoped CSS change with no behavioural side-effects beyond the intended toast region.

The change is a single CSS rule touching only the toast overlay area. It uses only stable, already-required CSS features (color-mix() is already a Tabler baseline), and the rule is correctly scoped so it cannot affect the ~15 other .alert uses on the page. No logic, data, or template code is modified.

No files require special attention.

Important Files Changed

Filename	Overview
src/clauster/templates/dashboard.html	Adds a single scoped CSS rule to make .toast-stack .alert backgrounds opaque by re-mixing the per-type tint colour into the solid surface variable, overriding Tabler's default transparent computation.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Toast rendered as .toast-stack .alert.alert-*] --> B{Which CSS selector wins?}
    B -->|Tabler default: specificity 0-1-0| C[".alert background-color\ncolor-mix(...tblr-alert-bg... tblr-bg-surface)\nwhere tblr-alert-bg itself uses transparent\n→ ~50% opacity"]
    B -->|New override: specificity 0-2-0| D[".toast-stack .alert background-color\ncolor-mix(in srgb, tblr-alert-color 12%, tblr-bg-surface)\n→ solid / opaque"]
    C --> E["❌ Dashboard content visible through toast"]
    D --> F["✅ Opaque toast, per-type tint preserved,\nworks in light + dark themes"]

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A[Toast rendered as .toast-stack .alert.alert-*] --> B{Which CSS selector wins?}
    B -->|Tabler default: specificity 0-1-0| C[".alert background-color\ncolor-mix(...tblr-alert-bg... tblr-bg-surface)\nwhere tblr-alert-bg itself uses transparent\n→ ~50% opacity"]
    B -->|New override: specificity 0-2-0| D[".toast-stack .alert background-color\ncolor-mix(in srgb, tblr-alert-color 12%, tblr-bg-surface)\n→ solid / opaque"]
    C --> E["❌ Dashboard content visible through toast"]
    D --> F["✅ Opaque toast, per-type tint preserved,\nworks in light + dark themes"]

Loading

_{Reviews (4): Last reviewed commit: "Merge main into fix/toast-opacity" | Re-trigger Greptile}