tranquil.farm / tranquil-pds
Our Personal Data Server from scratch! tranquil.farm
pds rust database fun oauth atproto
238
fork

Configure Feed

Select the types of activity you want to include in your feed.

refactor(frontend): extract migration component styles + migration.css

authored by did:plc:mb5to35neicxt4gemstoro… and committed by tangled.org 113bea7d da8b5774

+126 -638
-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
··· 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
··· 39 39 {/if} 40 40 41 41 <form onsubmit={onSubmit}> 42 - <div class="field"> 42 + <div> 43 43 <label for="email-verify-token">{$_('migration.inbound.emailVerify.tokenLabel')}</label> 44 44 <input 45 45 id="email-verify-token"
+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
··· 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
··· 48 48 </button> 49 49 </div> 50 50 </div> 51 - 52 - <style> 53 - .passkey-section { 54 - margin-top: 16px; 55 - } 56 - .passkey-section button { 57 - width: 100%; 58 - margin-top: 12px; 59 - } 60 - </style>
-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
··· 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
··· 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
··· 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
··· 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 }