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 6

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; word-break: break-all;
white-space: pre-wrap; white-space: pre-wrap;
padding: 6px 8px; padding: 6px 8px;
background: rgba(0, 0, 0, 0.04); background: var(--ant-color-fill-tertiary);
border-radius: 4px; border-radius: 4px;
user-select: all; user-select: all;
} }
body.dark .link-panel-text {
background: rgba(255, 255, 255, 0.05);
}
.link-panel-anchor { .link-panel-anchor {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 11px; font-size: 11px;
word-break: break-all; word-break: break-all;
padding: 6px 8px; padding: 6px 8px;
background: rgba(0, 0, 0, 0.04); background: var(--ant-color-fill-tertiary);
border-radius: 4px; border-radius: 4px;
color: var(--ant-color-primary, #1677ff); color: var(--ant-color-primary);
text-decoration: underline; 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; transition: background 120ms ease, text-decoration-color 120ms ease;
} }
.link-panel-anchor:hover { .link-panel-anchor:hover {
background: rgba(22, 119, 255, 0.08); background: color-mix(in srgb, var(--ant-color-primary) 12%, transparent);
text-decoration-color: var(--ant-color-primary, #1677ff); text-decoration-color: var(--ant-color-primary);
}
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);
} }

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

@ -34,9 +34,9 @@
.advanced-panel { .advanced-panel {
padding: 14px; padding: 14px;
border: 1px solid rgba(128, 128, 128, 0.18); border: 1px solid var(--ant-color-border-secondary);
border-radius: 12px; border-radius: 12px;
background: rgba(128, 128, 128, 0.04); background: var(--ant-color-fill-quaternary);
} }
.advanced-panel__header { .advanced-panel__header {
@ -79,9 +79,3 @@
padding-inline: 10px; 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; word-break: break-all;
white-space: pre-wrap; white-space: pre-wrap;
padding: 4px 8px; padding: 4px 8px;
background: rgba(0, 0, 0, 0.04); background: var(--ant-color-fill-tertiary);
border-radius: 4px; border-radius: 4px;
user-select: all; user-select: all;
min-width: 0; min-width: 0;
} }
body.dark .value-code {
background: rgba(255, 255, 255, 0.05);
}
.value-copy { .value-copy {
flex-shrink: 0; flex-shrink: 0;
} }
@ -179,37 +175,25 @@ body.dark .value-code {
word-break: break-all; word-break: break-all;
white-space: pre-wrap; white-space: pre-wrap;
padding: 6px 8px; padding: 6px 8px;
background: rgba(0, 0, 0, 0.04); background: var(--ant-color-fill-tertiary);
border-radius: 4px; border-radius: 4px;
user-select: all; user-select: all;
} }
body.dark .link-panel-text {
background: rgba(255, 255, 255, 0.05);
}
.link-panel-anchor { .link-panel-anchor {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 11px; font-size: 11px;
word-break: break-all; word-break: break-all;
padding: 6px 8px; padding: 6px 8px;
background: rgba(0, 0, 0, 0.04); background: var(--ant-color-fill-tertiary);
border-radius: 4px; border-radius: 4px;
color: var(--ant-color-primary, #1677ff); color: var(--ant-color-primary);
text-decoration: underline; 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; transition: background 120ms ease, text-decoration-color 120ms ease;
} }
.link-panel-anchor:hover { .link-panel-anchor:hover {
background: rgba(22, 119, 255, 0.08); background: color-mix(in srgb, var(--ant-color-primary) 12%, transparent);
text-decoration-color: var(--ant-color-primary, #1677ff); text-decoration-color: var(--ant-color-primary);
}
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);
} }

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

