fix(web): align the credential onboarding page

This commit is contained in:
NI0317
2026-07-31 11:27:01 +08:00
parent fb80732e7d
commit c955c9adb1
3 changed files with 19 additions and 53 deletions
@@ -1,68 +1,45 @@
.page {
position: relative;
z-index: 1;
width: min(640px, calc(100vw - 64px));
max-height: 100vh;
padding: clamp(64px, 9vh, 108px) 0 40px;
display: flex;
flex-direction: column;
justify-content: center;
width: min(560px, calc(100vw - 64px));
min-height: 100vh;
padding: 40px 0;
box-sizing: border-box;
overflow-y: auto;
color: var(--dsw-alias-label-primary);
}
.brand {
display: flex;
align-items: center;
margin-bottom: 42px;
margin-bottom: 36px;
color: var(--dsw-alias-label-primary);
}
.title {
max-width: 620px;
margin: 0;
font-size: clamp(30px, 4vw, 42px);
line-height: 1.15;
font-size: 32px;
line-height: 40px;
font-weight: 600;
letter-spacing: -0.035em;
letter-spacing: -0.02em;
outline: none;
}
.description {
max-width: 600px;
margin: 22px 0 0;
font-size: 17px;
line-height: 29px;
color: var(--dsw-alias-label-secondary);
}
.provider {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 600px;
margin-top: 36px;
padding: 18px 20px;
border: 1px solid var(--dsw-alias-border-l2);
border-radius: 16px;
background: var(--dsw-alias-bg-module-platform);
}
.providerName {
margin: 16px 0 0;
font-size: 16px;
line-height: 24px;
font-weight: 600;
}
.providerRoute {
font-size: 13px;
line-height: 20px;
color: var(--dsw-alias-label-tertiary);
line-height: 28px;
color: var(--dsw-alias-label-secondary);
}
.actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
margin-top: 40px;
margin-top: 36px;
}
.primary {
@@ -72,15 +49,13 @@
.brand,
.title,
.description,
.provider,
.actions {
animation: credential-enter 280ms cubic-bezier(0.23, 1, 0.32, 1) both;
}
.title { animation-delay: 40ms; }
.description { animation-delay: 80ms; }
.provider { animation-delay: 120ms; }
.actions { animation-delay: 160ms; }
.actions { animation-delay: 120ms; }
@keyframes credential-enter {
from {
@@ -98,7 +73,6 @@
.brand,
.title,
.description,
.provider,
.actions {
animation: none;
}
@@ -107,21 +81,18 @@
@media (max-width: 560px) {
.page {
width: calc(100vw - 40px);
padding-top: 48px;
justify-content: flex-start;
padding-top: 64px;
}
.brand {
margin-bottom: 30px;
}
.description {
font-size: 16px;
line-height: 27px;
}
.actions {
align-items: stretch;
flex-direction: column-reverse;
margin-top: 32px;
}
.primary,
@@ -91,10 +91,6 @@ export function DeepSeekOnboardingDialog(props: DeepSeekOnboardingDialogProps):
{t('onboardingTitle')}
</h2>
<p className={styles['description']}>{t('onboardingDescription')}</p>
<div className={styles['provider']}>
<span className={styles['providerName']}>DeepSeek</span>
<span className={styles['providerRoute']}>deepseek-official</span>
</div>
<div className={styles['actions']}>
<Button variant="ghost" className={styles['later']} onClick={complete}>
{t('onboardingLater')}