mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 03:51:09 -05:00
b265d793a3
Converts CSS from Tailwind's @apply directive to plain CSS for improved compatibility with Tailwind 4 and better maintainability. Replit-Commit-Author: Agent Replit-Commit-Session-Id: c537be14-ffc2-48de-88ef-2bdd9e6ae15a Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/c537be14-ffc2-48de-88ef-2bdd9e6ae15a/C5U8Nxc
57 lines
1.0 KiB
CSS
57 lines
1.0 KiB
CSS
/* Alert Styles - Converted from @apply to plain CSS for Tailwind 4 compatibility */
|
|
.alert {
|
|
position: fixed;
|
|
z-index: 50;
|
|
padding: 0.75rem 1rem;
|
|
transition: all 0.5s;
|
|
transform: translateX(0);
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
right: 1rem;
|
|
top: 1rem;
|
|
animation: slideIn 0.5s ease-out forwards;
|
|
}
|
|
|
|
.alert-success {
|
|
color: white;
|
|
background-color: rgb(34 197 94);
|
|
}
|
|
|
|
.alert-error {
|
|
color: white;
|
|
background-color: rgb(239 68 68);
|
|
}
|
|
|
|
.alert-info {
|
|
color: white;
|
|
background-color: rgb(59 130 246);
|
|
}
|
|
|
|
.alert-warning {
|
|
color: white;
|
|
background-color: rgb(234 179 8);
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|