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

fix(frontend): use legacy panel palette for login page dark mode

Browse source 
Earlier dark mode used invented colors (#141a26 page bg, #1f2937 card)
that didn't match the rest of the panel. Replaced with the actual
values from web/assets/css/custom.min.css:

  light          dark             ultra-dark
  bg #c7ebe2     bg #222d42       bg #0f2d32
  card #fff      card #151f31     card #0c0e12
  title #008771  title #fff/.92   title #fff/.92

Drove everything off CSS custom properties on .login-app so the
.is-dark / .is-ultra class swap is a few var overrides instead of
duplicating selectors. Also restored the legacy card metrics
(2rem radius, 4rem 3rem padding, 2rem title) so the new page
matches the old panel's geometry, not just its colors.

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

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

@ -56,7 +56,7 @@ async function login() {
<template>
<a-config-provider :theme="antdThemeConfig">
<a-layout class="login-app" :class="{ 'is-dark': themeState.isDark }">
<a-layout class="login-app" :class="{ 'is-dark': themeState.isDark, 'is-ultra': themeState.isUltra }">
<a-layout-content class="login-content">
<div class="waves-header">
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
@ -152,19 +152,42 @@ async function login() {
</template>
<style scoped>
/* Page palette comes straight from the legacy panel's CSS variables
* (web/assets/css/custom.min.css). Driving everything off CSS vars
* means the .is-dark / .is-ultra class swap is a one-liner. */
.login-app {
--bg-page: #c7ebe2;
--bg-card: #ffffff;
--color-title: #008771;
--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.09);
min-height: 100vh;
background: #f0f2f5;
background: var(--bg-page);
}
.login-app.is-dark {
background: #141a26;
--bg-page: #222d42;
--bg-card: #151f31;
--color-title: rgba(255, 255, 255, 0.92);
--shadow-card: 0 4px 16px rgba(0, 0, 0, 0.45);
}
.login-app.is-dark :deep(.login-card) {
background: #1f2937;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
.login-app.is-dark.is-ultra {
--bg-page: #0f2d32;
--bg-card: #0c0e12;
}
.login-app.is-dark :deep(.login-title) {
color: #2dd4bf;
.login-app :deep(.ant-layout-content) {
background: var(--bg-page);
}
.login-card {
background: var(--bg-card);
box-shadow: var(--shadow-card);
}
.login-title {
color: var(--color-title);
}
.login-settings {
@ -183,10 +206,9 @@ async function login() {
}
.login-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
padding: 40px 32px;
border-radius: 2rem;
padding: 4rem 3rem;
transition: background 0.3s, box-shadow 0.3s;
}
.login-loading {
@ -197,8 +219,7 @@ async function login() {
.login-title {
text-align: center;
margin-bottom: 32px;
color: #008771;
font-size: 24px;
font-size: 2rem;
font-weight: 500;
}