diff --git a/src/static/css/style.css b/src/static/css/style.css index 989918b..0d4a7cf 100644 --- a/src/static/css/style.css +++ b/src/static/css/style.css @@ -790,3 +790,44 @@ tr:hover td { .audit-diff .diff-new { color: #2ecc71; word-break: break-word; } .token-budget-bar.over-limit { background: repeating-linear-gradient(45deg, #c0392b, #c0392b 6px, #962d22 6px, #962d22 12px); } input[type="date"].filter-select { padding: 6px 10px; } + +/* === Toast-Notifications (Phase 3) === */ +.toast-container { + position: fixed; + top: 24px; + right: 24px; + z-index: 9999; + display: flex; + flex-direction: column; + gap: 10px; + max-width: 380px; + pointer-events: none; +} +.toast { + background: #1e293b; + border: 1px solid #334155; + border-left-width: 4px; + border-radius: 8px; + padding: 12px 16px; + color: #e2e8f0; + font-size: 14px; + line-height: 1.4; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); + pointer-events: auto; + animation: toast-in 0.18s ease-out; +} +.toast.toast-out { + animation: toast-out 0.18s ease-in forwards; +} +.toast-info { border-left-color: #3b82f6; } +.toast-success { border-left-color: #10b981; } +.toast-warning { border-left-color: #f59e0b; } +.toast-error { border-left-color: #ef4444; } +@keyframes toast-in { + from { opacity: 0; transform: translateX(20px); } + to { opacity: 1; transform: translateX(0); } +} +@keyframes toast-out { + from { opacity: 1; transform: translateX(0); } + to { opacity: 0; transform: translateX(20px); } +} diff --git a/src/static/dashboard.html b/src/static/dashboard.html index 47e4317..c0ab006 100644 --- a/src/static/dashboard.html +++ b/src/static/dashboard.html @@ -672,7 +672,7 @@
@@ -682,5 +682,6 @@ +