Move notification bubbles to bottom right with colored backgrounds

- Changed notification position from top-right to bottom-right
- Added colored backgrounds: green for success, red for error, blue for info/warning
- Improved visual distinction between notification types
parent 2ead4258
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
/* Notification styles */ /* Notification styles */
.notification-container { .notification-container {
position: fixed; position: fixed;
top: 20px; bottom: 20px;
right: 20px; right: 20px;
z-index: 10000; z-index: 10000;
max-width: 400px; max-width: 400px;
...@@ -42,10 +42,10 @@ ...@@ -42,10 +42,10 @@
transform: translateX(0); transform: translateX(0);
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.notification.success { border-left-color: #10b981; } .notification.success { border-left-color: #10b981; background: #d1fae5; }
.notification.error { border-left-color: #ef4444; } .notification.error { border-left-color: #ef4444; background: #fee2e2; }
.notification.info { border-left-color: #3b82f6; } .notification.info { border-left-color: #3b82f6; background: #dbeafe; }
.notification.warning { border-left-color: #f59e0b; } .notification.warning { border-left-color: #f59e0b; background: #fef3c7; }
.notification.fade-out { .notification.fade-out {
opacity: 0; opacity: 0;
transform: translateX(100%); transform: translateX(100%);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment