thrillwiki_django_no_react/backend/static/css/alerts.css

/* Alert Styles */
.alert {
    @apply fixed z-50 px-4 py-3 transition-all duration-500 transform rounded-lg shadow-lg right-4 top-4;
    animation: slideIn 0.5s ease-out forwards;
}

.alert-success {
    @apply text-white bg-green-500;
}

.alert-error {
    @apply text-white bg-red-500;
}

.alert-info {
    @apply text-white bg-blue-500;
}

.alert-warning {
    @apply text-white bg-yellow-500;
}

/* Animation keyframes */
@keyframes slideIn {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}