refactor(frontend): scope dark overrides and switch list borders to AntD CSS variables

Scope page-level dark overrides:
- inbounds/InboundList: scope `.ant-table` border-radius rules and the
  mobile @media `.ant-card-*` tweaks to `.inbounds-page` (were global
  and leaked into other pages); scope `.inbound-card` dark variant to
  `.inbounds-page.is-dark`.
- nodes/NodeList: scope `.node-card` dark to `.nodes-page.is-dark`.
- xray/RoutingTab, OutboundsTab: scope `.rule-card`, `.criterion-chip`,
  `.criterion-more`, `.address-pill` dark to `.xray-page.is-dark`.

Modernize list borders to use AntD CSS vars instead of body.dark forks:
- index/BackupModal, PanelUpdateModal, VersionModal: replace
  hard-coded `rgba(5,5,5,0.06)` + `body.dark`/`html[data-theme]`
  override pairs with `var(--ant-color-border-secondary)`; replace
  custom text colours with `var(--ant-color-text)` /
  `var(--ant-color-text-tertiary)`.
- xray/DnsPresetsModal: same border-color treatment.
- xray/NordModal, WarpModal: collapse `.row-odd` light + `body.dark`
  pair into a single neutral `rgba(128,128,128,0.06)` that works on
  both themes; scope under `.nord-data-table` / `.warp-data-table`.
This commit is contained in:
MHSanaei 2026-05-25 04:10:44 +02:00
parent e386767d79
commit 1394172d75
No known key found for this signature in database
GPG key ID: 7E4060F2FBE5AB7A
10 changed files with 31 additions and 89 deletions

View file

