fix(auth): restore dark split-layout visuals on /login /register
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:
@@ -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;
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user