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:
co-authored by
Claude Opus 4.8
parent
22e5e97da9
commit
be7bfd1f02
@@ -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[] = [
|
||||
|
||||
Reference in New Issue
Block a user