mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 05:51:08 -05:00
09f20c640d
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
646 lines
18 KiB
CSS
646 lines
18 KiB
CSS
/**
|
|
* ThrillWiki Component Styles
|
|
* Enhanced CSS matching shadcn/ui design system from React frontend
|
|
*/
|
|
|
|
/* CSS Variables for Design System */
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 222.2 84% 4.9%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 222.2 84% 4.9%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 222.2 84% 4.9%;
|
|
--primary: 262.1 83.3% 57.8%;
|
|
--primary-foreground: 210 40% 98%;
|
|
--secondary: 210 40% 96%;
|
|
--secondary-foreground: 222.2 84% 4.9%;
|
|
--muted: 210 40% 96%;
|
|
--muted-foreground: 215.4 16.3% 46.9%;
|
|
--accent: 210 40% 96%;
|
|
--accent-foreground: 222.2 84% 4.9%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--border: 214.3 31.8% 91.4%;
|
|
--input: 214.3 31.8% 91.4%;
|
|
--ring: 262.1 83.3% 57.8%;
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
.dark {
|
|
--background: 222.2 84% 4.9%;
|
|
--foreground: 210 40% 98%;
|
|
--card: 222.2 84% 4.9%;
|
|
--card-foreground: 210 40% 98%;
|
|
--popover: 222.2 84% 4.9%;
|
|
--popover-foreground: 210 40% 98%;
|
|
--primary: 262.1 83.3% 57.8%;
|
|
--primary-foreground: 210 40% 98%;
|
|
--secondary: 217.2 32.6% 17.5%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--muted: 217.2 32.6% 17.5%;
|
|
--muted-foreground: 215 20.2% 65.1%;
|
|
--accent: 217.2 32.6% 17.5%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--border: 217.2 32.6% 17.5%;
|
|
--input: 217.2 32.6% 17.5%;
|
|
--ring: 262.1 83.3% 57.8%;
|
|
}
|
|
|
|
/* Base Styles */
|
|
* {
|
|
border-color: hsl(var(--border));
|
|
}
|
|
|
|
body {
|
|
background-color: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
/* Component Classes */
|
|
.bg-background { background-color: hsl(var(--background)); }
|
|
.bg-foreground { background-color: hsl(var(--foreground)); }
|
|
.bg-card { background-color: hsl(var(--card)); }
|
|
.bg-card-foreground { background-color: hsl(var(--card-foreground)); }
|
|
.bg-popover { background-color: hsl(var(--popover)); }
|
|
.bg-popover-foreground { background-color: hsl(var(--popover-foreground)); }
|
|
.bg-primary { background-color: hsl(var(--primary)); }
|
|
.bg-primary-foreground { background-color: hsl(var(--primary-foreground)); }
|
|
.bg-secondary { background-color: hsl(var(--secondary)); }
|
|
.bg-secondary-foreground { background-color: hsl(var(--secondary-foreground)); }
|
|
.bg-muted { background-color: hsl(var(--muted)); }
|
|
.bg-muted-foreground { background-color: hsl(var(--muted-foreground)); }
|
|
.bg-accent { background-color: hsl(var(--accent)); }
|
|
.bg-accent-foreground { background-color: hsl(var(--accent-foreground)); }
|
|
.bg-destructive { background-color: hsl(var(--destructive)); }
|
|
.bg-destructive-foreground { background-color: hsl(var(--destructive-foreground)); }
|
|
|
|
.text-background { color: hsl(var(--background)); }
|
|
.text-foreground { color: hsl(var(--foreground)); }
|
|
.text-card { color: hsl(var(--card)); }
|
|
.text-card-foreground { color: hsl(var(--card-foreground)); }
|
|
.text-popover { color: hsl(var(--popover)); }
|
|
.text-popover-foreground { color: hsl(var(--popover-foreground)); }
|
|
.text-primary { color: hsl(var(--primary)); }
|
|
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
|
|
.text-secondary { color: hsl(var(--secondary)); }
|
|
.text-secondary-foreground { color: hsl(var(--secondary-foreground)); }
|
|
.text-muted { color: hsl(var(--muted)); }
|
|
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
|
|
.text-accent { color: hsl(var(--accent)); }
|
|
.text-accent-foreground { color: hsl(var(--accent-foreground)); }
|
|
.text-destructive { color: hsl(var(--destructive)); }
|
|
.text-destructive-foreground { color: hsl(var(--destructive-foreground)); }
|
|
|
|
.border-background { border-color: hsl(var(--background)); }
|
|
.border-foreground { border-color: hsl(var(--foreground)); }
|
|
.border-card { border-color: hsl(var(--card)); }
|
|
.border-card-foreground { border-color: hsl(var(--card-foreground)); }
|
|
.border-popover { border-color: hsl(var(--popover)); }
|
|
.border-popover-foreground { border-color: hsl(var(--popover-foreground)); }
|
|
.border-primary { border-color: hsl(var(--primary)); }
|
|
.border-primary-foreground { border-color: hsl(var(--primary-foreground)); }
|
|
.border-secondary { border-color: hsl(var(--secondary)); }
|
|
.border-secondary-foreground { border-color: hsl(var(--secondary-foreground)); }
|
|
.border-muted { border-color: hsl(var(--muted)); }
|
|
.border-muted-foreground { border-color: hsl(var(--muted-foreground)); }
|
|
.border-accent { border-color: hsl(var(--accent)); }
|
|
.border-accent-foreground { border-color: hsl(var(--accent-foreground)); }
|
|
.border-destructive { border-color: hsl(var(--destructive)); }
|
|
.border-destructive-foreground { border-color: hsl(var(--destructive-foreground)); }
|
|
.border-input { border-color: hsl(var(--input)); }
|
|
|
|
.ring-background { --tw-ring-color: hsl(var(--background)); }
|
|
.ring-foreground { --tw-ring-color: hsl(var(--foreground)); }
|
|
.ring-card { --tw-ring-color: hsl(var(--card)); }
|
|
.ring-card-foreground { --tw-ring-color: hsl(var(--card-foreground)); }
|
|
.ring-popover { --tw-ring-color: hsl(var(--popover)); }
|
|
.ring-popover-foreground { --tw-ring-color: hsl(var(--popover-foreground)); }
|
|
.ring-primary { --tw-ring-color: hsl(var(--primary)); }
|
|
.ring-primary-foreground { --tw-ring-color: hsl(var(--primary-foreground)); }
|
|
.ring-secondary { --tw-ring-color: hsl(var(--secondary)); }
|
|
.ring-secondary-foreground { --tw-ring-color: hsl(var(--secondary-foreground)); }
|
|
.ring-muted { --tw-ring-color: hsl(var(--muted)); }
|
|
.ring-muted-foreground { --tw-ring-color: hsl(var(--muted-foreground)); }
|
|
.ring-accent { --tw-ring-color: hsl(var(--accent)); }
|
|
.ring-accent-foreground { --tw-ring-color: hsl(var(--accent-foreground)); }
|
|
.ring-destructive { --tw-ring-color: hsl(var(--destructive)); }
|
|
.ring-destructive-foreground { --tw-ring-color: hsl(var(--destructive-foreground)); }
|
|
.ring-ring { --tw-ring-color: hsl(var(--ring)); }
|
|
|
|
.ring-offset-background { --tw-ring-offset-color: hsl(var(--background)); }
|
|
|
|
/* Enhanced Button Styles */
|
|
.btn {
|
|
@apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
|
|
}
|
|
|
|
.btn-default {
|
|
@apply bg-primary text-primary-foreground hover:bg-primary/90;
|
|
}
|
|
|
|
.btn-destructive {
|
|
@apply bg-destructive text-destructive-foreground hover:bg-destructive/90;
|
|
}
|
|
|
|
.btn-outline {
|
|
@apply border border-input bg-background hover:bg-accent hover:text-accent-foreground;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
|
|
}
|
|
|
|
.btn-ghost {
|
|
@apply hover:bg-accent hover:text-accent-foreground;
|
|
}
|
|
|
|
.btn-link {
|
|
@apply text-primary underline-offset-4 hover:underline;
|
|
}
|
|
|
|
.btn-sm {
|
|
@apply h-9 rounded-md px-3;
|
|
}
|
|
|
|
.btn-lg {
|
|
@apply h-11 rounded-md px-8;
|
|
}
|
|
|
|
.btn-icon {
|
|
@apply h-10 w-10;
|
|
}
|
|
|
|
/* Enhanced Card Styles */
|
|
.card {
|
|
@apply rounded-lg border bg-card text-card-foreground shadow-sm;
|
|
}
|
|
|
|
.card-header {
|
|
@apply flex flex-col space-y-1.5 p-6;
|
|
}
|
|
|
|
.card-title {
|
|
@apply text-2xl font-semibold leading-none tracking-tight;
|
|
}
|
|
|
|
.card-description {
|
|
@apply text-sm text-muted-foreground;
|
|
}
|
|
|
|
.card-content {
|
|
@apply p-6 pt-0;
|
|
}
|
|
|
|
.card-footer {
|
|
@apply flex items-center p-6 pt-0;
|
|
}
|
|
|
|
/* Enhanced Input Styles */
|
|
.input {
|
|
@apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
|
|
}
|
|
|
|
/* Enhanced Form Styles */
|
|
.form-group {
|
|
@apply space-y-2;
|
|
}
|
|
|
|
.form-label {
|
|
@apply text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70;
|
|
}
|
|
|
|
.form-error {
|
|
@apply text-sm font-medium text-destructive;
|
|
}
|
|
|
|
.form-description {
|
|
@apply text-sm text-muted-foreground;
|
|
}
|
|
|
|
/* Enhanced Navigation Styles */
|
|
.nav-link {
|
|
@apply flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md hover:bg-accent hover:text-accent-foreground transition-colors;
|
|
}
|
|
|
|
.nav-link.active {
|
|
@apply bg-accent text-accent-foreground;
|
|
}
|
|
|
|
/* Enhanced Dropdown Styles */
|
|
.dropdown-content {
|
|
@apply z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md;
|
|
}
|
|
|
|
.dropdown-item {
|
|
@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 - Using plain CSS to fix @apply errors */
|
|
.browse-dropdown {
|
|
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 {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 2rem !important;
|
|
}
|
|
|
|
.browse-dropdown .browse-item {
|
|
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 {
|
|
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;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.browse-dropdown .browse-title {
|
|
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 {
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--muted-foreground));
|
|
line-height: 1.4 !important;
|
|
white-space: normal !important;
|
|
word-wrap: break-word !important;
|
|
}
|
|
|
|
.dropdown-separator {
|
|
@apply -mx-1 my-1 h-px bg-muted;
|
|
}
|
|
|
|
/* Enhanced Modal Styles */
|
|
.modal-overlay {
|
|
@apply fixed inset-0 z-50 bg-background/80 backdrop-blur-sm;
|
|
}
|
|
|
|
.modal-content {
|
|
@apply fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg;
|
|
}
|
|
|
|
.modal-header {
|
|
@apply flex flex-col space-y-1.5 text-center sm:text-left;
|
|
}
|
|
|
|
.modal-title {
|
|
@apply text-lg font-semibold leading-none tracking-tight;
|
|
}
|
|
|
|
.modal-description {
|
|
@apply text-sm text-muted-foreground;
|
|
}
|
|
|
|
.modal-footer {
|
|
@apply flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2;
|
|
}
|
|
|
|
/* Enhanced Alert Styles */
|
|
.alert {
|
|
@apply relative w-full rounded-lg border p-4;
|
|
}
|
|
|
|
.alert-default {
|
|
@apply bg-background text-foreground;
|
|
}
|
|
|
|
.alert-destructive {
|
|
@apply border-destructive/50 text-destructive dark:border-destructive;
|
|
}
|
|
|
|
.alert-title {
|
|
@apply mb-1 font-medium leading-none tracking-tight;
|
|
}
|
|
|
|
.alert-description {
|
|
@apply text-sm opacity-90;
|
|
}
|
|
|
|
/* Enhanced Badge Styles */
|
|
.badge {
|
|
@apply inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2;
|
|
}
|
|
|
|
.badge-default {
|
|
@apply border-transparent bg-primary text-primary-foreground hover:bg-primary/80;
|
|
}
|
|
|
|
.badge-secondary {
|
|
@apply border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80;
|
|
}
|
|
|
|
.badge-destructive {
|
|
@apply border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80;
|
|
}
|
|
|
|
.badge-outline {
|
|
@apply text-foreground;
|
|
}
|
|
|
|
/* Enhanced Table Styles */
|
|
.table {
|
|
@apply w-full caption-bottom text-sm;
|
|
}
|
|
|
|
.table-header {
|
|
@apply border-b;
|
|
}
|
|
|
|
.table-body {
|
|
@apply divide-y;
|
|
}
|
|
|
|
.table-row {
|
|
@apply border-b transition-colors hover:bg-muted/50;
|
|
}
|
|
|
|
.table-head {
|
|
@apply h-12 px-4 text-left align-middle font-medium text-muted-foreground;
|
|
}
|
|
|
|
.table-cell {
|
|
@apply p-4 align-middle;
|
|
}
|
|
|
|
/* Enhanced Skeleton Styles */
|
|
.skeleton {
|
|
@apply animate-pulse rounded-md bg-muted;
|
|
}
|
|
|
|
/* Enhanced Separator Styles */
|
|
.separator {
|
|
@apply shrink-0 bg-border;
|
|
}
|
|
|
|
.separator-horizontal {
|
|
@apply h-[1px] w-full;
|
|
}
|
|
|
|
.separator-vertical {
|
|
@apply h-full w-[1px];
|
|
}
|
|
|
|
/* Enhanced Avatar Styles */
|
|
.avatar {
|
|
@apply relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full;
|
|
}
|
|
|
|
.avatar-image {
|
|
@apply aspect-square h-full w-full object-cover;
|
|
}
|
|
|
|
.avatar-fallback {
|
|
@apply flex h-full w-full items-center justify-center rounded-full bg-muted;
|
|
}
|
|
|
|
/* Enhanced Progress Styles */
|
|
.progress {
|
|
@apply relative h-4 w-full overflow-hidden rounded-full bg-secondary;
|
|
}
|
|
|
|
.progress-indicator {
|
|
@apply h-full w-full flex-1 bg-primary transition-all;
|
|
}
|
|
|
|
/* Enhanced Scroll Area Styles */
|
|
.scroll-area {
|
|
@apply relative overflow-hidden;
|
|
}
|
|
|
|
.scroll-viewport {
|
|
@apply h-full w-full rounded-[inherit];
|
|
}
|
|
|
|
.scroll-bar {
|
|
@apply flex touch-none select-none transition-colors;
|
|
}
|
|
|
|
.scroll-thumb {
|
|
@apply relative flex-1 rounded-full bg-border;
|
|
}
|
|
|
|
/* Enhanced Tabs Styles */
|
|
.tabs-list {
|
|
@apply inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground;
|
|
}
|
|
|
|
.tabs-trigger {
|
|
@apply inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm;
|
|
}
|
|
|
|
.tabs-content {
|
|
@apply mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
|
|
}
|
|
|
|
/* Enhanced Tooltip Styles */
|
|
.tooltip-content {
|
|
@apply z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95;
|
|
}
|
|
|
|
/* Enhanced Switch Styles */
|
|
.switch {
|
|
@apply peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input;
|
|
}
|
|
|
|
.switch-thumb {
|
|
@apply pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0;
|
|
}
|
|
|
|
/* Enhanced Checkbox Styles */
|
|
.checkbox {
|
|
@apply peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground;
|
|
}
|
|
|
|
/* Enhanced Radio Styles */
|
|
.radio {
|
|
@apply aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
|
|
}
|
|
|
|
/* Enhanced Select Styles */
|
|
.select-trigger {
|
|
@apply flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
|
|
}
|
|
|
|
.select-content {
|
|
@apply relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md;
|
|
}
|
|
|
|
.select-item {
|
|
@apply relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
|
|
}
|
|
|
|
/* Utility Classes */
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
|
|
/* Animation Classes */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
from { opacity: 1; }
|
|
to { opacity: 0; }
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from { transform: translateX(100%); }
|
|
to { transform: translateX(0); }
|
|
}
|
|
|
|
@keyframes slideOut {
|
|
from { transform: translateX(0); }
|
|
to { transform: translateX(100%); }
|
|
}
|
|
|
|
@keyframes scaleIn {
|
|
from { transform: scale(0.95); opacity: 0; }
|
|
to { transform: scale(1); opacity: 1; }
|
|
}
|
|
|
|
@keyframes scaleOut {
|
|
from { transform: scale(1); opacity: 1; }
|
|
to { transform: scale(0.95); opacity: 0; }
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.2s ease-out;
|
|
}
|
|
|
|
.animate-fade-out {
|
|
animation: fadeOut 0.2s ease-out;
|
|
}
|
|
|
|
.animate-slide-in {
|
|
animation: slideIn 0.3s ease-out;
|
|
}
|
|
|
|
.animate-slide-out {
|
|
animation: slideOut 0.3s ease-out;
|
|
}
|
|
|
|
.animate-scale-in {
|
|
animation: scaleIn 0.2s ease-out;
|
|
}
|
|
|
|
.animate-scale-out {
|
|
animation: scaleOut 0.2s ease-out;
|
|
}
|
|
|
|
/* Responsive Design Helpers */
|
|
@media (max-width: 640px) {
|
|
.modal-content {
|
|
@apply w-[95vw] max-w-none;
|
|
}
|
|
|
|
.dropdown-content {
|
|
@apply w-screen max-w-none;
|
|
}
|
|
}
|
|
|
|
/* Dark Mode Specific Adjustments */
|
|
.dark .shadow-sm {
|
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.dark .shadow-md {
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.dark .shadow-lg {
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Focus Visible Improvements */
|
|
.focus-visible\:ring-2:focus-visible {
|
|
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
}
|
|
|
|
/* High Contrast Mode Support */
|
|
@media (prefers-contrast: high) {
|
|
.border {
|
|
border-width: 2px;
|
|
}
|
|
|
|
.btn {
|
|
border-width: 2px;
|
|
}
|
|
|
|
.input {
|
|
border-width: 2px;
|
|
}
|
|
}
|
|
|
|
/* Reduced Motion Support */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.transition-colors,
|
|
.transition-all,
|
|
.transition-transform {
|
|
transition: none;
|
|
}
|
|
|
|
.animate-fade-in,
|
|
.animate-fade-out,
|
|
.animate-slide-in,
|
|
.animate-slide-out,
|
|
.animate-scale-in,
|
|
.animate-scale-out {
|
|
animation: none;
|
|
}
|
|
}
|