mirror of
https://github.com/hyzendust/hyzendust.github.io.git
synced 2026-07-01 07:22:17 +02:00
Compare commits
10 Commits
9414e98ecd
...
ce07398643
| Author | SHA1 | Date | |
|---|---|---|---|
|
ce07398643 | ||
|
|
8f781940b0 | ||
|
|
ba54dd4bc9 | ||
|
|
f6e8f88410 | ||
|
|
f587af20d0 | ||
|
|
3e5b8357b5 | ||
|
|
f17777dc66 | ||
|
|
128425e92f | ||
|
|
23995c0245 | ||
|
|
687f3d6673 |
@@ -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;
|
||||
}
|
||||
@@ -871,8 +871,8 @@
|
||||
/* ── Comments section ─────────────────────────────────────────────────────── */
|
||||
|
||||
.comments {
|
||||
margin-top: 3rem;
|
||||
padding-top: 2rem;
|
||||
margin-top: 1rem;
|
||||
padding-top: 1.28rem;
|
||||
border-top: 1px solid var(--background-color1, #ddd);
|
||||
}
|
||||
|
||||
@@ -1074,3 +1074,258 @@
|
||||
.comment__replies {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
/* ── Auth pages (login / signup) ───────────────────────────────────────── */
|
||||
|
||||
.auth-page {
|
||||
max-width: 420px;
|
||||
margin: 2.5rem auto 0;
|
||||
padding: 0 0 3rem;
|
||||
}
|
||||
|
||||
.auth-page__title {
|
||||
margin-top: 55.2px;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
border: 1px solid var(--background-color1, #ccc);
|
||||
border-radius: 10px;
|
||||
padding: 1.25rem 1.75rem 2rem;
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
/* Message banner — fixed height always reserved so the form never shifts */
|
||||
.auth-message {
|
||||
border-radius: 4px;
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.3;
|
||||
height: 1.8rem;
|
||||
margin-bottom: 0.75rem;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.15s ease;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 0.7rem;
|
||||
}
|
||||
|
||||
.auth-message.is-visible {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.auth-message--error {
|
||||
background: rgba(255, 61, 61, 0.1);
|
||||
border: 1px solid rgba(255, 61, 61, 0.4);
|
||||
color: #ff3d3d;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .auth-message--error {
|
||||
color: #ff3d3d;
|
||||
background: rgba(255, 61, 61, 0.15);
|
||||
border-color: rgba(255, 61, 61, 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;
|
||||
flex-direction: column;
|
||||
gap: 1.1rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,9 +1,8 @@
|
||||
{{ define "main" }}
|
||||
<div class="auth-page">
|
||||
<h1 class="auth-page__title">{{ .Title }}</h1>
|
||||
|
||||
<div class="auth-card">
|
||||
<div id="auth-message" class="auth-message" aria-live="polite" style="display: none"></div>
|
||||
<h1 class="auth-page__title">{{ .Title }}</h1>
|
||||
<div id="auth-message" class="auth-message" aria-live="polite"></div>
|
||||
|
||||
<form id="login-form" class="auth-form" novalidate>
|
||||
<div class="auth-form__input-wrap">
|
||||
@@ -83,7 +82,7 @@
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="auth-card__footer">
|
||||
<p class="auth-card__footer" id="login-footer">
|
||||
Don't have an account? <a href="/signup/" class="auth-card__link">Sign up</a>
|
||||
</p>
|
||||
</div>
|
||||
@@ -97,9 +96,9 @@
|
||||
if (localStorage.getItem('f4_username')) {
|
||||
document.getElementById('auth-message').textContent = 'You are already logged in!';
|
||||
document.getElementById('auth-message').className =
|
||||
'auth-message auth-message--success';
|
||||
document.getElementById('auth-message').style.display = 'block';
|
||||
'auth-message auth-message--success is-visible';
|
||||
document.getElementById('login-form').style.display = 'none';
|
||||
document.getElementById('login-footer').style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -138,13 +137,12 @@
|
||||
|
||||
function showMsg(text, type) {
|
||||
msgBox.textContent = text;
|
||||
msgBox.className = 'auth-message auth-message--' + type;
|
||||
msgBox.style.display = 'block';
|
||||
msgBox.className = 'auth-message auth-message--' + type + ' is-visible';
|
||||
}
|
||||
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
msgBox.style.display = 'none';
|
||||
msgBox.className = 'auth-message';
|
||||
|
||||
var username = document.getElementById('login-username').value.trim();
|
||||
var password = pwdInput.value;
|
||||
|
||||
@@ -1,45 +1,44 @@
|
||||
{{ define "main" }}
|
||||
<div class="auth-page">
|
||||
<h1 class="auth-page__title">{{ .Title }}</h1>
|
||||
|
||||
<div class="auth-card">
|
||||
<div id="auth-message" class="auth-message" aria-live="polite" style="display: none"></div>
|
||||
<h1 class="auth-page__title">{{ .Title }}</h1>
|
||||
<div id="auth-message" class="auth-message" aria-live="polite"></div>
|
||||
|
||||
<!-- ── STEP 1 — Account details ───────────────────────────────── -->
|
||||
<form id="signup-form" class="auth-form" novalidate>
|
||||
<div class="auth-form__group">
|
||||
<label class="auth-form__label" for="signup-username">Username</label>
|
||||
<input
|
||||
class="auth-form__input"
|
||||
type="text"
|
||||
id="signup-username"
|
||||
name="username"
|
||||
autocomplete="username"
|
||||
required
|
||||
minlength="3"
|
||||
maxlength="32"
|
||||
pattern="[a-zA-Z0-9_\-]+"
|
||||
/>
|
||||
<span class="auth-form__hint"
|
||||
>(3-32 characters; letters, numbers, _ and - only)</span
|
||||
>
|
||||
</div>
|
||||
<div class="auth-form__input-wrap">
|
||||
<div class="auth-form__group">
|
||||
<label class="auth-form__label" for="signup-username">Username</label>
|
||||
<input
|
||||
class="auth-form__input"
|
||||
type="text"
|
||||
id="signup-username"
|
||||
name="username"
|
||||
autocomplete="username"
|
||||
required
|
||||
minlength="3"
|
||||
maxlength="32"
|
||||
pattern="[a-zA-Z0-9_\-]+"
|
||||
/>
|
||||
<span class="auth-form__hint"
|
||||
>(3-32 characters; letters, numbers, _ and - only)</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="auth-form__group">
|
||||
<label class="auth-form__label" for="signup-email">Email</label>
|
||||
<input
|
||||
class="auth-form__input"
|
||||
type="email"
|
||||
id="signup-email"
|
||||
name="email"
|
||||
autocomplete="email"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="auth-form__group">
|
||||
<label class="auth-form__label" for="signup-email">Email</label>
|
||||
<input
|
||||
class="auth-form__input"
|
||||
type="email"
|
||||
id="signup-email"
|
||||
name="email"
|
||||
autocomplete="email"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="auth-form__group">
|
||||
<label class="auth-form__label" for="signup-password">Password</label>
|
||||
<div class="auth-form__input-wrap">
|
||||
<div class="auth-form__group">
|
||||
<label class="auth-form__label" for="signup-password">Password</label>
|
||||
<input
|
||||
class="auth-form__input"
|
||||
type="password"
|
||||
@@ -81,20 +80,20 @@
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<span class="auth-form__hint">(at least 8 characters)</span>
|
||||
</div>
|
||||
<span class="auth-form__hint">(at least 8 characters)</span>
|
||||
</div>
|
||||
|
||||
<div class="auth-form__group">
|
||||
<label class="auth-form__label" for="signup-confirm">Confirm Password</label>
|
||||
<input
|
||||
class="auth-form__input"
|
||||
type="password"
|
||||
id="signup-confirm"
|
||||
name="confirm_password"
|
||||
autocomplete="new-password"
|
||||
required
|
||||
/>
|
||||
<div class="auth-form__group">
|
||||
<label class="auth-form__label" for="signup-confirm">Confirm Password</label>
|
||||
<input
|
||||
class="auth-form__input"
|
||||
type="password"
|
||||
id="signup-confirm"
|
||||
name="confirm_password"
|
||||
autocomplete="new-password"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="auth-form__submit" id="signup-submit">
|
||||
@@ -166,7 +165,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="auth-card__footer">
|
||||
<p class="auth-card__footer" id="signup-footer">
|
||||
Already have an account? <a href="/login/" class="auth-card__link">Log in</a>
|
||||
</p>
|
||||
</div>
|
||||
@@ -180,9 +179,9 @@
|
||||
if (localStorage.getItem('f4_username')) {
|
||||
document.getElementById('auth-message').textContent = 'You are already logged in!';
|
||||
document.getElementById('auth-message').className =
|
||||
'auth-message auth-message--success';
|
||||
document.getElementById('auth-message').style.display = 'block';
|
||||
'auth-message auth-message--success is-visible';
|
||||
document.getElementById('signup-form').style.display = 'none';
|
||||
document.getElementById('signup-footer').style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -221,11 +220,10 @@
|
||||
|
||||
function showMsg(text, type) {
|
||||
msgBox.textContent = text;
|
||||
msgBox.className = 'auth-message auth-message--' + type;
|
||||
msgBox.style.display = 'block';
|
||||
msgBox.className = 'auth-message auth-message--' + type + ' is-visible';
|
||||
}
|
||||
function hideMsg() {
|
||||
msgBox.style.display = 'none';
|
||||
msgBox.className = 'auth-message';
|
||||
}
|
||||
|
||||
function setLoading(btn, on) {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -871,8 +871,8 @@
|
||||
/* ── Comments section ─────────────────────────────────────────────────────── */
|
||||
|
||||
.comments {
|
||||
margin-top: 3rem;
|
||||
padding-top: 2rem;
|
||||
margin-top: 1rem;
|
||||
padding-top: 1.28rem;
|
||||
border-top: 1px solid var(--background-color1, #ddd);
|
||||
}
|
||||
|
||||
@@ -1074,3 +1074,258 @@
|
||||
.comment__replies {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
/* ── Auth pages (login / signup) ───────────────────────────────────────── */
|
||||
|
||||
.auth-page {
|
||||
max-width: 420px;
|
||||
margin: 2.5rem auto 0;
|
||||
padding: 0 0 3rem;
|
||||
}
|
||||
|
||||
.auth-page__title {
|
||||
margin-top: 55.2px;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
border: 1px solid var(--background-color1, #ccc);
|
||||
border-radius: 10px;
|
||||
padding: 1.25rem 1.75rem 2rem;
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
/* Message banner — fixed height always reserved so the form never shifts */
|
||||
.auth-message {
|
||||
border-radius: 4px;
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.3;
|
||||
height: 1.8rem;
|
||||
margin-bottom: 0.75rem;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.15s ease;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 0.7rem;
|
||||
}
|
||||
|
||||
.auth-message.is-visible {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.auth-message--error {
|
||||
background: rgba(255, 61, 61, 0.1);
|
||||
border: 1px solid rgba(255, 61, 61, 0.4);
|
||||
color: #ff3d3d;
|
||||
}
|
||||
|
||||
[data-theme='dark'] .auth-message--error {
|
||||
color: #ff3d3d;
|
||||
background: rgba(255, 61, 61, 0.15);
|
||||
border-color: rgba(255, 61, 61, 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;
|
||||
flex-direction: column;
|
||||
gap: 1.1rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user