forked from
tranquil.farm/tranquil-pds
Our Personal Data Server from scratch!
refactor(frontend): extract migration component styles + migration.css
authored by
lu5a.myatproto.social
and committed by
tangled.org
113bea7d
da8b5774
+126
-638
-31
frontend/src/components/migration/AppPasswordStep.svelte
-31
frontend/src/components/migration/AppPasswordStep.svelte
···
53
53
</button>
54
54
</div>
55
55
</div>
56
-
57
-
<style>
58
-
.app-password-display {
59
-
background: var(--bg-card);
60
-
border: 2px solid var(--accent);
61
-
border-radius: var(--radius-xl);
62
-
padding: var(--space-6);
63
-
text-align: center;
64
-
margin: var(--space-4) 0;
65
-
}
66
-
.app-password-label {
67
-
font-size: var(--text-sm);
68
-
color: var(--text-secondary);
69
-
margin-bottom: var(--space-4);
70
-
}
71
-
.app-password-code {
72
-
display: block;
73
-
font-size: var(--text-xl);
74
-
font-family: ui-monospace, monospace;
75
-
letter-spacing: 0.1em;
76
-
padding: var(--space-5);
77
-
background: var(--bg-input);
78
-
border-radius: var(--radius-md);
79
-
margin-bottom: var(--space-4);
80
-
user-select: all;
81
-
}
82
-
.copy-btn {
83
-
padding: var(--space-3) var(--space-5);
84
-
font-size: var(--text-sm);
85
-
}
86
-
</style>
-120
frontend/src/components/migration/ChooseHandleStep.svelte
-120
frontend/src/components/migration/ChooseHandleStep.svelte
···
281
281
</button>
282
282
</div>
283
283
</div>
284
-
285
-
<style>
286
-
.handle-choice-options {
287
-
display: flex;
288
-
flex-direction: column;
289
-
gap: var(--space-3);
290
-
}
291
-
292
-
.handle-choice-option {
293
-
display: flex;
294
-
align-items: center;
295
-
gap: var(--space-3);
296
-
padding: var(--space-4);
297
-
border: 1px solid var(--border-color);
298
-
border-radius: var(--radius-lg);
299
-
cursor: pointer;
300
-
transition: border-color var(--transition-normal), background var(--transition-normal);
301
-
}
302
-
303
-
.handle-choice-option:hover {
304
-
border-color: var(--accent);
305
-
}
306
-
307
-
.handle-choice-option.selected {
308
-
border-color: var(--accent);
309
-
background: var(--accent-muted);
310
-
}
311
-
312
-
.handle-choice-option input[type="radio"] {
313
-
flex-shrink: 0;
314
-
width: 18px;
315
-
height: 18px;
316
-
margin: 0;
317
-
}
318
-
319
-
.handle-choice-content {
320
-
display: flex;
321
-
flex-direction: column;
322
-
gap: var(--space-1);
323
-
}
324
-
325
-
.handle-preview {
326
-
font-family: var(--font-mono);
327
-
font-size: var(--text-sm);
328
-
color: var(--text-secondary);
329
-
}
330
-
331
-
.existing-handle-display {
332
-
display: flex;
333
-
align-items: center;
334
-
gap: var(--space-4);
335
-
padding: var(--space-4);
336
-
background: var(--bg-secondary);
337
-
border-radius: var(--radius-lg);
338
-
margin-bottom: var(--space-4);
339
-
}
340
-
341
-
.handle-value {
342
-
font-family: var(--font-mono);
343
-
font-size: var(--text-base);
344
-
}
345
-
346
-
.verified-badge {
347
-
font-size: var(--text-xs);
348
-
padding: var(--space-1) var(--space-3);
349
-
background: var(--success-bg);
350
-
color: var(--success-text);
351
-
border-radius: var(--radius-md);
352
-
}
353
-
354
-
.verification-instructions {
355
-
background: var(--bg-secondary);
356
-
padding: var(--space-5);
357
-
border-radius: var(--radius-lg);
358
-
margin-bottom: var(--space-4);
359
-
}
360
-
361
-
.instruction-header {
362
-
margin: 0 0 var(--space-4) 0;
363
-
font-size: var(--text-sm);
364
-
color: var(--text-secondary);
365
-
}
366
-
367
-
.instruction-or {
368
-
margin: var(--space-3) 0;
369
-
font-size: var(--text-xs);
370
-
color: var(--text-muted);
371
-
text-align: center;
372
-
}
373
-
374
-
.verification-record {
375
-
display: flex;
376
-
flex-direction: column;
377
-
gap: var(--space-2);
378
-
}
379
-
380
-
.verification-record code {
381
-
font-size: var(--text-sm);
382
-
padding: var(--space-3);
383
-
background: var(--bg-tertiary);
384
-
border-radius: var(--radius-md);
385
-
overflow-x: auto;
386
-
word-break: break-all;
387
-
}
388
-
389
-
.record-content {
390
-
font-size: var(--text-xs);
391
-
color: var(--text-secondary);
392
-
padding-left: var(--space-3);
393
-
}
394
-
395
-
.record-content code {
396
-
padding: var(--space-1) var(--space-2);
397
-
font-size: var(--text-xs);
398
-
}
399
-
400
-
.verify-btn {
401
-
width: 100%;
402
-
}
403
-
</style>
+1
-1
frontend/src/components/migration/EmailVerifyStep.svelte
+1
-1
frontend/src/components/migration/EmailVerifyStep.svelte
+2
-34
frontend/src/components/migration/InboundWizard.svelte
+2
-34
frontend/src/components/migration/InboundWizard.svelte
···
4
4
import { getErrorMessage } from '../../lib/migration/types'
5
5
import { base64UrlEncode, prepareWebAuthnCreationOptions } from '../../lib/migration/atproto-client'
6
6
import { _ } from '../../lib/i18n'
7
-
import '../../styles/migration.css'
8
7
import ErrorStep from './ErrorStep.svelte'
9
8
import SuccessStep from './SuccessStep.svelte'
10
9
import ChooseHandleStep from './ChooseHandleStep.svelte'
···
418
417
{/if}
419
418
420
419
<form onsubmit={handleSourceHandleSubmit}>
421
-
<div class="field">
420
+
<div>
422
421
<label for="source-handle">{$_('migration.inbound.sourceAuth.handle')}</label>
423
422
<input
424
423
id="source-handle"
···
595
594
</div>
596
595
597
596
<form onsubmit={submitPlcToken}>
598
-
<div class="field">
597
+
<div>
599
598
<label for="plc-token">{$_('migration.inbound.plcToken.tokenLabel')}</label>
600
599
<input
601
600
id="plc-token"
···
713
712
<ErrorStep error={flow.state.error} onStartOver={onBack} />
714
713
{/if}
715
714
</div>
716
-
717
-
<style>
718
-
.resume-info {
719
-
margin-bottom: var(--space-5);
720
-
}
721
-
.resume-info h3 {
722
-
margin: 0 0 var(--space-3) 0;
723
-
font-size: var(--text-base);
724
-
}
725
-
.resume-details {
726
-
display: flex;
727
-
flex-direction: column;
728
-
gap: var(--space-2);
729
-
}
730
-
.resume-row {
731
-
display: flex;
732
-
justify-content: space-between;
733
-
font-size: var(--text-sm);
734
-
}
735
-
.resume-row .label {
736
-
color: var(--text-secondary);
737
-
}
738
-
.resume-row .value {
739
-
font-weight: var(--font-medium);
740
-
}
741
-
.resume-note {
742
-
margin-top: var(--space-3);
743
-
font-size: var(--text-sm);
744
-
font-style: italic;
745
-
}
746
-
</style>
-1
frontend/src/components/migration/OfflineInboundWizard.svelte
-1
frontend/src/components/migration/OfflineInboundWizard.svelte
···
4
4
import { getErrorMessage } from '../../lib/migration/types'
5
5
import { base64UrlEncode, prepareWebAuthnCreationOptions } from '../../lib/migration/atproto-client'
6
6
import { _ } from '../../lib/i18n'
7
-
import '../../styles/migration.css'
8
7
import ErrorStep from './ErrorStep.svelte'
9
8
import SuccessStep from './SuccessStep.svelte'
10
9
import ChooseHandleStep from './ChooseHandleStep.svelte'
-10
frontend/src/components/migration/PasskeySetupStep.svelte
-10
frontend/src/components/migration/PasskeySetupStep.svelte
-76
frontend/src/lib/registration/DidDocStep.svelte
-76
frontend/src/lib/registration/DidDocStep.svelte
···
88
88
</button>
89
89
{/if}
90
90
</div>
91
-
92
-
<style>
93
-
.did-doc-step {
94
-
display: flex;
95
-
flex-direction: column;
96
-
gap: var(--space-4);
97
-
}
98
-
99
-
.warning-box {
100
-
padding: var(--space-5);
101
-
background: var(--warning-bg);
102
-
border: 1px solid var(--warning-border);
103
-
border-radius: var(--radius-lg);
104
-
font-size: var(--text-sm);
105
-
}
106
-
107
-
.warning-box strong {
108
-
display: block;
109
-
margin-bottom: var(--space-3);
110
-
color: var(--warning-text);
111
-
}
112
-
113
-
.warning-box p {
114
-
margin: 0;
115
-
color: var(--warning-text);
116
-
}
117
-
118
-
.did-url {
119
-
display: block;
120
-
margin-top: var(--space-3);
121
-
padding: var(--space-3);
122
-
background: var(--bg-input);
123
-
border-radius: var(--radius-md);
124
-
font-size: var(--text-sm);
125
-
word-break: break-all;
126
-
}
127
-
128
-
.did-doc-display {
129
-
background: var(--bg-card);
130
-
border: 1px solid var(--border-color);
131
-
border-radius: var(--radius-lg);
132
-
overflow: hidden;
133
-
}
134
-
135
-
.did-doc-code {
136
-
margin: 0;
137
-
padding: var(--space-4);
138
-
background: var(--bg-input);
139
-
font-size: var(--text-xs);
140
-
overflow-x: auto;
141
-
white-space: pre;
142
-
max-height: 300px;
143
-
overflow-y: auto;
144
-
}
145
-
146
-
.copy-btn {
147
-
width: 100%;
148
-
border-radius: 0;
149
-
margin: 0;
150
-
padding: var(--space-3) var(--space-5);
151
-
font-size: var(--text-sm);
152
-
}
153
-
154
-
.checkbox-label {
155
-
display: flex;
156
-
align-items: center;
157
-
gap: var(--space-3);
158
-
cursor: pointer;
159
-
font-weight: var(--font-normal);
160
-
}
161
-
162
-
.checkbox-label input[type="checkbox"] {
163
-
width: auto;
164
-
padding: 0;
165
-
}
166
-
</style>
-70
frontend/src/lib/registration/KeyChoiceStep.svelte
-70
frontend/src/lib/registration/KeyChoiceStep.svelte
···
45
45
Back
46
46
</button>
47
47
</div>
48
-
49
-
<style>
50
-
.key-choice-step {
51
-
display: flex;
52
-
flex-direction: column;
53
-
gap: var(--space-4);
54
-
}
55
-
56
-
.info-box {
57
-
background: var(--bg-secondary);
58
-
border: 1px solid var(--border-color);
59
-
border-radius: var(--radius-lg);
60
-
padding: var(--space-5);
61
-
font-size: var(--text-sm);
62
-
}
63
-
64
-
.info-box strong {
65
-
display: block;
66
-
margin-bottom: var(--space-3);
67
-
}
68
-
69
-
.info-box p {
70
-
margin: 0;
71
-
color: var(--text-secondary);
72
-
}
73
-
74
-
.key-choice-options {
75
-
display: flex;
76
-
flex-direction: column;
77
-
gap: var(--space-3);
78
-
}
79
-
80
-
.key-choice-btn {
81
-
display: flex;
82
-
flex-direction: column;
83
-
align-items: flex-start;
84
-
gap: var(--space-2);
85
-
padding: var(--space-5);
86
-
background: var(--bg-card);
87
-
border: 2px solid var(--border-color);
88
-
border-radius: var(--radius-lg);
89
-
text-align: left;
90
-
cursor: pointer;
91
-
transition: border-color 0.2s;
92
-
}
93
-
94
-
.key-choice-btn:hover:not(:disabled) {
95
-
border-color: var(--accent);
96
-
}
97
-
98
-
.key-choice-btn:disabled {
99
-
opacity: 0.6;
100
-
cursor: not-allowed;
101
-
}
102
-
103
-
.key-choice-title {
104
-
font-weight: var(--font-semibold);
105
-
color: var(--text-primary);
106
-
}
107
-
108
-
.key-choice-desc {
109
-
font-size: var(--text-sm);
110
-
color: var(--text-secondary);
111
-
}
112
-
113
-
.loading {
114
-
text-align: center;
115
-
color: var(--text-secondary);
116
-
}
117
-
</style>
+1
-38
frontend/src/lib/registration/VerificationStep.svelte
+1
-38
frontend/src/lib/registration/VerificationStep.svelte
···
129
129
{/if}
130
130
131
131
<form onsubmit={handleSubmit}>
132
-
<div class="field">
132
+
<div>
133
133
<label for="verification-code">Verification Code</label>
134
134
<input
135
135
id="verification-code"
···
154
154
</form>
155
155
{/if}
156
156
</div>
157
-
158
-
<style>
159
-
.verification-step {
160
-
display: flex;
161
-
flex-direction: column;
162
-
gap: var(--space-4);
163
-
}
164
-
165
-
.info-text {
166
-
color: var(--text-secondary);
167
-
margin: 0;
168
-
}
169
-
170
-
.info-text.waiting {
171
-
font-size: var(--text-sm);
172
-
}
173
-
174
-
.info-text code {
175
-
font-family: var(--font-mono, monospace);
176
-
background: var(--bg-secondary);
177
-
padding: 0.1em 0.3em;
178
-
border-radius: var(--radius-sm);
179
-
}
180
-
181
-
.code-input {
182
-
font-family: var(--font-mono, monospace);
183
-
font-size: var(--text-base);
184
-
letter-spacing: 0.05em;
185
-
}
186
-
187
-
.hint {
188
-
display: block;
189
-
color: var(--text-secondary);
190
-
font-size: var(--text-sm);
191
-
margin-top: var(--space-1);
192
-
}
193
-
</style>
-210
frontend/src/routes/Migration.svelte
-210
frontend/src/routes/Migration.svelte
···
230
230
231
231
{#if oauthLoading}
232
232
<div class="loading">
233
-
<div class="spinner md"></div>
234
233
<p>{$_('migration.oauthCompleting')}</p>
235
234
</div>
236
235
{:else if oauthError}
···
304
303
{/if}
305
304
</div>
306
305
307
-
<style>
308
-
.migration-page {
309
-
max-width: var(--width-lg);
310
-
margin: var(--space-9) auto;
311
-
padding: var(--space-7);
312
-
}
313
-
314
-
.page-header {
315
-
text-align: center;
316
-
margin-bottom: var(--space-8);
317
-
}
318
-
319
-
.page-header h1 {
320
-
margin: 0 0 var(--space-3) 0;
321
-
}
322
-
323
-
.subtitle {
324
-
color: var(--text-secondary);
325
-
margin: 0;
326
-
font-size: var(--text-lg);
327
-
}
328
-
329
-
.direction-cards {
330
-
display: grid;
331
-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
332
-
gap: var(--space-6);
333
-
margin-bottom: var(--space-8);
334
-
}
335
-
336
-
.direction-card {
337
-
display: flex;
338
-
flex-direction: column;
339
-
align-items: stretch;
340
-
background: var(--bg-secondary);
341
-
border: 1px solid var(--border-color);
342
-
border-radius: var(--radius-xl);
343
-
padding: var(--space-6);
344
-
text-align: left;
345
-
cursor: pointer;
346
-
transition: all 0.2s ease;
347
-
}
348
-
349
-
.direction-card:hover:not(:disabled) {
350
-
border-color: var(--accent);
351
-
transform: translateY(-2px);
352
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
353
-
}
354
-
355
-
.direction-card:disabled {
356
-
opacity: 0.6;
357
-
cursor: not-allowed;
358
-
}
359
-
360
-
.direction-card h2 {
361
-
margin: 0 0 var(--space-3) 0;
362
-
font-size: var(--text-xl);
363
-
color: var(--text-primary);
364
-
}
365
-
366
-
.direction-card p {
367
-
color: var(--text-secondary);
368
-
margin: 0 0 var(--space-4) 0;
369
-
font-size: var(--text-sm);
370
-
}
371
-
372
-
.features {
373
-
margin: 0;
374
-
padding-left: var(--space-5);
375
-
color: var(--text-secondary);
376
-
font-size: var(--text-sm);
377
-
}
378
-
379
-
.features li {
380
-
margin-bottom: var(--space-2);
381
-
}
382
-
383
-
.info-section {
384
-
background: var(--bg-secondary);
385
-
border-radius: var(--radius-xl);
386
-
padding: var(--space-6);
387
-
}
388
-
389
-
.info-section h3 {
390
-
margin: 0 0 var(--space-3) 0;
391
-
font-size: var(--text-lg);
392
-
}
393
-
394
-
.info-section h3:not(:first-child) {
395
-
margin-top: var(--space-6);
396
-
}
397
-
398
-
.info-section p {
399
-
color: var(--text-secondary);
400
-
line-height: var(--leading-relaxed);
401
-
margin: 0;
402
-
}
403
-
404
-
.info-section ul {
405
-
color: var(--text-secondary);
406
-
padding-left: var(--space-5);
407
-
margin: var(--space-3) 0 0 0;
408
-
}
409
-
410
-
.info-section li {
411
-
margin-bottom: var(--space-2);
412
-
}
413
-
414
-
.warning-box {
415
-
margin-top: var(--space-6);
416
-
padding: var(--space-5);
417
-
background: var(--warning-bg);
418
-
border: 1px solid var(--warning-border);
419
-
border-radius: var(--radius-lg);
420
-
font-size: var(--text-sm);
421
-
}
422
-
423
-
.warning-box strong {
424
-
color: var(--warning-text);
425
-
}
426
-
427
-
.warning-box a {
428
-
display: inline;
429
-
margin-top: var(--space-2);
430
-
}
431
-
432
-
.modal-overlay {
433
-
position: fixed;
434
-
inset: 0;
435
-
background: var(--overlay-bg);
436
-
display: flex;
437
-
align-items: center;
438
-
justify-content: center;
439
-
z-index: var(--z-modal);
440
-
}
441
-
442
-
.modal {
443
-
background: var(--bg-primary);
444
-
border-radius: var(--radius-xl);
445
-
padding: var(--space-6);
446
-
max-width: var(--width-sm);
447
-
width: 90%;
448
-
}
449
-
450
-
.modal h2 {
451
-
margin: 0 0 var(--space-4) 0;
452
-
}
453
-
454
-
.modal p {
455
-
color: var(--text-secondary);
456
-
margin: 0 0 var(--space-4) 0;
457
-
}
458
-
459
-
.resume-details {
460
-
background: var(--bg-secondary);
461
-
border-radius: var(--radius-lg);
462
-
padding: var(--space-4);
463
-
margin-bottom: var(--space-4);
464
-
}
465
-
466
-
.detail-row {
467
-
display: flex;
468
-
justify-content: space-between;
469
-
padding: var(--space-2) 0;
470
-
font-size: var(--text-sm);
471
-
}
472
-
473
-
.detail-row:not(:last-child) {
474
-
border-bottom: 1px solid var(--border-color);
475
-
}
476
-
477
-
.detail-row .label {
478
-
color: var(--text-secondary);
479
-
}
480
-
481
-
.detail-row .value {
482
-
font-weight: var(--font-medium);
483
-
}
484
-
485
-
.note {
486
-
font-size: var(--text-sm);
487
-
font-style: italic;
488
-
}
489
-
490
-
.modal-actions {
491
-
display: flex;
492
-
gap: var(--space-3);
493
-
justify-content: flex-end;
494
-
}
495
-
496
-
.oauth-error {
497
-
max-width: 500px;
498
-
margin: 0 auto;
499
-
text-align: center;
500
-
padding: var(--space-8);
501
-
background: var(--error-bg);
502
-
border: 1px solid var(--error-border);
503
-
border-radius: var(--radius-xl);
504
-
}
505
-
506
-
.oauth-error h2 {
507
-
margin: 0 0 var(--space-4) 0;
508
-
color: var(--error-text);
509
-
}
510
-
511
-
.oauth-error p {
512
-
color: var(--text-secondary);
513
-
margin: 0 0 var(--space-5) 0;
514
-
}
515
-
</style>
+122
-47
frontend/src/styles/migration.css
+122
-47
frontend/src/styles/migration.css
···
28
28
.step-dot {
29
29
width: 24px;
30
30
height: 24px;
31
-
border-radius: 50%;
32
31
background: var(--bg-secondary);
33
-
border: 2px solid var(--border-color);
34
32
display: flex;
35
33
align-items: center;
36
34
justify-content: center;
···
82
80
83
81
.step-content {
84
82
background: var(--bg-secondary);
85
-
border-radius: var(--radius-xl);
86
83
padding: var(--space-6);
87
84
}
88
85
···
97
94
98
95
.info-box {
99
96
background: var(--accent-muted);
100
-
border: 1px solid var(--border-color);
101
-
border-radius: var(--radius-lg);
102
97
padding: var(--space-5);
103
98
margin-bottom: var(--space-5);
104
99
}
···
126
121
127
122
.warning-box {
128
123
background: var(--warning-bg);
129
-
border: 1px solid var(--warning-border);
130
-
border-radius: var(--radius-lg);
131
124
padding: var(--space-5);
132
125
margin-bottom: var(--space-5);
133
126
font-size: var(--text-sm);
···
172
165
173
166
.current-info {
174
167
background: var(--bg-primary);
175
-
border-radius: var(--radius-lg);
176
168
padding: var(--space-4);
177
169
margin-bottom: var(--space-5);
178
170
display: flex;
···
195
187
196
188
.review-card {
197
189
background: var(--bg-primary);
198
-
border-radius: var(--radius-lg);
199
190
padding: var(--space-4);
200
191
margin-bottom: var(--space-5);
201
192
}
···
243
234
}
244
235
245
236
.progress-item.active {
246
-
color: var(--accent);
237
+
color: var(--secondary);
247
238
}
248
239
249
240
.progress-item .icon {
···
254
245
.progress-bar {
255
246
height: 8px;
256
247
background: var(--bg-primary);
257
-
border-radius: var(--radius-md);
258
248
overflow: hidden;
259
249
margin-bottom: var(--space-4);
260
250
}
···
262
252
.progress-fill {
263
253
height: 100%;
264
254
background: var(--accent);
265
-
transition: width var(--transition-slow);
266
255
}
267
256
268
257
.status-text {
···
278
267
.blob-progress-bar {
279
268
height: 8px;
280
269
background: var(--bg-primary);
281
-
border-radius: var(--radius-md);
282
270
overflow: hidden;
283
271
margin-bottom: var(--space-2);
284
272
}
···
286
274
.blob-progress-fill {
287
275
height: 100%;
288
276
background: var(--accent);
289
-
transition: width var(--transition-slow);
290
277
}
291
278
292
279
.blob-progress-text {
···
305
292
height: 64px;
306
293
background: var(--success-bg);
307
294
color: var(--success-text);
308
-
border-radius: 50%;
309
295
display: flex;
310
296
align-items: center;
311
297
justify-content: center;
···
315
301
316
302
.success-details {
317
303
background: var(--bg-primary);
318
-
border-radius: var(--radius-lg);
319
304
padding: var(--space-4);
320
305
margin: var(--space-5) 0;
321
306
text-align: left;
···
347
332
348
333
.code-block {
349
334
background: var(--bg-primary);
350
-
border: 1px solid var(--border-color);
351
-
border-radius: var(--radius-lg);
352
335
padding: var(--space-4);
353
336
margin-bottom: var(--space-5);
354
337
overflow-x: auto;
···
374
357
align-items: center;
375
358
gap: var(--space-3);
376
359
padding: var(--space-4);
377
-
border: 2px solid var(--border-color);
378
-
border-radius: var(--radius-lg);
379
360
cursor: pointer;
380
361
margin-bottom: 0;
381
-
transition:
382
-
border-color var(--transition-normal),
383
-
background-color var(--transition-normal);
384
362
}
385
363
386
364
.auth-option:hover {
387
-
border-color: var(--accent);
365
+
border-color: var(--secondary);
388
366
background: var(--bg-hover);
389
367
}
390
368
391
369
.auth-option.selected {
392
-
border-color: var(--accent);
370
+
border-color: var(--secondary);
393
371
background: var(--accent-muted);
394
372
}
395
373
···
423
401
padding: var(--space-8);
424
402
}
425
403
426
-
.spinner {
427
-
width: 40px;
428
-
height: 40px;
429
-
border: 3px solid var(--border-color);
430
-
border-top-color: var(--accent);
431
-
border-radius: 50%;
432
-
animation: spin 1s linear infinite;
433
-
}
434
-
435
404
.passkey-section {
436
405
margin-top: var(--space-5);
437
406
text-align: center;
···
444
413
445
414
.app-password-display {
446
415
background: var(--bg-primary);
447
-
border-radius: var(--radius-lg);
448
416
padding: var(--space-5);
449
417
margin-bottom: var(--space-5);
450
418
text-align: center;
···
463
431
letter-spacing: 0.1em;
464
432
padding: var(--space-4);
465
433
background: var(--bg-tertiary);
466
-
border-radius: var(--radius-md);
467
434
margin-bottom: var(--space-4);
468
435
user-select: all;
469
436
}
···
474
441
475
442
.current-account {
476
443
background: var(--bg-primary);
477
-
border-radius: var(--radius-lg);
478
444
padding: var(--space-4);
479
445
margin-bottom: var(--space-5);
480
446
display: flex;
···
493
459
494
460
.server-info {
495
461
background: var(--bg-primary);
496
-
border-radius: var(--radius-lg);
497
462
padding: var(--space-4);
498
463
margin-top: var(--space-5);
499
464
}
···
519
484
display: inline-block;
520
485
margin-top: var(--space-2);
521
486
margin-right: var(--space-3);
522
-
color: var(--accent);
487
+
color: var(--secondary);
523
488
font-size: var(--text-sm);
524
489
}
525
490
···
534
499
535
500
.next-steps {
536
501
background: var(--accent-muted);
537
-
border-radius: var(--radius-lg);
538
502
padding: var(--space-5);
539
503
margin: var(--space-5) 0;
540
504
text-align: left;
···
554
518
}
555
519
556
520
.next-steps a {
557
-
color: var(--accent);
521
+
color: var(--secondary);
558
522
}
559
523
560
524
.resume-info {
···
600
564
align-items: center;
601
565
padding: var(--space-3);
602
566
background: var(--bg-primary);
603
-
border-radius: var(--radius-md);
604
567
}
605
568
606
569
.file-name {
···
618
581
font-size: var(--text-sm);
619
582
padding: var(--space-3);
620
583
border: 1px solid var(--border-color);
621
-
border-radius: var(--radius-md);
622
584
background: var(--bg-input);
623
585
color: var(--text-primary);
624
586
resize: vertical;
···
626
588
627
589
.step-content textarea:focus {
628
590
outline: none;
629
-
border-color: var(--accent);
591
+
border-color: var(--secondary);
630
592
}
631
593
632
594
.message {
633
595
padding: var(--space-4);
634
-
border-radius: var(--radius-lg);
635
596
margin-bottom: var(--space-4);
636
597
}
637
598
638
599
.message.success {
639
600
background: var(--success-bg);
640
601
color: var(--success-text);
641
-
border: 1px solid var(--success-border);
642
602
}
643
603
644
604
.message.error {
645
605
background: var(--error-bg);
646
606
color: var(--error-text);
647
-
border: 1px solid var(--error-border);
607
+
}
608
+
609
+
.handle-choice-options {
610
+
display: flex;
611
+
flex-direction: column;
612
+
gap: var(--space-3);
613
+
}
614
+
615
+
.handle-choice-option {
616
+
display: flex;
617
+
align-items: center;
618
+
gap: var(--space-3);
619
+
padding: var(--space-4);
620
+
cursor: pointer;
621
+
}
622
+
623
+
.handle-choice-option:hover {
624
+
border-color: var(--secondary);
625
+
}
626
+
627
+
.handle-choice-option.selected {
628
+
border-color: var(--secondary);
629
+
background: var(--accent-muted);
630
+
}
631
+
632
+
.handle-choice-option input[type="radio"] {
633
+
flex-shrink: 0;
634
+
width: 18px;
635
+
height: 18px;
636
+
margin: 0;
637
+
}
638
+
639
+
.handle-choice-content {
640
+
display: flex;
641
+
flex-direction: column;
642
+
gap: var(--space-1);
643
+
}
644
+
645
+
.handle-preview {
646
+
font-family: var(--font-mono);
647
+
font-size: var(--text-sm);
648
+
color: var(--text-secondary);
649
+
}
650
+
651
+
.existing-handle-display {
652
+
display: flex;
653
+
align-items: center;
654
+
gap: var(--space-4);
655
+
padding: var(--space-4);
656
+
background: var(--bg-secondary);
657
+
margin-bottom: var(--space-4);
658
+
}
659
+
660
+
.handle-value {
661
+
font-family: var(--font-mono);
662
+
font-size: var(--text-base);
663
+
}
664
+
665
+
.verified-badge {
666
+
font-size: var(--text-xs);
667
+
padding: var(--space-1) var(--space-3);
668
+
background: var(--success-bg);
669
+
color: var(--success-text);
670
+
}
671
+
672
+
.verification-instructions {
673
+
background: var(--bg-secondary);
674
+
padding: var(--space-5);
675
+
margin-bottom: var(--space-4);
676
+
}
677
+
678
+
.instruction-header {
679
+
margin: 0 0 var(--space-4) 0;
680
+
font-size: var(--text-sm);
681
+
color: var(--text-secondary);
682
+
}
683
+
684
+
.instruction-or {
685
+
margin: var(--space-3) 0;
686
+
font-size: var(--text-xs);
687
+
color: var(--text-muted);
688
+
text-align: center;
689
+
}
690
+
691
+
.verification-record {
692
+
display: flex;
693
+
flex-direction: column;
694
+
gap: var(--space-2);
695
+
}
696
+
697
+
.verification-record code {
698
+
font-size: var(--text-sm);
699
+
padding: var(--space-3);
700
+
background: var(--bg-tertiary);
701
+
overflow-x: auto;
702
+
word-break: break-all;
703
+
}
704
+
705
+
.record-content {
706
+
font-size: var(--text-xs);
707
+
color: var(--text-secondary);
708
+
padding-left: var(--space-3);
709
+
}
710
+
711
+
.record-content code {
712
+
padding: var(--space-1) var(--space-2);
713
+
font-size: var(--text-xs);
714
+
}
715
+
716
+
.verify-btn {
717
+
width: 100%;
718
+
}
719
+
720
+
.passkey-section button {
721
+
width: 100%;
722
+
margin-top: 12px;
648
723
}