/* =====================================================================
SecureShield shared notification / status presentation layer.
Presentation only — this file does not decide when an error, success,
or warning happens; callers already do that. It only standardizes how
those states LOOK, so a failed save on Settings and a failed check on
Websites feel like the same product. Safe to include on any page:
every rule below is additive and falls back to sane hex defaults if a
page hasn't defined --success/--error/--warning (or --green/--red/
--yellow) itself, so it never depends on which token set a given page
already uses.
===================================================================== */
/* ---- shared color fallbacks (only used when a page defines neither
its own --success/--error/--warning nor --green/--red/--yellow) ---- */
:root {
--ss-success: var(--success, var(--green, #1f8a5f));
--ss-error: var(--error, var(--red, #c0392b));
--ss-warning: var(--warning, var(--yellow, #b7791f));
--ss-info: var(--purple-light, #17654b);
--ss-radius: var(--radius-md, var(--radius, 10px));
--ss-border: var(--border, #e9edf0);
--ss-surface: var(--surface-2, var(--surface, #ffffff));
--ss-text: var(--text, #202a31);
}
/* ---------------------------------------------------------------------
Status box (inline, near-the-action messages) — icon + text, used for
form/action results: "Could not add website", "Saved.", etc. Markup is
unchanged (`message
`); the icon is
pure CSS so no caller needs to change what it renders.
--------------------------------------------------------------------- */
/* Positioned (not flex) on purpose: several status-box call sites nest
mixed content — inline links, a monospace API-key block, etc. Flex
would turn each of those into a separate flex item and break their
natural text flow / stacking, so the icon is laid on top instead via
absolute positioning, leaving the box's own content flow untouched. */
.status-box.error,
.status-box.success,
.status-box.warning {
position: relative;
padding-left: 2.35rem;
}
.status-box.error::before,
.status-box.success::before,
.status-box.warning::before {
content: '';
position: absolute;
left: 0.85rem;
top: 0.9rem;
width: 16px;
height: 16px;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.status-box.error::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%227.5%22%20x2%3D%2212%22%20y2%3D%2213%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2216.3%22%20r%3D%220.6%22%20fill%3D%22black%22%20stroke%3D%22none%22/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%227.5%22%20x2%3D%2212%22%20y2%3D%2213%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2216.3%22%20r%3D%220.6%22%20fill%3D%22black%22%20stroke%3D%22none%22/%3E%3C/svg%3E");
}
.status-box.success::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M8.2%2012.5%2011%2015.3l4.8-6%22/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22/%3E%3Cpath%20d%3D%22M8.2%2012.5%2011%2015.3l4.8-6%22/%3E%3C/svg%3E");
}
.status-box.warning::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.29%203.86%201.82%2018a2%202%200%200%200%201.71%203h16.94a2%202%200%200%200%201.71-3L13.71%203.86a2%202%200%200%200-3.42%200Z%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%229%22%20x2%3D%2212%22%20y2%3D%2213%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2216.3%22%20r%3D%220.6%22%20fill%3D%22black%22%20stroke%3D%22none%22/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.29%203.86%201.82%2018a2%202%200%200%200%201.71%203h16.94a2%202%200%200%200%201.71-3L13.71%203.86a2%202%200%200%200-3.42%200Z%22/%3E%3Cline%20x1%3D%2212%22%20y1%3D%229%22%20x2%3D%2212%22%20y2%3D%2213%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2216.3%22%20r%3D%220.6%22%20fill%3D%22black%22%20stroke%3D%22none%22/%3E%3C/svg%3E");
}
/* ---------------------------------------------------------------------
Page-level fatal-error state — replaces a page's main content when its
initial load fails outright. Calm, not alarming: neutral/brand tint,
not red, since this is "we couldn't reach the server," not a security
incident. Sidebar/nav stays untouched by callers; this only styles
the block they swap in.
--------------------------------------------------------------------- */
.page-fatal-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 0.85rem;
min-height: 320px;
margin: 2rem auto;
padding: 2.5rem 1.5rem;
max-width: 420px;
color: var(--text-secondary, #626a70);
}
.page-fatal-error .icon-badge {
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #17654b26;
color: var(--purple-light, #17654b);
margin-bottom: 0.15rem;
}
.page-fatal-error .icon-badge svg { width: 24px; height: 24px; }
.page-fatal-error h2 {
color: var(--text, #202a31);
font-size: 1.05rem;
font-weight: 600;
margin: 0;
}
.page-fatal-error p {
margin: 0;
font-size: 0.88rem;
line-height: 1.55;
max-width: 320px;
}
.page-fatal-error button {
margin-top: 0.4rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.3rem;
border-radius: var(--ss-radius);
border: 1px solid var(--border-hover, #e9edf0);
background: var(--ss-surface);
color: var(--ss-text);
font-size: 0.87rem;
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease, transform 0.15s ease;
}
.page-fatal-error button:hover { background: var(--surface-3, #e9edf0); transform: translateY(-1px); }
.page-fatal-error button:active { transform: translateY(0); }
.page-fatal-error button svg { width: 15px; height: 15px; }
/* ---------------------------------------------------------------------
Toast notifications — replaces browser alert() for anything that isn't
already shown inline next to a form. Stacked, dismissible, auto-expiring.
--------------------------------------------------------------------- */
#ss-toast-container {
position: fixed;
top: 1rem;
right: 1rem;
left: auto;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 0.6rem;
width: min(360px, calc(100vw - 2rem));
pointer-events: none;
}
@media (max-width: 560px) {
#ss-toast-container {
top: 0.75rem;
right: 0.75rem;
width: calc(100vw - 1.5rem);
}
}
.ss-toast {
pointer-events: auto;
display: flex;
align-items: flex-start;
gap: 0.65rem;
padding: 0.8rem 0.85rem;
border-radius: var(--ss-radius);
border: 1px solid var(--ss-border);
background: var(--ss-surface);
box-shadow: 0 12px 32px rgba(0,0,0,0.4);
color: var(--ss-text);
font-size: 0.85rem;
line-height: 1.45;
opacity: 0;
transform: translateY(-10px) scale(0.98);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.ss-toast--visible { opacity: 1; transform: translateY(0) scale(1); }
.ss-toast--leaving { opacity: 0; transform: translateY(-6px) scale(0.98); }
.ss-toast__icon {
flex: 0 0 auto;
width: 17px;
height: 17px;
margin-top: 1px;
}
.ss-toast__icon svg { width: 100%; height: 100%; }
.ss-toast--error { border-color: rgba(248,113,113,0.3); }
.ss-toast--error .ss-toast__icon { color: var(--ss-error); }
.ss-toast--success { border-color: rgba(52,211,153,0.3); }
.ss-toast--success .ss-toast__icon { color: var(--ss-success); }
.ss-toast--warning { border-color: rgba(251,191,36,0.3); }
.ss-toast--warning .ss-toast__icon { color: var(--ss-warning); }
.ss-toast--info .ss-toast__icon { color: var(--ss-info); }
.ss-toast__message { flex: 1 1 auto; word-break: break-word; }
.ss-toast__close {
flex: 0 0 auto;
background: none;
border: none;
color: var(--text-tertiary, #7a8791);
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
padding: 0;
margin-left: 0.2rem;
}
.ss-toast__close:hover { color: var(--ss-text); }
/* ---------------------------------------------------------------------
Inline button-loading spinner — for buttons that show "Saving…",
"Checking…" etc. while a request is in flight. Pure CSS animation;
callers just add before the label.
--------------------------------------------------------------------- */
.btn-spinner {
display: inline-block;
width: 13px;
height: 13px;
vertical-align: -2px;
margin-right: 0.4rem;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: currentColor;
animation: ss-spin 0.7s linear infinite;
}
@keyframes ss-spin { to { transform: rotate(360deg); } }
/* Prevent layout shift on small screens from long toast/status text */
@media (max-width: 480px) {
.status-box { font-size: 13px; }
}