/* -------------------------------------------------------------------------- Toast — aligned with Min side 2026, 2026-08-21. Source: `minside2026/css/components.css`, the `.ms26-alert` block (line 296) and the `.ms26-toast` wrapper (line 1053). There, a toast is a plain alert card that a fixed wrapper pins top-right and stacks: a 6 px left edge carries the severity, an icon and the text say the same thing so nothing is carried by colour alone, and the close control is a labelled button rather than a bare glyph. **This is CSS only, and it has to be.** The markup comes from `addToast()` in `wwwroot/js/site.js` and the wrapper from `_ToastWraper.cshtml` — both shared with the legacy shell, like `Validation.js`. Every rule here is therefore prefixed `.inn-body`, the class only `_LayoutNew.cshtml` puts on ``, so legacy keeps the centred grey-header toast it has today. `toast.css` still loads after this file in `_StylesNew.cshtml`, so each rule below is one class deeper than the one it replaces. That is deliberate rather than incidental: raising specificity is how this file wins without touching the shared sheet. **Severity is read from the icon's filename.** `addToast()` writes the state into the `src` and into nothing else — no class, no attribute — so `:has(img[src$="…"])` is the only hook available without editing that shared function. It is a real coupling and it is named here so it is a decision: if the toast images are ever renamed, these three rules stop matching and every toast falls back to the neutral card, which is a degradation rather than a break. -------------------------------------------------------------------------- */ .inn-body .toastContainer { top: 16px; right: 16px; left: auto; transform: none; } .inn-body #toastWrapper-js { align-items: stretch; gap: 8px; } .inn-body .toast { width: auto; max-width: min(92vw, 420px); margin-bottom: 0; border: 1px solid var(--c-border); border-left: 6px solid var(--c-border-strong); border-radius: var(--k-radius); background: var(--c-surface); /* `!important` answers `toast.css`'s own `!important` on the same property. It is not a new pattern being introduced — it is the only way to replace a declaration that already carries one, short of editing the shared sheet. */ box-shadow: 0 8px 24px rgba(5, 9, 13, 0.28) !important; } /* The header row loses its grey band: in the Min side card the icon, title and close control sit directly on the card surface, and the severity is carried by the left edge instead. */ .inn-body .toast .toast-header { gap: 14px; padding: 12px 12px 0 18px; border-bottom: 0; background: transparent; color: var(--c-fg); font-size: 1.05rem; font-weight: 700; } .inn-body .toast .toast-icon { width: 22px; height: 22px; /* `!important` because the markup carries `style="margin-right: 16px"`, and an inline declaration is only outranked by one. The gap now comes from the flex row, so the title lines up with the body text below it instead of sitting 16 px further right. */ margin-right: 0 !important; } /* Same reason: the markup puts `style="margin-left: 8px"` on the title. Left alone, the title starts 8 px right of the body text under it, which is the misalignment that made the card look untidy. */ .inn-body .toast .toast-header strong { flex: 1 1 auto; min-width: 0; margin-left: 0 !important; } /* Aligned under the title rather than under the icon — 18 px of card padding plus the 22 px icon plus the 14 px gap. */ .inn-body .toast .toast-body { padding: 2px 18px 16px 54px; background: transparent; color: var(--c-fg-muted); font-size: 1rem; line-height: 1.5; border-radius: 0; } /* Close control — a round icon button. ------------------------------------------------------------------------------------------------- **Two things had to be fixed here, and the first was a real bug.** Bootstrap declares `.btn-close { box-sizing: content-box; width: 1em; height: 1em }`, and this file did not override the width. Whatever the button contained was laid out inside a 1em box and spilled out of the card — which is exactly what `Test-result/popup2.png` shows, the label hanging off the right edge. The second is the design choice that followed. Min side's control is the text `✕ Lukk`, and this file first copied that. It reads badly here: the markup ships a literal ` X `, so the glyph is a capital letter X rather than a multiplication sign, and adding a word beside it made a wide control fighting for room with a title on a 420 px card. So this is an icon button instead — a proper ✕ drawn from a mask, in a 36 px round target. **The accessible name does not change.** `addToast()` writes `aria-label="Lukk"` on this button, so removing the visible word removes nothing a screen reader announces. The mask is decorative and the literal `X` in the markup is hidden, not deleted, so nothing depends on editing the shared script. */ .inn-body .toast .btn-close { flex: none; box-sizing: border-box; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: none; color: var(--c-fg-muted); opacity: 1; transition: background-color 0.15s ease, color 0.15s ease; } /* The markup's own ` X `. Hidden rather than replaced — `site.js` writes it and is shared with the legacy shell. */ .inn-body .toast .btn-close > * { display: none; } /* `mask` plus `currentColor` rather than a coloured SVG, so the glyph follows the button's own colour through hover and forced-colors instead of being baked in. */ .inn-body .toast .btn-close::before { content: ""; width: 13px; height: 13px; background-color: currentColor; -webkit-mask: var(--inn-icon-close) center / contain no-repeat; mask: var(--inn-icon-close) center / contain no-repeat; } .inn-body .toast .btn-close:hover, .inn-body .toast .btn-close:focus-visible { background: rgba(18, 24, 31, 0.08); color: var(--c-fg); opacity: 1; } .inn-body .toast:has(.toast-icon[src$="toast-success.png"]) { border-color: var(--c-ok-border); border-left-color: var(--c-ok); background: var(--c-ok-bg); } .inn-body .toast:has(.toast-icon[src$="toast-info.png"]) { border-color: var(--c-primary-soft-border); border-left-color: var(--c-primary); background: var(--c-primary-tint); } .inn-body .toast:has(.toast-icon[src$="toast-error.png"]) { border-color: var(--c-err-border); border-left-color: var(--c-err); background: var(--c-err-bg); }