mirror of
https://tangled.org/tranquil.farm/tranquil-pds
synced 2026-07-27 19:02:39 +00:00
refactor(frontend): extract migration component styles + migration.css
This commit is contained in:
Lewis
Tangled
@@ -53,34 +53,3 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.app-password-display {
|
||||
background: var(--bg-card);
|
||||
border: 2px solid var(--accent);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-6);
|
||||
text-align: center;
|
||||
margin: var(--space-4) 0;
|
||||
}
|
||||
.app-password-label {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.app-password-code {
|
||||
display: block;
|
||||
font-size: var(--text-xl);
|
||||
font-family: ui-monospace, monospace;
|
||||
letter-spacing: 0.1em;
|
||||
padding: var(--space-5);
|
||||
background: var(--bg-input);
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: var(--space-4);
|
||||
user-select: all;
|
||||
}
|
||||
.copy-btn {
|
||||
padding: var(--space-3) var(--space-5);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -281,123 +281,3 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.handle-choice-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.handle-choice-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-4);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
cursor: pointer;
|
||||
transition: border-color var(--transition-normal), background var(--transition-normal);
|
||||
}
|
||||
|
||||
.handle-choice-option:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.handle-choice-option.selected {
|
||||
border-color: var(--accent);
|
||||
background: var(--accent-muted);
|
||||
}
|
||||
|
||||
.handle-choice-option input[type="radio"] {
|
||||
flex-shrink: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.handle-choice-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.handle-preview {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.existing-handle-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-4);
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-lg);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.handle-value {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
.verified-badge {
|
||||
font-size: var(--text-xs);
|
||||
padding: var(--space-1) var(--space-3);
|
||||
background: var(--success-bg);
|
||||
color: var(--success-text);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.verification-instructions {
|
||||
background: var(--bg-secondary);
|
||||
padding: var(--space-5);
|
||||
border-radius: var(--radius-lg);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.instruction-header {
|
||||
margin: 0 0 var(--space-4) 0;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.instruction-or {
|
||||
margin: var(--space-3) 0;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.verification-record {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.verification-record code {
|
||||
font-size: var(--text-sm);
|
||||
padding: var(--space-3);
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: var(--radius-md);
|
||||
overflow-x: auto;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.record-content {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-secondary);
|
||||
padding-left: var(--space-3);
|
||||
}
|
||||
|
||||
.record-content code {
|
||||
padding: var(--space-1) var(--space-2);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.verify-btn {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
{/if}
|
||||
|
||||
<form onsubmit={onSubmit}>
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="email-verify-token">{$_('migration.inbound.emailVerify.tokenLabel')}</label>
|
||||
<input
|
||||
id="email-verify-token"
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
import { getErrorMessage } from '../../lib/migration/types'
|
||||
import { base64UrlEncode, prepareWebAuthnCreationOptions } from '../../lib/migration/atproto-client'
|
||||
import { _ } from '../../lib/i18n'
|
||||
import '../../styles/migration.css'
|
||||
import ErrorStep from './ErrorStep.svelte'
|
||||
import SuccessStep from './SuccessStep.svelte'
|
||||
import ChooseHandleStep from './ChooseHandleStep.svelte'
|
||||
@@ -418,7 +417,7 @@
|
||||
{/if}
|
||||
|
||||
<form onsubmit={handleSourceHandleSubmit}>
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="source-handle">{$_('migration.inbound.sourceAuth.handle')}</label>
|
||||
<input
|
||||
id="source-handle"
|
||||
@@ -595,7 +594,7 @@
|
||||
</div>
|
||||
|
||||
<form onsubmit={submitPlcToken}>
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="plc-token">{$_('migration.inbound.plcToken.tokenLabel')}</label>
|
||||
<input
|
||||
id="plc-token"
|
||||
@@ -713,34 +712,3 @@
|
||||
<ErrorStep error={flow.state.error} onStartOver={onBack} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.resume-info {
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
.resume-info h3 {
|
||||
margin: 0 0 var(--space-3) 0;
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
.resume-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.resume-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
.resume-row .label {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.resume-row .value {
|
||||
font-weight: var(--font-medium);
|
||||
}
|
||||
.resume-note {
|
||||
margin-top: var(--space-3);
|
||||
font-size: var(--text-sm);
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
import { getErrorMessage } from '../../lib/migration/types'
|
||||
import { base64UrlEncode, prepareWebAuthnCreationOptions } from '../../lib/migration/atproto-client'
|
||||
import { _ } from '../../lib/i18n'
|
||||
import '../../styles/migration.css'
|
||||
import ErrorStep from './ErrorStep.svelte'
|
||||
import SuccessStep from './SuccessStep.svelte'
|
||||
import ChooseHandleStep from './ChooseHandleStep.svelte'
|
||||
|
||||
@@ -48,13 +48,3 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.passkey-section {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.passkey-section button {
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -88,79 +88,3 @@
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.did-doc-step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.warning-box {
|
||||
padding: var(--space-5);
|
||||
background: var(--warning-bg);
|
||||
border: 1px solid var(--warning-border);
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.warning-box strong {
|
||||
display: block;
|
||||
margin-bottom: var(--space-3);
|
||||
color: var(--warning-text);
|
||||
}
|
||||
|
||||
.warning-box p {
|
||||
margin: 0;
|
||||
color: var(--warning-text);
|
||||
}
|
||||
|
||||
.did-url {
|
||||
display: block;
|
||||
margin-top: var(--space-3);
|
||||
padding: var(--space-3);
|
||||
background: var(--bg-input);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: var(--text-sm);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.did-doc-display {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.did-doc-code {
|
||||
margin: 0;
|
||||
padding: var(--space-4);
|
||||
background: var(--bg-input);
|
||||
font-size: var(--text-xs);
|
||||
overflow-x: auto;
|
||||
white-space: pre;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
padding: var(--space-3) var(--space-5);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
cursor: pointer;
|
||||
font-weight: var(--font-normal);
|
||||
}
|
||||
|
||||
.checkbox-label input[type="checkbox"] {
|
||||
width: auto;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -45,73 +45,3 @@
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.key-choice-step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-5);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.info-box strong {
|
||||
display: block;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.info-box p {
|
||||
margin: 0;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.key-choice-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.key-choice-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-5);
|
||||
background: var(--bg-card);
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.key-choice-btn:hover:not(:disabled) {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.key-choice-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.key-choice-title {
|
||||
font-weight: var(--font-semibold);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.key-choice-desc {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -129,7 +129,7 @@
|
||||
{/if}
|
||||
|
||||
<form onsubmit={handleSubmit}>
|
||||
<div class="field">
|
||||
<div>
|
||||
<label for="verification-code">Verification Code</label>
|
||||
<input
|
||||
id="verification-code"
|
||||
@@ -154,40 +154,3 @@
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.verification-step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.info-text {
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.info-text.waiting {
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.info-text code {
|
||||
font-family: var(--font-mono, monospace);
|
||||
background: var(--bg-secondary);
|
||||
padding: 0.1em 0.3em;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.code-input {
|
||||
font-family: var(--font-mono, monospace);
|
||||
font-size: var(--text-base);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.hint {
|
||||
display: block;
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -230,7 +230,6 @@
|
||||
|
||||
{#if oauthLoading}
|
||||
<div class="loading">
|
||||
<div class="spinner md"></div>
|
||||
<p>{$_('migration.oauthCompleting')}</p>
|
||||
</div>
|
||||
{:else if oauthError}
|
||||
@@ -304,212 +303,3 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.migration-page {
|
||||
max-width: var(--width-lg);
|
||||
margin: var(--space-9) auto;
|
||||
padding: var(--space-7);
|
||||
}
|
||||
|
||||
.page-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--space-8);
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
margin: 0 0 var(--space-3) 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
|
||||
.direction-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: var(--space-6);
|
||||
margin-bottom: var(--space-8);
|
||||
}
|
||||
|
||||
.direction-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-6);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.direction-card:hover:not(:disabled) {
|
||||
border-color: var(--accent);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.direction-card:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.direction-card h2 {
|
||||
margin: 0 0 var(--space-3) 0;
|
||||
font-size: var(--text-xl);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.direction-card p {
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0 var(--space-4) 0;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.features {
|
||||
margin: 0;
|
||||
padding-left: var(--space-5);
|
||||
color: var(--text-secondary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.features li {
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.info-section {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
.info-section h3 {
|
||||
margin: 0 0 var(--space-3) 0;
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
|
||||
.info-section h3:not(:first-child) {
|
||||
margin-top: var(--space-6);
|
||||
}
|
||||
|
||||
.info-section p {
|
||||
color: var(--text-secondary);
|
||||
line-height: var(--leading-relaxed);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.info-section ul {
|
||||
color: var(--text-secondary);
|
||||
padding-left: var(--space-5);
|
||||
margin: var(--space-3) 0 0 0;
|
||||
}
|
||||
|
||||
.info-section li {
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.warning-box {
|
||||
margin-top: var(--space-6);
|
||||
padding: var(--space-5);
|
||||
background: var(--warning-bg);
|
||||
border: 1px solid var(--warning-border);
|
||||
border-radius: var(--radius-lg);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.warning-box strong {
|
||||
color: var(--warning-text);
|
||||
}
|
||||
|
||||
.warning-box a {
|
||||
display: inline;
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: var(--overlay-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: var(--z-modal);
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-6);
|
||||
max-width: var(--width-sm);
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.modal h2 {
|
||||
margin: 0 0 var(--space-4) 0;
|
||||
}
|
||||
|
||||
.modal p {
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0 var(--space-4) 0;
|
||||
}
|
||||
|
||||
.resume-details {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-2) 0;
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.detail-row:not(:last-child) {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.detail-row .label {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.detail-row .value {
|
||||
font-weight: var(--font-medium);
|
||||
}
|
||||
|
||||
.note {
|
||||
font-size: var(--text-sm);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.oauth-error {
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
padding: var(--space-8);
|
||||
background: var(--error-bg);
|
||||
border: 1px solid var(--error-border);
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
|
||||
.oauth-error h2 {
|
||||
margin: 0 0 var(--space-4) 0;
|
||||
color: var(--error-text);
|
||||
}
|
||||
|
||||
.oauth-error p {
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0 var(--space-5) 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -28,9 +28,7 @@
|
||||
.step-dot {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: var(--bg-secondary);
|
||||
border: 2px solid var(--border-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -82,7 +80,6 @@
|
||||
|
||||
.step-content {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--space-6);
|
||||
}
|
||||
|
||||
@@ -97,8 +94,6 @@
|
||||
|
||||
.info-box {
|
||||
background: var(--accent-muted);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-5);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
@@ -126,8 +121,6 @@
|
||||
|
||||
.warning-box {
|
||||
background: var(--warning-bg);
|
||||
border: 1px solid var(--warning-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-5);
|
||||
margin-bottom: var(--space-5);
|
||||
font-size: var(--text-sm);
|
||||
@@ -172,7 +165,6 @@
|
||||
|
||||
.current-info {
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-5);
|
||||
display: flex;
|
||||
@@ -195,7 +187,6 @@
|
||||
|
||||
.review-card {
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-5);
|
||||
}
|
||||
@@ -243,7 +234,7 @@
|
||||
}
|
||||
|
||||
.progress-item.active {
|
||||
color: var(--accent);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.progress-item .icon {
|
||||
@@ -254,7 +245,6 @@
|
||||
.progress-bar {
|
||||
height: 8px;
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
@@ -262,7 +252,6 @@
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: var(--accent);
|
||||
transition: width var(--transition-slow);
|
||||
}
|
||||
|
||||
.status-text {
|
||||
@@ -278,7 +267,6 @@
|
||||
.blob-progress-bar {
|
||||
height: 8px;
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
@@ -286,7 +274,6 @@
|
||||
.blob-progress-fill {
|
||||
height: 100%;
|
||||
background: var(--accent);
|
||||
transition: width var(--transition-slow);
|
||||
}
|
||||
|
||||
.blob-progress-text {
|
||||
@@ -305,7 +292,6 @@
|
||||
height: 64px;
|
||||
background: var(--success-bg);
|
||||
color: var(--success-text);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -315,7 +301,6 @@
|
||||
|
||||
.success-details {
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-4);
|
||||
margin: var(--space-5) 0;
|
||||
text-align: left;
|
||||
@@ -347,8 +332,6 @@
|
||||
|
||||
.code-block {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-5);
|
||||
overflow-x: auto;
|
||||
@@ -374,22 +357,17 @@ label.auth-option {
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-4);
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
cursor: pointer;
|
||||
margin-bottom: 0;
|
||||
transition:
|
||||
border-color var(--transition-normal),
|
||||
background-color var(--transition-normal);
|
||||
}
|
||||
|
||||
.auth-option:hover {
|
||||
border-color: var(--accent);
|
||||
border-color: var(--secondary);
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.auth-option.selected {
|
||||
border-color: var(--accent);
|
||||
border-color: var(--secondary);
|
||||
background: var(--accent-muted);
|
||||
}
|
||||
|
||||
@@ -423,15 +401,6 @@ label.auth-option {
|
||||
padding: var(--space-8);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid var(--border-color);
|
||||
border-top-color: var(--accent);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.passkey-section {
|
||||
margin-top: var(--space-5);
|
||||
text-align: center;
|
||||
@@ -444,7 +413,6 @@ label.auth-option {
|
||||
|
||||
.app-password-display {
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-5);
|
||||
margin-bottom: var(--space-5);
|
||||
text-align: center;
|
||||
@@ -463,7 +431,6 @@ label.auth-option {
|
||||
letter-spacing: 0.1em;
|
||||
padding: var(--space-4);
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: var(--space-4);
|
||||
user-select: all;
|
||||
}
|
||||
@@ -474,7 +441,6 @@ label.auth-option {
|
||||
|
||||
.current-account {
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-5);
|
||||
display: flex;
|
||||
@@ -493,7 +459,6 @@ label.auth-option {
|
||||
|
||||
.server-info {
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-4);
|
||||
margin-top: var(--space-5);
|
||||
}
|
||||
@@ -519,7 +484,7 @@ label.auth-option {
|
||||
display: inline-block;
|
||||
margin-top: var(--space-2);
|
||||
margin-right: var(--space-3);
|
||||
color: var(--accent);
|
||||
color: var(--secondary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
@@ -534,7 +499,6 @@ label.auth-option {
|
||||
|
||||
.next-steps {
|
||||
background: var(--accent-muted);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-5);
|
||||
margin: var(--space-5) 0;
|
||||
text-align: left;
|
||||
@@ -554,7 +518,7 @@ label.auth-option {
|
||||
}
|
||||
|
||||
.next-steps a {
|
||||
color: var(--accent);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.resume-info {
|
||||
@@ -600,7 +564,6 @@ label.auth-option {
|
||||
align-items: center;
|
||||
padding: var(--space-3);
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.file-name {
|
||||
@@ -618,7 +581,6 @@ label.auth-option {
|
||||
font-size: var(--text-sm);
|
||||
padding: var(--space-3);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-input);
|
||||
color: var(--text-primary);
|
||||
resize: vertical;
|
||||
@@ -626,23 +588,136 @@ label.auth-option {
|
||||
|
||||
.step-content textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
border-color: var(--secondary);
|
||||
}
|
||||
|
||||
.message {
|
||||
padding: var(--space-4);
|
||||
border-radius: var(--radius-lg);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.message.success {
|
||||
background: var(--success-bg);
|
||||
color: var(--success-text);
|
||||
border: 1px solid var(--success-border);
|
||||
}
|
||||
|
||||
.message.error {
|
||||
background: var(--error-bg);
|
||||
color: var(--error-text);
|
||||
border: 1px solid var(--error-border);
|
||||
}
|
||||
|
||||
.handle-choice-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.handle-choice-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-4);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.handle-choice-option:hover {
|
||||
border-color: var(--secondary);
|
||||
}
|
||||
|
||||
.handle-choice-option.selected {
|
||||
border-color: var(--secondary);
|
||||
background: var(--accent-muted);
|
||||
}
|
||||
|
||||
.handle-choice-option input[type="radio"] {
|
||||
flex-shrink: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.handle-choice-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.handle-preview {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.existing-handle-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-4);
|
||||
padding: var(--space-4);
|
||||
background: var(--bg-secondary);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.handle-value {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
.verified-badge {
|
||||
font-size: var(--text-xs);
|
||||
padding: var(--space-1) var(--space-3);
|
||||
background: var(--success-bg);
|
||||
color: var(--success-text);
|
||||
}
|
||||
|
||||
.verification-instructions {
|
||||
background: var(--bg-secondary);
|
||||
padding: var(--space-5);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.instruction-header {
|
||||
margin: 0 0 var(--space-4) 0;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.instruction-or {
|
||||
margin: var(--space-3) 0;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.verification-record {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.verification-record code {
|
||||
font-size: var(--text-sm);
|
||||
padding: var(--space-3);
|
||||
background: var(--bg-tertiary);
|
||||
overflow-x: auto;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.record-content {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-secondary);
|
||||
padding-left: var(--space-3);
|
||||
}
|
||||
|
||||
.record-content code {
|
||||
padding: var(--space-1) var(--space-2);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.verify-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.passkey-section button {
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user