Update CSS to use plain styles instead of Tailwind CSS @apply directives

Replaces Tailwind CSS @apply directives with plain CSS properties in `components.css` to resolve build errors and ensure proper styling.

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/76uBCoz
This commit is contained in:
pac7
2025-09-22 02:03:43 +00:00
parent 932deb876a
commit 09f20c640d
2 changed files with 104 additions and 7 deletions

View File

@@ -238,33 +238,53 @@ body {
@apply relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
}
/* Browse Menu Specific Styles */
/* Browse Menu Specific Styles - Using plain CSS to fix @apply errors */
.browse-dropdown {
@apply absolute left-0 mt-2 bg-background border rounded-lg shadow-lg z-50;
position: absolute;
left: 0;
margin-top: 0.5rem;
background-color: hsl(var(--background));
border: 1px solid hsl(var(--border));
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);
z-index: 50;
width: 600px !important;
min-width: 600px !important;
}
.browse-dropdown .browse-grid {
@apply grid grid-cols-2;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem !important;
}
.browse-dropdown .browse-item {
@apply flex items-start rounded-lg hover:bg-accent transition-colors group;
display: flex;
align-items: flex-start;
border-radius: 0.5rem;
transition: background-color 0.2s;
padding: 1rem !important;
gap: 0.75rem !important;
min-height: 4rem;
text-decoration: none;
}
.browse-dropdown .browse-item:hover {
background-color: hsl(var(--accent));
}
.browse-dropdown .browse-icon {
@apply text-muted-foreground group-hover:text-foreground;
color: hsl(var(--muted-foreground));
width: 1.25rem !important;
height: 1.25rem !important;
flex-shrink: 0 !important;
margin-top: 0.25rem !important;
}
.browse-dropdown .browse-item:hover .browse-icon {
color: hsl(var(--foreground));
}
.browse-dropdown .browse-text {
flex: 1 1 0% !important;
min-width: 0 !important;
@@ -272,15 +292,18 @@ body {
}
.browse-dropdown .browse-title {
@apply font-semibold text-sm;
font-weight: 600;
font-size: 0.875rem;
margin-bottom: 0.375rem !important;
line-height: 1.25 !important;
white-space: normal !important;
word-wrap: break-word !important;
color: hsl(var(--foreground));
}
.browse-dropdown .browse-description {
@apply text-xs text-muted-foreground;
font-size: 0.75rem;
color: hsl(var(--muted-foreground));
line-height: 1.4 !important;
white-space: normal !important;
word-wrap: break-word !important;