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

fix(frontend): correct dark login bg + give ultra-dark wave real contrast

Browse source 
Two related fixes:

1. Default-dark wave-header bg was wrong. I had #0a2227, but that's
   the *ultra-dark* override; default dark uses --dark-color-background
   = #0a1222. Now the dark-mode top half is the legacy purple-blue
   instead of teal.

2. Ultra-dark wave fill is intentionally near-identical to its bg in
   the legacy palette (#0f2d32 vs #0a2227, ~5/11/11 RGB delta), which
   makes the wave look static even though the animation is running.
   Bumped --wave-fill / --wave-fill-bottom to #1f4d52 in ultra-dark
   only — far enough above the bg that the motion reads, while
   staying within the same teal hue family.

Also corrected ultra-dark --bg-page back to #0f2d32 (was briefly
#0c0e12, which is the card color, not the page color).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
MHSanaei 2026-05-08 12:21:37 +02:00
parent 651aea1ca8
commit 730d68a79f
No known key found for this signature in database
GPG key ID: 7E4060F2FBE5AB7A
1 changed files with 12 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -201,9 +201,9 @@ async function login() {
} }
.login-app.is-dark { .login-app.is-dark {
--bg-page: #222d42; /* legacy .dark .under */ --bg-page: #222d42; /* legacy .dark .under = surface-200 */
--bg-wave-header: #0a2227; /* legacy --dark-color-login-background */ --bg-wave-header: #0a1222; /* legacy --dark-color-background (login-bg defaults to this) */
--bg-card: #151f31; /* legacy --dark-color-surface-100 */ --bg-card: #151f31; /* legacy surface-100 */
--color-title: rgba(255, 255, 255, 0.92); --color-title: rgba(255, 255, 255, 0.92);
--shadow-card: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.45);
--wave-fill: #222d42; --wave-fill: #222d42;
@ -211,11 +211,15 @@ async function login() {
} }
.login-app.is-dark.is-ultra { .login-app.is-dark.is-ultra {
--bg-page: #0c0e12; --bg-page: #0f2d32; /* legacy ultra .under = login-wave override */
--bg-wave-header: #0a2227; --bg-wave-header: #0a2227; /* legacy ultra --dark-color-login-background */
--bg-card: #0c0e12; --bg-card: #0c0e12; /* legacy ultra surface-100 */
--wave-fill: #0f2d32; /* Legacy ultra-dark uses #0f2d32 for both wave-fill and bg-page,
--wave-fill-bottom: #0f2d32; * which leaves near-zero contrast against #0a2227 and the wave
* reads as static. Bump to a noticeably lighter teal so motion is
* visible — every other value stays legacy-true. */
--wave-fill: #1f4d52;
--wave-fill-bottom: #1f4d52;
} }
/* Both ant-layout and ant-layout-content default to opaque backgrounds. /* Both ant-layout and ant-layout-content default to opaque backgrounds.