mirror of
https://github.com/hyzendust/hyzendust.github.io.git
synced 2026-07-01 07:22:17 +02:00
Fix: broken form structure
This commit is contained in:
hyzen
@@ -1,238 +0,0 @@
|
|||||||
/* ── Auth pages (login / signup) ───────────────────────────────────────── */
|
|
||||||
|
|
||||||
.auth-page {
|
|
||||||
max-width: 420px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 1rem 0 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-page__title {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card {
|
|
||||||
border: 1px solid var(--background-color1, #ccc);
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 2rem 1.75rem;
|
|
||||||
background: var(--background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Message banner */
|
|
||||||
.auth-message {
|
|
||||||
border-radius: 6px;
|
|
||||||
padding: 0.65rem 0.9rem;
|
|
||||||
font-size: 0.88rem;
|
|
||||||
margin-bottom: 1.2rem;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-message--error {
|
|
||||||
background: rgba(220, 53, 69, 0.12);
|
|
||||||
border: 1px solid rgba(220, 53, 69, 0.4);
|
|
||||||
color: #c0392b;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme='dark'] .auth-message--error {
|
|
||||||
color: #ff6b6b;
|
|
||||||
background: rgba(220, 53, 69, 0.18);
|
|
||||||
border-color: rgba(220, 53, 69, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-message--success {
|
|
||||||
background: rgba(39, 174, 96, 0.12);
|
|
||||||
border: 1px solid rgba(39, 174, 96, 0.4);
|
|
||||||
color: #1e8449;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme='dark'] .auth-message--success {
|
|
||||||
color: #58d68d;
|
|
||||||
background: rgba(39, 174, 96, 0.18);
|
|
||||||
border-color: rgba(39, 174, 96, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Form fields */
|
|
||||||
.auth-form {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form__group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form__label {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--foreground-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form__input-wrap {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form__input-wrap .auth-form__input {
|
|
||||||
padding-right: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form__input {
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0.5rem 0.75rem;
|
|
||||||
border: 1px solid var(--background-color1, #ccc);
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
background: var(--background-color);
|
|
||||||
color: var(--foreground-color);
|
|
||||||
transition:
|
|
||||||
border-color 0.18s ease,
|
|
||||||
box-shadow 0.18s ease;
|
|
||||||
outline: none;
|
|
||||||
font-family: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form__input:focus {
|
|
||||||
border-color: var(--accent-color);
|
|
||||||
box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb, 17, 51, 233), 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form__input::placeholder {
|
|
||||||
color: var(--foreground-color3, #888);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form__eye {
|
|
||||||
position: absolute;
|
|
||||||
right: 0.6rem;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--foreground-color3, #888);
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0.2rem;
|
|
||||||
line-height: 1;
|
|
||||||
transition: color 0.15s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form__eye:hover {
|
|
||||||
color: var(--foreground-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form__hint {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
color: var(--foreground-color3, #888);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Submit button */
|
|
||||||
.auth-form__submit {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.6rem 1rem;
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
background: var(--accent-color);
|
|
||||||
color: var(--background-color, #fff);
|
|
||||||
font-size: 0.92rem;
|
|
||||||
font-weight: 600;
|
|
||||||
font-family: inherit;
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 0.4rem;
|
|
||||||
transition: opacity 0.18s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form__submit:hover:not(:disabled) {
|
|
||||||
opacity: 0.85;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form__submit:disabled {
|
|
||||||
cursor: not-allowed;
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form__submit-loader {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Spinner animation */
|
|
||||||
@keyframes auth-spin {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin {
|
|
||||||
animation: auth-spin 0.8s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer link */
|
|
||||||
.auth-card__footer {
|
|
||||||
margin-top: 1.4rem;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: var(--foreground-color3, #888);
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card__link {
|
|
||||||
color: var(--accent-color);
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card__link:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Light theme override for submit button text */
|
|
||||||
[data-theme='light'] .auth-form__submit {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── 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;
|
|
||||||
}
|
|
||||||
@@ -1098,9 +1098,9 @@
|
|||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding: 0.65rem 0.9rem;
|
padding: 0.65rem 0.9rem;
|
||||||
font-size: 0.88rem;
|
font-size: 0.88rem;
|
||||||
margin-bottom: 1.2rem;
|
margin-bottom: 0.5rem;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
min-height: 3rem;
|
min-height: 1.5rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@@ -1159,7 +1159,8 @@
|
|||||||
.auth-form__input-wrap {
|
.auth-form__input-wrap {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
flex-direction: column;
|
||||||
|
gap: 1.1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-form__input-wrap .auth-form__input {
|
.auth-form__input-wrap .auth-form__input {
|
||||||
|
|||||||
@@ -1,238 +0,0 @@
|
|||||||
/* ── Auth pages (login / signup) ───────────────────────────────────────── */
|
|
||||||
|
|
||||||
.auth-page {
|
|
||||||
max-width: 420px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 1rem 0 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-page__title {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card {
|
|
||||||
border: 1px solid var(--background-color1, #ccc);
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 2rem 1.75rem;
|
|
||||||
background: var(--background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Message banner */
|
|
||||||
.auth-message {
|
|
||||||
border-radius: 6px;
|
|
||||||
padding: 0.65rem 0.9rem;
|
|
||||||
font-size: 0.88rem;
|
|
||||||
margin-bottom: 1.2rem;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-message--error {
|
|
||||||
background: rgba(220, 53, 69, 0.12);
|
|
||||||
border: 1px solid rgba(220, 53, 69, 0.4);
|
|
||||||
color: #c0392b;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme='dark'] .auth-message--error {
|
|
||||||
color: #ff6b6b;
|
|
||||||
background: rgba(220, 53, 69, 0.18);
|
|
||||||
border-color: rgba(220, 53, 69, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-message--success {
|
|
||||||
background: rgba(39, 174, 96, 0.12);
|
|
||||||
border: 1px solid rgba(39, 174, 96, 0.4);
|
|
||||||
color: #1e8449;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme='dark'] .auth-message--success {
|
|
||||||
color: #58d68d;
|
|
||||||
background: rgba(39, 174, 96, 0.18);
|
|
||||||
border-color: rgba(39, 174, 96, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Form fields */
|
|
||||||
.auth-form {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form__group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form__label {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--foreground-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form__input-wrap {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form__input-wrap .auth-form__input {
|
|
||||||
padding-right: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form__input {
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0.5rem 0.75rem;
|
|
||||||
border: 1px solid var(--background-color1, #ccc);
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
background: var(--background-color);
|
|
||||||
color: var(--foreground-color);
|
|
||||||
transition:
|
|
||||||
border-color 0.18s ease,
|
|
||||||
box-shadow 0.18s ease;
|
|
||||||
outline: none;
|
|
||||||
font-family: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form__input:focus {
|
|
||||||
border-color: var(--accent-color);
|
|
||||||
box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb, 17, 51, 233), 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form__input::placeholder {
|
|
||||||
color: var(--foreground-color3, #888);
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form__eye {
|
|
||||||
position: absolute;
|
|
||||||
right: 0.6rem;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--foreground-color3, #888);
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0.2rem;
|
|
||||||
line-height: 1;
|
|
||||||
transition: color 0.15s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form__eye:hover {
|
|
||||||
color: var(--foreground-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form__hint {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
color: var(--foreground-color3, #888);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Submit button */
|
|
||||||
.auth-form__submit {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.6rem 1rem;
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
background: var(--accent-color);
|
|
||||||
color: var(--background-color, #fff);
|
|
||||||
font-size: 0.92rem;
|
|
||||||
font-weight: 600;
|
|
||||||
font-family: inherit;
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 0.4rem;
|
|
||||||
transition: opacity 0.18s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form__submit:hover:not(:disabled) {
|
|
||||||
opacity: 0.85;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form__submit:disabled {
|
|
||||||
cursor: not-allowed;
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form__submit-loader {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Spinner animation */
|
|
||||||
@keyframes auth-spin {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin {
|
|
||||||
animation: auth-spin 0.8s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer link */
|
|
||||||
.auth-card__footer {
|
|
||||||
margin-top: 1.4rem;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: var(--foreground-color3, #888);
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card__link {
|
|
||||||
color: var(--accent-color);
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-card__link:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Light theme override for submit button text */
|
|
||||||
[data-theme='light'] .auth-form__submit {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── 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;
|
|
||||||
}
|
|
||||||
@@ -1098,9 +1098,9 @@
|
|||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding: 0.65rem 0.9rem;
|
padding: 0.65rem 0.9rem;
|
||||||
font-size: 0.88rem;
|
font-size: 0.88rem;
|
||||||
margin-bottom: 1.2rem;
|
margin-bottom: 0.5rem;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
min-height: 3rem;
|
min-height: 1.5rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@@ -1159,7 +1159,8 @@
|
|||||||
.auth-form__input-wrap {
|
.auth-form__input-wrap {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
flex-direction: column;
|
||||||
|
gap: 1.1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.auth-form__input-wrap .auth-form__input {
|
.auth-form__input-wrap .auth-form__input {
|
||||||
|
|||||||
Reference in New Issue
Block a user