hyzen/hyzendust.github.io
1
0
Fork 0
mirror of https://github.com/hyzendust/hyzendust.github.io.git synced 2026-06-30 23:12:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add: otp verification

Browse Source
This commit is contained in:
hyzen
2026-06-07 00:14:06 +05:30
parent 00b91c13da
commit 28a6e82bfc
4 changed files with 487 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
docs/css/auth-additions.css
View File

@@ -198,3 +198,110 @@
[data-theme='light'] .auth-form__submit {
color: #fff;
}
/* ── OTP step indicator ─────────────────────────────────────────────────── */
.otp-steps {
display: flex;
align-items: center;
margin-bottom: 1.6rem;
}
.otp-steps__line {
flex: 1;
height: 2px;
background: var(--background-color1, #ccc);
transition: background 0.25s ease;
}
.otp-steps__item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
}
.otp-steps__num {
width: 1.8rem;
height: 1.8rem;
border-radius: 50%;
border: 2px solid var(--background-color1, #ccc);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.78rem;
font-weight: 700;
color: var(--foreground-color3, #888);
background: var(--background-color);
transition:
border-color 0.25s ease,
color 0.25s ease,
background 0.25s ease;
}
.otp-steps__label {
font-size: 0.7rem;
color: var(--foreground-color3, #888);
white-space: nowrap;
transition: color 0.25s ease;
}
/* Active step */
.otp-steps__item--active .otp-steps__num {
border-color: var(--accent-color);
color: var(--accent-color);
}
.otp-steps__item--active .otp-steps__label {
color: var(--accent-color);
font-weight: 600;
}
/* Completed step */
.otp-steps__item--done .otp-steps__num {
border-color: var(--accent-color);
background: var(--accent-color);
color: #fff;
}
.otp-steps__item--done .otp-steps__label {
color: var(--accent-color);
}
/* ── OTP panel ───────────────────────────────────────────────────────────── */
.otp-panel__hint {
font-size: 0.87rem;
line-height: 1.5;
color: var(--foreground-color);
margin: 0;
}
.otp-panel__input {
letter-spacing: 0.25em;
font-size: 1.15rem;
text-align: center;
}
.otp-panel__resend {
font-size: 0.82rem;
color: var(--foreground-color3, #888);
text-align: center;
margin: 0;
}
.otp-panel__resend-btn {
background: none;
border: none;
padding: 0;
font: inherit;
font-size: 0.82rem;
color: var(--accent-color);
cursor: pointer;
font-weight: 600;
text-decoration: underline;
}
.otp-panel__resend-btn:hover {
opacity: 0.8;
}