Update styles to use plain CSS instead of @apply directives

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
This commit is contained in:
pac7
2025-09-22 02:09:35 +00:00
parent 8c85963817
commit b265d793a3
4 changed files with 126 additions and 80 deletions

View File

@@ -1,23 +1,35 @@
/* Alert Styles */
/* Alert Styles - Converted from @apply to plain CSS for Tailwind 4 compatibility */
.alert {
@apply fixed z-50 px-4 py-3 transition-all duration-500 transform rounded-lg shadow-lg right-4 top-4;
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 {
@apply text-white bg-green-500;
color: white;
background-color: rgb(34 197 94);
}
.alert-error {
@apply text-white bg-red-500;
color: white;
background-color: rgb(239 68 68);
}
.alert-info {
@apply text-white bg-blue-500;
color: white;
background-color: rgb(59 130 246);
}
.alert-warning {
@apply text-white bg-yellow-500;
color: white;
background-color: rgb(234 179 8);
}
/* Animation keyframes */