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