football2801/pictureFrame-webApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(design-v2): apply v2 styles to login template
CI / test (push) Has been cancelled
Details

Browse Source 
Twig login page was hardcoded with v1 cream/terracotta colors and had
no [data-design=v2] overrides. Cookie + html attribute injection were
working but had nothing to style off. Adding v2 overrides inline so
the login page matches the v2 register the rest of the app uses.

Default v2 palette on login uses ocean-dusk values (navy + cream text +
yellow V brand) since user isn't logged in yet so we can't read their
theme preference.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt Edholm
2026-05-15 15:19:41 -04:00
parent 645291c724
commit 0e4d78471b
1 changed files with 41 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/security/login.html.twig
+41
View File
@@ -72,6 +72,47 @@
.register-link a { color: #c97c3a; text-decoration: none; font-weight: 600; }
.logo-badge { display: block; width: 88px; height: 88px; margin: 0 auto 1.25rem; border-radius: 14px; overflow: hidden; border: 1px solid #e8d9c4; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.logo-badge img { display: block; width: 100%; height: 100%; }
/* ── v2 (atmospheric dusks) overrides ── */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Cormorant+Garamond:ital@0;1&display=swap');
[data-design="v2"] body {
background: radial-gradient(ellipse 90% 70% at 50% 30%, #142a40 0%, transparent 70%), #06121f;
color: #f4eed8;
}
[data-design="v2"] .card {
background: #0e2030;
border: 1px solid rgba(180,210,235,0.20);
box-shadow: 0 24px 48px -16px rgba(0,0,0,0.6);
}
[data-design="v2"] h1 {
font-family: 'Marcellus', Georgia, serif;
font-weight: 400;
color: #f4eed8;
}
[data-design="v2"] label {
color: #b8c8d8;
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
[data-design="v2"] input[type="email"],
[data-design="v2"] input[type="password"] {
background: rgba(0,0,0,0.3);
border-color: rgba(180,210,235,0.20);
color: #f4eed8;
}
[data-design="v2"] input:focus { border-color: #f0d000; }
[data-design="v2"] .btn {
background: #4e9fc8;
color: #06121f;
}
[data-design="v2"] .field-error { color: #e08070; }
[data-design="v2"] .register-link { color: #b8c8d8; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; }
[data-design="v2"] .register-link a { color: #f0d000; font-style: normal; }
[data-design="v2"] .logo-badge {
border-color: rgba(180,210,235,0.20);
box-shadow: 0 6px 18px -4px rgba(0,0,0,0.5);
}
</style>
</head>
<body>