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 word-break: break-all;
194}
195
196.current-info .value.mono {
197 font-family: var(--font-mono);
198 font-size: var(--text-sm);
199}
200
201.review-card {
202 background: var(--bg-primary);
203 border-radius: var(--radius-lg);
204 padding: var(--space-4);
205 margin-bottom: var(--space-5);
206}
207
208.review-row {
209 display: flex;
210 justify-content: space-between;
211 padding: var(--space-3) 0;
212 border-bottom: 1px solid var(--border-color);
213}
214
215.review-row:last-child {
216 border-bottom: none;
217}
218
219.review-row .label {
220 color: var(--text-secondary);
221}
222
223.review-row .value {
224 font-weight: var(--font-medium);
225 text-align: right;
226 word-break: break-all;
227}
228
229.review-row .value.mono {
230 font-family: var(--font-mono);
231 font-size: var(--text-sm);
232}
233
234.progress-section {
235 margin-bottom: var(--space-5);
236}
237
238.progress-item {
239 display: flex;
240 align-items: center;
241 gap: var(--space-3);
242 padding: var(--space-3) 0;
243 color: var(--text-secondary);
244}
245
246.progress-item.completed {
247 color: var(--success-text);
248}
249
250.progress-item.active {
251 color: var(--accent);
252}
253
254.progress-item .icon {
255 width: 24px;
256 text-align: center;
257}
258
259.progress-bar {
260 height: 8px;
261 background: var(--bg-primary);
262 border-radius: var(--radius-md);
263 overflow: hidden;
264 margin-bottom: var(--space-4);
265}
266
267.progress-fill {
268 height: 100%;
269 background: var(--accent);
270 transition: width var(--transition-slow);
271}
272
273.status-text {
274 text-align: center;
275 color: var(--text-secondary);
276 font-size: var(--text-sm);
277}
278
279.blob-progress {
280 margin: var(--space-4) 0;
281}
282
283.blob-progress-bar {
284 height: 8px;
285 background: var(--bg-primary);
286 border-radius: var(--radius-md);
287 overflow: hidden;
288 margin-bottom: var(--space-2);
289}
290
291.blob-progress-fill {
292 height: 100%;
293 background: var(--accent);
294 transition: width var(--transition-slow);
295}
296
297.blob-progress-text {
298 text-align: center;
299 color: var(--text-secondary);
300 font-size: var(--text-sm);
301 margin: 0;
302}
303
304.success-content {
305 text-align: center;
306}
307
308.success-icon {
309 width: 64px;
310 height: 64px;
311 background: var(--success-bg);
312 color: var(--success-text);
313 border-radius: 50%;
314 display: flex;
315 align-items: center;
316 justify-content: center;
317 font-size: var(--text-2xl);
318 margin: 0 auto var(--space-5) auto;
319}
320
321.success-details {
322 background: var(--bg-primary);
323 border-radius: var(--radius-lg);
324 padding: var(--space-4);
325 margin: var(--space-5) 0;
326 text-align: left;
327}
328
329.success-details .detail-row {
330 display: flex;
331 justify-content: space-between;
332 padding: var(--space-2) 0;
333}
334
335.success-details .label {
336 color: var(--text-secondary);
337}
338
339.success-details .value {
340 font-weight: var(--font-medium);
341}
342
343.success-details .value.mono {
344 font-family: var(--font-mono);
345 font-size: var(--text-sm);
346}
347
348.redirect-text {
349 color: var(--text-secondary);
350 font-style: italic;
351}
352
353.code-block {
354 background: var(--bg-primary);
355 border: 1px solid var(--border-color);
356 border-radius: var(--radius-lg);
357 padding: var(--space-4);
358 margin-bottom: var(--space-5);
359 overflow-x: auto;
360}
361
362.code-block pre {
363 margin: 0;
364 font-family: var(--font-mono);
365 font-size: var(--text-sm);
366 white-space: pre-wrap;
367 word-break: break-all;
368}
369
370.auth-method-options {
371 display: flex;
372 flex-direction: column;
373 gap: var(--space-3);
374}
375
376label.auth-option {
377 display: flex;
378 flex-direction: row;
379 align-items: center;
380 gap: var(--space-3);
381 padding: var(--space-4);
382 border: 2px solid var(--border-color);
383 border-radius: var(--radius-lg);
384 cursor: pointer;
385 margin-bottom: 0;
386 transition:
387 border-color var(--transition-normal),
388 background-color var(--transition-normal);
389}
390
391.auth-option:hover {
392 border-color: var(--accent);
393 background: var(--bg-hover);
394}
395
396.auth-option.selected {
397 border-color: var(--accent);
398 background: var(--accent-muted);
399}
400
401.auth-option input[type="radio"] {
402 flex-shrink: 0;
403 width: 18px;
404 height: 18px;
405 margin: 0;
406}
407
408.auth-option-content {
409 display: flex;
410 flex-direction: column;
411 gap: var(--space-1);
412}
413
414.auth-option-content strong {
415 color: var(--text-primary);
416}
417
418.auth-option-content span {
419 font-size: var(--text-sm);
420 color: var(--text-secondary);
421}
422
423.loading-indicator {
424 display: flex;
425 flex-direction: column;
426 align-items: center;
427 gap: var(--space-4);
428 padding: var(--space-8);
429}
430
431.spinner {
432 width: 40px;
433 height: 40px;
434 border: 3px solid var(--border-color);
435 border-top-color: var(--accent);
436 border-radius: 50%;
437 animation: spin 1s linear infinite;
438}
439
440@keyframes spin {
441 to {
442 transform: rotate(360deg);
443 }
444}
445
446.passkey-section {
447 margin-top: var(--space-5);
448 text-align: center;
449}
450
451.passkey-section p {
452 margin-bottom: var(--space-4);
453 color: var(--text-secondary);
454}
455
456.app-password-display {
457 background: var(--bg-primary);
458 border-radius: var(--radius-lg);
459 padding: var(--space-5);
460 margin-bottom: var(--space-5);
461 text-align: center;
462}
463
464.app-password-label {
465 font-size: var(--text-sm);
466 color: var(--text-secondary);
467 margin-bottom: var(--space-3);
468}
469
470.app-password-code {
471 display: block;
472 font-family: var(--font-mono);
473 font-size: var(--text-lg);
474 letter-spacing: 0.1em;
475 padding: var(--space-4);
476 background: var(--bg-tertiary);
477 border-radius: var(--radius-md);
478 margin-bottom: var(--space-4);
479 user-select: all;
480}
481
482.copy-btn {
483 font-size: var(--text-sm);
484}
485
486.current-account {
487 background: var(--bg-primary);
488 border-radius: var(--radius-lg);
489 padding: var(--space-4);
490 margin-bottom: var(--space-5);
491 display: flex;
492 justify-content: space-between;
493 align-items: center;
494}
495
496.current-account .label {
497 color: var(--text-secondary);
498}
499
500.current-account .value {
501 font-weight: var(--font-medium);
502 font-size: var(--text-lg);
503}
504
505.server-info {
506 background: var(--bg-primary);
507 border-radius: var(--radius-lg);
508 padding: var(--space-4);
509 margin-top: var(--space-5);
510}
511
512.server-info h3 {
513 margin: 0 0 var(--space-3) 0;
514 font-size: var(--text-base);
515 color: var(--success-text);
516}
517
518.server-info .info-row {
519 display: flex;
520 justify-content: space-between;
521 padding: var(--space-2) 0;
522 font-size: var(--text-sm);
523}
524
525.server-info .label {
526 color: var(--text-secondary);
527}
528
529.server-info a {
530 display: inline-block;
531 margin-top: var(--space-2);
532 margin-right: var(--space-3);
533 color: var(--accent);
534 font-size: var(--text-sm);
535}
536
537.final-warning {
538 background: var(--error-bg);
539 border-color: var(--error-border);
540}
541
542.final-warning strong {
543 color: var(--error-text);
544}
545
546.next-steps {
547 background: var(--accent-muted);
548 border-radius: var(--radius-lg);
549 padding: var(--space-5);
550 margin: var(--space-5) 0;
551 text-align: left;
552}
553
554.next-steps h3 {
555 margin: 0 0 var(--space-3) 0;
556}
557
558.next-steps ol {
559 margin: 0;
560 padding-left: var(--space-5);
561}
562
563.next-steps li {
564 margin-bottom: var(--space-2);
565}
566
567.next-steps a {
568 color: var(--accent);
569}
570
571.resume-info {
572 margin-bottom: var(--space-5);
573}
574
575.resume-details {
576 display: flex;
577 flex-direction: column;
578 gap: var(--space-2);
579 margin-top: var(--space-3);
580}
581
582.resume-row {
583 display: flex;
584 gap: var(--space-3);
585}
586
587.resume-row .label {
588 color: var(--text-secondary);
589 min-width: 80px;
590}
591
592.resume-row .value {
593 font-weight: var(--font-medium);
594}
595
596.resume-note {
597 margin-top: var(--space-4);
598 font-size: var(--text-sm);
599 font-style: italic;
600}
601
602.file-input-container {
603 display: flex;
604 flex-direction: column;
605 gap: var(--space-3);
606}
607
608.file-info {
609 display: flex;
610 gap: var(--space-2);
611 align-items: center;
612 padding: var(--space-3);
613 background: var(--bg-primary);
614 border-radius: var(--radius-md);
615}
616
617.file-name {
618 font-weight: var(--font-medium);
619}
620
621.file-size {
622 color: var(--text-secondary);
623 font-size: var(--text-sm);
624}
625
626.step-content textarea {
627 width: 100%;
628 font-family: var(--font-mono);
629 font-size: var(--text-sm);
630 padding: var(--space-3);
631 border: 1px solid var(--border-color);
632 border-radius: var(--radius-md);
633 background: var(--bg-input);
634 color: var(--text-primary);
635 resize: vertical;
636}
637
638.step-content textarea:focus {
639 outline: none;
640 border-color: var(--accent);
641}
642
643.message {
644 padding: var(--space-4);
645 border-radius: var(--radius-lg);
646 margin-bottom: var(--space-4);
647}
648
649.message.success {
650 background: var(--success-bg);
651 color: var(--success-text);
652 border: 1px solid var(--success-border);
653}
654
655.message.error {
656 background: var(--error-bg);
657 color: var(--error-text);
658 border: 1px solid var(--error-border);
659}