bolade/email_alerts_v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance notification system with WebSocket support and auto-hide alerts

Browse Source
This commit is contained in:
bolade
2025-08-13 14:49:23 +01:00
parent 411f47e039
commit bd4a795a5a
5 changed files with 269 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/styles.css
+85 -1
View File
@@ -60,7 +60,7 @@ th, td { border: 1px solid var(--border); padding: 12px 15px; vertical-align: to
th { background: #0f152a; color: var(--muted); text-align: left; position: sticky; top: 0; font-weight: 600; }
tbody tr:hover { background: #0e1426; }
pre, code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
/* pre, code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } */
pre {
background: #0b1121;
padding: 0.75rem;
@@ -149,6 +149,8 @@ button:hover { filter: brightness(1.05); }
border-radius: 8px;
border: 1px solid;
font-size: 0.9rem;
/* Smooth hide animation support */
transition: opacity 0.35s ease, transform 0.35s ease;
}
.alert.success {
background: rgba(34, 197, 94, 0.1);
@@ -165,3 +167,85 @@ button:hover { filter: brightness(1.05); }
border-color: var(--danger);
color: #f87171;
}
/* Generic fade-out helper when dismissing alerts */
.alert.fade-out {
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
}
/* Notification banner */
.notify-banner {
position: relative; /* lives under the header */
max-width: 1400px;
margin: 0.5rem auto 0; /* small gap under header */
padding: 0 1rem; /* match container gutter */
}
.notify {
pointer-events: auto;
width: 100%;
display: flex;
align-items: center;
gap: 10px;
--accent: #39518a;
background:
linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%),
linear-gradient(0deg, rgba(79, 140, 255, 0.06), rgba(79, 140, 255, 0.06));
border: 1px solid var(--border);
border-left: 4px solid var(--accent);
color: var(--text);
border-radius: 10px;
box-shadow: 0 8px 22px rgba(0,0,0,0.28);
padding: 0.75rem 0.75rem 0.75rem 0.9rem;
transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}
.notify.info {
--accent: #4f8cff;
background:
linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%),
linear-gradient(0deg, rgba(79, 140, 255, 0.08), rgba(79, 140, 255, 0.08));
}
.notify.success {
--accent: var(--success);
background:
linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%),
linear-gradient(0deg, rgba(34, 197, 94, 0.10), rgba(34, 197, 94, 0.10));
}
.notify.warn {
--accent: var(--warn);
background:
linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%),
linear-gradient(0deg, rgba(245, 158, 11, 0.10), rgba(245, 158, 11, 0.10));
}
.notify.danger {
--accent: var(--danger);
background:
linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%),
linear-gradient(0deg, rgba(239, 68, 68, 0.10), rgba(239, 68, 68, 0.10));
}
.notify-content { font-size: 0.95rem; line-height: 1.35rem; flex: 1; }
.notify-close {
margin-left: 8px;
background: transparent;
color: var(--muted);
border: 1px solid transparent;
border-radius: 6px;
padding: 2px 6px;
font-size: 18px;
line-height: 1;
}
.notify-close:hover {
background: #27345a;
border-color: var(--border);
color: #c9d1ff;
}
@media (max-width: 600px) {
.notify-banner { padding: 0 10px; }
.notify { max-width: 100%; min-width: 0; }
}