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:
356 border-color var(--transition-normal),
357 background-color var(--transition-normal);
358}
359
360.auth-option:hover {
361 border-color: var(--accent);
362 background: var(--bg-hover);
363}
364
365.auth-option.selected {
366 border-color: var(--accent);
367 background: var(--accent-muted);
368}
369
370.auth-option input[type="radio"] {
371 flex-shrink: 0;
372 width: 18px;
373 height: 18px;
374 margin: 0;
375}
376
377.auth-option-content {
378 display: flex;
379 flex-direction: column;
380 gap: var(--space-1);
381}
382
383.auth-option-content strong {
384 color: var(--text-primary);
385}
386
387.auth-option-content span {
388 font-size: var(--text-sm);
389 color: var(--text-secondary);
390}
391
392.loading-indicator {
393 display: flex;
394 flex-direction: column;
395 align-items: center;
396 gap: var(--space-4);
397 padding: var(--space-8);
398}
399
400.spinner {
401 width: 40px;
402 height: 40px;
403 border: 3px solid var(--border-color);
404 border-top-color: var(--accent);
405 border-radius: 50%;
406 animation: spin 1s linear infinite;
407}
408
409@keyframes spin {
410 to {
411 transform: rotate(360deg);
412 }
413}
414
415.passkey-section {
416 margin-top: var(--space-5);
417 text-align: center;
418}
419
420.passkey-section p {
421 margin-bottom: var(--space-4);
422 color: var(--text-secondary);
423}
424
425.app-password-display {
426 background: var(--bg-primary);
427 border-radius: var(--radius-lg);
428 padding: var(--space-5);
429 margin-bottom: var(--space-5);
430 text-align: center;
431}
432
433.app-password-label {
434 font-size: var(--text-sm);
435 color: var(--text-secondary);
436 margin-bottom: var(--space-3);
437}
438
439.app-password-code {
440 display: block;
441 font-family: var(--font-mono);
442 font-size: var(--text-lg);
443 letter-spacing: 0.1em;
444 padding: var(--space-4);
445 background: var(--bg-tertiary);
446 border-radius: var(--radius-md);
447 margin-bottom: var(--space-4);
448 user-select: all;
449}
450
451.copy-btn {
452 font-size: var(--text-sm);
453}
454
455.current-account {
456 background: var(--bg-primary);
457 border-radius: var(--radius-lg);
458 padding: var(--space-4);
459 margin-bottom: var(--space-5);
460 display: flex;
461 justify-content: space-between;
462 align-items: center;
463}
464
465.current-account .label {
466 color: var(--text-secondary);
467}
468
469.current-account .value {
470 font-weight: var(--font-medium);
471 font-size: var(--text-lg);
472}
473
474.server-info {
475 background: var(--bg-primary);
476 border-radius: var(--radius-lg);
477 padding: var(--space-4);
478 margin-top: var(--space-5);
479}
480
481.server-info h3 {
482 margin: 0 0 var(--space-3) 0;
483 font-size: var(--text-base);
484 color: var(--success-text);
485}
486
487.server-info .info-row {
488 display: flex;
489 justify-content: space-between;
490 padding: var(--space-2) 0;
491 font-size: var(--text-sm);
492}
493
494.server-info .label {
495 color: var(--text-secondary);
496}
497
498.server-info a {
499 display: inline-block;
500 margin-top: var(--space-2);
501 margin-right: var(--space-3);
502 color: var(--accent);
503 font-size: var(--text-sm);
504}
505
506.final-warning {
507 background: var(--error-bg);
508 border-color: var(--error-border);
509}
510
511.final-warning strong {
512 color: var(--error-text);
513}
514
515.next-steps {
516 background: var(--accent-muted);
517 border-radius: var(--radius-lg);
518 padding: var(--space-5);
519 margin: var(--space-5) 0;
520 text-align: left;
521}
522
523.next-steps h3 {
524 margin: 0 0 var(--space-3) 0;
525}
526
527.next-steps ol {
528 margin: 0;
529 padding-left: var(--space-5);
530}
531
532.next-steps li {
533 margin-bottom: var(--space-2);
534}
535
536.next-steps a {
537 color: var(--accent);
538}
539
540.resume-info {
541 margin-bottom: var(--space-5);
542}
543
544.resume-details {
545 display: flex;
546 flex-direction: column;
547 gap: var(--space-2);
548 margin-top: var(--space-3);
549}
550
551.resume-row {
552 display: flex;
553 gap: var(--space-3);
554}
555
556.resume-row .label {
557 color: var(--text-secondary);
558 min-width: 80px;
559}
560
561.resume-row .value {
562 font-weight: var(--font-medium);
563}
564
565.resume-note {
566 margin-top: var(--space-4);
567 font-size: var(--text-sm);
568 font-style: italic;
569}