jellysweep/input.css at main · jon4hz/jellysweep · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
@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);
    }
  }
}