70 lines
1.5 KiB
CSS
Executable File
70 lines
1.5 KiB
CSS
Executable File
.notification {
|
|
font-family: var(--font-sans, 'Plus Jakarta Sans', sans-serif);
|
|
box-shadow: var(--shadow-lg);
|
|
border: 1px solid;
|
|
transition: all var(--duration-normal, 0.3s) ease-out;
|
|
}
|
|
|
|
.notification-icon {
|
|
min-width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.notification-icon i {
|
|
color: currentColor !important;
|
|
}
|
|
|
|
.notification-success {
|
|
background: var(--color-success-light, #dcfce7);
|
|
color: var(--color-success-dark, #15803d);
|
|
border-color: var(--color-success, #22c55e);
|
|
}
|
|
|
|
.notification-warning {
|
|
background: var(--color-warning-light, #fef3c7);
|
|
color: var(--color-warning-dark, #92400e);
|
|
border-color: var(--color-warning, #f59e0b);
|
|
}
|
|
|
|
.notification-error {
|
|
background: var(--color-danger-light, #fecaca);
|
|
color: var(--color-danger-dark, #dc2626);
|
|
border-color: var(--color-danger, #ef4444);
|
|
}
|
|
|
|
.notification-info {
|
|
background: var(--color-primary-50, #f0f9ff);
|
|
color: var(--color-primary-800, #1e40af);
|
|
border-color: var(--color-primary-200, #bfdbfe);
|
|
}
|
|
|
|
/* Fallback colors if CSS variables are not available */
|
|
.notification-success {
|
|
background: #dcfce7;
|
|
color: #15803d;
|
|
border-color: #22c55e;
|
|
}
|
|
|
|
.notification-warning {
|
|
background: #fef3c7;
|
|
color: #92400e;
|
|
border-color: #f59e0b;
|
|
}
|
|
|
|
.notification-error {
|
|
background: #fecaca;
|
|
color: #dc2626;
|
|
border-color: #ef4444;
|
|
}
|
|
|
|
.notification-info {
|
|
background: #f0f9ff;
|
|
color: #1e40af;
|
|
border-color: #bfdbfe;
|
|
}
|
|
|
|
/* Animation for fade out */
|
|
.flash-messages-container .notification.opacity-0 {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
} |