Alex-Devera/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-05-13 17:46:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix(frontend): match legacy wave animation timings + dark page bg

Browse source 
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 <noreply@anthropic.com>
This commit is contained in:
MHSanaei 2026-05-08 12:15:45 +02:00
parent a062f756f2
commit 35e54f2e9a
No known key found for this signature in database
GPG key ID: 7E4060F2FBE5AB7A
1 changed files with 10 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/pages/login/LoginPage.vue
View file

@ -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 <use> which made them lock to one palette. */
* inline fill="..." on each <use> 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;
}