3x-ui/frontend/src/pages/xray/NordModal.css
MHSanaei 5b10e9141f
refactor(frontend): swap neutral gray rgba literals for AntD CSS variables
Across 12 files the same neutral grays kept reappearing — rgba(128,128,128,
0.06|0.08|0.12|0.15|0.18|0.2|0.25) for borders, dividers, and subtle
backgrounds. Each maps cleanly to an AntD CSS variable that already
adapts to light/dark and to any theme customization through ConfigProvider:

- 0.12–0.18 borders → var(--ant-color-border-secondary)
- 0.2–0.25 borders → var(--ant-color-border)
- 0.06–0.08 backgrounds → var(--ant-color-fill-tertiary)
- 0.02–0.03 card surfaces → var(--ant-color-fill-quaternary)

Card surfaces (InboundList .inbound-card, NodeList .node-card) had a
light/dark fork pair — the variable covers both, so the .is-dark .card
override is gone.

RoutingTab .rule-card.drop-before/after used hardcoded #1677ff for the
inset focus shadow; replaced with var(--ant-color-primary) so reordering
indicators follow the theme primary.

ClientsPage bucketBadgeColor returned hex literals (#ff4d4f, #fa8c16,
#52c41a, rgba gray) for a Badge color prop. Switched to status="error"|
"warning"|"success"|"default" so the dot color now comes from AntD's
semantic palette directly.
2026-05-25 13:20:59 +02:00

65 lines
861 B
CSS

.nord-data-table {
margin: 5px 0;
width: 100%;
border-collapse: collapse;
}
.nord-data-table td {
padding: 4px 8px;
word-break: break-all;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 12px;
}
.nord-data-table td:first-child {
font-family: inherit;
font-weight: 500;
white-space: nowrap;
width: 130px;
}
.nord-data-table .row-odd {
background: var(--ant-color-fill-tertiary);
}
.zero-margin {
margin: 0;
}
.mt-8 {
margin-top: 8px;
}
.mt-10 {
margin-top: 10px;
}
.mt-20 {
margin-top: 20px;
}
.my-10 {
margin: 10px 0;
}
.ml-8 {
margin-left: 8px;
}
.server-row {
display: inline-flex;
align-items: center;
gap: 8px;
width: 100%;
}
.server-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.server-load-tag {
margin-right: 0;
flex-shrink: 0;
}