@ttt-productions/theme-core 0.1.20 → 0.1.22
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/base.css +8 -11
- package/dist/styles/components.css +530 -531
- package/dist/styles/contract.css +25 -25
- package/dist/styles/hooks.css +91 -92
- package/dist/styles/tokens.css +73 -74
- package/package.json +1 -1
|
@@ -1,633 +1,632 @@
|
|
|
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
1
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
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
|
+
}
|
|
46
42
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
43
|
+
.page-card {
|
|
44
|
+
@apply w-full bg-card text-card-foreground shadow-xl rounded-lg border-2 border-border;
|
|
45
|
+
}
|
|
50
46
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
47
|
+
.page-card-header {
|
|
48
|
+
@apply text-center p-4 sm:p-6 items-center;
|
|
49
|
+
}
|
|
54
50
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
51
|
+
.page-card-header-left {
|
|
52
|
+
@apply p-4 sm:p-6 text-left;
|
|
53
|
+
}
|
|
58
54
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
55
|
+
.page-card-title {
|
|
56
|
+
@apply text-3xl font-bold text-foreground;
|
|
57
|
+
}
|
|
62
58
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
59
|
+
.page-card-content {
|
|
60
|
+
@apply px-2 sm:px-6 pb-4;
|
|
61
|
+
}
|
|
66
62
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
.text-body {
|
|
71
|
-
@apply text-sm font-medium;
|
|
72
|
-
color: hsl(var(--foreground));
|
|
73
|
-
}
|
|
63
|
+
.inner-card-container {
|
|
64
|
+
@apply px-4 py-2;
|
|
65
|
+
}
|
|
74
66
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
67
|
+
/* =========================================================
|
|
68
|
+
TYPOGRAPHY (high-level)
|
|
69
|
+
========================================================= */
|
|
70
|
+
.text-body {
|
|
71
|
+
@apply text-sm font-medium;
|
|
72
|
+
color: hsl(var(--foreground));
|
|
73
|
+
}
|
|
79
74
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
75
|
+
.text-muted {
|
|
76
|
+
@apply text-sm font-medium;
|
|
77
|
+
color: hsl(var(--muted-foreground));
|
|
78
|
+
}
|
|
84
79
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
80
|
+
.text-caption {
|
|
81
|
+
@apply text-xs font-medium;
|
|
82
|
+
color: hsl(var(--muted-foreground));
|
|
83
|
+
}
|
|
89
84
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
85
|
+
.text-small {
|
|
86
|
+
@apply text-sm font-bold;
|
|
87
|
+
color: hsl(var(--foreground));
|
|
88
|
+
}
|
|
94
89
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
90
|
+
.text-xs-bold {
|
|
91
|
+
@apply text-xs font-bold;
|
|
92
|
+
color: hsl(var(--foreground));
|
|
93
|
+
}
|
|
99
94
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
95
|
+
.text-label {
|
|
96
|
+
@apply font-bold;
|
|
97
|
+
color: hsl(var(--foreground));
|
|
98
|
+
}
|
|
104
99
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
100
|
+
.text-counter {
|
|
101
|
+
@apply text-sm font-bold;
|
|
102
|
+
color: hsl(var(--muted-foreground));
|
|
103
|
+
}
|
|
109
104
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
105
|
+
.empty-state-text {
|
|
106
|
+
@apply text-center py-8 font-bold;
|
|
107
|
+
color: hsl(var(--muted-foreground));
|
|
108
|
+
}
|
|
114
109
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
110
|
+
.card-description {
|
|
111
|
+
@apply text-sm font-bold;
|
|
112
|
+
color: hsl(var(--muted-foreground));
|
|
113
|
+
}
|
|
119
114
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
115
|
+
.input-description {
|
|
116
|
+
@apply text-xs;
|
|
117
|
+
color: hsl(var(--muted-foreground));
|
|
118
|
+
}
|
|
124
119
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
}
|
|
120
|
+
.disclaimer-text {
|
|
121
|
+
@apply text-sm font-bold text-center;
|
|
122
|
+
color: hsl(var(--muted-foreground));
|
|
123
|
+
}
|
|
130
124
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
}
|
|
125
|
+
/* Error blocks / inline */
|
|
126
|
+
.text-error {
|
|
127
|
+
@apply text-sm font-bold;
|
|
128
|
+
color: hsl(var(--destructive));
|
|
129
|
+
}
|
|
137
130
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
}
|
|
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
|
+
}
|
|
145
137
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
138
|
+
/* =========================================================
|
|
139
|
+
LINKS
|
|
140
|
+
========================================================= */
|
|
141
|
+
.auth-link {
|
|
142
|
+
@apply text-sm underline font-semibold;
|
|
143
|
+
color: hsl(var(--primary));
|
|
144
|
+
}
|
|
153
145
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
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
|
+
}
|
|
158
153
|
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
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
|
+
}
|
|
163
158
|
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
159
|
+
.status-pill--info {
|
|
160
|
+
background-color: hsl(var(--info) / 0.15);
|
|
161
|
+
color: hsl(var(--info));
|
|
162
|
+
}
|
|
168
163
|
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
164
|
+
.status-pill--success {
|
|
165
|
+
background-color: hsl(var(--success) / 0.15);
|
|
166
|
+
color: hsl(var(--success));
|
|
167
|
+
}
|
|
173
168
|
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
169
|
+
.status-pill--warning {
|
|
170
|
+
background-color: hsl(var(--warning) / 0.15);
|
|
171
|
+
color: hsl(var(--warning));
|
|
172
|
+
}
|
|
178
173
|
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
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
|
-
}
|
|
174
|
+
.status-pill--muted {
|
|
175
|
+
background-color: hsl(var(--muted));
|
|
176
|
+
color: hsl(var(--muted-foreground));
|
|
177
|
+
}
|
|
188
178
|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
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
|
-
}
|
|
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
|
+
}
|
|
222
188
|
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
189
|
+
/* ===================
|
|
190
|
+
SCREEN ADAPTIVE VIEW
|
|
191
|
+
=================== */
|
|
192
|
+
.screen-adaptive-root {
|
|
193
|
+
@apply flex flex-1 flex-col w-full;
|
|
226
194
|
}
|
|
227
195
|
|
|
228
|
-
.
|
|
229
|
-
@apply
|
|
230
|
-
color: hsl(var(--muted-foreground));
|
|
196
|
+
.screen-adaptive-inner {
|
|
197
|
+
@apply mx-auto w-full;
|
|
231
198
|
}
|
|
232
199
|
|
|
233
|
-
/*
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
.accordion-trigger {
|
|
237
|
-
@apply p-6 hover:no-underline rounded-t-lg;
|
|
238
|
-
}
|
|
200
|
+
/* Max width variants */
|
|
201
|
+
.screen-max-w-none { max-width: none; }
|
|
202
|
+
.screen-max-w-full { max-width: 100%; }
|
|
239
203
|
|
|
240
|
-
.
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
}
|
|
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 */
|
|
245
208
|
|
|
246
|
-
.
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
}
|
|
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 */
|
|
250
215
|
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
216
|
+
/* =========================================================
|
|
217
|
+
RULE CARDS
|
|
218
|
+
========================================================= */
|
|
219
|
+
.rule-card {
|
|
220
|
+
@apply p-4 rounded-lg border-2 border-border bg-card;
|
|
221
|
+
}
|
|
254
222
|
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
@apply flex items-center justify-between cursor-pointer list-none p-4 rounded-lg border-2 border-border bg-card transition-all;
|
|
260
|
-
}
|
|
223
|
+
.rule-card-title {
|
|
224
|
+
@apply font-bold mb-2;
|
|
225
|
+
color: hsl(var(--foreground));
|
|
226
|
+
}
|
|
261
227
|
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
228
|
+
.rule-card-description {
|
|
229
|
+
@apply text-sm leading-relaxed font-bold;
|
|
230
|
+
color: hsl(var(--muted-foreground));
|
|
231
|
+
}
|
|
266
232
|
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
233
|
+
/* =========================================================
|
|
234
|
+
ACCORDION
|
|
235
|
+
========================================================= */
|
|
236
|
+
.accordion-trigger {
|
|
237
|
+
@apply p-6 hover:no-underline rounded-t-lg;
|
|
238
|
+
}
|
|
272
239
|
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
240
|
+
.accordion-icon-container {
|
|
241
|
+
@apply p-2 rounded-lg;
|
|
242
|
+
background-color: hsl(var(--primary) / 0.10);
|
|
243
|
+
color: hsl(var(--primary));
|
|
244
|
+
}
|
|
277
245
|
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
246
|
+
.accordion-title {
|
|
247
|
+
@apply text-lg font-semibold;
|
|
248
|
+
color: hsl(var(--foreground));
|
|
249
|
+
}
|
|
282
250
|
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
251
|
+
.accordion-content-container {
|
|
252
|
+
@apply px-6 py-4 rounded-b-lg space-y-4 bg-card;
|
|
253
|
+
}
|
|
286
254
|
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
}
|
|
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
|
+
}
|
|
294
261
|
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
@apply text-base whitespace-pre-wrap leading-relaxed max-w-prose font-bold;
|
|
300
|
-
color: hsl(var(--muted-foreground));
|
|
301
|
-
}
|
|
262
|
+
.details-summary:hover {
|
|
263
|
+
border-color: hsl(var(--primary));
|
|
264
|
+
background-color: hsl(var(--primary) / 0.05);
|
|
265
|
+
}
|
|
302
266
|
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
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
|
+
}
|
|
308
272
|
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
273
|
+
.group\/details:hover .details-icon-container {
|
|
274
|
+
background-color: hsl(var(--primary));
|
|
275
|
+
color: hsl(var(--primary-foreground));
|
|
276
|
+
}
|
|
313
277
|
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
278
|
+
.details-title {
|
|
279
|
+
@apply font-semibold text-base;
|
|
280
|
+
color: hsl(var(--foreground));
|
|
281
|
+
}
|
|
318
282
|
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
background-color: hsl(var(--muted));
|
|
323
|
-
}
|
|
283
|
+
.details-chevron {
|
|
284
|
+
color: hsl(var(--primary));
|
|
285
|
+
}
|
|
324
286
|
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
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
|
+
}
|
|
331
294
|
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
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
|
+
}
|
|
336
302
|
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
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
|
+
}
|
|
341
308
|
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
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
|
+
}
|
|
346
313
|
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
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
|
+
}
|
|
351
318
|
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
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
|
+
}
|
|
356
324
|
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
325
|
+
/* =========================================================
|
|
326
|
+
INFO SECTIONS
|
|
327
|
+
========================================================= */
|
|
328
|
+
.info-section {
|
|
329
|
+
@apply flex items-start gap-4;
|
|
330
|
+
}
|
|
363
331
|
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
332
|
+
.info-section-icon {
|
|
333
|
+
@apply mt-1;
|
|
334
|
+
color: hsl(var(--primary));
|
|
335
|
+
}
|
|
368
336
|
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
337
|
+
.info-section-title {
|
|
338
|
+
@apply font-semibold;
|
|
339
|
+
color: hsl(var(--foreground));
|
|
340
|
+
}
|
|
373
341
|
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
342
|
+
.info-section-description {
|
|
343
|
+
@apply text-sm font-bold;
|
|
344
|
+
color: hsl(var(--muted-foreground));
|
|
345
|
+
}
|
|
378
346
|
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
347
|
+
.info-section-divider {
|
|
348
|
+
@apply w-full h-px;
|
|
349
|
+
background-color: hsl(var(--border));
|
|
350
|
+
}
|
|
383
351
|
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
@apply text-center space-y-2;
|
|
389
|
-
}
|
|
352
|
+
.info-section-header {
|
|
353
|
+
@apply text-lg font-semibold text-center pt-4;
|
|
354
|
+
color: hsl(var(--foreground));
|
|
355
|
+
}
|
|
390
356
|
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
357
|
+
/* =========================================================
|
|
358
|
+
ATTRIBUTION SECTIONS
|
|
359
|
+
========================================================= */
|
|
360
|
+
.attribution-item {
|
|
361
|
+
@apply flex items-start gap-4;
|
|
362
|
+
}
|
|
394
363
|
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
364
|
+
.attribution-icon {
|
|
365
|
+
@apply mt-1;
|
|
366
|
+
color: hsl(var(--primary));
|
|
367
|
+
}
|
|
399
368
|
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
369
|
+
.attribution-title {
|
|
370
|
+
@apply font-semibold;
|
|
371
|
+
color: hsl(var(--foreground));
|
|
372
|
+
}
|
|
404
373
|
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
@apply text-lg font-semibold;
|
|
410
|
-
color: hsl(var(--foreground));
|
|
411
|
-
}
|
|
374
|
+
.attribution-cost {
|
|
375
|
+
@apply text-sm font-semibold;
|
|
376
|
+
color: hsl(var(--primary));
|
|
377
|
+
}
|
|
412
378
|
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
379
|
+
.attribution-description {
|
|
380
|
+
@apply text-sm mt-1 font-bold;
|
|
381
|
+
color: hsl(var(--muted-foreground));
|
|
382
|
+
}
|
|
417
383
|
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
384
|
+
/* =========================================================
|
|
385
|
+
DEDICATION SECTIONS
|
|
386
|
+
========================================================= */
|
|
387
|
+
.dedication-section {
|
|
388
|
+
@apply text-center space-y-2;
|
|
389
|
+
}
|
|
421
390
|
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
}
|
|
391
|
+
.dedication-header {
|
|
392
|
+
@apply inline-flex items-center gap-2;
|
|
393
|
+
}
|
|
426
394
|
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
395
|
+
.dedication-title {
|
|
396
|
+
@apply font-semibold text-lg;
|
|
397
|
+
color: hsl(var(--foreground));
|
|
398
|
+
}
|
|
431
399
|
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
@apply w-full text-lg py-6;
|
|
437
|
-
}
|
|
400
|
+
.dedication-content {
|
|
401
|
+
@apply font-bold;
|
|
402
|
+
color: hsl(var(--muted-foreground));
|
|
403
|
+
}
|
|
438
404
|
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
405
|
+
/* =========================================================
|
|
406
|
+
DMCA INFO
|
|
407
|
+
========================================================= */
|
|
408
|
+
.dmca-section-title {
|
|
409
|
+
@apply text-lg font-semibold;
|
|
410
|
+
color: hsl(var(--foreground));
|
|
411
|
+
}
|
|
442
412
|
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
413
|
+
.dmca-info-container {
|
|
414
|
+
@apply space-y-2 pl-4 border-l-2;
|
|
415
|
+
border-color: hsl(var(--border));
|
|
416
|
+
}
|
|
446
417
|
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
.app-footer {
|
|
451
|
-
@apply w-full h-12 flex-shrink-0 bg-secondary pt-4;
|
|
452
|
-
}
|
|
418
|
+
.dmca-info-row {
|
|
419
|
+
@apply flex flex-col sm:flex-row sm:items-center;
|
|
420
|
+
}
|
|
453
421
|
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
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
|
-
}
|
|
422
|
+
.dmca-label {
|
|
423
|
+
@apply w-full sm:w-40 font-semibold shrink-0;
|
|
424
|
+
color: hsl(var(--foreground));
|
|
425
|
+
}
|
|
463
426
|
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
padding-top: max(1rem, var(--sat));
|
|
469
|
-
}
|
|
427
|
+
.dmca-value {
|
|
428
|
+
@apply break-all font-bold;
|
|
429
|
+
color: hsl(var(--muted-foreground));
|
|
430
|
+
}
|
|
470
431
|
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
432
|
+
/* =========================================================
|
|
433
|
+
BUTTONS
|
|
434
|
+
========================================================= */
|
|
435
|
+
.primary-action-button {
|
|
436
|
+
@apply w-full text-lg py-6;
|
|
437
|
+
}
|
|
474
438
|
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
.landing-tabs-list {
|
|
479
|
-
@apply grid w-full grid-cols-2 bg-transparent p-0 gap-2 mb-4;
|
|
480
|
-
}
|
|
439
|
+
.secondary-action-grid {
|
|
440
|
+
@apply grid grid-cols-2 md:grid-cols-3 gap-4 mt-6;
|
|
441
|
+
}
|
|
481
442
|
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
443
|
+
.secondary-action-button {
|
|
444
|
+
@apply justify-center;
|
|
445
|
+
}
|
|
485
446
|
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
447
|
+
/* =========================================================
|
|
448
|
+
FOOTER
|
|
449
|
+
========================================================= */
|
|
450
|
+
.app-footer {
|
|
451
|
+
@apply w-full h-12 flex-shrink-0 bg-secondary pt-4;
|
|
452
|
+
}
|
|
490
453
|
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
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
|
+
}
|
|
495
463
|
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
464
|
+
/* =========================================================
|
|
465
|
+
SAFE AREA UTILITIES
|
|
466
|
+
========================================================= */
|
|
467
|
+
.fixed-header {
|
|
468
|
+
padding-top: max(1rem, var(--sat));
|
|
469
|
+
}
|
|
501
470
|
|
|
502
|
-
|
|
503
|
-
|
|
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
|
-
}
|
|
471
|
+
.fixed-footer {
|
|
472
|
+
padding-bottom: max(1rem, var(--sab));
|
|
473
|
+
}
|
|
510
474
|
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
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
|
+
}
|
|
514
481
|
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
482
|
+
.landing-tab-trigger {
|
|
483
|
+
@apply flex-1;
|
|
484
|
+
}
|
|
518
485
|
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
486
|
+
.landing-section-title {
|
|
487
|
+
@apply text-xl font-semibold text-center;
|
|
488
|
+
color: hsl(var(--foreground));
|
|
489
|
+
}
|
|
522
490
|
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
}
|
|
491
|
+
.landing-section-description {
|
|
492
|
+
@apply text-center font-bold;
|
|
493
|
+
color: hsl(var(--muted-foreground));
|
|
494
|
+
}
|
|
528
495
|
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
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
|
+
}
|
|
533
501
|
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
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
|
+
}
|
|
539
510
|
|
|
540
|
-
|
|
541
|
-
|
|
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
|
-
}
|
|
511
|
+
.app-header-container {
|
|
512
|
+
@apply flex items-center justify-between w-full px-0.5;
|
|
513
|
+
}
|
|
549
514
|
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
.help-dialog-title {
|
|
554
|
-
@apply font-semibold;
|
|
555
|
-
color: hsl(var(--foreground)) !important;
|
|
556
|
-
}
|
|
515
|
+
.app-header-actions {
|
|
516
|
+
@apply flex items-center space-x-3;
|
|
517
|
+
}
|
|
557
518
|
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
}
|
|
519
|
+
.app-header-menu-button {
|
|
520
|
+
@apply flex items-center space-x-2 h-10 px-3 rounded-full;
|
|
521
|
+
}
|
|
562
522
|
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
523
|
+
.app-dropdown-menu {
|
|
524
|
+
@apply w-56 border-2;
|
|
525
|
+
background-color: hsl(var(--card));
|
|
526
|
+
border-color: hsl(var(--border));
|
|
527
|
+
}
|
|
568
528
|
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
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
|
-
}
|
|
529
|
+
.app-dropdown-item {
|
|
530
|
+
@apply flex items-center cursor-pointer font-bold;
|
|
531
|
+
color: hsl(var(--foreground)) !important;
|
|
532
|
+
}
|
|
579
533
|
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
}
|
|
534
|
+
.app-dropdown-item:hover,
|
|
535
|
+
.app-dropdown-item:focus {
|
|
536
|
+
background-color: hsl(var(--accent));
|
|
537
|
+
color: hsl(var(--accent-foreground)) !important;
|
|
538
|
+
}
|
|
586
539
|
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
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
|
+
}
|
|
592
549
|
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
550
|
+
/* =========================================================
|
|
551
|
+
HELP DIALOG
|
|
552
|
+
========================================================= */
|
|
553
|
+
.help-dialog-title {
|
|
554
|
+
@apply font-semibold;
|
|
555
|
+
color: hsl(var(--foreground)) !important;
|
|
556
|
+
}
|
|
598
557
|
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
border-color: hsl(var(--border));
|
|
604
|
-
color: hsl(var(--foreground));
|
|
605
|
-
}
|
|
558
|
+
.help-dialog-body {
|
|
559
|
+
font-weight: 700 !important;
|
|
560
|
+
color: hsl(var(--muted-foreground)) !important;
|
|
561
|
+
}
|
|
606
562
|
|
|
607
|
-
|
|
608
|
-
.
|
|
609
|
-
|
|
610
|
-
border-color: hsl(var(--border));
|
|
611
|
-
color: hsl(var(--foreground));
|
|
563
|
+
@media (prefers-contrast: more) {
|
|
564
|
+
.help-dialog-body {
|
|
565
|
+
color: #ffffff !important;
|
|
612
566
|
}
|
|
567
|
+
}
|
|
613
568
|
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
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
|
+
}
|
|
619
579
|
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
border-color: hsl(var(--border));
|
|
627
|
-
}
|
|
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
|
+
}
|
|
628
586
|
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
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));
|
|
633
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
|
+
}
|