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): 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 {
background: var(--bg-card);
border-radius: 8px;
border: 1px solid rgba(128, 128, 128, 0.12);
border: 1px solid var(--ant-color-border-secondary);
overflow: hidden;
}

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

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

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

@ -216,13 +216,12 @@ export default function ClientsPage() {
return 'active';
}, [expireDiff, trafficDiff]);
function bucketBadgeColor(bucket: Bucket | null): string {
function bucketBadgeStatus(bucket: Bucket | null): 'success' | 'warning' | 'error' | 'default' {
switch (bucket) {
case 'depleted': return '#ff4d4f';
case 'expiring': return '#fa8c16';
case 'deactive': return 'rgba(128,128,128,0.6)';
case 'active': return '#52c41a';
default: return 'rgba(128,128,128,0.6)';
case 'depleted': return 'error';
case 'expiring': return 'warning';
case 'active': return 'success';
default: return 'default';
}
}
@ -838,7 +837,7 @@ export default function ClientsPage() {
checked={selectedRowKeys.includes(row.email)}
onChange={(e) => toggleSelect(row.email, e.target.checked)}
/>
<Badge color={bucketBadgeColor(bucket)} />
<Badge status={bucketBadgeStatus(bucket)} />
<span className="tag-name">{row.email}</span>
{bucket === 'depleted' && <Tag color="red" className="status-tag">{t('depleted')}</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;
gap: 12px;
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 {
@ -108,7 +108,7 @@
.share-buttons {
margin-inline-start: 4px;
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 {
@ -153,7 +153,7 @@
}
.link-panel {
border: 1px solid rgba(128, 128, 128, 0.2);
border: 1px solid var(--ant-color-border);
border-radius: 8px;
padding: 10px;
margin-bottom: 10px;

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

@ -66,20 +66,15 @@
}
.inbound-card {
border: 1px solid rgba(128, 128, 128, 0.2);
border: 1px solid var(--ant-color-border-secondary);
border-radius: 10px;
padding: 12px;
background: rgba(255, 255, 255, 0.02);
background: var(--ant-color-fill-quaternary);
display: flex;
flex-direction: column;
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 {
display: flex;
align-items: center;

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

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

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

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

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

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

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

@ -52,20 +52,15 @@
}
.node-card {
border: 1px solid rgba(128, 128, 128, 0.2);
border: 1px solid var(--ant-color-border-secondary);
border-radius: 10px;
padding: 12px;
background: rgba(255, 255, 255, 0.02);
background: var(--ant-color-fill-quaternary);
display: flex;
flex-direction: column;
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 {
display: flex;
align-items: center;
@ -135,7 +130,7 @@
.card-history {
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid rgba(128, 128, 128, 0.15);
border-top: 1px solid var(--ant-color-border-secondary);
}
.card-empty {

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

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

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

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

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

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

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

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