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

refactor(frontend): drop body.dark forks in favor of AntD CSS variables

Browse source 
- 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.
This commit is contained in:
MHSanaei 2026-05-25 12:38:41 +02:00
parent af7e8f1dd8
commit 29aebda80c
No known key found for this signature in database
GPG key ID: 7E4060F2FBE5AB7A
6 changed files with 49 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
frontend/src/pages/clients/ClientInfoModal.css
View file

@ -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);
}

10
frontend/src/pages/inbounds/InboundFormModal.css
View file

@ -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);
}

30
frontend/src/pages/inbounds/InboundInfoModal.css
View file

@ -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);
}

18
frontend/src/pages/index/CustomGeoSection.css
View file

@ -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 {

17
frontend/src/pages/index/SystemHistoryModal.css
View file

@ -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 {

56
frontend/src/styles/page-cards.css
View file

@ -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);