@ -32,29 +32,29 @@
font-size: 12px; font-size: 12px;
} }
.ant-table { .inbounds-page .ant-table {
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
} }
.ant-table-container { .inbounds-page .ant-table-container {
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
} }
.ant-table-thead > tr:first-child > *:first-child { .inbounds-page .ant-table-thead > tr:first-child > *:first-child {
border-start-start-radius: 8px; border-start-start-radius: 8px;
} }
.ant-table-thead > tr:first-child > *:last-child { .inbounds-page .ant-table-thead > tr:first-child > *:last-child {
border-start-end-radius: 8px; border-start-end-radius: 8px;
} }
.ant-table-tbody > tr:last-child > *:first-child { .inbounds-page .ant-table-tbody > tr:last-child > *:first-child {
border-end-start-radius: 8px; border-end-start-radius: 8px;
} }
.ant-table-tbody > tr:last-child > *:last-child { .inbounds-page .ant-table-tbody > tr:last-child > *:last-child {
border-end-end-radius: 8px; border-end-end-radius: 8px;
} }
@ -75,7 +75,7 @@
gap: 8px; gap: 8px;
} }
body.dark .inbound-card { .inbounds-page.is-dark .inbound-card {
background: rgba(255, 255, 255, 0.03); background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.1);
} }
@ -142,21 +142,21 @@ body.dark .inbound-card {
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.ant-card-head { .inbounds-page .ant-card-head {
padding: 0 12px; padding: 0 12px;
min-height: 44px; min-height: 44px;
} }
.ant-card-head-title, .inbounds-page .ant-card-head-title,
.ant-card-extra { .inbounds-page .ant-card-extra {
padding: 8px 0; padding: 8px 0;
} }
.ant-card-body { .inbounds-page .ant-card-body {
padding: 8px; padding: 8px;
} }
.row-action-trigger { .inbounds-page .row-action-trigger {
font-size: 22px; font-size: 22px;
padding: 4px; padding: 4px;
} }

View file

@ -1,32 +1,22 @@
.backup-list { .backup-list {
width: 100%; width: 100%;
border: 1px solid rgba(5, 5, 5, 0.06); border: 1px solid var(--ant-color-border-secondary);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
} }
body.dark .backup-list,
html[data-theme='ultra-dark'] .backup-list {
border-color: rgba(255, 255, 255, 0.12);
}
.backup-item { .backup-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16px; gap: 16px;
padding: 12px 24px; padding: 12px 24px;
border-bottom: 1px solid rgba(5, 5, 5, 0.06); border-bottom: 1px solid var(--ant-color-border-secondary);
} }
.backup-item:last-child { .backup-item:last-child {
border-bottom: 0; border-bottom: 0;
} }
body.dark .backup-item,
html[data-theme='ultra-dark'] .backup-item {
border-bottom-color: rgba(255, 255, 255, 0.08);
}
.backup-meta { .backup-meta {
flex: 1; flex: 1;
display: flex; display: flex;
@ -37,21 +27,11 @@ html[data-theme='ultra-dark'] .backup-item {
.backup-title { .backup-title {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: rgba(0, 0, 0, 0.88); color: var(--ant-color-text);
} }
.backup-description { .backup-description {
font-size: 14px; font-size: 14px;
color: rgba(0, 0, 0, 0.45); color: var(--ant-color-text-tertiary);
line-height: 1.5715; line-height: 1.5715;
} }
body.dark .backup-title,
html[data-theme='ultra-dark'] .backup-title {
color: rgba(255, 255, 255, 0.85);
}
body.dark .backup-description,
html[data-theme='ultra-dark'] .backup-description {
color: rgba(255, 255, 255, 0.45);
}

View file

@ -4,33 +4,23 @@
.version-list { .version-list {
width: 100%; width: 100%;
border: 1px solid rgba(5, 5, 5, 0.06); border: 1px solid var(--ant-color-border-secondary);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
} }
body.dark .version-list,
html[data-theme='ultra-dark'] .version-list {
border-color: rgba(255, 255, 255, 0.12);
}
.version-list-item { .version-list-item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 12px 24px; padding: 12px 24px;
border-bottom: 1px solid rgba(5, 5, 5, 0.06); border-bottom: 1px solid var(--ant-color-border-secondary);
} }
.version-list-item:last-child { .version-list-item:last-child {
border-bottom: 0; border-bottom: 0;
} }
body.dark .version-list-item,
html[data-theme='ultra-dark'] .version-list-item {
border-bottom-color: rgba(255, 255, 255, 0.08);
}
.actions-row { .actions-row {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;

View file

@ -4,33 +4,23 @@
.version-list { .version-list {
width: 100%; width: 100%;
border: 1px solid rgba(5, 5, 5, 0.06); border: 1px solid var(--ant-color-border-secondary);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
} }
body.dark .version-list,
html[data-theme='ultra-dark'] .version-list {
border-color: rgba(255, 255, 255, 0.12);
}
.version-list-item { .version-list-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 12px 24px; padding: 12px 24px;
border-bottom: 1px solid rgba(5, 5, 5, 0.06); border-bottom: 1px solid var(--ant-color-border-secondary);
} }
.version-list-item:last-child { .version-list-item:last-child {
border-bottom: 0; border-bottom: 0;
} }
body.dark .version-list-item,
html[data-theme='ultra-dark'] .version-list-item {
border-bottom-color: rgba(255, 255, 255, 0.08);
}
.reload-icon { .reload-icon {
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;

View file

@ -61,7 +61,7 @@
gap: 8px; gap: 8px;
} }
body.dark .node-card { .nodes-page.is-dark .node-card {
background: rgba(255, 255, 255, 0.03); background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.1);
} }

View file

@ -1,32 +1,22 @@
.preset-list { .preset-list {
border: 1px solid rgba(5, 5, 5, 0.06); border: 1px solid var(--ant-color-border-secondary);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
} }
body.dark .preset-list,
html[data-theme='ultra-dark'] .preset-list {
border-color: rgba(255, 255, 255, 0.12);
}
.preset-row { .preset-row {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 8px; gap: 8px;
padding: 12px 24px; padding: 12px 24px;
border-bottom: 1px solid rgba(5, 5, 5, 0.06); border-bottom: 1px solid var(--ant-color-border-secondary);
} }
.preset-row:last-child { .preset-row:last-child {
border-bottom: 0; border-bottom: 0;
} }
body.dark .preset-row,
html[data-theme='ultra-dark'] .preset-row {
border-bottom-color: rgba(255, 255, 255, 0.08);
}
.preset-name { .preset-name {
font-weight: 500; font-weight: 500;
} }

View file

@ -18,12 +18,8 @@
width: 130px; width: 130px;
} }
.row-odd { .nord-data-table .row-odd {
background: rgba(0, 0, 0, 0.03); background: rgba(128, 128, 128, 0.06);
}
body.dark .row-odd {
background: rgba(255, 255, 255, 0.04);
} }
.zero-margin { .zero-margin {

View file

@ -68,7 +68,7 @@
background: rgba(0, 0, 0, 0.05); background: rgba(0, 0, 0, 0.05);
} }
body.dark .address-pill { .xray-page.is-dark .address-pill {
background: rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.06);
} }

View file

@ -81,7 +81,7 @@
background: rgba(0, 0, 0, 0.06); background: rgba(0, 0, 0, 0.06);
} }
body.dark .criterion-more { .xray-page.is-dark .criterion-more {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
} }
@ -222,11 +222,11 @@ body.dark .criterion-more {
opacity: 0.4; opacity: 0.4;
} }
body.dark .rule-card { .xray-page.is-dark .rule-card {
background: rgba(255, 255, 255, 0.04); background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.08);
} }
body.dark .criterion-chip { .xray-page.is-dark .criterion-chip {
background: rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.06);
} }

View file

@ -18,12 +18,8 @@
width: 130px; width: 130px;
} }
.row-odd { .warp-data-table .row-odd {
background: rgba(0, 0, 0, 0.03); background: rgba(128, 128, 128, 0.06);
}
body.dark .row-odd {
background: rgba(255, 255, 255, 0.04);
} }
.zero-margin { .zero-margin {