fix(auth): restore dark split-layout visuals on /login /register
Some checks failed
continuous-integration/drone/push Build is passing
CI / test (push) Has been cancelled
CI / golangci-lint (push) Has been cancelled
Security Scan / backend-security (push) Has been cancelled
Security Scan / frontend-security (push) Has been cancelled

Three regressions from Task 7-9 caused /login /register to render broken:
- bg-glow not rendering: puro.css scopes .bg-glow to .puro-page,
  AuthLayout isn't inside one. Fix: duplicate bg-glow rules into
  AuthLayout scoped CSS keyed on .auth-shell-split.
- .auth-main had no background: right side showed naked body bg.
  Fix: .auth-shell-split now sets var(--bg-0) for whole shell.
- Heading/label colors used text-gray-900 light-mode classes,
  invisible on dark bg. Fix: switch to explicit text-slate-50/400,
  and :deep() override for form inputs via AuthLayout split scope.

Legacy (non-split) mode unaffected.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
mini
2026-04-19 22:22:25 +08:00
parent 355370ad2a
commit 93481b8c45
3 changed files with 65 additions and 4 deletions

View File

@@ -73,6 +73,10 @@ onMounted(() => {
.auth-shell-split {
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--bg-0);
color: var(--text-0);
font-family: var(--font-sans);
min-height: 100vh;
}
@media (max-width: 900px) {
.auth-shell-split {
@@ -106,6 +110,63 @@ onMounted(() => {
max-width: 420px;
}
/* bg-glow primitives for split mode (not in .puro-page ancestor, so puro.css rules don't apply) */
.auth-shell-split .bg-glow {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.auth-shell-split .bg-glow::before,
.auth-shell-split .bg-glow::after {
content: "";
position: absolute;
width: 900px;
height: 900px;
border-radius: 50%;
filter: blur(120px);
opacity: 0.15;
}
.auth-shell-split .bg-glow::before {
background: radial-gradient(circle, #22d3ee 0%, transparent 60%);
top: -300px;
left: -200px;
}
.auth-shell-split .bg-glow::after {
background: radial-gradient(circle, #a855f7 0%, transparent 60%);
top: 200px;
right: -300px;
}
/* Right-side form area (split mode) inherits --text-0 for headings */
.auth-shell-split .auth-main {
position: relative;
z-index: 2;
}
/* In split mode, force Tailwind's light-mode text grays to light colors for dark shell readability.
* Uses :deep() to reach slotted LoginView/RegisterView content. */
.auth-shell-split :deep(.input-label),
.auth-shell-split :deep(label) {
color: var(--text-1) !important;
}
.auth-shell-split :deep(.input) {
background: var(--bg-1) !important;
border-color: var(--border) !important;
color: var(--text-0) !important;
}
.auth-shell-split :deep(.input::placeholder) {
color: var(--text-3) !important;
}
.auth-shell-split :deep(.btn-primary) {
/* keep existing — should still look good */
}
.auth-shell-split :deep(.text-gray-500),
.auth-shell-split :deep(.text-gray-400) {
color: var(--text-2) !important;
}
/* Legacy-mode (no narrative slot) background — keep existing gradient decorative look */
.auth-shell:not(.auth-shell-split) {
display: flex;

View File

@@ -21,8 +21,8 @@
<div class="space-y-6">
<!-- Title -->
<div class="text-center">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">{{ t('auth.puroLoginTitle') }}</h2>
<p class="mt-2 text-sm text-gray-500 dark:text-dark-400">{{ t('auth.puroLoginSub') }}</p>
<h2 class="text-2xl font-bold text-slate-50">{{ t('auth.puroLoginTitle') }}</h2>
<p class="mt-2 text-sm text-slate-400">{{ t('auth.puroLoginSub') }}</p>
</div>
<div v-if="!backendModeEnabled && (linuxdoOAuthEnabled || oidcOAuthEnabled)" class="space-y-4">

View File

@@ -21,8 +21,8 @@
<div class="space-y-6">
<!-- Title -->
<div class="text-center">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">{{ t('auth.puroRegisterTitle') }}</h2>
<p class="mt-2 text-sm text-gray-500 dark:text-dark-400">{{ t('auth.puroRegisterSub') }}</p>
<h2 class="text-2xl font-bold text-slate-50">{{ t('auth.puroRegisterTitle') }}</h2>
<p class="mt-2 text-sm text-slate-400">{{ t('auth.puroRegisterSub') }}</p>
</div>
<div v-if="linuxdoOAuthEnabled || oidcOAuthEnabled" class="space-y-4">