From 29aebda80c4783779ab84acce28360bc9d265ff0 Mon Sep 17 00:00:00 2001 From: MHSanaei Date: Mon, 25 May 2026 12:38:41 +0200 Subject: [PATCH] refactor(frontend): drop body.dark forks in favor of AntD CSS variables - ClientInfoModal/InboundInfoModal: link-panel-text and link-panel-anchor now use var(--ant-color-fill-tertiary) and color-mix on --ant-color-primary, removing the body.dark light/dark background pair. - InboundFormModal: advanced-panel uses --ant-color-border-secondary and --ant-color-fill-quaternary; body.dark/html[data-theme='ultra-dark'] pair gone. - CustomGeoSection: custom-geo-count, custom-geo-ext-code, custom-geo-copyable:hover use --ant-color-fill-tertiary/-secondary; body.dark forks gone. - SystemHistoryModal: cpu-chart-wrap collapsed from three theme-specific gradients into one using color-mix on --ant-color-primary and --ant-color-fill-quaternary. - page-cards.css: body.dark / html[data-theme='ultra-dark'] selectors renamed to page-scoped .is-dark / .is-dark.is-ultra, keeping the same shadow tuning but consistent with the page-scoping convention used elsewhere. --- .../src/pages/clients/ClientInfoModal.css | 24 ++------ .../src/pages/inbounds/InboundFormModal.css | 10 +--- .../src/pages/inbounds/InboundInfoModal.css | 30 +++------- frontend/src/pages/index/CustomGeoSection.css | 18 +----- .../src/pages/index/SystemHistoryModal.css | 17 +----- frontend/src/styles/page-cards.css | 56 +++++++++---------- 6 files changed, 49 insertions(+), 106 deletions(-) diff --git a/frontend/src/pages/clients/ClientInfoModal.css b/frontend/src/pages/clients/ClientInfoModal.css index 9cf9c9bc..60292aac 100644 --- a/frontend/src/pages/clients/ClientInfoModal.css +++ b/frontend/src/pages/clients/ClientInfoModal.css @@ -62,37 +62,25 @@ word-break: break-all; white-space: pre-wrap; padding: 6px 8px; - background: rgba(0, 0, 0, 0.04); + background: var(--ant-color-fill-tertiary); border-radius: 4px; user-select: all; } -body.dark .link-panel-text { - background: rgba(255, 255, 255, 0.05); -} - .link-panel-anchor { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; word-break: break-all; padding: 6px 8px; - background: rgba(0, 0, 0, 0.04); + background: var(--ant-color-fill-tertiary); border-radius: 4px; - color: var(--ant-color-primary, #1677ff); + color: var(--ant-color-primary); text-decoration: underline; - text-decoration-color: rgba(22, 119, 255, 0.4); + text-decoration-color: color-mix(in srgb, var(--ant-color-primary) 40%, transparent); transition: background 120ms ease, text-decoration-color 120ms ease; } .link-panel-anchor:hover { - background: rgba(22, 119, 255, 0.08); - text-decoration-color: var(--ant-color-primary, #1677ff); -} - -body.dark .link-panel-anchor { - background: rgba(255, 255, 255, 0.05); -} - -body.dark .link-panel-anchor:hover { - background: rgba(22, 119, 255, 0.16); + background: color-mix(in srgb, var(--ant-color-primary) 12%, transparent); + text-decoration-color: var(--ant-color-primary); } diff --git a/frontend/src/pages/inbounds/InboundFormModal.css b/frontend/src/pages/inbounds/InboundFormModal.css index 505ef12f..6a0e1cd2 100644 --- a/frontend/src/pages/inbounds/InboundFormModal.css +++ b/frontend/src/pages/inbounds/InboundFormModal.css @@ -34,9 +34,9 @@ .advanced-panel { padding: 14px; - border: 1px solid rgba(128, 128, 128, 0.18); + border: 1px solid var(--ant-color-border-secondary); border-radius: 12px; - background: rgba(128, 128, 128, 0.04); + background: var(--ant-color-fill-quaternary); } .advanced-panel__header { @@ -79,9 +79,3 @@ padding-inline: 10px; } } - -body.dark .advanced-panel, -html[data-theme='ultra-dark'] .advanced-panel { - border-color: rgba(255, 255, 255, 0.12); - background: rgba(255, 255, 255, 0.03); -} diff --git a/frontend/src/pages/inbounds/InboundInfoModal.css b/frontend/src/pages/inbounds/InboundInfoModal.css index 44dce4e2..4d2cefe4 100644 --- a/frontend/src/pages/inbounds/InboundInfoModal.css +++ b/frontend/src/pages/inbounds/InboundInfoModal.css @@ -95,16 +95,12 @@ word-break: break-all; white-space: pre-wrap; padding: 4px 8px; - background: rgba(0, 0, 0, 0.04); + background: var(--ant-color-fill-tertiary); border-radius: 4px; user-select: all; min-width: 0; } -body.dark .value-code { - background: rgba(255, 255, 255, 0.05); -} - .value-copy { flex-shrink: 0; } @@ -179,37 +175,25 @@ body.dark .value-code { word-break: break-all; white-space: pre-wrap; padding: 6px 8px; - background: rgba(0, 0, 0, 0.04); + background: var(--ant-color-fill-tertiary); border-radius: 4px; user-select: all; } -body.dark .link-panel-text { - background: rgba(255, 255, 255, 0.05); -} - .link-panel-anchor { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; word-break: break-all; padding: 6px 8px; - background: rgba(0, 0, 0, 0.04); + background: var(--ant-color-fill-tertiary); border-radius: 4px; - color: var(--ant-color-primary, #1677ff); + color: var(--ant-color-primary); text-decoration: underline; - text-decoration-color: rgba(22, 119, 255, 0.4); + text-decoration-color: color-mix(in srgb, var(--ant-color-primary) 40%, transparent); transition: background 120ms ease, text-decoration-color 120ms ease; } .link-panel-anchor:hover { - background: rgba(22, 119, 255, 0.08); - text-decoration-color: var(--ant-color-primary, #1677ff); -} - -body.dark .link-panel-anchor { - background: rgba(255, 255, 255, 0.05); -} - -body.dark .link-panel-anchor:hover { - background: rgba(22, 119, 255, 0.16); + background: color-mix(in srgb, var(--ant-color-primary) 12%, transparent); + text-decoration-color: var(--ant-color-primary); } diff --git a/frontend/src/pages/index/CustomGeoSection.css b/frontend/src/pages/index/CustomGeoSection.css index 3b2bbc44..5fce811c 100644 --- a/frontend/src/pages/index/CustomGeoSection.css +++ b/frontend/src/pages/index/CustomGeoSection.css @@ -14,15 +14,11 @@ margin-left: 4px; padding: 2px 8px; border-radius: 10px; - background: rgba(0, 0, 0, 0.05); + background: var(--ant-color-fill-tertiary); font-size: 12px; opacity: 0.75; } -body.dark .custom-geo-count { - background: rgba(255, 255, 255, 0.08); -} - .custom-geo-alias-cell { display: flex; align-items: center; @@ -48,20 +44,12 @@ body.dark .custom-geo-count { font-size: 12px; padding: 2px 6px; border-radius: 4px; - background: rgba(0, 0, 0, 0.05); + background: var(--ant-color-fill-tertiary); user-select: all; } .custom-geo-copyable:hover { - background: rgba(0, 0, 0, 0.1); -} - -body.dark .custom-geo-ext-code { - background: rgba(255, 255, 255, 0.08); -} - -body.dark .custom-geo-copyable:hover { - background: rgba(255, 255, 255, 0.14); + background: var(--ant-color-fill-secondary); } .custom-geo-muted { diff --git a/frontend/src/pages/index/SystemHistoryModal.css b/frontend/src/pages/index/SystemHistoryModal.css index fc5a11e1..445a8ea3 100644 --- a/frontend/src/pages/index/SystemHistoryModal.css +++ b/frontend/src/pages/index/SystemHistoryModal.css @@ -11,20 +11,9 @@ margin: 8px 8px 16px; padding: 16px 18px 18px; border-radius: 14px; - background: linear-gradient(180deg, rgba(99, 102, 241, 0.05), rgba(99, 102, 241, 0)); - border: 1px solid rgba(99, 102, 241, 0.12); - box-shadow: 0 2px 12px rgba(99, 102, 241, 0.06); -} - -body.dark .cpu-chart-wrap { - background: linear-gradient(180deg, rgba(129, 140, 248, 0.08), rgba(129, 140, 248, 0)); - border-color: rgba(129, 140, 248, 0.16); - box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25); -} - -html[data-theme='ultra-dark'] .cpu-chart-wrap { - background: linear-gradient(180deg, rgba(129, 140, 248, 0.05), rgba(129, 140, 248, 0)); - border-color: rgba(129, 140, 248, 0.10); + background: linear-gradient(180deg, color-mix(in srgb, var(--ant-color-primary) 6%, transparent), transparent); + border: 1px solid var(--ant-color-border-secondary); + box-shadow: 0 2px 12px var(--ant-color-fill-quaternary); } .cpu-chart-meta { diff --git a/frontend/src/styles/page-cards.css b/frontend/src/styles/page-cards.css index b9e6eacc..c2aa5d9e 100644 --- a/frontend/src/styles/page-cards.css +++ b/frontend/src/styles/page-cards.css @@ -10,25 +10,25 @@ transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease; } -body.dark .index-page .ant-card, -body.dark .clients-page .ant-card, -body.dark .inbounds-page .ant-card, -body.dark .xray-page .ant-card, -body.dark .settings-page .ant-card, -body.dark .nodes-page .ant-card, -body.dark .api-docs-page .ant-card { +.index-page.is-dark .ant-card, +.clients-page.is-dark .ant-card, +.inbounds-page.is-dark .ant-card, +.xray-page.is-dark .ant-card, +.settings-page.is-dark .ant-card, +.nodes-page.is-dark .ant-card, +.api-docs-page.is-dark .ant-card { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.03); } -html[data-theme='ultra-dark'] .index-page .ant-card, -html[data-theme='ultra-dark'] .clients-page .ant-card, -html[data-theme='ultra-dark'] .inbounds-page .ant-card, -html[data-theme='ultra-dark'] .xray-page .ant-card, -html[data-theme='ultra-dark'] .settings-page .ant-card, -html[data-theme='ultra-dark'] .nodes-page .ant-card, -html[data-theme='ultra-dark'] .api-docs-page .ant-card { +.index-page.is-dark.is-ultra .ant-card, +.clients-page.is-dark.is-ultra .ant-card, +.inbounds-page.is-dark.is-ultra .ant-card, +.xray-page.is-dark.is-ultra .ant-card, +.settings-page.is-dark.is-ultra .ant-card, +.nodes-page.is-dark.is-ultra .ant-card, +.api-docs-page.is-dark.is-ultra .ant-card { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.025); @@ -45,25 +45,25 @@ html[data-theme='ultra-dark'] .api-docs-page .ant-card { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); } -body.dark .index-page .ant-card.ant-card-hoverable:hover, -body.dark .clients-page .ant-card.ant-card-hoverable:hover, -body.dark .inbounds-page .ant-card.ant-card-hoverable:hover, -body.dark .xray-page .ant-card.ant-card-hoverable:hover, -body.dark .settings-page .ant-card.ant-card-hoverable:hover, -body.dark .nodes-page .ant-card.ant-card-hoverable:hover, -body.dark .api-docs-page .ant-card.ant-card-hoverable:hover { +.index-page.is-dark .ant-card.ant-card-hoverable:hover, +.clients-page.is-dark .ant-card.ant-card-hoverable:hover, +.inbounds-page.is-dark .ant-card.ant-card-hoverable:hover, +.xray-page.is-dark .ant-card.ant-card-hoverable:hover, +.settings-page.is-dark .ant-card.ant-card-hoverable:hover, +.nodes-page.is-dark .ant-card.ant-card-hoverable:hover, +.api-docs-page.is-dark .ant-card.ant-card-hoverable:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.04); } -html[data-theme='ultra-dark'] .index-page .ant-card.ant-card-hoverable:hover, -html[data-theme='ultra-dark'] .clients-page .ant-card.ant-card-hoverable:hover, -html[data-theme='ultra-dark'] .inbounds-page .ant-card.ant-card-hoverable:hover, -html[data-theme='ultra-dark'] .xray-page .ant-card.ant-card-hoverable:hover, -html[data-theme='ultra-dark'] .settings-page .ant-card.ant-card-hoverable:hover, -html[data-theme='ultra-dark'] .nodes-page .ant-card.ant-card-hoverable:hover, -html[data-theme='ultra-dark'] .api-docs-page .ant-card.ant-card-hoverable:hover { +.index-page.is-dark.is-ultra .ant-card.ant-card-hoverable:hover, +.clients-page.is-dark.is-ultra .ant-card.ant-card-hoverable:hover, +.inbounds-page.is-dark.is-ultra .ant-card.ant-card-hoverable:hover, +.xray-page.is-dark.is-ultra .ant-card.ant-card-hoverable:hover, +.settings-page.is-dark.is-ultra .ant-card.ant-card-hoverable:hover, +.nodes-page.is-dark.is-ultra .ant-card.ant-card-hoverable:hover, +.api-docs-page.is-dark.is-ultra .ant-card.ant-card-hoverable:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.03);