jellysweep/input.css

@import "tailwindcss";

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

@theme {
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-850: #1a202c;
  --color-gray-900: #111827;
  --color-gray-950: #0d1117;

  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  --color-indigo-900: #312e81;

  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d5ff;
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;
  --color-purple-600: #9333ea;
  --color-purple-700: #7c3aed;
  --color-purple-800: #6b21a8;
  --color-purple-900: #581c87;

  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;

  --font-sans: 'Inter', system-ui, sans-serif;
}

@plugin "@tailwindcss/forms";

@layer base {
  html {
    font-family: 'Inter', system-ui, sans-serif;
  }

  body {
    @apply bg-gray-950 text-gray-100;
  }
}

@layer components {
  .btn-primary {
    @apply bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center;
  }

  .btn-secondary {
    @apply bg-gray-700 hover:bg-gray-600 text-gray-200 font-medium py-2 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center;
  }

  .btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200 flex items-center justify-center;
  }

  .card {
    @apply bg-gray-900 border border-gray-800 rounded-lg shadow-lg;
    /* Optimize for mobile scrolling */
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* Card without hover effects for filter bars */
  .card-no-hover {
    @apply bg-gray-900 border border-gray-800 rounded-lg shadow-lg;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  /* Media cards with proper spacing for ring effects */
  .media-card {
    @apply bg-gray-900 border border-gray-800 rounded-lg shadow-lg transition-all duration-200;
    transform: translateZ(0);
    backface-visibility: hidden;
    /* Add padding for ring effect - use padding instead of margin to prevent grid issues */
    margin: 3px;
  }

  .input-field {
    @apply bg-gray-800 border border-gray-700 text-gray-100 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent;
  }

  .tab-button {
    @apply whitespace-nowrap font-medium text-sm flex items-center transition-all duration-200 cursor-pointer;
  }
  .tab-content {
    @apply pt-6;
  }

  .tab-content-active {
    @apply block;
  }

  /* Optimizations for smooth scrolling */
  #media-grid {
    contain: layout style paint;
    will-change: transform;
    /* Add padding to prevent ring clipping */
    padding: 4px;
    margin: -4px; /* Negative margin to maintain layout */
  }

  #media-grid .card {
    contain: layout style paint;
  }

  /* Mobile-specific optimizations */
  @media (max-width: 767px) {
    #media-grid {
      transform: translateZ(0);
      backface-visibility: hidden;
      perspective: 1000px;
      touch-action: pan-y;
    }

    .card {
      /* Reduce shadow complexity on mobile for better performance */
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    }

    /* Disable hover effects on mobile */
    .card:hover, .media-card:hover {
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
      transform: none;
    }

    /* Optimize transitions for mobile */
    * {
      transition-duration: 150ms !important;
    }
  }

  /* Desktop optimizations */
  @media (min-width: 768px) {
    .card:hover {
      transform: translateY(-2px);
    }

    .media-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 0 2px rgb(79 70 229), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
  }
}