fix: notification system - timer race condition, success color, z-index above modals

- Cancel previous timer before starting new one (prevents early dismissal)
- Add green background for type='success' notifications
- Bump z-index from 1000 to 3000 so notifications show above modals
- Add fade-out transition for smoother dismissal
This commit is contained in:
2026-02-28 23:28:30 +02:00
parent d3fb0eacb6
commit 5e002004cc

View File

@@ -89,8 +89,9 @@
border-radius: 8px; border-radius: 8px;
opacity: 0.95; opacity: 0.95;
display: none; display: none;
z-index: 1000; z-index: 3000;
font-size: 0.9rem; font-size: 0.9rem;
transition: opacity 0.3s ease;
} }
.server-card { .server-card {
@@ -1938,14 +1939,29 @@ document.addEventListener('DOMContentLoaded', function() {
}); });
// Utility functions // Utility functions
let notificationTimer = null;
function showNotification(message, type = 'info') { function showNotification(message, type = 'info') {
const notification = document.getElementById('notification'); const notification = document.getElementById('notification');
notification.textContent = message; notification.textContent = message;
notification.style.display = 'block'; notification.style.display = 'block';
notification.style.backgroundColor = type === 'error' ? '#d32f2f' : '#222'; notification.style.opacity = '0.95';
setTimeout(() => { if (type === 'error') {
notification.style.display = 'none'; notification.style.backgroundColor = '#d32f2f';
} else if (type === 'success') {
notification.style.backgroundColor = '#2e7d32';
} else {
notification.style.backgroundColor = '#222';
}
if (notificationTimer) clearTimeout(notificationTimer);
notificationTimer = setTimeout(() => {
notification.style.opacity = '0';
setTimeout(() => {
notification.style.display = 'none';
notificationTimer = null;
}, 300);
}, 3000); }, 3000);
} }