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

fix(frontend): bring wave-header to front so the wave actually shows

Browse source 
Two layering bugs were hiding the wave entirely:

1. .ant-layout-content had background: var(--bg-page) which painted an
   opaque rectangle covering the full content area — including the
   fixed wave-header behind it. Made the layout/content transparent
   and moved the bg paint up to .login-app (the outer ant-layout).

2. .waves-header had z-index: -1 which on its own was fine, but with
   .ant-layout-content opaque on top it was doubly buried. Promoted
   the wave-header to z-index: 0 and gave the form .login-row
   z-index: 1, so the form sits above the wave and the wave sits
   above the page-bg.

Also set --bg-page to the legacy mint (#c7ebe2) for light mode so the
bottom half of the page below the wave matches the legacy panel
(was white). Dark mode stays at the surface-100/login-wave palette.

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

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

@ -163,7 +163,11 @@ async function login() {
* - Together they form a 65vh-tall colored region anchored to the top,
* with the form floating centered on top of it. */
.login-app {
--bg-page: #ffffff;
/* Light mode mirrors the legacy: the wave-header (top ~65vh) is the
* lighter mint #dbf5ed, the rest of the page (--bg-page) is the
* slightly darker mint #c7ebe2 — the bottom wave fill is the same
* color so the wave reads as a continuation of the page bg. */
--bg-page: #c7ebe2;
--bg-wave-header: #dbf5ed;
--bg-card: #ffffff;
--color-title: #008771;
@ -172,7 +176,6 @@ async function login() {
--wave-fill-bottom: #c7ebe2;
min-height: 100vh;
background: var(--bg-page);
}
.login-app.is-dark {
@ -193,7 +196,14 @@ async function login() {
--wave-fill-bottom: #0f2d32;
}
/* Both ant-layout and ant-layout-content default to opaque backgrounds.
* Force them transparent so the page-bg painted on .login-app shows
* through, and so the fixed waves-header isn't covered by the layout. */
.login-app,
.login-app :deep(.ant-layout-content) {
background: transparent;
}
.login-app {
background: var(--bg-page);
}
@ -216,7 +226,10 @@ async function login() {
position: relative;
}
/* Form sits above the fixed wave-header (which is at z-index: 0). */
.login-row {
position: relative;
z-index: 1;
min-height: 100vh;
padding: 24px 0;
}
@ -243,7 +256,7 @@ async function login() {
position: fixed;
inset: 0 0 auto 0;
width: 100%;
z-index: -1;
z-index: 0;
pointer-events: none;
background: var(--bg-wave-header);
}