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): switch shared components CSS to AntD CSS variables

Browse source 
Replace body.dark / html[data-theme] forks with AntD CSS variables
in shared components (work in both light and dark, scale to ultra):
- SettingListItem: borders + text colours via
  `--ant-color-border-secondary`, `--ant-color-text`,
  `--ant-color-text-tertiary`.
- InputAddon: bg/border/text via `--ant-color-fill-tertiary`,
  `--ant-color-border`, `--ant-color-text`.
- JsonEditor: host border/bg via `--ant-color-border`,
  `--ant-color-bg-container`; focus border via `--ant-color-primary`.
- Sparkline (SVG): grid/text colours via `--ant-color-text*`
  and `--ant-color-border-secondary`; only the tooltip drop-shadow
  retains a body.dark fork (filter opacity needs explicit value).
This commit is contained in:
MHSanaei 2026-05-25 04:13:58 +02:00
parent 1394172d75
commit 178e8a3c03
No known key found for this signature in database
GPG key ID: 7E4060F2FBE5AB7A
4 changed files with 12 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
frontend/src/components/InputAddon.css
View file

@ -5,22 +5,15 @@
height: 32px;
font-size: 14px;
line-height: 30px;
background-color: rgba(0, 0, 0, 0.02);
border: 1px solid #d9d9d9;
background-color: var(--ant-color-fill-tertiary);
border: 1px solid var(--ant-color-border);
border-radius: 6px;
position: relative;
z-index: 1;
color: rgba(0, 0, 0, 0.88);
color: var(--ant-color-text);
white-space: nowrap;
}
body.dark .input-addon,
html[data-theme='ultra-dark'] .input-addon {
background-color: rgba(255, 255, 255, 0.04);
border-color: #424242;
color: rgba(255, 255, 255, 0.85);
}
.ant-space-compact > .input-addon:not(:first-child) {
margin-inline-start: -1px;
}

16
frontend/src/components/JsonEditor.css
View file

@ -1,8 +1,8 @@
.json-editor-host {
border: 1px solid var(--ant-color-border, #d9d9d9);
border: 1px solid var(--ant-color-border);
border-radius: 6px;
overflow: hidden;
background: var(--ant-color-bg-container, #fff);
background: var(--ant-color-bg-container);
}
.json-editor-host .cm-editor,
@ -11,16 +11,6 @@
}
.json-editor-host:focus-within {
border-color: var(--ant-color-primary, #1677ff);
border-color: var(--ant-color-primary);
box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
}
body.dark .json-editor-host {
border-color: #3a3a3c;
background: #1e1e1e;
}
html[data-theme="ultra-dark"] .json-editor-host {
border-color: #1f1f1f;
background: #0a0a0a;
}

21
frontend/src/components/SettingListItem.css
View file

@ -2,18 +2,13 @@
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(5, 5, 5, 0.06);
border-bottom: 1px solid var(--ant-color-border-secondary);
}
.setting-list-item:last-child {
border-bottom: 0;
}
body.dark .setting-list-item,
html[data-theme='ultra-dark'] .setting-list-item {
border-bottom-color: rgba(255, 255, 255, 0.08);
}
.setting-list-meta {
display: flex;
flex-direction: column;
@ -22,22 +17,12 @@ html[data-theme='ultra-dark'] .setting-list-item {
.setting-list-title {
font-size: 14px;
color: rgba(0, 0, 0, 0.88);
color: var(--ant-color-text);
font-weight: 500;
}
.setting-list-description {
font-size: 14px;
color: rgba(0, 0, 0, 0.45);
color: var(--ant-color-text-tertiary);
line-height: 1.5715;
}
body.dark .setting-list-title,
html[data-theme='ultra-dark'] .setting-list-title {
color: rgba(255, 255, 255, 0.85);
}
body.dark .setting-list-description,
html[data-theme='ultra-dark'] .setting-list-description {
color: rgba(255, 255, 255, 0.45);
}

19
frontend/src/components/Sparkline.css
View file

@ -5,17 +5,17 @@
.sparkline-svg .cpu-grid-y-text,
.sparkline-svg .cpu-grid-x-text {
fill: rgba(0, 0, 0, 0.55);
fill: var(--ant-color-text-tertiary);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
letter-spacing: 0.2px;
}
.sparkline-svg .cpu-grid-text {
fill: rgba(0, 0, 0, 0.88);
fill: var(--ant-color-text);
}
.sparkline-svg .cpu-grid-line {
stroke: rgba(0, 0, 0, 0.08);
stroke: var(--ant-color-border-secondary);
}
.sparkline-svg .cpu-tooltip-text {
@ -26,19 +26,6 @@
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
}
body.dark .sparkline-svg .cpu-grid-y-text,
body.dark .sparkline-svg .cpu-grid-x-text {
fill: rgba(255, 255, 255, 0.7);
}
body.dark .sparkline-svg .cpu-grid-text {
fill: rgba(255, 255, 255, 0.95);
}
body.dark .sparkline-svg .cpu-grid-line {
stroke: rgba(255, 255, 255, 0.10);
}
body.dark .sparkline-svg .cpu-tooltip-pill {
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
}