From 35e54f2e9a4b3537a6e6bd86cf993ea2bb9705a3 Mon Sep 17 00:00:00 2001 From: MHSanaei Date: Fri, 8 May 2026 12:15:45 +0200 Subject: [PATCH] fix(frontend): match legacy wave animation timings + dark page bg MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two reasons the bottom wave looked static in dark/ultra-dark: 1. Animation durations were 7s/10s/13s/20s. Legacy uses 4s/7s/10s/13s. The 20s on the bottom wave was so slow that against the low dark- mode contrast it read as motionless. Restored the legacy timings. 2. --bg-page in dark mode was #151f31 (card color / surface-100), but the legacy .under uses surface-200 (#222d42) — that's the color of the bottom half of the page, the same as the wave fill, so the wave appears to flow into the page rather than meeting a hard edge. Now it does. Co-Authored-By: Claude Opus 4.7 --- frontend/src/pages/login/LoginPage.vue | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/frontend/src/pages/login/LoginPage.vue b/frontend/src/pages/login/LoginPage.vue index a6992d98..d378fed5 100644 --- a/frontend/src/pages/login/LoginPage.vue +++ b/frontend/src/pages/login/LoginPage.vue @@ -179,9 +179,9 @@ async function login() { } .login-app.is-dark { - --bg-page: #151f31; - --bg-wave-header: #0a2227; - --bg-card: #151f31; + --bg-page: #222d42; /* legacy .dark .under */ + --bg-wave-header: #0a2227; /* legacy --dark-color-login-background */ + --bg-card: #151f31; /* legacy --dark-color-surface-100 */ --color-title: rgba(255, 255, 255, 0.92); --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.45); --wave-fill: #222d42; @@ -277,17 +277,19 @@ async function login() { } /* Wave fills are CSS-driven so they switch with the theme; legacy used - * inline fill="..." on each which made them lock to one palette. */ + * inline fill="..." on each which made them lock to one palette. + * Animation durations match the legacy (4s/7s/10s/13s) so the bottom + * wave actually visibly moves in dark mode where contrast is low. */ .parallax > use { fill: var(--wave-fill); animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; } -.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; opacity: 0.2; } -.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; opacity: 0.4; } -.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; opacity: 0.6; } +.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 4s; opacity: 0.2; } +.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 7s; opacity: 0.4; } +.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 10s; opacity: 0.6; } .parallax > use:nth-child(4) { animation-delay: -5s; - animation-duration: 20s; + animation-duration: 13s; fill: var(--wave-fill-bottom); opacity: 1; }