mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-06-05 12:44:22 +00:00
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
parent
e386767d79
commit
1394172d75
10 changed files with 31 additions and 89 deletions
|
|
@ -32,29 +32,29 @@
|
|||
font-size: 12px;
|
||||
}
|
||||
|
||||
.ant-table {
|
||||
.inbounds-page .ant-table {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ant-table-container {
|
||||
.inbounds-page .ant-table-container {
|
||||
border-radius: 8px;
|
||||
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;
|
||||
}
|
||||
|
||||
.ant-table-thead > tr:first-child > *:last-child {
|
||||
.inbounds-page .ant-table-thead > tr:first-child > *:last-child {
|
||||
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;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr:last-child > *:last-child {
|
||||
.inbounds-page .ant-table-tbody > tr:last-child > *:last-child {
|
||||
border-end-end-radius: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
gap: 8px;
|
||||
}
|
||||
|
||||
body.dark .inbound-card {
|
||||
.inbounds-page.is-dark .inbound-card {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
|
@ -142,21 +142,21 @@ body.dark .inbound-card {
|
|||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.ant-card-head {
|
||||
.inbounds-page .ant-card-head {
|
||||
padding: 0 12px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.ant-card-head-title,
|
||||
.ant-card-extra {
|
||||
.inbounds-page .ant-card-head-title,
|
||||
.inbounds-page .ant-card-extra {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.ant-card-body {
|
||||
.inbounds-page .ant-card-body {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.row-action-trigger {
|
||||
.inbounds-page .row-action-trigger {
|
||||
font-size: 22px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,22 @@
|
|||
.backup-list {
|
||||
width: 100%;
|
||||
border: 1px solid rgba(5, 5, 5, 0.06);
|
||||
border: 1px solid var(--ant-color-border-secondary);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.dark .backup-list,
|
||||
html[data-theme='ultra-dark'] .backup-list {
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.backup-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
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 {
|
||||
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 {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
|
@ -37,21 +27,11 @@ html[data-theme='ultra-dark'] .backup-item {
|
|||
.backup-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
color: var(--ant-color-text);
|
||||
}
|
||||
|
||||
.backup-description {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
color: var(--ant-color-text-tertiary);
|
||||
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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,33 +4,23 @@
|
|||
|
||||
.version-list {
|
||||
width: 100%;
|
||||
border: 1px solid rgba(5, 5, 5, 0.06);
|
||||
border: 1px solid var(--ant-color-border-secondary);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.dark .version-list,
|
||||
html[data-theme='ultra-dark'] .version-list {
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.version-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
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 {
|
||||
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 {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
|
|
|||
|
|
@ -4,33 +4,23 @@
|
|||
|
||||
.version-list {
|
||||
width: 100%;
|
||||
border: 1px solid rgba(5, 5, 5, 0.06);
|
||||
border: 1px solid var(--ant-color-border-secondary);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.dark .version-list,
|
||||
html[data-theme='ultra-dark'] .version-list {
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.version-list-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
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 {
|
||||
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 {
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
gap: 8px;
|
||||
}
|
||||
|
||||
body.dark .node-card {
|
||||
.nodes-page.is-dark .node-card {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,22 @@
|
|||
.preset-list {
|
||||
border: 1px solid rgba(5, 5, 5, 0.06);
|
||||
border: 1px solid var(--ant-color-border-secondary);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.dark .preset-list,
|
||||
html[data-theme='ultra-dark'] .preset-list {
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.preset-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
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 {
|
||||
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 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,12 +18,8 @@
|
|||
width: 130px;
|
||||
}
|
||||
|
||||
.row-odd {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
body.dark .row-odd {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
.nord-data-table .row-odd {
|
||||
background: rgba(128, 128, 128, 0.06);
|
||||
}
|
||||
|
||||
.zero-margin {
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
body.dark .address-pill {
|
||||
.xray-page.is-dark .address-pill {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
background: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
body.dark .criterion-more {
|
||||
.xray-page.is-dark .criterion-more {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
|
|
@ -222,11 +222,11 @@ body.dark .criterion-more {
|
|||
opacity: 0.4;
|
||||
}
|
||||
|
||||
body.dark .rule-card {
|
||||
.xray-page.is-dark .rule-card {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,12 +18,8 @@
|
|||
width: 130px;
|
||||
}
|
||||
|
||||
.row-odd {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
body.dark .row-odd {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
.warp-data-table .row-odd {
|
||||
background: rgba(128, 128, 128, 0.06);
|
||||
}
|
||||
|
||||
.zero-margin {
|
||||
|
|
|
|||
Loading…
Reference in a new issue