mirror of
https://github.com/sky-systems/sky_phone.git
synced 2026-08-28 17:01:18 +00:00
ENH - refine setup and reset transitions
This commit is contained in:
smx.pusha
@@ -156,6 +156,7 @@ async function submitAccount(): Promise<void> {
|
||||
}
|
||||
|
||||
function selectAccountMode(mode: 'login' | 'register'): void {
|
||||
if (accountMode.value === mode) return
|
||||
accountMode.value = mode
|
||||
password.value = ''
|
||||
passwordConfirm.value = ''
|
||||
@@ -241,16 +242,16 @@ function finish(): void {
|
||||
<main :key="step" class="setup-assistant__page">
|
||||
<template v-if="step === 0">
|
||||
<div class="setup-welcome__hero" aria-hidden="true">
|
||||
<div class="setup-welcome__halo setup-welcome__halo--outer"></div>
|
||||
<div class="setup-welcome__halo setup-welcome__halo--inner"></div>
|
||||
<div class="setup-welcome__greetings">
|
||||
<span>{{ phone.t('Setup.welcome.hello') }}</span>
|
||||
<span>{{ phone.t('Setup.welcome.hallo') }}</span>
|
||||
<span>{{ phone.t('Setup.welcome.bonjour') }}</span>
|
||||
</div>
|
||||
<div class="setup-welcome__spark setup-welcome__spark--one"></div>
|
||||
<div class="setup-welcome__spark setup-welcome__spark--two"></div>
|
||||
<div class="setup-welcome__spark setup-welcome__spark--three"></div>
|
||||
<div class="setup-welcome__signature">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setup-welcome__copy">
|
||||
<p class="setup-welcome__eyebrow">
|
||||
@@ -320,20 +321,31 @@ function finish(): void {
|
||||
<p class="setup-assistant__eyebrow">
|
||||
{{ phone.t('Setup.cloud.eyebrow') }}
|
||||
</p>
|
||||
<h1>{{ phone.t(accountMode === 'login' ? 'Setup.cloud.signInTitle' : 'Setup.cloud.createTitle') }}</h1>
|
||||
<p class="setup-assistant__lead">
|
||||
{{ phone.t(accountMode === 'login' ? 'Setup.cloud.signInBody' : 'Setup.cloud.createBody') }}
|
||||
</p>
|
||||
<Transition name="setup-account-copy" mode="out-in">
|
||||
<div :key="accountMode" class="setup-cloud-heading">
|
||||
<h1>{{ phone.t(accountMode === 'login' ? 'Setup.cloud.signInTitle' : 'Setup.cloud.createTitle') }}</h1>
|
||||
<p class="setup-assistant__lead">
|
||||
{{ phone.t(accountMode === 'login' ? 'Setup.cloud.signInBody' : 'Setup.cloud.createBody') }}
|
||||
</p>
|
||||
</div>
|
||||
</Transition>
|
||||
<div v-if="!account.email" class="setup-cloud-form">
|
||||
<div class="setup-assistant__selector">
|
||||
<div class="setup-assistant__selector" role="group">
|
||||
<span
|
||||
class="setup-assistant__selector-indicator"
|
||||
:class="{ 'setup-assistant__selector-indicator--register': accountMode === 'register' }"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<button
|
||||
:class="{ active: accountMode === 'login' }"
|
||||
:aria-pressed="accountMode === 'login'"
|
||||
@click="selectAccountMode('login')"
|
||||
>
|
||||
{{ phone.t('Setup.cloud.signIn') }}
|
||||
</button>
|
||||
<button
|
||||
:class="{ active: accountMode === 'register' }"
|
||||
:aria-pressed="accountMode === 'register'"
|
||||
@click="selectAccountMode('register')"
|
||||
>
|
||||
{{ phone.t('Setup.cloud.create') }}
|
||||
@@ -372,26 +384,30 @@ function finish(): void {
|
||||
:label="phone.t('Setup.cloud.password')"
|
||||
:autocomplete="accountMode === 'login' ? 'current-password' : 'new-password'"
|
||||
/>
|
||||
<SkyField
|
||||
v-if="accountMode === 'register'"
|
||||
id="setup-cloud-password-confirm"
|
||||
v-model="passwordConfirm"
|
||||
type="password"
|
||||
:label="phone.t('Setup.cloud.confirmPassword')"
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
<Transition name="setup-account-field">
|
||||
<SkyField
|
||||
v-if="accountMode === 'register'"
|
||||
id="setup-cloud-password-confirm"
|
||||
v-model="passwordConfirm"
|
||||
type="password"
|
||||
:label="phone.t('Setup.cloud.confirmPassword')"
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
<div v-if="accountMode === 'register'" class="setup-cloud-strength">
|
||||
<div>
|
||||
<span
|
||||
v-for="level in 4"
|
||||
:key="level"
|
||||
:class="{ active: level <= passwordStrength }"
|
||||
></span>
|
||||
<Transition name="setup-account-strength">
|
||||
<div v-if="accountMode === 'register'" class="setup-cloud-strength">
|
||||
<div>
|
||||
<span
|
||||
v-for="level in 4"
|
||||
:key="level"
|
||||
:class="{ active: level <= passwordStrength }"
|
||||
></span>
|
||||
</div>
|
||||
<small>{{ phone.t(`Setup.cloud.strength${passwordStrength}`) }}</small>
|
||||
</div>
|
||||
<small>{{ phone.t(`Setup.cloud.strength${passwordStrength}`) }}</small>
|
||||
</div>
|
||||
</Transition>
|
||||
<p v-if="accountError" class="setup-assistant__error" role="alert">
|
||||
{{ accountError }}
|
||||
</p>
|
||||
@@ -401,7 +417,9 @@ function finish(): void {
|
||||
@click="submitAccount"
|
||||
>
|
||||
<SkySpinner v-if="accountBusy" />
|
||||
<span v-else>{{ phone.t(accountMode === 'login' ? 'Setup.cloud.signInAction' : 'Setup.cloud.createAction') }}</span>
|
||||
<Transition v-else name="setup-account-action" mode="out-in">
|
||||
<span :key="accountMode">{{ phone.t(accountMode === 'login' ? 'Setup.cloud.signInAction' : 'Setup.cloud.createAction') }}</span>
|
||||
</Transition>
|
||||
</SkyButton>
|
||||
<div class="setup-cloud-security-note">
|
||||
<LockKeyhole :size="13" />
|
||||
@@ -956,44 +974,40 @@ function finish(): void {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 286px;
|
||||
height: 292px;
|
||||
height: 274px;
|
||||
flex: none;
|
||||
place-items: center;
|
||||
isolation: isolate;
|
||||
}
|
||||
.setup-welcome__hero::before {
|
||||
position: absolute;
|
||||
z-index: -3;
|
||||
width: 224px;
|
||||
height: 224px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgb(32 111 255 / 24%), rgb(53 49 190 / 8%) 52%, transparent 72%);
|
||||
filter: blur(5px);
|
||||
z-index: -1;
|
||||
top: 48px;
|
||||
right: 12px;
|
||||
bottom: 44px;
|
||||
left: 12px;
|
||||
background:
|
||||
linear-gradient(90deg, transparent, rgb(55 122 255 / 13%) 28%, rgb(121 91 255 / 11%) 72%, transparent),
|
||||
linear-gradient(180deg, transparent, rgb(39 126 255 / 9%) 48%, transparent);
|
||||
filter: blur(22px);
|
||||
content: '';
|
||||
animation: setup-welcome-breathe 5s ease-in-out infinite;
|
||||
}
|
||||
.setup-welcome__halo {
|
||||
.setup-welcome__hero::after {
|
||||
position: absolute;
|
||||
border: 1px solid rgb(111 167 255 / 16%);
|
||||
border-radius: 50%;
|
||||
transform: rotateX(66deg) rotateZ(-10deg);
|
||||
}
|
||||
.setup-welcome__halo--outer {
|
||||
width: 270px;
|
||||
height: 270px;
|
||||
animation: setup-welcome-orbit 13s linear infinite;
|
||||
}
|
||||
.setup-welcome__halo--inner {
|
||||
width: 210px;
|
||||
height: 210px;
|
||||
border-color: rgb(184 119 255 / 16%);
|
||||
animation: setup-welcome-orbit 9s linear infinite reverse;
|
||||
top: 51px;
|
||||
right: 28px;
|
||||
bottom: 47px;
|
||||
left: 28px;
|
||||
border-top: 1px solid rgb(142 184 255 / 9%);
|
||||
border-bottom: 1px solid rgb(142 184 255 / 9%);
|
||||
content: '';
|
||||
}
|
||||
.setup-welcome__greetings {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
filter: drop-shadow(0 14px 28px rgb(15 89 255 / 26%));
|
||||
height: 104px;
|
||||
filter: drop-shadow(0 16px 30px rgb(15 89 255 / 20%));
|
||||
}
|
||||
.setup-welcome__greetings span {
|
||||
position: absolute;
|
||||
@@ -1001,7 +1015,7 @@ function finish(): void {
|
||||
display: grid;
|
||||
color: #ffffff;
|
||||
font-family: 'Snell Roundhand', 'Segoe Script', 'Brush Script MT', cursive;
|
||||
font-size: 64px;
|
||||
font-size: 68px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.06em;
|
||||
opacity: 0;
|
||||
@@ -1011,18 +1025,23 @@ function finish(): void {
|
||||
}
|
||||
.setup-welcome__greetings span:nth-child(2) { animation-delay: 3s; }
|
||||
.setup-welcome__greetings span:nth-child(3) { animation-delay: 6s; }
|
||||
.setup-welcome__spark {
|
||||
.setup-welcome__signature {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: #b9d8ff;
|
||||
box-shadow: 0 0 14px 4px rgb(78 154 255 / 65%);
|
||||
animation: setup-welcome-spark 3.6s ease-in-out infinite;
|
||||
bottom: 66px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
.setup-welcome__signature span {
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
background: rgb(109 170 255 / 20%);
|
||||
}
|
||||
.setup-welcome__signature span:nth-child(2) {
|
||||
width: 42px;
|
||||
background: linear-gradient(90deg, #4b9fff, #9677ff);
|
||||
box-shadow: 0 0 12px rgb(73 148 255 / 34%);
|
||||
}
|
||||
.setup-welcome__spark--one { top: 65px; left: 47px; }
|
||||
.setup-welcome__spark--two { right: 48px; bottom: 67px; animation-delay: -1.2s; }
|
||||
.setup-welcome__spark--three { top: 91px; right: 71px; animation-delay: -2.4s; }
|
||||
.setup-welcome__copy {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@@ -1094,16 +1113,9 @@ function finish(): void {
|
||||
8%, 27% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
|
||||
34%, 100% { opacity: 0; transform: translateY(-10px) scale(1.03); filter: blur(4px); }
|
||||
}
|
||||
@keyframes setup-welcome-orbit {
|
||||
to { transform: rotateX(66deg) rotateZ(350deg); }
|
||||
}
|
||||
@keyframes setup-welcome-breathe {
|
||||
0%, 100% { transform: scale(0.92); opacity: 0.65; }
|
||||
50% { transform: scale(1.08); opacity: 1; }
|
||||
}
|
||||
@keyframes setup-welcome-spark {
|
||||
0%, 100% { transform: scale(0.55); opacity: 0.25; }
|
||||
50% { transform: scale(1); opacity: 0.9; }
|
||||
0%, 100% { transform: scaleX(0.92); opacity: 0.58; }
|
||||
50% { transform: scaleX(1.04); opacity: 1; }
|
||||
}
|
||||
.setup-connectivity-card {
|
||||
position: relative;
|
||||
@@ -1172,6 +1184,12 @@ function finish(): void {
|
||||
margin: 7px 0 6px;
|
||||
font-size: 29px;
|
||||
}
|
||||
.setup-cloud-heading {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.setup-assistant--step-2 .setup-assistant__lead {
|
||||
max-width: 310px;
|
||||
font-size: 12px;
|
||||
@@ -1266,6 +1284,26 @@ function finish(): void {
|
||||
border-radius: 17px;
|
||||
background: rgb(255 255 255 / 5%);
|
||||
}
|
||||
.setup-account-field-enter-active,
|
||||
.setup-account-field-leave-active {
|
||||
overflow: hidden;
|
||||
transition:
|
||||
max-height 280ms cubic-bezier(0.32, 0.72, 0, 1),
|
||||
opacity 180ms ease,
|
||||
transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
|
||||
}
|
||||
.setup-account-field-enter-from,
|
||||
.setup-account-field-leave-to {
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
.setup-account-field-enter-to,
|
||||
.setup-account-field-leave-from {
|
||||
max-height: 58px;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.setup-cloud-fields :deep(.sky-field) { border: 0; border-radius: 0; background: transparent; }
|
||||
.setup-cloud-fields :deep(.sky-field + .sky-field) { border-top: 1px solid rgb(255 255 255 / 8%); }
|
||||
.setup-cloud-fields :deep(.sky-field) { padding: 3px 12px; }
|
||||
@@ -1287,6 +1325,17 @@ function finish(): void {
|
||||
.setup-cloud-strength > div { display: flex; flex: 1; gap: 4px; }
|
||||
.setup-cloud-strength span { height: 3px; flex: 1; border-radius: 99px; background: rgb(255 255 255 / 10%); }
|
||||
.setup-cloud-strength span.active { background: linear-gradient(90deg, #318bff, #66c0ff); box-shadow: 0 0 7px rgb(49 139 255 / 34%); }
|
||||
.setup-account-strength-enter-active,
|
||||
.setup-account-strength-leave-active {
|
||||
transition:
|
||||
opacity 180ms ease,
|
||||
transform 240ms cubic-bezier(0.32, 0.72, 0, 1);
|
||||
}
|
||||
.setup-account-strength-enter-from,
|
||||
.setup-account-strength-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
.setup-cloud-security-note {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1299,24 +1348,72 @@ function finish(): void {
|
||||
.setup-assistant--step-2 .setup-assistant__later { padding: 7px; }
|
||||
@keyframes setup-cloud-orbit { to { transform: rotate(360deg); } }
|
||||
.setup-assistant__selector {
|
||||
position: relative;
|
||||
display: grid;
|
||||
padding: 3px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
border-radius: 13px;
|
||||
background: rgb(255 255 255/8%);
|
||||
}
|
||||
.setup-assistant__selector-indicator {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 3px;
|
||||
bottom: 3px;
|
||||
left: 3px;
|
||||
width: calc(50% - 3px);
|
||||
border: 1px solid rgb(255 255 255 / 7%);
|
||||
border-radius: 10px;
|
||||
background: rgb(255 255 255 / 13%);
|
||||
box-shadow:
|
||||
0 3px 12px rgb(0 0 0 / 20%),
|
||||
inset 0 1px rgb(255 255 255 / 7%);
|
||||
transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
|
||||
}
|
||||
.setup-assistant__selector-indicator--register {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
.setup-assistant__selector button {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 34px;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
color: rgb(255 255 255/55%);
|
||||
background: transparent;
|
||||
font-weight: 650;
|
||||
transition: color 220ms ease;
|
||||
}
|
||||
.setup-assistant__selector button.active {
|
||||
color: white;
|
||||
background: rgb(255 255 255/13%);
|
||||
box-shadow: 0 3px 12px rgb(0 0 0/20%);
|
||||
}
|
||||
.setup-account-copy-enter-active,
|
||||
.setup-account-copy-leave-active {
|
||||
transition:
|
||||
opacity 170ms ease,
|
||||
transform 230ms cubic-bezier(0.32, 0.72, 0, 1);
|
||||
}
|
||||
.setup-account-copy-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(7px);
|
||||
}
|
||||
.setup-account-copy-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
.setup-account-action-enter-active,
|
||||
.setup-account-action-leave-active {
|
||||
transition:
|
||||
opacity 140ms ease,
|
||||
transform 180ms ease;
|
||||
}
|
||||
.setup-account-action-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(5px);
|
||||
}
|
||||
.setup-account-action-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
.setup-cloud-connected {
|
||||
align-items: center;
|
||||
|
||||
@@ -4,7 +4,6 @@ import {
|
||||
Bluetooth,
|
||||
Camera,
|
||||
Check,
|
||||
Cloud,
|
||||
EyeOff,
|
||||
KeyRound,
|
||||
Images,
|
||||
@@ -1577,17 +1576,8 @@ onBeforeUnmount(() => {
|
||||
class="settings-reset-overlay"
|
||||
aria-live="polite"
|
||||
>
|
||||
<div class="settings-reset-ambient" aria-hidden="true">
|
||||
<span v-for="particle in 8" :key="particle" />
|
||||
</div>
|
||||
|
||||
<div class="settings-reset-content">
|
||||
<div class="settings-reset-eyebrow">
|
||||
<ShieldCheck :size="13" :stroke-width="2.2" />
|
||||
{{ phone.t('Apps.settings.factoryResetSystemProcess') }}
|
||||
</div>
|
||||
|
||||
<div class="settings-reset-orbit" aria-hidden="true">
|
||||
<div class="settings-reset-symbol" aria-hidden="true">
|
||||
<svg viewBox="0 0 104 104">
|
||||
<circle class="settings-reset-ring-track" cx="52" cy="52" r="46" />
|
||||
<circle
|
||||
@@ -1602,45 +1592,33 @@ onBeforeUnmount(() => {
|
||||
"
|
||||
/>
|
||||
</svg>
|
||||
<div class="settings-reset-device">
|
||||
<Smartphone :size="37" :stroke-width="1.45" />
|
||||
<span class="settings-reset-device__scan" />
|
||||
<div class="settings-reset-symbol__icon">
|
||||
<Smartphone :size="34" :stroke-width="1.55" />
|
||||
</div>
|
||||
<span class="settings-reset-orbit__pulse" />
|
||||
</div>
|
||||
|
||||
<div class="settings-reset-heading">
|
||||
<strong>{{ Math.floor(factoryResetProgress) }}%</strong>
|
||||
<h2>{{ phone.t('Apps.settings.factoryResetProgress') }}</h2>
|
||||
<p>{{ factoryResetPhase.label }}</p>
|
||||
</div>
|
||||
|
||||
<div class="settings-reset-progress-copy">
|
||||
<strong>{{ Math.floor(factoryResetProgress) }}%</strong>
|
||||
<span>{{ factoryResetSecondsRemaining }}s</span>
|
||||
</div>
|
||||
<div class="settings-reset-progress" role="progressbar" :aria-valuenow="Math.floor(factoryResetProgress)" aria-valuemin="0" aria-valuemax="100">
|
||||
<span :style="{ width: `${factoryResetProgress}%` }" />
|
||||
</div>
|
||||
<p class="settings-reset-detail">{{ factoryResetPhase.detail }}</p>
|
||||
|
||||
<div class="settings-reset-phase-card">
|
||||
<div class="settings-reset-phase-card__topline">
|
||||
<span>{{ factoryResetPhase.detail }}</span>
|
||||
<strong>{{ factoryResetSecondsRemaining }}s</strong>
|
||||
</div>
|
||||
<div class="settings-reset-steps" aria-hidden="true">
|
||||
<span
|
||||
v-for="step in 4"
|
||||
:key="step"
|
||||
:class="{
|
||||
'settings-reset-step--active': step - 1 === factoryResetPhase.index,
|
||||
'settings-reset-step--complete': step - 1 < factoryResetPhase.index,
|
||||
}"
|
||||
>
|
||||
<Check v-if="step - 1 < factoryResetPhase.index" :size="9" :stroke-width="3" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-reset-protected">
|
||||
<span><Signal :size="14" /> {{ phone.t('Apps.settings.factoryResetSimSafe') }}</span>
|
||||
<span><Cloud :size="14" /> {{ phone.t('Apps.settings.factoryResetCloudSafe') }}</span>
|
||||
<div class="settings-reset-assurance">
|
||||
<span class="settings-reset-assurance__icon">
|
||||
<ShieldCheck :size="18" :stroke-width="1.8" />
|
||||
</span>
|
||||
<span>
|
||||
<strong>{{ phone.t('Apps.settings.factoryResetSimSafe') }}</strong>
|
||||
<small>{{ phone.t('Apps.settings.factoryResetCloudSafe') }}</small>
|
||||
</span>
|
||||
</div>
|
||||
<p class="settings-reset-warning">{{ phone.t('Apps.settings.factoryResetWarning') }}</p>
|
||||
</div>
|
||||
@@ -2139,79 +2117,31 @@ onBeforeUnmount(() => {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
padding: 34px 26px 24px;
|
||||
background:
|
||||
radial-gradient(circle at 50% 42%, rgb(19 92 164 / 22%), transparent 34%),
|
||||
radial-gradient(circle at 50% 100%, rgb(8 57 107 / 18%), transparent 40%),
|
||||
#000000;
|
||||
padding: 52px 28px 28px;
|
||||
background: #000000;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.settings-reset-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 310px;
|
||||
max-width: 294px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.settings-reset-ambient {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.settings-reset-ambient span {
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
border-radius: 50%;
|
||||
background: #66b9ff;
|
||||
box-shadow: 0 0 8px 2px rgb(43 153 255 / 45%);
|
||||
opacity: 0.5;
|
||||
animation: settings-reset-particle 3.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.settings-reset-ambient span:nth-child(1) { top: 23%; left: 17%; }
|
||||
.settings-reset-ambient span:nth-child(2) { top: 31%; right: 13%; animation-delay: -1.2s; }
|
||||
.settings-reset-ambient span:nth-child(3) { top: 48%; left: 9%; animation-delay: -2.4s; }
|
||||
.settings-reset-ambient span:nth-child(4) { top: 56%; right: 8%; animation-delay: -0.6s; }
|
||||
.settings-reset-ambient span:nth-child(5) { bottom: 24%; left: 21%; animation-delay: -3s; }
|
||||
.settings-reset-ambient span:nth-child(6) { bottom: 19%; right: 18%; animation-delay: -1.7s; }
|
||||
.settings-reset-ambient span:nth-child(7) { top: 16%; right: 30%; animation-delay: -2.1s; }
|
||||
.settings-reset-ambient span:nth-child(8) { bottom: 34%; left: 33%; animation-delay: -0.9s; }
|
||||
|
||||
.settings-reset-eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid rgb(255 255 255 / 10%);
|
||||
border-radius: 999px;
|
||||
background: rgb(255 255 255 / 6%);
|
||||
color: rgb(255 255 255 / 70%);
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.settings-reset-orbit {
|
||||
.settings-reset-symbol {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
margin-top: 26px;
|
||||
width: 116px;
|
||||
height: 116px;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.settings-reset-orbit svg {
|
||||
.settings-reset-symbol svg {
|
||||
position: absolute;
|
||||
inset: 4px;
|
||||
inset: 6px;
|
||||
width: 104px;
|
||||
height: 104px;
|
||||
overflow: visible;
|
||||
@@ -2224,73 +2154,62 @@ onBeforeUnmount(() => {
|
||||
stroke-width: 2.6;
|
||||
}
|
||||
|
||||
.settings-reset-ring-track { stroke: rgb(255 255 255 / 10%); }
|
||||
.settings-reset-ring-track { stroke: rgb(255 255 255 / 12%); }
|
||||
.settings-reset-ring-value {
|
||||
stroke: #2997ff;
|
||||
stroke: #0a84ff;
|
||||
stroke-linecap: round;
|
||||
filter: drop-shadow(0 0 6px rgb(41 151 255 / 75%));
|
||||
transition: stroke-dashoffset 120ms linear;
|
||||
}
|
||||
|
||||
.settings-reset-device {
|
||||
position: relative;
|
||||
.settings-reset-symbol__icon {
|
||||
display: grid;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgb(255 255 255 / 13%);
|
||||
border-radius: 23px;
|
||||
background: linear-gradient(145deg, rgb(255 255 255 / 11%), rgb(255 255 255 / 3%));
|
||||
box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 18px 36px rgb(0 0 0 / 38%);
|
||||
color: rgb(255 255 255 / 88%);
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
border: 1px solid rgb(255 255 255 / 12%);
|
||||
border-radius: 24px;
|
||||
background: rgb(255 255 255 / 7%);
|
||||
color: rgb(255 255 255 / 92%);
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.settings-reset-device__scan {
|
||||
position: absolute;
|
||||
right: 13px;
|
||||
left: 13px;
|
||||
height: 1px;
|
||||
background: #42a5ff;
|
||||
box-shadow: 0 0 9px 2px rgb(41 151 255 / 65%);
|
||||
animation: settings-reset-scan 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.settings-reset-orbit__pulse {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: 1px solid rgb(41 151 255 / 20%);
|
||||
border-radius: 50%;
|
||||
animation: settings-reset-pulse 2.4s ease-out infinite;
|
||||
}
|
||||
|
||||
.settings-reset-heading { margin-top: 19px; }
|
||||
.settings-reset-heading > strong {
|
||||
display: block;
|
||||
font-size: 34px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1;
|
||||
}
|
||||
.settings-reset-heading { margin-top: 28px; }
|
||||
|
||||
.settings-reset-heading h2 {
|
||||
margin: 10px 0 0;
|
||||
font-size: 19px;
|
||||
letter-spacing: -0.02em;
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
letter-spacing: -0.035em;
|
||||
}
|
||||
|
||||
.settings-reset-heading p {
|
||||
margin: 5px 0 0;
|
||||
color: #66b5ff;
|
||||
margin: 7px 0 0;
|
||||
color: rgb(255 255 255 / 54%);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.settings-reset-progress-copy {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
margin-top: 34px;
|
||||
}
|
||||
|
||||
.settings-reset-progress-copy strong {
|
||||
font-size: 15px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.settings-reset-progress-copy span {
|
||||
color: rgb(255 255 255 / 44%);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.settings-reset-progress {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
height: 4px;
|
||||
overflow: hidden;
|
||||
margin-top: 22px;
|
||||
margin-top: 9px;
|
||||
border-radius: 999px;
|
||||
background: rgb(255 255 255 / 10%);
|
||||
}
|
||||
@@ -2299,103 +2218,65 @@ onBeforeUnmount(() => {
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, #087cff, #55b8ff);
|
||||
box-shadow: 0 0 10px rgb(41 151 255 / 60%);
|
||||
background: #0a84ff;
|
||||
transition: width 120ms linear;
|
||||
}
|
||||
|
||||
.settings-reset-phase-card {
|
||||
.settings-reset-detail {
|
||||
width: 100%;
|
||||
margin-top: 13px;
|
||||
padding: 12px 13px;
|
||||
border: 1px solid rgb(255 255 255 / 9%);
|
||||
border-radius: 15px;
|
||||
background: rgb(255 255 255 / 5%);
|
||||
box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
|
||||
margin: 9px 0 0;
|
||||
color: rgb(255 255 255 / 48%);
|
||||
font-size: 11px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.settings-reset-phase-card__topline {
|
||||
.settings-reset-assurance {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: rgb(255 255 255 / 68%);
|
||||
font-size: 10px;
|
||||
gap: 12px;
|
||||
margin-top: 30px;
|
||||
padding: 13px 14px;
|
||||
border: 1px solid rgb(255 255 255 / 9%);
|
||||
border-radius: 16px;
|
||||
background: rgb(255 255 255 / 5%);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.settings-reset-phase-card__topline strong {
|
||||
color: rgb(255 255 255 / 88%);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.settings-reset-steps {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.settings-reset-steps > span {
|
||||
.settings-reset-assurance__icon {
|
||||
display: grid;
|
||||
height: 4px;
|
||||
flex: 1;
|
||||
border-radius: 99px;
|
||||
background: rgb(255 255 255 / 10%);
|
||||
color: #ffffff;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
flex: 0 0 34px;
|
||||
border-radius: 50%;
|
||||
background: rgb(10 132 255 / 14%);
|
||||
color: #5eb0ff;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.settings-reset-steps > .settings-reset-step--active {
|
||||
background: #2997ff;
|
||||
box-shadow: 0 0 7px rgb(41 151 255 / 55%);
|
||||
}
|
||||
|
||||
.settings-reset-steps > .settings-reset-step--complete {
|
||||
height: 12px;
|
||||
margin-top: -4px;
|
||||
border-radius: 50%;
|
||||
background: #2997ff;
|
||||
}
|
||||
|
||||
.settings-reset-protected {
|
||||
.settings-reset-assurance > span:last-child {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 15px;
|
||||
min-width: 0;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.settings-reset-protected span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 7px 9px;
|
||||
border: 1px solid rgb(85 190 129 / 15%);
|
||||
border-radius: 999px;
|
||||
background: rgb(51 199 89 / 8%);
|
||||
color: rgb(120 226 160 / 88%);
|
||||
font-size: 9px;
|
||||
.settings-reset-assurance strong {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.settings-reset-assurance small {
|
||||
color: rgb(255 255 255 / 45%);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.settings-reset-warning {
|
||||
max-width: 270px;
|
||||
margin: 11px 0 0;
|
||||
color: rgb(255 255 255 / 42%);
|
||||
max-width: 258px;
|
||||
margin: 14px 0 0;
|
||||
color: rgb(255 255 255 / 34%);
|
||||
font-size: 9px;
|
||||
line-height: 13px;
|
||||
}
|
||||
|
||||
@keyframes settings-reset-scan {
|
||||
0%, 100% { transform: translateY(-18px); opacity: 0.25; }
|
||||
50% { transform: translateY(18px); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes settings-reset-pulse {
|
||||
0% { transform: scale(0.82); opacity: 0; }
|
||||
28% { opacity: 0.7; }
|
||||
100% { transform: scale(1.18); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes settings-reset-particle {
|
||||
0%, 100% { transform: translateY(0) scale(0.75); opacity: 0.2; }
|
||||
50% { transform: translateY(-12px) scale(1); opacity: 0.7; }
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.settings-dialog-button--danger {
|
||||
|
||||
Reference in New Issue
Block a user