mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-06-06 05:04:22 +00:00
b6cdab62ac
The dot/badge/pill styles still hardcoded AntD's default palette values (#52c41a, #1677ff, #ff4d4f, #fa8c16, #ff4d4f). Replace each with its semantic --ant-color-* equivalent so they auto-adapt to any theme customization through ConfigProvider. - ClientsPage: .dot-green/.dot-blue/.dot-red/.dot-orange/.dot-gray now use --ant-color-success / -primary / -error / -warning / -text-quaternary. .bulk-count / .client-card / .client-card.is-selected backgrounds use color-mix on --ant-color-primary and --ant-color-fill-quaternary, which also let the body-dark .client-card fork go away. - XrayMetricsModal: .obs-dot is-alive/is-dead and its pulse keyframe now build their box-shadow tint via color-mix on --ant-color-success and --ant-color-error instead of rgba literals. - IndexPage: .action-update warning color uses --ant-color-warning. - OutboundsTab: .outbound-card border, .address-pill background, and .mode-badge tint now use AntD CSS variables; the .xray-page.is-dark .address-pill fork is gone. - InboundFormModal/InboundsPage/ClientBulkAddModal: drop the stale `, #1677ff`/`, #1890ff` fallbacks on var(--ant-color-primary), and switch .danger-icon to --ant-color-error. The teal/cyan brand colors (#008771, #3c89e8, #e04141) used by traffic and pill rows are intentionally kept hardcoded — they are brand-specific shades, not AntD palette colors.
211 lines
3.2 KiB
CSS
211 lines
3.2 KiB
CSS
.toolbar-right {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.card-empty {
|
|
text-align: center;
|
|
opacity: 0.4;
|
|
padding: 16px 0;
|
|
}
|
|
|
|
.outbound-card {
|
|
border: 1px solid var(--ant-color-border-secondary);
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.card-head {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
|
|
.card-identity {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.card-num {
|
|
font-weight: 500;
|
|
opacity: 0.7;
|
|
min-width: 18px;
|
|
text-align: right;
|
|
}
|
|
|
|
.tag-name {
|
|
font-weight: 500;
|
|
max-width: 200px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
}
|
|
|
|
.protocol-line {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
gap: 2px;
|
|
}
|
|
|
|
.address-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
}
|
|
|
|
.address-pill {
|
|
font-size: 11px;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
background: var(--ant-color-fill-tertiary);
|
|
}
|
|
|
|
.action-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.row-index {
|
|
font-weight: 500;
|
|
opacity: 0.7;
|
|
min-width: 18px;
|
|
text-align: right;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 4px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.identity-cell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.card-foot {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.card-test {
|
|
margin-left: auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.traffic-up {
|
|
color: #008771;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.traffic-down {
|
|
color: #3c89e8;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.traffic-sep {
|
|
display: inline-block;
|
|
width: 4px;
|
|
}
|
|
|
|
.pill-ok,
|
|
.pill-fail {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 1px 8px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.pill-ok {
|
|
color: #008771;
|
|
background: rgba(0, 135, 113, 0.12);
|
|
}
|
|
|
|
.pill-fail {
|
|
color: #e04141;
|
|
background: rgba(224, 65, 65, 0.12);
|
|
}
|
|
|
|
.empty {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.outbound-test-popover .timing-breakdown {
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
min-width: 180px;
|
|
max-width: 320px;
|
|
}
|
|
|
|
.outbound-test-popover .td-head {
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.outbound-test-popover .td-head.ok {
|
|
color: #008771;
|
|
}
|
|
|
|
.outbound-test-popover .td-head.fail {
|
|
color: #e04141;
|
|
}
|
|
|
|
.outbound-test-popover .mode-badge {
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
padding: 0 6px;
|
|
border-radius: 8px;
|
|
background: color-mix(in srgb, var(--ant-color-primary) 12%, transparent);
|
|
color: var(--ant-color-primary);
|
|
margin-left: auto;
|
|
}
|
|
|
|
.outbound-test-popover .endpoint-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 11px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.outbound-test-popover .endpoint-row .ep-addr {
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.outbound-test-popover .endpoint-row .ep-meta {
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.outbound-test-popover .dot-ok {
|
|
color: #008771;
|
|
}
|
|
|
|
.outbound-test-popover .dot-fail {
|
|
color: #e04141;
|
|
}
|