feat(theme): VNClagoon login card — navy card, cyan hairline + top accent + glow

Extend the vnclagoon skin: solid navy login card, cyan hairline border, a thin
cyan accent strip on top, soft cyan glow (dark), and an ambient cyan wash behind
the card on the login page. Scoped to the login card's unique class combo.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Bernd Rodler
2026-08-03 17:45:09 +02:00
co-authored by Claude Opus 4.8
parent 22e5e97da9
commit be7bfd1f02
+31
View File
@@ -977,6 +977,37 @@ body[data-theme-skin="builtin-vnclagoon"] h2,
body[data-theme-skin="builtin-vnclagoon"] h3 {
font-family: "Syne", "DM Sans", sans-serif;
letter-spacing: -0.01em;
}
/* ── Login card — VNClagoon treatment ─────────────────────────── */
/* Solid navy card (var --color-card) with a cyan hairline and a thin cyan
accent strip along the top. The login card is the only .rounded-2xl with
.bg-background/80 + .backdrop-blur-sm, so this scopes cleanly to it. */
body[data-theme-skin="builtin-vnclagoon"] .rounded-2xl.border.bg-background\\/80.backdrop-blur-sm {
position: relative;
background-color: var(--color-card) !important;
border-color: rgba(0, 212, 255, 0.16) !important;
}
body[data-theme-skin="builtin-vnclagoon"] .rounded-2xl.border.bg-background\\/80.backdrop-blur-sm::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 3px;
background: linear-gradient(90deg, transparent, #00d4ff 35%, #00d4ff 65%, transparent);
}
/* Depth + soft cyan glow, dark-first */
.dark body[data-theme-skin="builtin-vnclagoon"] .rounded-2xl.border.bg-background\\/80.backdrop-blur-sm {
box-shadow:
0 24px 60px -24px rgba(0, 0, 0, 0.7),
0 0 0 1px rgba(0, 212, 255, 0.06),
0 0 48px -16px rgba(0, 212, 255, 0.22) !important;
}
/* Ambient cyan wash behind the card on the login page */
.dark body[data-theme-skin="builtin-vnclagoon"] .min-h-screen.bg-gradient-to-br {
background-color: var(--color-background) !important;
background-image: radial-gradient(56rem 38rem at 50% -12%, rgba(0, 212, 255, 0.10), transparent 60%) !important;
}`;
export const BUILTIN_THEMES: InstalledTheme[] = [