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): swap neutral gray rgba literals for AntD CSS variables

Browse source 
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.
This commit is contained in:
MHSanaei 2026-05-25 13:20:59 +02:00
parent b6cdab62ac
commit 5b10e9141f
No known key found for this signature in database
GPG key ID: 7E4060F2FBE5AB7A
13 changed files with 28 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/pages/api-docs/ApiDocsPage.css
View file

@ -51,7 +51,7 @@
.api-docs-page .docs-wrapper { .api-docs-page .docs-wrapper {
background: var(--bg-card); background: var(--bg-card);
border-radius: 8px; border-radius: 8px;
border: 1px solid rgba(128, 128, 128, 0.12); border: 1px solid var(--ant-color-border-secondary);
overflow: hidden; overflow: hidden;
} }

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

@ -40,7 +40,7 @@
} }
.link-panel { .link-panel {
border: 1px solid rgba(128, 128, 128, 0.2); border: 1px solid var(--ant-color-border);
border-radius: 8px; border-radius: 8px;
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;

13
frontend/src/pages/clients/ClientsPage.tsx
View file

@ -216,13 +216,12 @@ export default function ClientsPage() {
return 'active'; return 'active';
}, [expireDiff, trafficDiff]); }, [expireDiff, trafficDiff]);
function bucketBadgeColor(bucket: Bucket | null): string { function bucketBadgeStatus(bucket: Bucket | null): 'success' | 'warning' | 'error' | 'default' {
switch (bucket) { switch (bucket) {
case 'depleted': return '#ff4d4f'; case 'depleted': return 'error';
case 'expiring': return '#fa8c16'; case 'expiring': return 'warning';
case 'deactive': return 'rgba(128,128,128,0.6)'; case 'active': return 'success';
case 'active': return '#52c41a'; default: return 'default';
default: return 'rgba(128,128,128,0.6)';
} }
} }
@ -838,7 +837,7 @@ export default function ClientsPage() {
checked={selectedRowKeys.includes(row.email)} checked={selectedRowKeys.includes(row.email)}
onChange={(e) => toggleSelect(row.email, e.target.checked)} onChange={(e) => toggleSelect(row.email, e.target.checked)}
/> />
<Badge color={bucketBadgeColor(bucket)} /> <Badge status={bucketBadgeStatus(bucket)} />
<span className="tag-name">{row.email}</span> <span className="tag-name">{row.email}</span>
{bucket === 'depleted' && <Tag color="red" className="status-tag">{t('depleted')}</Tag>} {bucket === 'depleted' && <Tag color="red" className="status-tag">{t('depleted')}</Tag>}
{bucket === 'expiring' && <Tag color="orange" className="status-tag">{t('depletingSoon')}</Tag>} {bucket === 'expiring' && <Tag color="orange" className="status-tag">{t('depletingSoon')}</Tag>}

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

@ -39,7 +39,7 @@
align-items: center; align-items: center;
gap: 12px; gap: 12px;
padding: 6px 0; padding: 6px 0;
border-bottom: 1px solid rgba(128, 128, 128, 0.12); border-bottom: 1px solid var(--ant-color-border-secondary);
} }
.info-row:last-child { .info-row:last-child {
@ -108,7 +108,7 @@
.share-buttons { .share-buttons {
margin-inline-start: 4px; margin-inline-start: 4px;
padding-inline-start: 8px; padding-inline-start: 8px;
border-inline-start: 1px solid rgba(128, 128, 128, 0.25); border-inline-start: 1px solid var(--ant-color-border);
} }
.summary-table { .summary-table {
@ -153,7 +153,7 @@
} }
.link-panel { .link-panel {
border: 1px solid rgba(128, 128, 128, 0.2); border: 1px solid var(--ant-color-border);
border-radius: 8px; border-radius: 8px;
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;

9
frontend/src/pages/inbounds/InboundList.css
View file

@ -66,20 +66,15 @@
} }
.inbound-card { .inbound-card {
border: 1px solid rgba(128, 128, 128, 0.2); border: 1px solid var(--ant-color-border-secondary);
border-radius: 10px; border-radius: 10px;
padding: 12px; padding: 12px;
background: rgba(255, 255, 255, 0.02); background: var(--ant-color-fill-quaternary);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
} }
.inbounds-page.is-dark .inbound-card {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.1);
}
.card-head { .card-head {
display: flex; display: flex;
align-items: center; align-items: center;

2
frontend/src/pages/inbounds/QrPanel.css
View file

@ -1,5 +1,5 @@
.qr-panel { .qr-panel {
border: 1px solid rgba(128, 128, 128, 0.2); border: 1px solid var(--ant-color-border-secondary);
border-radius: 8px; border-radius: 8px;
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;

2
frontend/src/pages/index/LogModal.css
View file

@ -32,7 +32,7 @@
word-break: break-word; word-break: break-word;
max-height: 60vh; max-height: 60vh;
overflow-y: auto; overflow-y: auto;
border: 1px solid rgba(128, 128, 128, 0.25); border: 1px solid var(--ant-color-border);
border-radius: 6px; border-radius: 6px;
background: rgba(0, 0, 0, 0.04); background: rgba(0, 0, 0, 0.04);
} }

2
frontend/src/pages/index/XrayLogModal.css
View file

@ -23,7 +23,7 @@
line-height: 1.5; line-height: 1.5;
max-height: 60vh; max-height: 60vh;
overflow: auto; overflow: auto;
border: 1px solid rgba(128, 128, 128, 0.25); border: 1px solid var(--ant-color-border);
border-radius: 6px; border-radius: 6px;
background: rgba(0, 0, 0, 0.04); background: rgba(0, 0, 0, 0.04);
} }

11
frontend/src/pages/nodes/NodeList.css
View file

@ -52,20 +52,15 @@
} }
.node-card { .node-card {
border: 1px solid rgba(128, 128, 128, 0.2); border: 1px solid var(--ant-color-border-secondary);
border-radius: 10px; border-radius: 10px;
padding: 12px; padding: 12px;
background: rgba(255, 255, 255, 0.02); background: var(--ant-color-fill-quaternary);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
} }
.nodes-page.is-dark .node-card {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.1);
}
.card-head { .card-head {
display: flex; display: flex;
align-items: center; align-items: center;
@ -135,7 +130,7 @@
.card-history { .card-history {
margin-top: 4px; margin-top: 4px;
padding-top: 8px; padding-top: 8px;
border-top: 1px solid rgba(128, 128, 128, 0.15); border-top: 1px solid var(--ant-color-border-secondary);
} }
.card-empty { .card-empty {

4
frontend/src/pages/settings/SecurityTab.css
View file

@ -22,7 +22,7 @@
} }
.api-token-row { .api-token-row {
border: 1px solid rgba(128, 128, 128, 0.18); border: 1px solid var(--ant-color-border-secondary);
border-radius: 8px; border-radius: 8px;
padding: 10px 12px; padding: 10px 12px;
display: flex; display: flex;
@ -78,7 +78,7 @@
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12.5px; font-size: 12.5px;
padding: 4px 8px; padding: 4px 8px;
background: rgba(128, 128, 128, 0.08); background: var(--ant-color-fill-tertiary);
border-radius: 4px; border-radius: 4px;
word-break: break-all; word-break: break-all;
} }

2
frontend/src/pages/xray/NordModal.css
View file

@ -19,7 +19,7 @@
} }
.nord-data-table .row-odd { .nord-data-table .row-odd {
background: rgba(128, 128, 128, 0.06); background: var(--ant-color-fill-tertiary);
} }
.zero-margin { .zero-margin {

10
frontend/src/pages/xray/RoutingTab.css
View file

@ -113,7 +113,7 @@
gap: 8px; gap: 8px;
padding: 10px 12px; padding: 10px 12px;
background: var(--bg-card, #fff); background: var(--bg-card, #fff);
border: 1px solid rgba(128, 128, 128, 0.15); border: 1px solid var(--ant-color-border-secondary);
border-radius: 8px; border-radius: 8px;
transition: opacity 0.15s, box-shadow 0.15s; transition: opacity 0.15s, box-shadow 0.15s;
} }
@ -123,11 +123,11 @@
} }
.rule-card.drop-before { .rule-card.drop-before {
box-shadow: inset 0 2px 0 0 #1677ff; box-shadow: inset 0 2px 0 0 var(--ant-color-primary);
} }
.rule-card.drop-after { .rule-card.drop-after {
box-shadow: inset 0 -2px 0 0 #1677ff; box-shadow: inset 0 -2px 0 0 var(--ant-color-primary);
} }
.rule-card-head { .rule-card-head {
@ -188,7 +188,7 @@
flex-wrap: wrap; flex-wrap: wrap;
gap: 4px; gap: 4px;
padding-top: 6px; padding-top: 6px;
border-top: 1px dashed rgba(128, 128, 128, 0.2); border-top: 1px dashed var(--ant-color-border);
} }
.criterion-chip { .criterion-chip {
@ -197,7 +197,7 @@
gap: 4px; gap: 4px;
padding: 1px 6px; padding: 1px 6px;
font-size: 11px; font-size: 11px;
background: rgba(128, 128, 128, 0.08); background: var(--ant-color-fill-tertiary);
border-radius: 4px; border-radius: 4px;
max-width: 100%; max-width: 100%;
overflow: hidden; overflow: hidden;

2
frontend/src/pages/xray/WarpModal.css
View file

@ -19,7 +19,7 @@
} }
.warp-data-table .row-odd { .warp-data-table .row-odd {
background: rgba(128, 128, 128, 0.06); background: var(--ant-color-fill-tertiary);
} }
.zero-margin { .zero-margin {