eprec 1.3.0 → 1.5.0
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/README.md +4 -4
- package/app/assets/styles.css +329 -182
- package/app/components/style-system-sample.tsx +197 -0
- package/app/styles/tokens.ts +99 -0
- package/app-server.ts +175 -6
- package/cli.ts +16 -9
- package/package.json +2 -2
- package/process-course/edits/cli.ts +8 -4
package/app/assets/styles.css
CHANGED
|
@@ -1,5 +1,142 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
color-scheme: light;
|
|
3
|
+
--color-primary: #0ea5e9;
|
|
4
|
+
--color-primary-hover: #0284c7;
|
|
5
|
+
--color-primary-active: #0369a1;
|
|
6
|
+
--color-on-primary: #ffffff;
|
|
7
|
+
--color-background: #f8fafc;
|
|
8
|
+
--color-surface: #ffffff;
|
|
9
|
+
--color-surface-muted: #f8fafc;
|
|
10
|
+
--color-surface-inverse: #0f172a;
|
|
11
|
+
--color-text: #0f172a;
|
|
12
|
+
--color-text-muted: #64748b;
|
|
13
|
+
--color-text-subtle: #475569;
|
|
14
|
+
--color-text-secondary: #334155;
|
|
15
|
+
--color-text-faint: #94a3b8;
|
|
16
|
+
--color-text-inverse: #e2e8f0;
|
|
17
|
+
--color-border: #e2e8f0;
|
|
18
|
+
--color-border-strong: #cbd5e1;
|
|
19
|
+
--color-border-accent: #38bdf8;
|
|
20
|
+
--color-border-muted: color-mix(
|
|
21
|
+
in srgb,
|
|
22
|
+
var(--color-border) 70%,
|
|
23
|
+
transparent
|
|
24
|
+
);
|
|
25
|
+
--color-info-surface: #e0f2fe;
|
|
26
|
+
--color-info-text: #0369a1;
|
|
27
|
+
--color-success-surface: #dcfce7;
|
|
28
|
+
--color-success-text: #166534;
|
|
29
|
+
--color-warning-surface: #fef3c7;
|
|
30
|
+
--color-warning-text: #92400e;
|
|
31
|
+
--color-warning-border: #fbbf24;
|
|
32
|
+
--color-danger-surface: #fee2e2;
|
|
33
|
+
--color-danger-text: #b91c1c;
|
|
34
|
+
--color-danger-border: #fecaca;
|
|
35
|
+
--color-danger-border-strong: #fca5a5;
|
|
36
|
+
--font-family:
|
|
37
|
+
'Inter',
|
|
38
|
+
'Segoe UI',
|
|
39
|
+
system-ui,
|
|
40
|
+
-apple-system,
|
|
41
|
+
sans-serif;
|
|
42
|
+
--font-size-xs: 12px;
|
|
43
|
+
--font-size-sm: 14px;
|
|
44
|
+
--font-size-base: 16px;
|
|
45
|
+
--font-size-lg: 18px;
|
|
46
|
+
--font-size-xl: 20px;
|
|
47
|
+
--font-size-2xl: 32px;
|
|
48
|
+
--font-weight-normal: 400;
|
|
49
|
+
--font-weight-medium: 500;
|
|
50
|
+
--font-weight-semibold: 600;
|
|
51
|
+
--font-weight-bold: 700;
|
|
52
|
+
--spacing-xs: 4px;
|
|
53
|
+
--spacing-sm: 8px;
|
|
54
|
+
--spacing-md: 12px;
|
|
55
|
+
--spacing-lg: 16px;
|
|
56
|
+
--spacing-xl: 20px;
|
|
57
|
+
--spacing-2xl: 24px;
|
|
58
|
+
--spacing-3xl: 32px;
|
|
59
|
+
--spacing-4xl: 48px;
|
|
60
|
+
--spacing-5xl: 72px;
|
|
61
|
+
--radius-sm: 8px;
|
|
62
|
+
--radius-md: 10px;
|
|
63
|
+
--radius-lg: 12px;
|
|
64
|
+
--radius-xl: 16px;
|
|
65
|
+
--radius-pill: 999px;
|
|
66
|
+
--shadow-sm: 0 1px 2px
|
|
67
|
+
color-mix(in srgb, var(--color-text) 12%, transparent);
|
|
68
|
+
--shadow-md: 0 6px 16px
|
|
69
|
+
color-mix(in srgb, var(--color-text) 14%, transparent);
|
|
70
|
+
--shadow-lg: 0 18px 38px
|
|
71
|
+
color-mix(in srgb, var(--color-text) 16%, transparent);
|
|
72
|
+
--transition-fast: 150ms ease;
|
|
73
|
+
--transition-normal: 240ms ease;
|
|
74
|
+
--spacing-page: var(--spacing-4xl);
|
|
75
|
+
--spacing-page-inline: var(--spacing-2xl);
|
|
76
|
+
--spacing-page-bottom: var(--spacing-5xl);
|
|
77
|
+
--spacing-section: var(--spacing-3xl);
|
|
78
|
+
--card-min-width: 240px;
|
|
79
|
+
--card-min-width-wide: calc(var(--card-min-width) + 80px);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
@media (prefers-color-scheme: dark) {
|
|
83
|
+
:root {
|
|
84
|
+
color-scheme: dark;
|
|
85
|
+
--color-primary: #38bdf8;
|
|
86
|
+
--color-primary-hover: #0ea5e9;
|
|
87
|
+
--color-primary-active: #0284c7;
|
|
88
|
+
--color-on-primary: #0f172a;
|
|
89
|
+
--color-background: #0b1120;
|
|
90
|
+
--color-surface: #111827;
|
|
91
|
+
--color-surface-muted: #0f172a;
|
|
92
|
+
--color-surface-inverse: #f8fafc;
|
|
93
|
+
--color-text: #f8fafc;
|
|
94
|
+
--color-text-muted: #94a3b8;
|
|
95
|
+
--color-text-subtle: #cbd5e1;
|
|
96
|
+
--color-text-secondary: #e2e8f0;
|
|
97
|
+
--color-text-faint: #64748b;
|
|
98
|
+
--color-text-inverse: #0f172a;
|
|
99
|
+
--color-border: #334155;
|
|
100
|
+
--color-border-strong: #475569;
|
|
101
|
+
--color-border-accent: #38bdf8;
|
|
102
|
+
--color-info-surface: #0c4a6e;
|
|
103
|
+
--color-info-text: #7dd3fc;
|
|
104
|
+
--color-success-surface: #14532d;
|
|
105
|
+
--color-success-text: #86efac;
|
|
106
|
+
--color-warning-surface: #78350f;
|
|
107
|
+
--color-warning-text: #fcd34d;
|
|
108
|
+
--color-warning-border: #f59e0b;
|
|
109
|
+
--color-danger-surface: #7f1d1d;
|
|
110
|
+
--color-danger-text: #fecaca;
|
|
111
|
+
--color-danger-border: #ef4444;
|
|
112
|
+
--color-danger-border-strong: #fca5a5;
|
|
113
|
+
--shadow-sm: 0 1px 2px
|
|
114
|
+
color-mix(in srgb, #0f172a 12%, transparent);
|
|
115
|
+
--shadow-md: 0 6px 16px
|
|
116
|
+
color-mix(in srgb, #0f172a 14%, transparent);
|
|
117
|
+
--shadow-lg: 0 18px 38px
|
|
118
|
+
color-mix(in srgb, #0f172a 16%, transparent);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
@media (max-width: 1024px) {
|
|
123
|
+
:root {
|
|
124
|
+
--spacing-page: var(--spacing-3xl);
|
|
125
|
+
--spacing-page-inline: var(--spacing-xl);
|
|
126
|
+
--spacing-page-bottom: var(--spacing-4xl);
|
|
127
|
+
--spacing-section: var(--spacing-2xl);
|
|
128
|
+
--card-min-width: 220px;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
@media (max-width: 640px) {
|
|
133
|
+
:root {
|
|
134
|
+
--spacing-page: var(--spacing-2xl);
|
|
135
|
+
--spacing-page-inline: var(--spacing-lg);
|
|
136
|
+
--spacing-page-bottom: var(--spacing-3xl);
|
|
137
|
+
--spacing-section: var(--spacing-lg);
|
|
138
|
+
--card-min-width: 200px;
|
|
139
|
+
}
|
|
3
140
|
}
|
|
4
141
|
|
|
5
142
|
* {
|
|
@@ -8,14 +145,10 @@
|
|
|
8
145
|
|
|
9
146
|
body {
|
|
10
147
|
margin: 0;
|
|
11
|
-
font-family:
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
-apple-system,
|
|
16
|
-
sans-serif;
|
|
17
|
-
background: #f8fafc;
|
|
18
|
-
color: #0f172a;
|
|
148
|
+
font-family: var(--font-family);
|
|
149
|
+
font-size: var(--font-size-sm);
|
|
150
|
+
background: var(--color-background);
|
|
151
|
+
color: var(--color-text);
|
|
19
152
|
}
|
|
20
153
|
|
|
21
154
|
h1,
|
|
@@ -28,75 +161,76 @@ p {
|
|
|
28
161
|
.app-shell {
|
|
29
162
|
max-width: 960px;
|
|
30
163
|
margin: 0 auto;
|
|
31
|
-
padding:
|
|
164
|
+
padding: var(--spacing-page) var(--spacing-page-inline)
|
|
165
|
+
var(--spacing-page-bottom);
|
|
32
166
|
}
|
|
33
167
|
|
|
34
168
|
.app-header {
|
|
35
169
|
display: flex;
|
|
36
170
|
flex-direction: column;
|
|
37
|
-
gap:
|
|
38
|
-
margin-bottom:
|
|
171
|
+
gap: var(--spacing-md);
|
|
172
|
+
margin-bottom: var(--spacing-3xl);
|
|
39
173
|
}
|
|
40
174
|
|
|
41
175
|
.app-kicker {
|
|
42
|
-
font-size:
|
|
176
|
+
font-size: var(--font-size-xs);
|
|
43
177
|
letter-spacing: 0.16em;
|
|
44
178
|
text-transform: uppercase;
|
|
45
|
-
color:
|
|
46
|
-
font-weight:
|
|
179
|
+
color: var(--color-text-muted);
|
|
180
|
+
font-weight: var(--font-weight-semibold);
|
|
47
181
|
}
|
|
48
182
|
|
|
49
183
|
.app-title {
|
|
50
|
-
font-size:
|
|
51
|
-
font-weight:
|
|
184
|
+
font-size: var(--font-size-2xl);
|
|
185
|
+
font-weight: var(--font-weight-bold);
|
|
52
186
|
}
|
|
53
187
|
|
|
54
188
|
.app-subtitle {
|
|
55
|
-
font-size:
|
|
56
|
-
color:
|
|
189
|
+
font-size: var(--font-size-base);
|
|
190
|
+
color: var(--color-text-subtle);
|
|
57
191
|
line-height: 1.6;
|
|
58
192
|
max-width: 640px;
|
|
59
193
|
}
|
|
60
194
|
|
|
61
195
|
.app-grid {
|
|
62
196
|
display: grid;
|
|
63
|
-
gap:
|
|
64
|
-
grid-template-columns: repeat(auto-fit, minmax(
|
|
197
|
+
gap: var(--spacing-lg);
|
|
198
|
+
grid-template-columns: repeat(auto-fit, minmax(var(--card-min-width), 1fr));
|
|
65
199
|
}
|
|
66
200
|
|
|
67
201
|
.app-card {
|
|
68
|
-
background:
|
|
69
|
-
border-radius:
|
|
70
|
-
border: 1px solid
|
|
71
|
-
padding:
|
|
72
|
-
box-shadow:
|
|
202
|
+
background: var(--color-surface);
|
|
203
|
+
border-radius: var(--radius-xl);
|
|
204
|
+
border: 1px solid var(--color-border);
|
|
205
|
+
padding: var(--spacing-xl);
|
|
206
|
+
box-shadow: var(--shadow-sm);
|
|
73
207
|
display: flex;
|
|
74
208
|
flex-direction: column;
|
|
75
|
-
gap:
|
|
209
|
+
gap: var(--spacing-md);
|
|
76
210
|
}
|
|
77
211
|
|
|
78
212
|
.app-list {
|
|
79
213
|
margin: 0;
|
|
80
|
-
padding-left:
|
|
81
|
-
color:
|
|
214
|
+
padding-left: var(--spacing-lg);
|
|
215
|
+
color: var(--color-text-secondary);
|
|
82
216
|
line-height: 1.6;
|
|
83
217
|
}
|
|
84
218
|
|
|
85
219
|
.app-muted {
|
|
86
|
-
color:
|
|
220
|
+
color: var(--color-text-muted);
|
|
87
221
|
line-height: 1.5;
|
|
88
222
|
}
|
|
89
223
|
|
|
90
224
|
.status-pill {
|
|
91
225
|
display: inline-flex;
|
|
92
226
|
align-items: center;
|
|
93
|
-
gap:
|
|
94
|
-
padding:
|
|
95
|
-
border-radius:
|
|
96
|
-
background:
|
|
97
|
-
color:
|
|
98
|
-
font-size:
|
|
99
|
-
font-weight:
|
|
227
|
+
gap: var(--spacing-xs);
|
|
228
|
+
padding: var(--spacing-xs) var(--spacing-md);
|
|
229
|
+
border-radius: var(--radius-pill);
|
|
230
|
+
background: var(--color-info-surface);
|
|
231
|
+
color: var(--color-info-text);
|
|
232
|
+
font-size: var(--font-size-xs);
|
|
233
|
+
font-weight: var(--font-weight-semibold);
|
|
100
234
|
width: fit-content;
|
|
101
235
|
}
|
|
102
236
|
|
|
@@ -104,22 +238,22 @@ p {
|
|
|
104
238
|
display: inline-flex;
|
|
105
239
|
align-items: center;
|
|
106
240
|
justify-content: space-between;
|
|
107
|
-
gap:
|
|
108
|
-
padding:
|
|
241
|
+
gap: var(--spacing-md);
|
|
242
|
+
padding: var(--spacing-sm) var(--spacing-md);
|
|
109
243
|
border: none;
|
|
110
|
-
border-radius:
|
|
111
|
-
background:
|
|
112
|
-
color:
|
|
113
|
-
font-size:
|
|
114
|
-
font-weight:
|
|
244
|
+
border-radius: var(--radius-md);
|
|
245
|
+
background: var(--color-primary);
|
|
246
|
+
color: var(--color-on-primary);
|
|
247
|
+
font-size: var(--font-size-sm);
|
|
248
|
+
font-weight: var(--font-weight-semibold);
|
|
115
249
|
cursor: pointer;
|
|
116
250
|
transition:
|
|
117
|
-
transform
|
|
118
|
-
background
|
|
251
|
+
transform var(--transition-fast),
|
|
252
|
+
background var(--transition-fast);
|
|
119
253
|
}
|
|
120
254
|
|
|
121
255
|
.counter-button:hover {
|
|
122
|
-
background:
|
|
256
|
+
background: var(--color-primary-hover);
|
|
123
257
|
}
|
|
124
258
|
|
|
125
259
|
.counter-button:disabled {
|
|
@@ -132,7 +266,7 @@ p {
|
|
|
132
266
|
}
|
|
133
267
|
|
|
134
268
|
.counter-value {
|
|
135
|
-
font-weight:
|
|
269
|
+
font-weight: var(--font-weight-bold);
|
|
136
270
|
}
|
|
137
271
|
|
|
138
272
|
.app-card--full {
|
|
@@ -142,81 +276,81 @@ p {
|
|
|
142
276
|
.summary-grid {
|
|
143
277
|
display: grid;
|
|
144
278
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
145
|
-
gap:
|
|
146
|
-
margin-top:
|
|
279
|
+
gap: var(--spacing-lg);
|
|
280
|
+
margin-top: var(--spacing-sm);
|
|
147
281
|
}
|
|
148
282
|
|
|
149
283
|
.summary-item {
|
|
150
284
|
display: flex;
|
|
151
285
|
flex-direction: column;
|
|
152
|
-
gap:
|
|
286
|
+
gap: var(--spacing-xs);
|
|
153
287
|
}
|
|
154
288
|
|
|
155
289
|
.summary-label {
|
|
156
|
-
font-size:
|
|
157
|
-
font-weight:
|
|
290
|
+
font-size: var(--font-size-xs);
|
|
291
|
+
font-weight: var(--font-weight-semibold);
|
|
158
292
|
text-transform: uppercase;
|
|
159
293
|
letter-spacing: 0.08em;
|
|
160
|
-
color:
|
|
294
|
+
color: var(--color-text-faint);
|
|
161
295
|
}
|
|
162
296
|
|
|
163
297
|
.summary-value {
|
|
164
|
-
font-size:
|
|
165
|
-
font-weight:
|
|
166
|
-
color:
|
|
298
|
+
font-size: var(--font-size-base);
|
|
299
|
+
font-weight: var(--font-weight-semibold);
|
|
300
|
+
color: var(--color-text);
|
|
167
301
|
}
|
|
168
302
|
|
|
169
303
|
.summary-subtext {
|
|
170
|
-
font-size:
|
|
171
|
-
color:
|
|
304
|
+
font-size: var(--font-size-sm);
|
|
305
|
+
color: var(--color-text-muted);
|
|
172
306
|
line-height: 1.4;
|
|
173
307
|
}
|
|
174
308
|
|
|
175
309
|
.timeline-card {
|
|
176
|
-
gap:
|
|
310
|
+
gap: var(--spacing-xl);
|
|
177
311
|
}
|
|
178
312
|
|
|
179
313
|
.timeline-header {
|
|
180
314
|
display: flex;
|
|
181
315
|
align-items: flex-start;
|
|
182
316
|
justify-content: space-between;
|
|
183
|
-
gap:
|
|
317
|
+
gap: var(--spacing-lg);
|
|
184
318
|
flex-wrap: wrap;
|
|
185
319
|
}
|
|
186
320
|
|
|
187
321
|
.timeline-layout {
|
|
188
322
|
display: grid;
|
|
189
323
|
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
|
|
190
|
-
gap:
|
|
324
|
+
gap: var(--spacing-xl);
|
|
191
325
|
}
|
|
192
326
|
|
|
193
327
|
.timeline-preview {
|
|
194
328
|
display: flex;
|
|
195
329
|
flex-direction: column;
|
|
196
|
-
gap:
|
|
330
|
+
gap: var(--spacing-md);
|
|
197
331
|
}
|
|
198
332
|
|
|
199
333
|
.timeline-video {
|
|
200
334
|
display: flex;
|
|
201
335
|
flex-direction: column;
|
|
202
|
-
gap:
|
|
203
|
-
padding:
|
|
204
|
-
border-radius:
|
|
205
|
-
border: 1px solid
|
|
206
|
-
background:
|
|
336
|
+
gap: var(--spacing-sm);
|
|
337
|
+
padding: var(--spacing-md);
|
|
338
|
+
border-radius: var(--radius-xl);
|
|
339
|
+
border: 1px solid var(--color-border);
|
|
340
|
+
background: var(--color-surface);
|
|
207
341
|
}
|
|
208
342
|
|
|
209
343
|
.timeline-video-header {
|
|
210
344
|
display: flex;
|
|
211
345
|
align-items: flex-start;
|
|
212
346
|
justify-content: space-between;
|
|
213
|
-
gap:
|
|
347
|
+
gap: var(--spacing-md);
|
|
214
348
|
}
|
|
215
349
|
|
|
216
350
|
.timeline-video-player {
|
|
217
351
|
width: 100%;
|
|
218
|
-
border-radius:
|
|
219
|
-
background:
|
|
352
|
+
border-radius: var(--radius-lg);
|
|
353
|
+
background: var(--color-surface-inverse);
|
|
220
354
|
aspect-ratio: 16 / 9;
|
|
221
355
|
}
|
|
222
356
|
|
|
@@ -224,19 +358,19 @@ p {
|
|
|
224
358
|
display: flex;
|
|
225
359
|
align-items: center;
|
|
226
360
|
justify-content: space-between;
|
|
227
|
-
font-size:
|
|
228
|
-
color:
|
|
361
|
+
font-size: var(--font-size-xs);
|
|
362
|
+
color: var(--color-text-muted);
|
|
229
363
|
}
|
|
230
364
|
|
|
231
365
|
.timeline-track {
|
|
232
366
|
position: relative;
|
|
233
367
|
height: 72px;
|
|
234
|
-
border-radius:
|
|
235
|
-
border: 1px solid
|
|
368
|
+
border-radius: var(--radius-xl);
|
|
369
|
+
border: 1px solid var(--color-border);
|
|
236
370
|
background: linear-gradient(
|
|
237
371
|
90deg,
|
|
238
|
-
|
|
239
|
-
|
|
372
|
+
var(--color-border-muted) 0%,
|
|
373
|
+
var(--color-border-muted) 2%,
|
|
240
374
|
transparent 2%,
|
|
241
375
|
transparent 20%
|
|
242
376
|
);
|
|
@@ -246,7 +380,12 @@ p {
|
|
|
246
380
|
|
|
247
381
|
.timeline-track--skeleton {
|
|
248
382
|
min-height: 72px;
|
|
249
|
-
background: linear-gradient(
|
|
383
|
+
background: linear-gradient(
|
|
384
|
+
90deg,
|
|
385
|
+
var(--color-background) 0%,
|
|
386
|
+
var(--color-border) 45%,
|
|
387
|
+
var(--color-background) 90%
|
|
388
|
+
);
|
|
250
389
|
background-size: 200% 100%;
|
|
251
390
|
animation: shimmer 1.8s infinite;
|
|
252
391
|
}
|
|
@@ -255,29 +394,30 @@ p {
|
|
|
255
394
|
position: absolute;
|
|
256
395
|
top: 14px;
|
|
257
396
|
height: 44px;
|
|
258
|
-
border-radius:
|
|
259
|
-
border: 1px solid
|
|
260
|
-
background:
|
|
397
|
+
border-radius: var(--radius-md);
|
|
398
|
+
border: 1px solid var(--color-danger-border-strong);
|
|
399
|
+
background: var(--color-danger-surface);
|
|
261
400
|
cursor: pointer;
|
|
262
401
|
left: var(--range-left);
|
|
263
402
|
width: var(--range-width);
|
|
264
403
|
transition:
|
|
265
|
-
transform
|
|
266
|
-
box-shadow
|
|
404
|
+
transform var(--transition-fast),
|
|
405
|
+
box-shadow var(--transition-fast);
|
|
267
406
|
}
|
|
268
407
|
|
|
269
408
|
.timeline-range--manual {
|
|
270
|
-
background:
|
|
271
|
-
border-color:
|
|
409
|
+
background: var(--color-warning-surface);
|
|
410
|
+
border-color: var(--color-warning-border);
|
|
272
411
|
}
|
|
273
412
|
|
|
274
413
|
.timeline-range--command {
|
|
275
|
-
background:
|
|
276
|
-
border-color:
|
|
414
|
+
background: var(--color-danger-surface);
|
|
415
|
+
border-color: var(--color-danger-border-strong);
|
|
277
416
|
}
|
|
278
417
|
|
|
279
418
|
.timeline-range.is-selected {
|
|
280
|
-
box-shadow: 0 0 0 2px
|
|
419
|
+
box-shadow: 0 0 0 2px
|
|
420
|
+
color-mix(in srgb, var(--color-primary) 60%, transparent);
|
|
281
421
|
transform: translateY(-1px);
|
|
282
422
|
}
|
|
283
423
|
|
|
@@ -287,21 +427,22 @@ p {
|
|
|
287
427
|
bottom: 0;
|
|
288
428
|
width: 2px;
|
|
289
429
|
left: var(--playhead);
|
|
290
|
-
background:
|
|
291
|
-
box-shadow: 0 0 0 1px
|
|
430
|
+
background: var(--color-primary);
|
|
431
|
+
box-shadow: 0 0 0 1px
|
|
432
|
+
color-mix(in srgb, var(--color-primary) 40%, transparent);
|
|
292
433
|
}
|
|
293
434
|
|
|
294
435
|
.timeline-scale {
|
|
295
436
|
display: flex;
|
|
296
437
|
justify-content: space-between;
|
|
297
|
-
font-size:
|
|
298
|
-
color:
|
|
438
|
+
font-size: var(--font-size-xs);
|
|
439
|
+
color: var(--color-text-muted);
|
|
299
440
|
}
|
|
300
441
|
|
|
301
442
|
.timeline-controls {
|
|
302
443
|
display: grid;
|
|
303
444
|
grid-template-columns: auto 1fr auto auto;
|
|
304
|
-
gap:
|
|
445
|
+
gap: var(--spacing-md);
|
|
305
446
|
align-items: center;
|
|
306
447
|
}
|
|
307
448
|
|
|
@@ -312,39 +453,39 @@ p {
|
|
|
312
453
|
.control-label {
|
|
313
454
|
display: flex;
|
|
314
455
|
flex-direction: column;
|
|
315
|
-
font-size:
|
|
316
|
-
gap:
|
|
317
|
-
color:
|
|
318
|
-
font-weight:
|
|
456
|
+
font-size: var(--font-size-xs);
|
|
457
|
+
gap: var(--spacing-xs);
|
|
458
|
+
color: var(--color-text-muted);
|
|
459
|
+
font-weight: var(--font-weight-semibold);
|
|
319
460
|
}
|
|
320
461
|
|
|
321
462
|
.control-value {
|
|
322
|
-
font-size:
|
|
323
|
-
color:
|
|
463
|
+
font-size: var(--font-size-sm);
|
|
464
|
+
color: var(--color-text);
|
|
324
465
|
}
|
|
325
466
|
|
|
326
467
|
.panel-header {
|
|
327
468
|
display: flex;
|
|
328
469
|
align-items: center;
|
|
329
470
|
justify-content: space-between;
|
|
330
|
-
gap:
|
|
331
|
-
margin-bottom:
|
|
471
|
+
gap: var(--spacing-md);
|
|
472
|
+
margin-bottom: var(--spacing-sm);
|
|
332
473
|
}
|
|
333
474
|
|
|
334
475
|
.panel-grid {
|
|
335
476
|
display: grid;
|
|
336
477
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
337
|
-
gap:
|
|
338
|
-
margin-bottom:
|
|
478
|
+
gap: var(--spacing-md);
|
|
479
|
+
margin-bottom: var(--spacing-md);
|
|
339
480
|
}
|
|
340
481
|
|
|
341
482
|
.input-label {
|
|
342
483
|
display: flex;
|
|
343
484
|
flex-direction: column;
|
|
344
|
-
gap:
|
|
345
|
-
font-size:
|
|
346
|
-
font-weight:
|
|
347
|
-
color:
|
|
485
|
+
gap: var(--spacing-sm);
|
|
486
|
+
font-size: var(--font-size-xs);
|
|
487
|
+
font-weight: var(--font-weight-semibold);
|
|
488
|
+
color: var(--color-text-subtle);
|
|
348
489
|
}
|
|
349
490
|
|
|
350
491
|
.input-label--full {
|
|
@@ -352,47 +493,50 @@ p {
|
|
|
352
493
|
}
|
|
353
494
|
|
|
354
495
|
.text-input {
|
|
355
|
-
border: 1px solid
|
|
356
|
-
border-radius:
|
|
357
|
-
padding:
|
|
358
|
-
font-size:
|
|
496
|
+
border: 1px solid var(--color-border-strong);
|
|
497
|
+
border-radius: var(--radius-md);
|
|
498
|
+
padding: var(--spacing-sm) var(--spacing-md);
|
|
499
|
+
font-size: var(--font-size-sm);
|
|
359
500
|
font-family: inherit;
|
|
501
|
+
background: var(--color-surface);
|
|
502
|
+
color: var(--color-text);
|
|
360
503
|
}
|
|
361
504
|
|
|
362
505
|
.text-input--compact {
|
|
363
|
-
padding:
|
|
506
|
+
padding: var(--spacing-xs) var(--spacing-sm);
|
|
364
507
|
}
|
|
365
508
|
|
|
366
509
|
.button {
|
|
367
|
-
border: 1px solid
|
|
368
|
-
background:
|
|
369
|
-
color:
|
|
370
|
-
border-radius:
|
|
371
|
-
padding:
|
|
372
|
-
font-size:
|
|
373
|
-
font-weight:
|
|
510
|
+
border: 1px solid var(--color-border-strong);
|
|
511
|
+
background: var(--color-surface);
|
|
512
|
+
color: var(--color-text);
|
|
513
|
+
border-radius: var(--radius-md);
|
|
514
|
+
padding: var(--spacing-sm) var(--spacing-md);
|
|
515
|
+
font-size: var(--font-size-sm);
|
|
516
|
+
font-weight: var(--font-weight-semibold);
|
|
374
517
|
cursor: pointer;
|
|
375
518
|
transition:
|
|
376
|
-
background
|
|
377
|
-
color
|
|
519
|
+
background var(--transition-fast),
|
|
520
|
+
color var(--transition-fast),
|
|
521
|
+
box-shadow var(--transition-fast);
|
|
378
522
|
}
|
|
379
523
|
|
|
380
524
|
.button--primary {
|
|
381
|
-
background:
|
|
382
|
-
color:
|
|
383
|
-
border-color:
|
|
525
|
+
background: var(--color-primary);
|
|
526
|
+
color: var(--color-on-primary);
|
|
527
|
+
border-color: var(--color-primary-active);
|
|
384
528
|
}
|
|
385
529
|
|
|
386
530
|
.button--danger {
|
|
387
|
-
background:
|
|
388
|
-
border-color:
|
|
389
|
-
color:
|
|
531
|
+
background: var(--color-danger-surface);
|
|
532
|
+
border-color: var(--color-danger-border);
|
|
533
|
+
color: var(--color-danger-text);
|
|
390
534
|
}
|
|
391
535
|
|
|
392
536
|
.button--ghost {
|
|
393
|
-
background:
|
|
394
|
-
border-color:
|
|
395
|
-
color:
|
|
537
|
+
background: var(--color-surface-muted);
|
|
538
|
+
border-color: var(--color-border);
|
|
539
|
+
color: var(--color-text-subtle);
|
|
396
540
|
}
|
|
397
541
|
|
|
398
542
|
.button:disabled {
|
|
@@ -406,23 +550,23 @@ p {
|
|
|
406
550
|
margin: 0;
|
|
407
551
|
display: flex;
|
|
408
552
|
flex-direction: column;
|
|
409
|
-
gap:
|
|
553
|
+
gap: var(--spacing-sm);
|
|
410
554
|
}
|
|
411
555
|
|
|
412
556
|
.cut-row {
|
|
413
557
|
display: flex;
|
|
414
558
|
align-items: center;
|
|
415
|
-
gap:
|
|
559
|
+
gap: var(--spacing-md);
|
|
416
560
|
justify-content: space-between;
|
|
417
|
-
border: 1px solid
|
|
418
|
-
border-radius:
|
|
419
|
-
padding:
|
|
420
|
-
background:
|
|
561
|
+
border: 1px solid var(--color-border);
|
|
562
|
+
border-radius: var(--radius-lg);
|
|
563
|
+
padding: var(--spacing-sm) var(--spacing-md);
|
|
564
|
+
background: var(--color-surface-muted);
|
|
421
565
|
}
|
|
422
566
|
|
|
423
567
|
.cut-row.is-selected {
|
|
424
|
-
border-color:
|
|
425
|
-
background:
|
|
568
|
+
border-color: var(--color-border-accent);
|
|
569
|
+
background: var(--color-info-surface);
|
|
426
570
|
}
|
|
427
571
|
|
|
428
572
|
.cut-select {
|
|
@@ -432,40 +576,43 @@ p {
|
|
|
432
576
|
cursor: pointer;
|
|
433
577
|
display: flex;
|
|
434
578
|
flex-direction: column;
|
|
435
|
-
gap:
|
|
436
|
-
font-size:
|
|
437
|
-
color:
|
|
579
|
+
gap: var(--spacing-xs);
|
|
580
|
+
font-size: var(--font-size-sm);
|
|
581
|
+
color: var(--color-text);
|
|
438
582
|
flex: 1;
|
|
439
583
|
}
|
|
440
584
|
|
|
441
585
|
.cut-time {
|
|
442
|
-
font-weight:
|
|
586
|
+
font-weight: var(--font-weight-semibold);
|
|
443
587
|
}
|
|
444
588
|
|
|
445
589
|
.cut-reason {
|
|
446
|
-
color:
|
|
590
|
+
color: var(--color-text-muted);
|
|
447
591
|
}
|
|
448
592
|
|
|
449
593
|
.app-grid--two {
|
|
450
|
-
grid-template-columns: repeat(
|
|
594
|
+
grid-template-columns: repeat(
|
|
595
|
+
auto-fit,
|
|
596
|
+
minmax(var(--card-min-width-wide), 1fr)
|
|
597
|
+
);
|
|
451
598
|
}
|
|
452
599
|
|
|
453
600
|
.chapter-list,
|
|
454
601
|
.command-list {
|
|
455
602
|
display: flex;
|
|
456
603
|
flex-direction: column;
|
|
457
|
-
gap:
|
|
604
|
+
gap: var(--spacing-md);
|
|
458
605
|
}
|
|
459
606
|
|
|
460
607
|
.chapter-row,
|
|
461
608
|
.command-row {
|
|
462
|
-
border: 1px solid
|
|
463
|
-
border-radius:
|
|
464
|
-
padding:
|
|
465
|
-
background:
|
|
609
|
+
border: 1px solid var(--color-border);
|
|
610
|
+
border-radius: var(--radius-lg);
|
|
611
|
+
padding: var(--spacing-md);
|
|
612
|
+
background: var(--color-surface-muted);
|
|
466
613
|
display: flex;
|
|
467
614
|
flex-direction: column;
|
|
468
|
-
gap:
|
|
615
|
+
gap: var(--spacing-sm);
|
|
469
616
|
}
|
|
470
617
|
|
|
471
618
|
.chapter-header,
|
|
@@ -473,62 +620,62 @@ p {
|
|
|
473
620
|
display: flex;
|
|
474
621
|
align-items: center;
|
|
475
622
|
justify-content: space-between;
|
|
476
|
-
gap:
|
|
623
|
+
gap: var(--spacing-md);
|
|
477
624
|
}
|
|
478
625
|
|
|
479
626
|
.chapter-time {
|
|
480
|
-
font-size:
|
|
481
|
-
color:
|
|
627
|
+
font-size: var(--font-size-xs);
|
|
628
|
+
color: var(--color-text-muted);
|
|
482
629
|
}
|
|
483
630
|
|
|
484
631
|
.command-meta {
|
|
485
632
|
display: flex;
|
|
486
633
|
align-items: center;
|
|
487
634
|
justify-content: space-between;
|
|
488
|
-
gap:
|
|
635
|
+
gap: var(--spacing-md);
|
|
489
636
|
}
|
|
490
637
|
|
|
491
638
|
.command-time {
|
|
492
|
-
font-size:
|
|
493
|
-
color:
|
|
639
|
+
font-size: var(--font-size-xs);
|
|
640
|
+
color: var(--color-text-muted);
|
|
494
641
|
}
|
|
495
642
|
|
|
496
643
|
.status-pill--success {
|
|
497
|
-
background:
|
|
498
|
-
color:
|
|
644
|
+
background: var(--color-success-surface);
|
|
645
|
+
color: var(--color-success-text);
|
|
499
646
|
}
|
|
500
647
|
|
|
501
648
|
.status-pill--warning {
|
|
502
|
-
background:
|
|
503
|
-
color:
|
|
649
|
+
background: var(--color-warning-surface);
|
|
650
|
+
color: var(--color-warning-text);
|
|
504
651
|
}
|
|
505
652
|
|
|
506
653
|
.status-pill--danger {
|
|
507
|
-
background:
|
|
508
|
-
color:
|
|
654
|
+
background: var(--color-danger-surface);
|
|
655
|
+
color: var(--color-danger-text);
|
|
509
656
|
}
|
|
510
657
|
|
|
511
658
|
.status-pill--info {
|
|
512
|
-
background:
|
|
513
|
-
color:
|
|
659
|
+
background: var(--color-info-surface);
|
|
660
|
+
color: var(--color-info-text);
|
|
514
661
|
}
|
|
515
662
|
|
|
516
663
|
.transcript-card {
|
|
517
|
-
gap:
|
|
664
|
+
gap: var(--spacing-lg);
|
|
518
665
|
}
|
|
519
666
|
|
|
520
667
|
.transcript-header {
|
|
521
668
|
display: flex;
|
|
522
669
|
align-items: flex-start;
|
|
523
670
|
justify-content: space-between;
|
|
524
|
-
gap:
|
|
671
|
+
gap: var(--spacing-lg);
|
|
525
672
|
flex-wrap: wrap;
|
|
526
673
|
}
|
|
527
674
|
|
|
528
675
|
.transcript-preview {
|
|
529
676
|
display: flex;
|
|
530
677
|
flex-direction: column;
|
|
531
|
-
gap:
|
|
678
|
+
gap: var(--spacing-xs);
|
|
532
679
|
max-width: 320px;
|
|
533
680
|
}
|
|
534
681
|
|
|
@@ -537,41 +684,41 @@ p {
|
|
|
537
684
|
margin: 0;
|
|
538
685
|
padding: 0;
|
|
539
686
|
display: grid;
|
|
540
|
-
gap:
|
|
687
|
+
gap: var(--spacing-sm);
|
|
541
688
|
}
|
|
542
689
|
|
|
543
690
|
.transcript-result {
|
|
544
691
|
width: 100%;
|
|
545
|
-
border: 1px solid
|
|
546
|
-
border-radius:
|
|
547
|
-
padding:
|
|
548
|
-
background:
|
|
692
|
+
border: 1px solid var(--color-border);
|
|
693
|
+
border-radius: var(--radius-md);
|
|
694
|
+
padding: var(--spacing-sm) var(--spacing-md);
|
|
695
|
+
background: var(--color-surface);
|
|
549
696
|
display: grid;
|
|
550
697
|
grid-template-columns: auto 1fr;
|
|
551
|
-
gap:
|
|
698
|
+
gap: var(--spacing-md);
|
|
552
699
|
text-align: left;
|
|
553
700
|
cursor: pointer;
|
|
554
701
|
}
|
|
555
702
|
|
|
556
703
|
.transcript-time {
|
|
557
|
-
font-weight:
|
|
558
|
-
color:
|
|
704
|
+
font-weight: var(--font-weight-semibold);
|
|
705
|
+
color: var(--color-text);
|
|
559
706
|
}
|
|
560
707
|
|
|
561
708
|
.transcript-snippet {
|
|
562
|
-
color:
|
|
709
|
+
color: var(--color-text-muted);
|
|
563
710
|
}
|
|
564
711
|
|
|
565
712
|
.transcript-empty {
|
|
566
|
-
margin-top:
|
|
713
|
+
margin-top: var(--spacing-xs);
|
|
567
714
|
}
|
|
568
715
|
|
|
569
716
|
.command-preview {
|
|
570
|
-
background:
|
|
571
|
-
color:
|
|
572
|
-
border-radius:
|
|
573
|
-
padding:
|
|
574
|
-
font-size:
|
|
717
|
+
background: var(--color-surface-inverse);
|
|
718
|
+
color: var(--color-text-inverse);
|
|
719
|
+
border-radius: var(--radius-lg);
|
|
720
|
+
padding: var(--spacing-lg);
|
|
721
|
+
font-size: var(--font-size-sm);
|
|
575
722
|
line-height: 1.5;
|
|
576
723
|
overflow-x: auto;
|
|
577
724
|
}
|
|
@@ -585,7 +732,7 @@ p {
|
|
|
585
732
|
}
|
|
586
733
|
}
|
|
587
734
|
|
|
588
|
-
@media (max-width:
|
|
735
|
+
@media (max-width: 1024px) {
|
|
589
736
|
.timeline-layout {
|
|
590
737
|
grid-template-columns: 1fr;
|
|
591
738
|
}
|