@ttt-productions/theme-core 0.1.22 → 0.1.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/styles/components.css +630 -629
- package/package.json +1 -1
|
@@ -1,632 +1,633 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
/* =========================================================
|
|
3
|
+
FOUNDATIONS (icon + layout bundles) — replaces inline utils
|
|
4
|
+
========================================================= */
|
|
5
|
+
|
|
6
|
+
/* Icons */
|
|
7
|
+
.icon-xxs { @apply h-3 w-3; }
|
|
8
|
+
.icon-xs { @apply h-4 w-4; }
|
|
9
|
+
.icon-sm { @apply h-5 w-5; }
|
|
10
|
+
.icon-md { @apply h-6 w-6; }
|
|
11
|
+
.icon-lg { @apply h-8 w-8; }
|
|
12
|
+
.icon-xl { @apply h-10 w-10; }
|
|
13
|
+
.icon-2xl { @apply h-12 w-12; }
|
|
14
|
+
|
|
15
|
+
/* Spinners */
|
|
16
|
+
.spinner-xs { @apply icon-xs animate-spin; color: hsl(var(--primary)); }
|
|
17
|
+
.spinner-sm { @apply icon-sm animate-spin; color: hsl(var(--primary)); }
|
|
18
|
+
.spinner-md { @apply icon-md animate-spin; color: hsl(var(--primary)); }
|
|
19
|
+
.spinner-lg { @apply icon-lg animate-spin; color: hsl(var(--primary)); }
|
|
20
|
+
.spinner-xl { @apply icon-xl animate-spin; color: hsl(var(--primary)); }
|
|
21
|
+
.spinner-with-gap { @apply mr-2; }
|
|
22
|
+
|
|
23
|
+
/* Common centering */
|
|
24
|
+
.center-row { @apply flex items-center justify-center; }
|
|
25
|
+
.center-col { @apply flex flex-col items-center justify-center; }
|
|
26
|
+
.loading-block { @apply center-row py-8; }
|
|
27
|
+
.loading-block-padded { @apply center-row p-8; }
|
|
28
|
+
.loading-screen { @apply flex flex-col h-screen-mobile w-screen items-center justify-center bg-background space-y-4; }
|
|
29
|
+
|
|
30
|
+
/* Stacks */
|
|
31
|
+
.stack-1 { @apply space-y-1; }
|
|
32
|
+
.stack-2 { @apply space-y-2; }
|
|
33
|
+
.stack-4 { @apply space-y-4; }
|
|
34
|
+
.stack-6 { @apply space-y-6; }
|
|
35
|
+
|
|
36
|
+
/* =========================================================
|
|
37
|
+
PAGE LAYOUT
|
|
38
|
+
========================================================= */
|
|
39
|
+
.page-container {
|
|
40
|
+
@apply flex-1 w-full mx-auto py-4;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.page-card {
|
|
44
|
+
@apply w-full bg-card text-card-foreground shadow-xl rounded-lg border-2 border-border;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.page-card-header {
|
|
48
|
+
@apply text-center p-4 sm:p-6 items-center;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.page-card-header-left {
|
|
52
|
+
@apply p-4 sm:p-6 text-left;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.page-card-title {
|
|
56
|
+
@apply text-3xl font-bold text-foreground;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.page-card-content {
|
|
60
|
+
@apply px-2 sm:px-6 pb-4;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.inner-card-container {
|
|
64
|
+
@apply px-4 py-2;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* =========================================================
|
|
68
|
+
TYPOGRAPHY (high-level)
|
|
69
|
+
========================================================= */
|
|
70
|
+
.text-body {
|
|
71
|
+
@apply text-sm font-medium;
|
|
72
|
+
color: hsl(var(--foreground));
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.text-muted {
|
|
76
|
+
@apply text-sm font-medium;
|
|
77
|
+
color: hsl(var(--muted-foreground));
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.text-caption {
|
|
81
|
+
@apply text-xs font-medium;
|
|
82
|
+
color: hsl(var(--muted-foreground));
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.text-small {
|
|
86
|
+
@apply text-sm font-bold;
|
|
87
|
+
color: hsl(var(--foreground));
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.text-xs-bold {
|
|
91
|
+
@apply text-xs font-bold;
|
|
92
|
+
color: hsl(var(--foreground));
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.text-label {
|
|
96
|
+
@apply font-bold;
|
|
97
|
+
color: hsl(var(--foreground));
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.text-counter {
|
|
101
|
+
@apply text-sm font-bold;
|
|
102
|
+
color: hsl(var(--muted-foreground));
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.empty-state-text {
|
|
106
|
+
@apply text-center py-8 font-bold;
|
|
107
|
+
color: hsl(var(--muted-foreground));
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.card-description {
|
|
111
|
+
@apply text-sm font-bold;
|
|
112
|
+
color: hsl(var(--muted-foreground));
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.input-description {
|
|
116
|
+
@apply text-xs;
|
|
117
|
+
color: hsl(var(--muted-foreground));
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.disclaimer-text {
|
|
121
|
+
@apply text-sm font-bold text-center;
|
|
122
|
+
color: hsl(var(--muted-foreground));
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/* Error blocks / inline */
|
|
126
|
+
.text-error {
|
|
127
|
+
@apply text-sm font-bold;
|
|
128
|
+
color: hsl(var(--destructive));
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.text-error-block {
|
|
132
|
+
@apply text-center p-4 font-bold rounded-md border;
|
|
133
|
+
color: hsl(var(--destructive));
|
|
134
|
+
border-color: hsl(var(--destructive) / 0.5);
|
|
135
|
+
background-color: hsl(var(--destructive) / 0.10);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/* =========================================================
|
|
139
|
+
LINKS
|
|
140
|
+
========================================================= */
|
|
141
|
+
.auth-link {
|
|
142
|
+
@apply text-sm underline font-semibold;
|
|
143
|
+
color: hsl(var(--primary));
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
/* =========================================================
|
|
147
|
+
CHAT
|
|
148
|
+
========================================================= */
|
|
149
|
+
.chat-date-separator {
|
|
150
|
+
@apply text-xs font-bold bg-muted px-3 py-1 rounded-full;
|
|
151
|
+
color: hsl(var(--foreground));
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
/* Status pills (replaces bg-blue-100/text-blue-700 etc.) */
|
|
155
|
+
.status-pill {
|
|
156
|
+
@apply text-xs-bold px-2 py-0.5 rounded-full inline-flex items-center;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.status-pill--info {
|
|
160
|
+
background-color: hsl(var(--info) / 0.15);
|
|
161
|
+
color: hsl(var(--info));
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.status-pill--success {
|
|
165
|
+
background-color: hsl(var(--success) / 0.15);
|
|
166
|
+
color: hsl(var(--success));
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.status-pill--warning {
|
|
170
|
+
background-color: hsl(var(--warning) / 0.15);
|
|
171
|
+
color: hsl(var(--warning));
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.status-pill--muted {
|
|
175
|
+
background-color: hsl(var(--muted));
|
|
176
|
+
color: hsl(var(--muted-foreground));
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
/* High contrast pills: pure B/W */
|
|
180
|
+
.high-contrast .status-pill--info,
|
|
181
|
+
.high-contrast .status-pill--success,
|
|
182
|
+
.high-contrast .status-pill--warning,
|
|
183
|
+
.high-contrast .status-pill--muted {
|
|
184
|
+
background-color: hsl(var(--background));
|
|
185
|
+
color: hsl(var(--foreground));
|
|
186
|
+
border: 2px solid hsl(var(--border));
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
/* ===================
|
|
190
|
+
SCREEN ADAPTIVE VIEW
|
|
191
|
+
=================== */
|
|
192
|
+
.screen-adaptive-root {
|
|
193
|
+
@apply flex flex-1 flex-col w-full;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.screen-adaptive-inner {
|
|
197
|
+
@apply mx-auto w-full;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/* Max width variants */
|
|
201
|
+
.screen-max-w-none { max-width: none; }
|
|
202
|
+
.screen-max-w-full { max-width: 100%; }
|
|
203
|
+
|
|
204
|
+
.screen-max-w-sm { max-width: 24rem; } /* 384px */
|
|
205
|
+
.screen-max-w-md { max-width: 28rem; } /* 448px */
|
|
206
|
+
.screen-max-w-lg { max-width: 32rem; } /* 512px */
|
|
207
|
+
.screen-max-w-xl { max-width: 36rem; } /* 576px */
|
|
208
|
+
|
|
209
|
+
.screen-max-w-2xl { max-width: 42rem; } /* 672px */
|
|
210
|
+
.screen-max-w-3xl { max-width: 48rem; } /* 768px */
|
|
211
|
+
.screen-max-w-4xl { max-width: 56rem; } /* 896px */
|
|
212
|
+
.screen-max-w-5xl { max-width: 64rem; } /* 1024px */
|
|
213
|
+
.screen-max-w-6xl { max-width: 72rem; } /* 1152px */
|
|
214
|
+
.screen-max-w-7xl { max-width: 80rem; } /* 1280px */
|
|
215
|
+
|
|
216
|
+
/* =========================================================
|
|
217
|
+
RULE CARDS
|
|
218
|
+
========================================================= */
|
|
219
|
+
.rule-card {
|
|
220
|
+
@apply p-4 rounded-lg border-2 border-border bg-card;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.rule-card-title {
|
|
224
|
+
@apply font-bold mb-2;
|
|
225
|
+
color: hsl(var(--foreground));
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.rule-card-description {
|
|
229
|
+
@apply text-sm leading-relaxed font-bold;
|
|
230
|
+
color: hsl(var(--muted-foreground));
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
/* =========================================================
|
|
234
|
+
ACCORDION
|
|
235
|
+
========================================================= */
|
|
236
|
+
.accordion-trigger {
|
|
237
|
+
@apply p-6 hover:no-underline rounded-t-lg;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.accordion-icon-container {
|
|
241
|
+
@apply p-2 rounded-lg;
|
|
242
|
+
background-color: hsl(var(--primary) / 0.10);
|
|
243
|
+
color: hsl(var(--primary));
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.accordion-title {
|
|
247
|
+
@apply text-lg font-semibold;
|
|
248
|
+
color: hsl(var(--foreground));
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.accordion-content-container {
|
|
252
|
+
@apply px-6 py-4 rounded-b-lg space-y-4 bg-card;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
/* =========================================================
|
|
256
|
+
DETAILS (nested accordions)
|
|
257
|
+
========================================================= */
|
|
258
|
+
.details-summary {
|
|
259
|
+
@apply flex items-center justify-between cursor-pointer list-none p-4 rounded-lg border-2 border-border bg-card transition-all;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.details-summary:hover {
|
|
263
|
+
border-color: hsl(var(--primary));
|
|
264
|
+
background-color: hsl(var(--primary) / 0.05);
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.details-icon-container {
|
|
268
|
+
@apply p-2 rounded-lg transition-colors;
|
|
269
|
+
background-color: hsl(var(--primary) / 0.10);
|
|
270
|
+
color: hsl(var(--primary));
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.group\/details:hover .details-icon-container {
|
|
274
|
+
background-color: hsl(var(--primary));
|
|
275
|
+
color: hsl(var(--primary-foreground));
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.details-title {
|
|
279
|
+
@apply font-semibold text-base;
|
|
280
|
+
color: hsl(var(--foreground));
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.details-chevron {
|
|
284
|
+
color: hsl(var(--primary));
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
/* =========================================================
|
|
288
|
+
AGREEMENT LIST ITEMS
|
|
289
|
+
========================================================= */
|
|
290
|
+
.agreement-list-item {
|
|
291
|
+
@apply flex gap-2 text-sm font-bold;
|
|
292
|
+
color: hsl(var(--muted-foreground));
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
/* =========================================================
|
|
296
|
+
FUTURE PLANS / MEDIA
|
|
297
|
+
========================================================= */
|
|
298
|
+
.future-plan-description {
|
|
299
|
+
@apply text-base whitespace-pre-wrap leading-relaxed max-w-prose font-bold;
|
|
300
|
+
color: hsl(var(--muted-foreground));
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.future-plan-media {
|
|
304
|
+
@apply w-full aspect-video rounded-lg overflow-hidden border;
|
|
305
|
+
border-color: hsl(var(--border));
|
|
306
|
+
background-color: hsl(var(--muted));
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
/* Media helpers (replaces repeated w/full/max-w/aspect) */
|
|
310
|
+
.media-image-sm-centered {
|
|
311
|
+
@apply w-full h-auto max-w-sm mx-auto;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.media-square-centered {
|
|
315
|
+
@apply w-full max-w-[400px] mx-auto aspect-square rounded-md overflow-hidden;
|
|
316
|
+
background-color: hsl(var(--muted));
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.media-wide {
|
|
320
|
+
@apply w-full aspect-video rounded-lg overflow-hidden border;
|
|
321
|
+
border-color: hsl(var(--border));
|
|
322
|
+
background-color: hsl(var(--muted));
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
/* =========================================================
|
|
326
|
+
INFO SECTIONS
|
|
327
|
+
========================================================= */
|
|
328
|
+
.info-section {
|
|
329
|
+
@apply flex items-start gap-4;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.info-section-icon {
|
|
333
|
+
@apply mt-1;
|
|
334
|
+
color: hsl(var(--primary));
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
.info-section-title {
|
|
338
|
+
@apply font-semibold;
|
|
339
|
+
color: hsl(var(--foreground));
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
.info-section-description {
|
|
343
|
+
@apply text-sm font-bold;
|
|
344
|
+
color: hsl(var(--muted-foreground));
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
.info-section-divider {
|
|
348
|
+
@apply w-full h-px;
|
|
349
|
+
background-color: hsl(var(--border));
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
.info-section-header {
|
|
353
|
+
@apply text-lg font-semibold text-center pt-4;
|
|
354
|
+
color: hsl(var(--foreground));
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
/* =========================================================
|
|
358
|
+
ATTRIBUTION SECTIONS
|
|
359
|
+
========================================================= */
|
|
360
|
+
.attribution-item {
|
|
361
|
+
@apply flex items-start gap-4;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
.attribution-icon {
|
|
365
|
+
@apply mt-1;
|
|
366
|
+
color: hsl(var(--primary));
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
.attribution-title {
|
|
370
|
+
@apply font-semibold;
|
|
371
|
+
color: hsl(var(--foreground));
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
.attribution-cost {
|
|
375
|
+
@apply text-sm font-semibold;
|
|
376
|
+
color: hsl(var(--primary));
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
.attribution-description {
|
|
380
|
+
@apply text-sm mt-1 font-bold;
|
|
381
|
+
color: hsl(var(--muted-foreground));
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
/* =========================================================
|
|
385
|
+
DEDICATION SECTIONS
|
|
386
|
+
========================================================= */
|
|
387
|
+
.dedication-section {
|
|
388
|
+
@apply text-center space-y-2;
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
.dedication-header {
|
|
392
|
+
@apply inline-flex items-center gap-2;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
.dedication-title {
|
|
396
|
+
@apply font-semibold text-lg;
|
|
397
|
+
color: hsl(var(--foreground));
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
.dedication-content {
|
|
401
|
+
@apply font-bold;
|
|
402
|
+
color: hsl(var(--muted-foreground));
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
/* =========================================================
|
|
406
|
+
DMCA INFO
|
|
407
|
+
========================================================= */
|
|
408
|
+
.dmca-section-title {
|
|
409
|
+
@apply text-lg font-semibold;
|
|
410
|
+
color: hsl(var(--foreground));
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
.dmca-info-container {
|
|
414
|
+
@apply space-y-2 pl-4 border-l-2;
|
|
415
|
+
border-color: hsl(var(--border));
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
.dmca-info-row {
|
|
419
|
+
@apply flex flex-col sm:flex-row sm:items-center;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
.dmca-label {
|
|
423
|
+
@apply w-full sm:w-40 font-semibold shrink-0;
|
|
424
|
+
color: hsl(var(--foreground));
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
.dmca-value {
|
|
428
|
+
@apply break-all font-bold;
|
|
429
|
+
color: hsl(var(--muted-foreground));
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
/* =========================================================
|
|
433
|
+
BUTTONS
|
|
434
|
+
========================================================= */
|
|
435
|
+
.primary-action-button {
|
|
436
|
+
@apply w-full text-lg py-6;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
.secondary-action-grid {
|
|
440
|
+
@apply grid grid-cols-2 md:grid-cols-3 gap-4 mt-6;
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
.secondary-action-button {
|
|
444
|
+
@apply justify-center;
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
/* =========================================================
|
|
448
|
+
FOOTER
|
|
449
|
+
========================================================= */
|
|
450
|
+
.app-footer {
|
|
451
|
+
@apply w-full h-12 flex-shrink-0 bg-secondary pt-4;
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
/* =========================================================
|
|
455
|
+
CUSTOM FORM ELEMENTS
|
|
456
|
+
========================================================= */
|
|
457
|
+
.form-select-trigger {
|
|
458
|
+
@apply font-semibold rounded-xl h-11 px-4 shadow-sm border-2;
|
|
459
|
+
background-color: hsl(var(--background));
|
|
460
|
+
border-color: hsl(var(--border)) !important;
|
|
461
|
+
color: hsl(var(--foreground));
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
/* =========================================================
|
|
465
|
+
SAFE AREA UTILITIES
|
|
466
|
+
========================================================= */
|
|
467
|
+
.fixed-header {
|
|
468
|
+
padding-top: max(1rem, var(--sat));
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
.fixed-footer {
|
|
472
|
+
padding-bottom: max(1rem, var(--sab));
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
/* =========================================================
|
|
476
|
+
LANDING PAGE
|
|
477
|
+
========================================================= */
|
|
478
|
+
.landing-tabs-list {
|
|
479
|
+
@apply grid w-full grid-cols-2 bg-transparent p-0 gap-2 mb-4;
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
.landing-tab-trigger {
|
|
483
|
+
@apply flex-1;
|
|
484
|
+
}
|
|
485
|
+
|
|
486
|
+
.landing-section-title {
|
|
487
|
+
@apply text-xl font-semibold text-center;
|
|
488
|
+
color: hsl(var(--foreground));
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
.landing-section-description {
|
|
492
|
+
@apply text-center font-bold;
|
|
493
|
+
color: hsl(var(--muted-foreground));
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
.landing-video-container {
|
|
497
|
+
@apply aspect-video w-full rounded-lg overflow-hidden border;
|
|
498
|
+
border-color: hsl(var(--border));
|
|
499
|
+
background-color: hsl(var(--muted));
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
/* =========================================================
|
|
503
|
+
APP HEADER
|
|
504
|
+
========================================================= */
|
|
505
|
+
.app-header {
|
|
506
|
+
@apply flex items-center h-[60px] shadow-md;
|
|
507
|
+
background-color: hsl(var(--secondary));
|
|
508
|
+
border-bottom: 2px solid hsl(var(--border));
|
|
509
|
+
}
|
|
510
|
+
|
|
511
|
+
.app-header-container {
|
|
512
|
+
@apply flex items-center justify-between w-full px-0.5;
|
|
513
|
+
}
|
|
514
|
+
|
|
515
|
+
.app-header-actions {
|
|
516
|
+
@apply flex items-center space-x-3;
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
.app-header-menu-button {
|
|
520
|
+
@apply flex items-center space-x-2 h-10 px-3 rounded-full;
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
.app-dropdown-menu {
|
|
524
|
+
@apply w-56 border-2;
|
|
525
|
+
background-color: hsl(var(--card));
|
|
526
|
+
border-color: hsl(var(--border));
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
.app-dropdown-item {
|
|
530
|
+
@apply flex items-center cursor-pointer font-bold;
|
|
531
|
+
color: hsl(var(--foreground)) !important;
|
|
532
|
+
}
|
|
533
|
+
|
|
534
|
+
.app-dropdown-item:hover,
|
|
535
|
+
.app-dropdown-item:focus {
|
|
536
|
+
background-color: hsl(var(--accent));
|
|
537
|
+
color: hsl(var(--accent-foreground)) !important;
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
/* =========================================================
|
|
541
|
+
POPOVERS
|
|
542
|
+
========================================================= */
|
|
543
|
+
.app-popover {
|
|
544
|
+
@apply w-80 p-2 border-2;
|
|
545
|
+
background-color: hsl(var(--card));
|
|
546
|
+
border-color: hsl(var(--border));
|
|
547
|
+
color: hsl(var(--card-foreground));
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
/* =========================================================
|
|
551
|
+
HELP DIALOG
|
|
552
|
+
========================================================= */
|
|
553
|
+
.help-dialog-title {
|
|
554
|
+
@apply font-semibold;
|
|
555
|
+
color: hsl(var(--foreground)) !important;
|
|
556
|
+
}
|
|
1
557
|
|
|
2
|
-
/* =========================================================
|
|
3
|
-
FOUNDATIONS (icon + layout bundles) — replaces inline utils
|
|
4
|
-
========================================================= */
|
|
5
|
-
|
|
6
|
-
/* Icons */
|
|
7
|
-
.icon-xxs { @apply h-3 w-3; }
|
|
8
|
-
.icon-xs { @apply h-4 w-4; }
|
|
9
|
-
.icon-sm { @apply h-5 w-5; }
|
|
10
|
-
.icon-md { @apply h-6 w-6; }
|
|
11
|
-
.icon-lg { @apply h-8 w-8; }
|
|
12
|
-
.icon-xl { @apply h-10 w-10; }
|
|
13
|
-
.icon-2xl { @apply h-12 w-12; }
|
|
14
|
-
|
|
15
|
-
/* Spinners */
|
|
16
|
-
.spinner-xs { @apply icon-xs animate-spin; color: hsl(var(--primary)); }
|
|
17
|
-
.spinner-sm { @apply icon-sm animate-spin; color: hsl(var(--primary)); }
|
|
18
|
-
.spinner-md { @apply icon-md animate-spin; color: hsl(var(--primary)); }
|
|
19
|
-
.spinner-lg { @apply icon-lg animate-spin; color: hsl(var(--primary)); }
|
|
20
|
-
.spinner-xl { @apply icon-xl animate-spin; color: hsl(var(--primary)); }
|
|
21
|
-
.spinner-with-gap { @apply mr-2; }
|
|
22
|
-
|
|
23
|
-
/* Common centering */
|
|
24
|
-
.center-row { @apply flex items-center justify-center; }
|
|
25
|
-
.center-col { @apply flex flex-col items-center justify-center; }
|
|
26
|
-
.loading-block { @apply center-row py-8; }
|
|
27
|
-
.loading-block-padded { @apply center-row p-8; }
|
|
28
|
-
.loading-screen { @apply flex flex-col h-screen-mobile w-screen items-center justify-center bg-background space-y-4; }
|
|
29
|
-
|
|
30
|
-
/* Stacks */
|
|
31
|
-
.stack-1 { @apply space-y-1; }
|
|
32
|
-
.stack-2 { @apply space-y-2; }
|
|
33
|
-
.stack-4 { @apply space-y-4; }
|
|
34
|
-
.stack-6 { @apply space-y-6; }
|
|
35
|
-
|
|
36
|
-
/* =========================================================
|
|
37
|
-
PAGE LAYOUT
|
|
38
|
-
========================================================= */
|
|
39
|
-
.page-container {
|
|
40
|
-
@apply flex-1 w-full mx-auto py-4;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.page-card {
|
|
44
|
-
@apply w-full bg-card text-card-foreground shadow-xl rounded-lg border-2 border-border;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.page-card-header {
|
|
48
|
-
@apply text-center p-4 sm:p-6 items-center;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.page-card-header-left {
|
|
52
|
-
@apply p-4 sm:p-6 text-left;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.page-card-title {
|
|
56
|
-
@apply text-3xl font-bold text-foreground;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.page-card-content {
|
|
60
|
-
@apply px-2 sm:px-6 pb-4;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.inner-card-container {
|
|
64
|
-
@apply px-4 py-2;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
/* =========================================================
|
|
68
|
-
TYPOGRAPHY (high-level)
|
|
69
|
-
========================================================= */
|
|
70
|
-
.text-body {
|
|
71
|
-
@apply text-sm font-medium;
|
|
72
|
-
color: hsl(var(--foreground));
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.text-muted {
|
|
76
|
-
@apply text-sm font-medium;
|
|
77
|
-
color: hsl(var(--muted-foreground));
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.text-caption {
|
|
81
|
-
@apply text-xs font-medium;
|
|
82
|
-
color: hsl(var(--muted-foreground));
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.text-small {
|
|
86
|
-
@apply text-sm font-bold;
|
|
87
|
-
color: hsl(var(--foreground));
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
.text-xs-bold {
|
|
91
|
-
@apply text-xs font-bold;
|
|
92
|
-
color: hsl(var(--foreground));
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.text-label {
|
|
96
|
-
@apply font-bold;
|
|
97
|
-
color: hsl(var(--foreground));
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.text-counter {
|
|
101
|
-
@apply text-sm font-bold;
|
|
102
|
-
color: hsl(var(--muted-foreground));
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
.empty-state-text {
|
|
106
|
-
@apply text-center py-8 font-bold;
|
|
107
|
-
color: hsl(var(--muted-foreground));
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
.card-description {
|
|
111
|
-
@apply text-sm font-bold;
|
|
112
|
-
color: hsl(var(--muted-foreground));
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
.input-description {
|
|
116
|
-
@apply text-xs;
|
|
117
|
-
color: hsl(var(--muted-foreground));
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
.disclaimer-text {
|
|
121
|
-
@apply text-sm font-bold text-center;
|
|
122
|
-
color: hsl(var(--muted-foreground));
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
/* Error blocks / inline */
|
|
126
|
-
.text-error {
|
|
127
|
-
@apply text-sm font-bold;
|
|
128
|
-
color: hsl(var(--destructive));
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
.text-error-block {
|
|
132
|
-
@apply text-center p-4 font-bold rounded-md border;
|
|
133
|
-
color: hsl(var(--destructive));
|
|
134
|
-
border-color: hsl(var(--destructive) / 0.5);
|
|
135
|
-
background-color: hsl(var(--destructive) / 0.10);
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
/* =========================================================
|
|
139
|
-
LINKS
|
|
140
|
-
========================================================= */
|
|
141
|
-
.auth-link {
|
|
142
|
-
@apply text-sm underline font-semibold;
|
|
143
|
-
color: hsl(var(--primary));
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
/* =========================================================
|
|
147
|
-
CHAT
|
|
148
|
-
========================================================= */
|
|
149
|
-
.chat-date-separator {
|
|
150
|
-
@apply text-xs font-bold bg-muted px-3 py-1 rounded-full;
|
|
151
|
-
color: hsl(var(--foreground));
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
/* Status pills (replaces bg-blue-100/text-blue-700 etc.) */
|
|
155
|
-
.status-pill {
|
|
156
|
-
@apply text-xs-bold px-2 py-0.5 rounded-full inline-flex items-center;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
.status-pill--info {
|
|
160
|
-
background-color: hsl(var(--info) / 0.15);
|
|
161
|
-
color: hsl(var(--info));
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
.status-pill--success {
|
|
165
|
-
background-color: hsl(var(--success) / 0.15);
|
|
166
|
-
color: hsl(var(--success));
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
.status-pill--warning {
|
|
170
|
-
background-color: hsl(var(--warning) / 0.15);
|
|
171
|
-
color: hsl(var(--warning));
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
.status-pill--muted {
|
|
175
|
-
background-color: hsl(var(--muted));
|
|
176
|
-
color: hsl(var(--muted-foreground));
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
/* High contrast pills: pure B/W */
|
|
180
|
-
.high-contrast .status-pill--info,
|
|
181
|
-
.high-contrast .status-pill--success,
|
|
182
|
-
.high-contrast .status-pill--warning,
|
|
183
|
-
.high-contrast .status-pill--muted {
|
|
184
|
-
background-color: hsl(var(--background));
|
|
185
|
-
color: hsl(var(--foreground));
|
|
186
|
-
border: 2px solid hsl(var(--border));
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
/* ===================
|
|
190
|
-
SCREEN ADAPTIVE VIEW
|
|
191
|
-
=================== */
|
|
192
|
-
.screen-adaptive-root {
|
|
193
|
-
@apply flex flex-1 flex-col w-full;
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
.screen-adaptive-inner {
|
|
197
|
-
@apply mx-auto w-full;
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
/* Max width variants */
|
|
201
|
-
.screen-max-w-none { max-width: none; }
|
|
202
|
-
.screen-max-w-full { max-width: 100%; }
|
|
203
|
-
|
|
204
|
-
.screen-max-w-sm { max-width: 24rem; } /* 384px */
|
|
205
|
-
.screen-max-w-md { max-width: 28rem; } /* 448px */
|
|
206
|
-
.screen-max-w-lg { max-width: 32rem; } /* 512px */
|
|
207
|
-
.screen-max-w-xl { max-width: 36rem; } /* 576px */
|
|
208
|
-
|
|
209
|
-
.screen-max-w-2xl { max-width: 42rem; } /* 672px */
|
|
210
|
-
.screen-max-w-3xl { max-width: 48rem; } /* 768px */
|
|
211
|
-
.screen-max-w-4xl { max-width: 56rem; } /* 896px */
|
|
212
|
-
.screen-max-w-5xl { max-width: 64rem; } /* 1024px */
|
|
213
|
-
.screen-max-w-6xl { max-width: 72rem; } /* 1152px */
|
|
214
|
-
.screen-max-w-7xl { max-width: 80rem; } /* 1280px */
|
|
215
|
-
|
|
216
|
-
/* =========================================================
|
|
217
|
-
RULE CARDS
|
|
218
|
-
========================================================= */
|
|
219
|
-
.rule-card {
|
|
220
|
-
@apply p-4 rounded-lg border-2 border-border bg-card;
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
.rule-card-title {
|
|
224
|
-
@apply font-bold mb-2;
|
|
225
|
-
color: hsl(var(--foreground));
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
.rule-card-description {
|
|
229
|
-
@apply text-sm leading-relaxed font-bold;
|
|
230
|
-
color: hsl(var(--muted-foreground));
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
/* =========================================================
|
|
234
|
-
ACCORDION
|
|
235
|
-
========================================================= */
|
|
236
|
-
.accordion-trigger {
|
|
237
|
-
@apply p-6 hover:no-underline rounded-t-lg;
|
|
238
|
-
}
|
|
239
|
-
|
|
240
|
-
.accordion-icon-container {
|
|
241
|
-
@apply p-2 rounded-lg;
|
|
242
|
-
background-color: hsl(var(--primary) / 0.10);
|
|
243
|
-
color: hsl(var(--primary));
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
.accordion-title {
|
|
247
|
-
@apply text-lg font-semibold;
|
|
248
|
-
color: hsl(var(--foreground));
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
.accordion-content-container {
|
|
252
|
-
@apply px-6 py-4 rounded-b-lg space-y-4 bg-card;
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
/* =========================================================
|
|
256
|
-
DETAILS (nested accordions)
|
|
257
|
-
========================================================= */
|
|
258
|
-
.details-summary {
|
|
259
|
-
@apply flex items-center justify-between cursor-pointer list-none p-4 rounded-lg border-2 border-border bg-card transition-all;
|
|
260
|
-
}
|
|
261
|
-
|
|
262
|
-
.details-summary:hover {
|
|
263
|
-
border-color: hsl(var(--primary));
|
|
264
|
-
background-color: hsl(var(--primary) / 0.05);
|
|
265
|
-
}
|
|
266
|
-
|
|
267
|
-
.details-icon-container {
|
|
268
|
-
@apply p-2 rounded-lg transition-colors;
|
|
269
|
-
background-color: hsl(var(--primary) / 0.10);
|
|
270
|
-
color: hsl(var(--primary));
|
|
271
|
-
}
|
|
272
|
-
|
|
273
|
-
.group\/details:hover .details-icon-container {
|
|
274
|
-
background-color: hsl(var(--primary));
|
|
275
|
-
color: hsl(var(--primary-foreground));
|
|
276
|
-
}
|
|
277
|
-
|
|
278
|
-
.details-title {
|
|
279
|
-
@apply font-semibold text-base;
|
|
280
|
-
color: hsl(var(--foreground));
|
|
281
|
-
}
|
|
282
|
-
|
|
283
|
-
.details-chevron {
|
|
284
|
-
color: hsl(var(--primary));
|
|
285
|
-
}
|
|
286
|
-
|
|
287
|
-
/* =========================================================
|
|
288
|
-
AGREEMENT LIST ITEMS
|
|
289
|
-
========================================================= */
|
|
290
|
-
.agreement-list-item {
|
|
291
|
-
@apply flex gap-2 text-sm font-bold;
|
|
292
|
-
color: hsl(var(--muted-foreground));
|
|
293
|
-
}
|
|
294
|
-
|
|
295
|
-
/* =========================================================
|
|
296
|
-
FUTURE PLANS / MEDIA
|
|
297
|
-
========================================================= */
|
|
298
|
-
.future-plan-description {
|
|
299
|
-
@apply text-base whitespace-pre-wrap leading-relaxed max-w-prose font-bold;
|
|
300
|
-
color: hsl(var(--muted-foreground));
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
.future-plan-media {
|
|
304
|
-
@apply w-full aspect-video rounded-lg overflow-hidden border;
|
|
305
|
-
border-color: hsl(var(--border));
|
|
306
|
-
background-color: hsl(var(--muted));
|
|
307
|
-
}
|
|
308
|
-
|
|
309
|
-
/* Media helpers (replaces repeated w/full/max-w/aspect) */
|
|
310
|
-
.media-image-sm-centered {
|
|
311
|
-
@apply w-full h-auto max-w-sm mx-auto;
|
|
312
|
-
}
|
|
313
|
-
|
|
314
|
-
.media-square-centered {
|
|
315
|
-
@apply w-full max-w-[400px] mx-auto aspect-square rounded-md overflow-hidden;
|
|
316
|
-
background-color: hsl(var(--muted));
|
|
317
|
-
}
|
|
318
|
-
|
|
319
|
-
.media-wide {
|
|
320
|
-
@apply w-full aspect-video rounded-lg overflow-hidden border;
|
|
321
|
-
border-color: hsl(var(--border));
|
|
322
|
-
background-color: hsl(var(--muted));
|
|
323
|
-
}
|
|
324
|
-
|
|
325
|
-
/* =========================================================
|
|
326
|
-
INFO SECTIONS
|
|
327
|
-
========================================================= */
|
|
328
|
-
.info-section {
|
|
329
|
-
@apply flex items-start gap-4;
|
|
330
|
-
}
|
|
331
|
-
|
|
332
|
-
.info-section-icon {
|
|
333
|
-
@apply mt-1;
|
|
334
|
-
color: hsl(var(--primary));
|
|
335
|
-
}
|
|
336
|
-
|
|
337
|
-
.info-section-title {
|
|
338
|
-
@apply font-semibold;
|
|
339
|
-
color: hsl(var(--foreground));
|
|
340
|
-
}
|
|
341
|
-
|
|
342
|
-
.info-section-description {
|
|
343
|
-
@apply text-sm font-bold;
|
|
344
|
-
color: hsl(var(--muted-foreground));
|
|
345
|
-
}
|
|
346
|
-
|
|
347
|
-
.info-section-divider {
|
|
348
|
-
@apply w-full h-px;
|
|
349
|
-
background-color: hsl(var(--border));
|
|
350
|
-
}
|
|
351
|
-
|
|
352
|
-
.info-section-header {
|
|
353
|
-
@apply text-lg font-semibold text-center pt-4;
|
|
354
|
-
color: hsl(var(--foreground));
|
|
355
|
-
}
|
|
356
|
-
|
|
357
|
-
/* =========================================================
|
|
358
|
-
ATTRIBUTION SECTIONS
|
|
359
|
-
========================================================= */
|
|
360
|
-
.attribution-item {
|
|
361
|
-
@apply flex items-start gap-4;
|
|
362
|
-
}
|
|
363
|
-
|
|
364
|
-
.attribution-icon {
|
|
365
|
-
@apply mt-1;
|
|
366
|
-
color: hsl(var(--primary));
|
|
367
|
-
}
|
|
368
|
-
|
|
369
|
-
.attribution-title {
|
|
370
|
-
@apply font-semibold;
|
|
371
|
-
color: hsl(var(--foreground));
|
|
372
|
-
}
|
|
373
|
-
|
|
374
|
-
.attribution-cost {
|
|
375
|
-
@apply text-sm font-semibold;
|
|
376
|
-
color: hsl(var(--primary));
|
|
377
|
-
}
|
|
378
|
-
|
|
379
|
-
.attribution-description {
|
|
380
|
-
@apply text-sm mt-1 font-bold;
|
|
381
|
-
color: hsl(var(--muted-foreground));
|
|
382
|
-
}
|
|
383
|
-
|
|
384
|
-
/* =========================================================
|
|
385
|
-
DEDICATION SECTIONS
|
|
386
|
-
========================================================= */
|
|
387
|
-
.dedication-section {
|
|
388
|
-
@apply text-center space-y-2;
|
|
389
|
-
}
|
|
390
|
-
|
|
391
|
-
.dedication-header {
|
|
392
|
-
@apply inline-flex items-center gap-2;
|
|
393
|
-
}
|
|
394
|
-
|
|
395
|
-
.dedication-title {
|
|
396
|
-
@apply font-semibold text-lg;
|
|
397
|
-
color: hsl(var(--foreground));
|
|
398
|
-
}
|
|
399
|
-
|
|
400
|
-
.dedication-content {
|
|
401
|
-
@apply font-bold;
|
|
402
|
-
color: hsl(var(--muted-foreground));
|
|
403
|
-
}
|
|
404
|
-
|
|
405
|
-
/* =========================================================
|
|
406
|
-
DMCA INFO
|
|
407
|
-
========================================================= */
|
|
408
|
-
.dmca-section-title {
|
|
409
|
-
@apply text-lg font-semibold;
|
|
410
|
-
color: hsl(var(--foreground));
|
|
411
|
-
}
|
|
412
|
-
|
|
413
|
-
.dmca-info-container {
|
|
414
|
-
@apply space-y-2 pl-4 border-l-2;
|
|
415
|
-
border-color: hsl(var(--border));
|
|
416
|
-
}
|
|
417
|
-
|
|
418
|
-
.dmca-info-row {
|
|
419
|
-
@apply flex flex-col sm:flex-row sm:items-center;
|
|
420
|
-
}
|
|
421
|
-
|
|
422
|
-
.dmca-label {
|
|
423
|
-
@apply w-full sm:w-40 font-semibold shrink-0;
|
|
424
|
-
color: hsl(var(--foreground));
|
|
425
|
-
}
|
|
426
|
-
|
|
427
|
-
.dmca-value {
|
|
428
|
-
@apply break-all font-bold;
|
|
429
|
-
color: hsl(var(--muted-foreground));
|
|
430
|
-
}
|
|
431
|
-
|
|
432
|
-
/* =========================================================
|
|
433
|
-
BUTTONS
|
|
434
|
-
========================================================= */
|
|
435
|
-
.primary-action-button {
|
|
436
|
-
@apply w-full text-lg py-6;
|
|
437
|
-
}
|
|
438
|
-
|
|
439
|
-
.secondary-action-grid {
|
|
440
|
-
@apply grid grid-cols-2 md:grid-cols-3 gap-4 mt-6;
|
|
441
|
-
}
|
|
442
|
-
|
|
443
|
-
.secondary-action-button {
|
|
444
|
-
@apply justify-center;
|
|
445
|
-
}
|
|
446
|
-
|
|
447
|
-
/* =========================================================
|
|
448
|
-
FOOTER
|
|
449
|
-
========================================================= */
|
|
450
|
-
.app-footer {
|
|
451
|
-
@apply w-full h-12 flex-shrink-0 bg-secondary pt-4;
|
|
452
|
-
}
|
|
453
|
-
|
|
454
|
-
/* =========================================================
|
|
455
|
-
CUSTOM FORM ELEMENTS
|
|
456
|
-
========================================================= */
|
|
457
|
-
.form-select-trigger {
|
|
458
|
-
@apply font-semibold rounded-xl h-11 px-4 shadow-sm border-2;
|
|
459
|
-
background-color: hsl(var(--background));
|
|
460
|
-
border-color: hsl(var(--border)) !important;
|
|
461
|
-
color: hsl(var(--foreground));
|
|
462
|
-
}
|
|
463
|
-
|
|
464
|
-
/* =========================================================
|
|
465
|
-
SAFE AREA UTILITIES
|
|
466
|
-
========================================================= */
|
|
467
|
-
.fixed-header {
|
|
468
|
-
padding-top: max(1rem, var(--sat));
|
|
469
|
-
}
|
|
470
|
-
|
|
471
|
-
.fixed-footer {
|
|
472
|
-
padding-bottom: max(1rem, var(--sab));
|
|
473
|
-
}
|
|
474
|
-
|
|
475
|
-
/* =========================================================
|
|
476
|
-
LANDING PAGE
|
|
477
|
-
========================================================= */
|
|
478
|
-
.landing-tabs-list {
|
|
479
|
-
@apply grid w-full grid-cols-2 bg-transparent p-0 gap-2 mb-4;
|
|
480
|
-
}
|
|
481
|
-
|
|
482
|
-
.landing-tab-trigger {
|
|
483
|
-
@apply flex-1;
|
|
484
|
-
}
|
|
485
|
-
|
|
486
|
-
.landing-section-title {
|
|
487
|
-
@apply text-xl font-semibold text-center;
|
|
488
|
-
color: hsl(var(--foreground));
|
|
489
|
-
}
|
|
490
|
-
|
|
491
|
-
.landing-section-description {
|
|
492
|
-
@apply text-center font-bold;
|
|
493
|
-
color: hsl(var(--muted-foreground));
|
|
494
|
-
}
|
|
495
|
-
|
|
496
|
-
.landing-video-container {
|
|
497
|
-
@apply aspect-video w-full rounded-lg overflow-hidden border;
|
|
498
|
-
border-color: hsl(var(--border));
|
|
499
|
-
background-color: hsl(var(--muted));
|
|
500
|
-
}
|
|
501
|
-
|
|
502
|
-
/* =========================================================
|
|
503
|
-
APP HEADER
|
|
504
|
-
========================================================= */
|
|
505
|
-
.app-header {
|
|
506
|
-
@apply flex items-center h-[60px] shadow-md;
|
|
507
|
-
background-color: hsl(var(--secondary));
|
|
508
|
-
border-bottom: 2px solid hsl(var(--border));
|
|
509
|
-
}
|
|
510
|
-
|
|
511
|
-
.app-header-container {
|
|
512
|
-
@apply flex items-center justify-between w-full px-0.5;
|
|
513
|
-
}
|
|
514
|
-
|
|
515
|
-
.app-header-actions {
|
|
516
|
-
@apply flex items-center space-x-3;
|
|
517
|
-
}
|
|
518
|
-
|
|
519
|
-
.app-header-menu-button {
|
|
520
|
-
@apply flex items-center space-x-2 h-10 px-3 rounded-full;
|
|
521
|
-
}
|
|
522
|
-
|
|
523
|
-
.app-dropdown-menu {
|
|
524
|
-
@apply w-56 border-2;
|
|
525
|
-
background-color: hsl(var(--card));
|
|
526
|
-
border-color: hsl(var(--border));
|
|
527
|
-
}
|
|
528
|
-
|
|
529
|
-
.app-dropdown-item {
|
|
530
|
-
@apply flex items-center cursor-pointer font-bold;
|
|
531
|
-
color: hsl(var(--foreground)) !important;
|
|
532
|
-
}
|
|
533
|
-
|
|
534
|
-
.app-dropdown-item:hover,
|
|
535
|
-
.app-dropdown-item:focus {
|
|
536
|
-
background-color: hsl(var(--accent));
|
|
537
|
-
color: hsl(var(--accent-foreground)) !important;
|
|
538
|
-
}
|
|
539
|
-
|
|
540
|
-
/* =========================================================
|
|
541
|
-
POPOVERS
|
|
542
|
-
========================================================= */
|
|
543
|
-
.app-popover {
|
|
544
|
-
@apply w-80 p-2 border-2;
|
|
545
|
-
background-color: hsl(var(--card));
|
|
546
|
-
border-color: hsl(var(--border));
|
|
547
|
-
color: hsl(var(--card-foreground));
|
|
548
|
-
}
|
|
549
|
-
|
|
550
|
-
/* =========================================================
|
|
551
|
-
HELP DIALOG
|
|
552
|
-
========================================================= */
|
|
553
|
-
.help-dialog-title {
|
|
554
|
-
@apply font-semibold;
|
|
555
|
-
color: hsl(var(--foreground)) !important;
|
|
556
|
-
}
|
|
557
|
-
|
|
558
|
-
.help-dialog-body {
|
|
559
|
-
font-weight: 700 !important;
|
|
560
|
-
color: hsl(var(--muted-foreground)) !important;
|
|
561
|
-
}
|
|
562
|
-
|
|
563
|
-
@media (prefers-contrast: more) {
|
|
564
558
|
.help-dialog-body {
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
}
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
.
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
}
|
|
592
|
-
|
|
593
|
-
.filter-select-item
|
|
594
|
-
.sort-select-item
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
}
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
.
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
.high-contrast .
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
.high-contrast .
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
}
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
.view-toggle-
|
|
630
|
-
|
|
631
|
-
|
|
559
|
+
font-weight: 700 !important;
|
|
560
|
+
color: hsl(var(--muted-foreground)) !important;
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
@media (prefers-contrast: more) {
|
|
564
|
+
.help-dialog-body {
|
|
565
|
+
color: #ffffff !important;
|
|
566
|
+
}
|
|
567
|
+
}
|
|
568
|
+
|
|
569
|
+
/* =========================================================
|
|
570
|
+
FILTER & SORT (GENERIC)
|
|
571
|
+
========================================================= */
|
|
572
|
+
.filter-select-trigger,
|
|
573
|
+
.sort-select-trigger {
|
|
574
|
+
@apply w-full sm:w-auto rounded-xl h-11 px-4 font-bold shadow-sm border-2;
|
|
575
|
+
background-color: hsl(var(--primary));
|
|
576
|
+
border-color: hsl(var(--border));
|
|
577
|
+
color: hsl(var(--primary-foreground));
|
|
578
|
+
}
|
|
579
|
+
|
|
580
|
+
.filter-select-content,
|
|
581
|
+
.sort-select-content {
|
|
582
|
+
background-color: hsl(var(--popover));
|
|
583
|
+
border-color: hsl(var(--border));
|
|
584
|
+
color: hsl(var(--popover-foreground));
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
.filter-select-item,
|
|
588
|
+
.sort-select-item {
|
|
589
|
+
@apply font-bold;
|
|
590
|
+
color: hsl(var(--foreground));
|
|
591
|
+
}
|
|
592
|
+
|
|
593
|
+
.filter-select-item:hover,
|
|
594
|
+
.sort-select-item:hover {
|
|
595
|
+
background-color: hsl(var(--accent));
|
|
596
|
+
color: hsl(var(--accent-foreground));
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
/* High contrast behavior */
|
|
600
|
+
.high-contrast .filter-select-trigger,
|
|
601
|
+
.high-contrast .sort-select-trigger {
|
|
602
|
+
background-color: hsl(var(--background));
|
|
603
|
+
border-color: hsl(var(--border));
|
|
604
|
+
color: hsl(var(--foreground));
|
|
605
|
+
}
|
|
606
|
+
|
|
607
|
+
.high-contrast .filter-select-content,
|
|
608
|
+
.high-contrast .sort-select-content {
|
|
609
|
+
background-color: hsl(var(--background));
|
|
610
|
+
border-color: hsl(var(--border));
|
|
611
|
+
color: hsl(var(--foreground));
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
.high-contrast .filter-select-item:hover,
|
|
615
|
+
.high-contrast .sort-select-item:hover {
|
|
616
|
+
background-color: hsl(var(--foreground));
|
|
617
|
+
color: hsl(var(--background));
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
/* =========================================================
|
|
621
|
+
VIEW TOGGLE (GENERIC)
|
|
622
|
+
========================================================= */
|
|
623
|
+
.view-toggle-container {
|
|
624
|
+
@apply flex items-center p-1 rounded-xl border-2 shadow-sm;
|
|
625
|
+
background-color: hsl(var(--muted));
|
|
626
|
+
border-color: hsl(var(--border));
|
|
627
|
+
}
|
|
628
|
+
|
|
629
|
+
.view-toggle-button {
|
|
630
|
+
@apply rounded-lg h-8 w-8;
|
|
631
|
+
color: hsl(var(--foreground));
|
|
632
|
+
}
|
|
632
633
|
}
|