this repo has no description
lewis.moe
1.migration-wizard {
2 max-width: var(--width-sm);
3 margin: 0 auto;
4}
5
6.step-indicator {
7 display: flex;
8 align-items: center;
9 justify-content: center;
10 margin-bottom: var(--space-6);
11 gap: var(--space-1);
12}
13
14.step {
15 display: flex;
16 align-items: center;
17 justify-content: center;
18}
19
20.step-dot {
21 width: 24px;
22 height: 24px;
23 border-radius: 50%;
24 background: var(--bg-secondary);
25 border: 2px solid var(--border-color);
26 display: flex;
27 align-items: center;
28 justify-content: center;
29 font-size: var(--text-xs);
30 font-weight: var(--font-medium);
31 color: var(--text-secondary);
32 flex-shrink: 0;
33}
34
35.step.active .step-dot {
36 background: var(--accent);
37 border-color: var(--accent);
38 color: var(--text-inverse);
39 width: 28px;
40 height: 28px;
41}
42
43.step.completed .step-dot {
44 background: var(--success-bg);
45 border-color: var(--success-text);
46 color: var(--success-text);
47}
48
49.step-label {
50 display: none;
51}
52
53.step-line {
54 width: 16px;
55 height: 2px;
56 background: var(--border-color);
57 flex-shrink: 0;
58}
59
60.step-line.completed {
61 background: var(--success-text);
62}
63
64.current-step-label {
65 text-align: center;
66 font-size: var(--text-sm);
67 color: var(--text-secondary);
68 margin-bottom: var(--space-5);
69}
70
71.current-step-label strong {
72 color: var(--text-primary);
73}
74
75.step-content {
76 background: var(--bg-secondary);
77 border-radius: var(--radius-xl);
78 padding: var(--space-6);
79}
80
81.step-content h2 {
82 margin: 0 0 var(--space-3) 0;
83}
84
85.step-content > p {
86 color: var(--text-secondary);
87 margin: 0 0 var(--space-5) 0;
88}
89
90.info-box {
91 background: var(--accent-muted);
92 border: 1px solid var(--border-color);
93 border-radius: var(--radius-lg);
94 padding: var(--space-5);
95 margin-bottom: var(--space-5);
96}
97
98.info-box h3 {
99 margin: 0 0 var(--space-3) 0;
100 font-size: var(--text-base);
101}
102
103.info-box ol,
104.info-box ul {
105 margin: 0;
106 padding-left: var(--space-5);
107}
108
109.info-box li {
110 margin-bottom: var(--space-2);
111 color: var(--text-secondary);
112}
113
114.info-box p {
115 margin: 0;
116 color: var(--text-secondary);
117}
118
119.warning-box {
120 background: var(--warning-bg);
121 border: 1px solid var(--warning-border);
122 border-radius: var(--radius-lg);
123 padding: var(--space-5);
124 margin-bottom: var(--space-5);
125 font-size: var(--text-sm);
126}
127
128.warning-box strong {
129 color: var(--warning-text);
130}
131
132.warning-box p {
133 margin: var(--space-3) 0 0 0;
134 color: var(--text-secondary);
135}
136
137.warning-box ul {
138 margin: var(--space-3) 0 0 0;
139 padding-left: var(--space-5);
140}
141
142.checkbox-label {
143 display: inline-flex;
144 align-items: flex-start;
145 gap: var(--space-3);
146 cursor: pointer;
147 margin-bottom: var(--space-5);
148 text-align: left;
149}
150
151.checkbox-label input[type="checkbox"] {
152 width: 18px;
153 height: 18px;
154 margin: 0;
155 flex-shrink: 0;
156}
157
158.button-row {
159 display: flex;
160 gap: var(--space-3);
161 justify-content: flex-end;
162 margin-top: var(--space-5);
163}
164
165.handle-input-group {
166 display: flex;
167 gap: var(--space-2);
168}
169
170.handle-input-group input {
171 flex: 1;
172}
173
174.handle-input-group select {
175 width: auto;
176}
177
178.current-info {
179 background: var(--bg-primary);
180 border-radius: var(--radius-lg);
181 padding: var(--space-4);
182 margin-bottom: var(--space-5);
183 display: flex;
184 justify-content: space-between;
185}
186
187.current-info .label {
188 color: var(--text-secondary);
189}
190
191.current-info .value {
192 font-weight: var(--font-medium);
193}
194
195.review-card {
196 background: var(--bg-primary);
197 border-radius: var(--radius-lg);
198 padding: var(--space-4);
199 margin-bottom: var(--space-5);
200}
201
202.review-row {
203 display: flex;
204 justify-content: space-between;
205 padding: var(--space-3) 0;
206 border-bottom: 1px solid var(--border-color);
207}
208
209.review-row:last-child {
210 border-bottom: none;
211}
212
213.review-row .label {
214 color: var(--text-secondary);
215}
216
217.review-row .value {
218 font-weight: var(--font-medium);
219 text-align: right;
220 word-break: break-all;
221}
222
223.review-row .value.mono {
224 font-family: var(--font-mono);
225 font-size: var(--text-sm);
226}
227
228.progress-section {
229 margin-bottom: var(--space-5);
230}
231
232.progress-item {
233 display: flex;
234 align-items: center;
235 gap: var(--space-3);
236 padding: var(--space-3) 0;
237 color: var(--text-secondary);
238}
239
240.progress-item.completed {
241 color: var(--success-text);
242}
243
244.progress-item.active {
245 color: var(--accent);
246}
247
248.progress-item .icon {
249 width: 24px;
250 text-align: center;
251}
252
253.progress-bar {
254 height: 8px;
255 background: var(--bg-primary);
256 border-radius: var(--radius-md);
257 overflow: hidden;
258 margin-bottom: var(--space-4);
259}
260
261.progress-fill {
262 height: 100%;
263 background: var(--accent);
264 transition: width var(--transition-slow);
265}
266
267.status-text {
268 text-align: center;
269 color: var(--text-secondary);
270 font-size: var(--text-sm);
271}
272
273.success-content {
274 text-align: center;
275}
276
277.success-icon {
278 width: 64px;
279 height: 64px;
280 background: var(--success-bg);
281 color: var(--success-text);
282 border-radius: 50%;
283 display: flex;
284 align-items: center;
285 justify-content: center;
286 font-size: var(--text-2xl);
287 margin: 0 auto var(--space-5) auto;
288}
289
290.success-details {
291 background: var(--bg-primary);
292 border-radius: var(--radius-lg);
293 padding: var(--space-4);
294 margin: var(--space-5) 0;
295 text-align: left;
296}
297
298.success-details .detail-row {
299 display: flex;
300 justify-content: space-between;
301 padding: var(--space-2) 0;
302}
303
304.success-details .label {
305 color: var(--text-secondary);
306}
307
308.success-details .value {
309 font-weight: var(--font-medium);
310}
311
312.success-details .value.mono {
313 font-family: var(--font-mono);
314 font-size: var(--text-sm);
315}
316
317.redirect-text {
318 color: var(--text-secondary);
319 font-style: italic;
320}
321
322.code-block {
323 background: var(--bg-primary);
324 border: 1px solid var(--border-color);
325 border-radius: var(--radius-lg);
326 padding: var(--space-4);
327 margin-bottom: var(--space-5);
328 overflow-x: auto;
329}
330
331.code-block pre {
332 margin: 0;
333 font-family: var(--font-mono);
334 font-size: var(--text-sm);
335 white-space: pre-wrap;
336 word-break: break-all;
337}
338
339.auth-method-options {
340 display: flex;
341 flex-direction: column;
342 gap: var(--space-3);
343}
344
345label.auth-option {
346 display: flex;
347 flex-direction: row;
348 align-items: center;
349 gap: var(--space-3);
350 padding: var(--space-4);
351 border: 2px solid var(--border-color);
352 border-radius: var(--radius-lg);
353 cursor: pointer;
354 margin-bottom: 0;
355 transition: border-color var(--transition-normal), background-color var(--transition-normal);
356}
357
358.auth-option:hover {
359 border-color: var(--accent);
360 background: var(--bg-hover);
361}
362
363.auth-option.selected {
364 border-color: var(--accent);
365 background: var(--accent-muted);
366}
367
368.auth-option input[type="radio"] {
369 flex-shrink: 0;
370 width: 18px;
371 height: 18px;
372 margin: 0;
373}
374
375.auth-option-content {
376 display: flex;
377 flex-direction: column;
378 gap: var(--space-1);
379}
380
381.auth-option-content strong {
382 color: var(--text-primary);
383}
384
385.auth-option-content span {
386 font-size: var(--text-sm);
387 color: var(--text-secondary);
388}
389
390.loading-indicator {
391 display: flex;
392 flex-direction: column;
393 align-items: center;
394 gap: var(--space-4);
395 padding: var(--space-8);
396}
397
398.spinner {
399 width: 40px;
400 height: 40px;
401 border: 3px solid var(--border-color);
402 border-top-color: var(--accent);
403 border-radius: 50%;
404 animation: spin 1s linear infinite;
405}
406
407@keyframes spin {
408 to {
409 transform: rotate(360deg);
410 }
411}
412
413.passkey-section {
414 margin-top: var(--space-5);
415 text-align: center;
416}
417
418.passkey-section p {
419 margin-bottom: var(--space-4);
420 color: var(--text-secondary);
421}
422
423.app-password-display {
424 background: var(--bg-primary);
425 border-radius: var(--radius-lg);
426 padding: var(--space-5);
427 margin-bottom: var(--space-5);
428 text-align: center;
429}
430
431.app-password-label {
432 font-size: var(--text-sm);
433 color: var(--text-secondary);
434 margin-bottom: var(--space-3);
435}
436
437.app-password-code {
438 display: block;
439 font-family: var(--font-mono);
440 font-size: var(--text-lg);
441 letter-spacing: 0.1em;
442 padding: var(--space-4);
443 background: var(--bg-tertiary);
444 border-radius: var(--radius-md);
445 margin-bottom: var(--space-4);
446 user-select: all;
447}
448
449.copy-btn {
450 font-size: var(--text-sm);
451}
452
453.current-account {
454 background: var(--bg-primary);
455 border-radius: var(--radius-lg);
456 padding: var(--space-4);
457 margin-bottom: var(--space-5);
458 display: flex;
459 justify-content: space-between;
460 align-items: center;
461}
462
463.current-account .label {
464 color: var(--text-secondary);
465}
466
467.current-account .value {
468 font-weight: var(--font-medium);
469 font-size: var(--text-lg);
470}
471
472.server-info {
473 background: var(--bg-primary);
474 border-radius: var(--radius-lg);
475 padding: var(--space-4);
476 margin-top: var(--space-5);
477}
478
479.server-info h3 {
480 margin: 0 0 var(--space-3) 0;
481 font-size: var(--text-base);
482 color: var(--success-text);
483}
484
485.server-info .info-row {
486 display: flex;
487 justify-content: space-between;
488 padding: var(--space-2) 0;
489 font-size: var(--text-sm);
490}
491
492.server-info .label {
493 color: var(--text-secondary);
494}
495
496.server-info a {
497 display: inline-block;
498 margin-top: var(--space-2);
499 margin-right: var(--space-3);
500 color: var(--accent);
501 font-size: var(--text-sm);
502}
503
504.final-warning {
505 background: var(--error-bg);
506 border-color: var(--error-border);
507}
508
509.final-warning strong {
510 color: var(--error-text);
511}
512
513.next-steps {
514 background: var(--accent-muted);
515 border-radius: var(--radius-lg);
516 padding: var(--space-5);
517 margin: var(--space-5) 0;
518 text-align: left;
519}
520
521.next-steps h3 {
522 margin: 0 0 var(--space-3) 0;
523}
524
525.next-steps ol {
526 margin: 0;
527 padding-left: var(--space-5);
528}
529
530.next-steps li {
531 margin-bottom: var(--space-2);
532}
533
534.next-steps a {
535 color: var(--accent);
536}
537
538.resume-info {
539 margin-bottom: var(--space-5);
540}
541
542.resume-details {
543 display: flex;
544 flex-direction: column;
545 gap: var(--space-2);
546 margin-top: var(--space-3);
547}
548
549.resume-row {
550 display: flex;
551 gap: var(--space-3);
552}
553
554.resume-row .label {
555 color: var(--text-secondary);
556 min-width: 80px;
557}
558
559.resume-row .value {
560 font-weight: var(--font-medium);
561}
562
563.resume-note {
564 margin-top: var(--space-4);
565 font-size: var(--text-sm);
566 font-style: italic;
567}