thrillwiki_django_no_react/static/css/components.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 {
}

.btn-default {
}

.btn-destructive {
}

.btn-outline {
}

.btn-secondary {
}

.btn-ghost {
}

.btn-link {
}

.btn-sm {
}

.btn-lg {
}

.btn-icon {
}

/* Enhanced Card Styles */
.card {
}

.card-header {
}

.card-title {
}

.card-description {
}

.card-content {
}

.card-footer {
}

/* Enhanced Input Styles */
.input {
}

/* Enhanced Form Styles */
.form-group {
}

.form-label {
}

.form-error {
}

.form-description {
}

/* Enhanced Navigation Styles */
.nav-link {
}

.nav-link.active {
}

/* Enhanced Dropdown Styles */
.dropdown-content {
}

.dropdown-item {
}

/* Browse Menu Specific Styles - Removed to fix Tailwind 4 compatibility */

.dropdown-separator {
}

/* Enhanced Modal Styles */
.modal-overlay {
}

.modal-content {
}

.modal-header {
}

.modal-title {
}

.modal-description {
}

.modal-footer {
}

/* Enhanced Alert Styles */
.alert {
}

.alert-default {
}

.alert-destructive {
}

.alert-title {
}

.alert-description {
}

/* Enhanced Badge Styles */
.badge {
}

.badge-default {
}

.badge-secondary {
}

.badge-destructive {
}

.badge-outline {
}

/* Enhanced Table Styles */
.table {
}

.table-header {
}

.table-body {
}

.table-row {
}

.table-head {
}

.table-cell {
}

/* Enhanced Skeleton Styles */
.skeleton {
}

/* Enhanced Separator Styles */
.separator {
}

.separator-horizontal {
}

.separator-vertical {
}

/* Enhanced Avatar Styles */
.avatar {
}

.avatar-image {
}

.avatar-fallback {
}

/* Enhanced Progress Styles */
.progress {
}

.progress-indicator {
}

/* Enhanced Scroll Area Styles */
.scroll-area {
}

.scroll-viewport {
}

.scroll-bar {
}

.scroll-thumb {
}

/* Enhanced Tabs Styles */
.tabs-list {
}

.tabs-trigger {
}

.tabs-content {
}

/* Enhanced Tooltip Styles */
.tooltip-content {
}

/* Enhanced Switch Styles */
.switch {
}

.switch-thumb {
}

/* Enhanced Checkbox Styles */
.checkbox {
}

/* Enhanced Radio Styles */
.radio {
}

/* Enhanced Select Styles */
.select-trigger {
}

.select-content {
}

.select-item {
}

/* 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 {
    width: 95vw;
    max-width: none;
  }
  
  .dropdown-content {
    width: 100vw;
    max-width: 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 - Removed prefers-contrast due to browser compatibility */

/* 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;
  }
}