@ -14,15 +14,11 @@
margin-left: 4px; margin-left: 4px;
padding: 2px 8px; padding: 2px 8px;
border-radius: 10px; border-radius: 10px;
background: rgba(0, 0, 0, 0.05); background: var(--ant-color-fill-tertiary);
font-size: 12px; font-size: 12px;
opacity: 0.75; opacity: 0.75;
} }
body.dark .custom-geo-count {
background: rgba(255, 255, 255, 0.08);
}
.custom-geo-alias-cell { .custom-geo-alias-cell {
display: flex; display: flex;
align-items: center; align-items: center;
@ -48,20 +44,12 @@ body.dark .custom-geo-count {
font-size: 12px; font-size: 12px;
padding: 2px 6px; padding: 2px 6px;
border-radius: 4px; border-radius: 4px;
background: rgba(0, 0, 0, 0.05); background: var(--ant-color-fill-tertiary);
user-select: all; user-select: all;
} }
.custom-geo-copyable:hover { .custom-geo-copyable:hover {
background: rgba(0, 0, 0, 0.1); background: var(--ant-color-fill-secondary);
}
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);
} }
.custom-geo-muted { .custom-geo-muted {

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

@ -11,20 +11,9 @@
margin: 8px 8px 16px; margin: 8px 8px 16px;
padding: 16px 18px 18px; padding: 16px 18px 18px;
border-radius: 14px; border-radius: 14px;
background: linear-gradient(180deg, rgba(99, 102, 241, 0.05), rgba(99, 102, 241, 0)); background: linear-gradient(180deg, color-mix(in srgb, var(--ant-color-primary) 6%, transparent), transparent);
border: 1px solid rgba(99, 102, 241, 0.12); border: 1px solid var(--ant-color-border-secondary);
box-shadow: 0 2px 12px rgba(99, 102, 241, 0.06); box-shadow: 0 2px 12px var(--ant-color-fill-quaternary);
}
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);
} }
.cpu-chart-meta { .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; transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
} }
body.dark .index-page .ant-card, .index-page.is-dark .ant-card,
body.dark .clients-page .ant-card, .clients-page.is-dark .ant-card,
body.dark .inbounds-page .ant-card, .inbounds-page.is-dark .ant-card,
body.dark .xray-page .ant-card, .xray-page.is-dark .ant-card,
body.dark .settings-page .ant-card, .settings-page.is-dark .ant-card,
body.dark .nodes-page .ant-card, .nodes-page.is-dark .ant-card,
body.dark .api-docs-page .ant-card { .api-docs-page.is-dark .ant-card {
box-shadow: box-shadow:
0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.03); inset 0 1px 0 rgba(255, 255, 255, 0.03);
} }
html[data-theme='ultra-dark'] .index-page .ant-card, .index-page.is-dark.is-ultra .ant-card,
html[data-theme='ultra-dark'] .clients-page .ant-card, .clients-page.is-dark.is-ultra .ant-card,
html[data-theme='ultra-dark'] .inbounds-page .ant-card, .inbounds-page.is-dark.is-ultra .ant-card,
html[data-theme='ultra-dark'] .xray-page .ant-card, .xray-page.is-dark.is-ultra .ant-card,
html[data-theme='ultra-dark'] .settings-page .ant-card, .settings-page.is-dark.is-ultra .ant-card,
html[data-theme='ultra-dark'] .nodes-page .ant-card, .nodes-page.is-dark.is-ultra .ant-card,
html[data-theme='ultra-dark'] .api-docs-page .ant-card { .api-docs-page.is-dark.is-ultra .ant-card {
box-shadow: box-shadow:
0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.025); 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); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
} }
body.dark .index-page .ant-card.ant-card-hoverable:hover, .index-page.is-dark .ant-card.ant-card-hoverable:hover,
body.dark .clients-page .ant-card.ant-card-hoverable:hover, .clients-page.is-dark .ant-card.ant-card-hoverable:hover,
body.dark .inbounds-page .ant-card.ant-card-hoverable:hover, .inbounds-page.is-dark .ant-card.ant-card-hoverable:hover,
body.dark .xray-page .ant-card.ant-card-hoverable:hover, .xray-page.is-dark .ant-card.ant-card-hoverable:hover,
body.dark .settings-page .ant-card.ant-card-hoverable:hover, .settings-page.is-dark .ant-card.ant-card-hoverable:hover,
body.dark .nodes-page .ant-card.ant-card-hoverable:hover, .nodes-page.is-dark .ant-card.ant-card-hoverable:hover,
body.dark .api-docs-page .ant-card.ant-card-hoverable:hover { .api-docs-page.is-dark .ant-card.ant-card-hoverable:hover {
box-shadow: box-shadow:
0 8px 24px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.04); inset 0 1px 0 rgba(255, 255, 255, 0.04);
} }
html[data-theme='ultra-dark'] .index-page .ant-card.ant-card-hoverable:hover, .index-page.is-dark.is-ultra .ant-card.ant-card-hoverable:hover,
html[data-theme='ultra-dark'] .clients-page .ant-card.ant-card-hoverable:hover, .clients-page.is-dark.is-ultra .ant-card.ant-card-hoverable:hover,
html[data-theme='ultra-dark'] .inbounds-page .ant-card.ant-card-hoverable:hover, .inbounds-page.is-dark.is-ultra .ant-card.ant-card-hoverable:hover,
html[data-theme='ultra-dark'] .xray-page .ant-card.ant-card-hoverable:hover, .xray-page.is-dark.is-ultra .ant-card.ant-card-hoverable:hover,
html[data-theme='ultra-dark'] .settings-page .ant-card.ant-card-hoverable:hover, .settings-page.is-dark.is-ultra .ant-card.ant-card-hoverable:hover,
html[data-theme='ultra-dark'] .nodes-page .ant-card.ant-card-hoverable:hover, .nodes-page.is-dark.is-ultra .ant-card.ant-card-hoverable:hover,
html[data-theme='ultra-dark'] .api-docs-page .ant-card.ant-card-hoverable:hover { .api-docs-page.is-dark.is-ultra .ant-card.ant-card-hoverable:hover {
box-shadow: box-shadow:
0 8px 24px rgba(0, 0, 0, 0.75), 0 8px 24px rgba(0, 0, 0, 0.75),
inset 0 1px 0 rgba(255, 255, 255, 0.03); inset 0 1px 0 rgba(255, 255, 255, 0.03);