mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-07-11 18:33:10 +00:00
8f556fe2db
The .online-dot uses vertical-align: middle, which in inline layout aligns to baseline + half x-height — visibly off-centre inside the Ant Tag's line box. Add a .dot-tag utility (inline-flex, align-items: center) and apply it to the Online tag so the dot and label share one centred axis. Other dot usages (Nodes page Space, card heads, stat rows) already sit in flex containers and are unaffected.
74 lines
1.9 KiB
CSS
74 lines
1.9 KiB
CSS
.mt-4 { margin-top: 4px; }
|
|
.mt-8 { margin-top: 8px; }
|
|
.mt-10 { margin-top: 10px; }
|
|
.mt-12 { margin-top: 12px; }
|
|
.mt-20 { margin-top: 20px; }
|
|
|
|
.mb-4 { margin-bottom: 4px; }
|
|
.mb-8 { margin-bottom: 8px; }
|
|
.mb-10 { margin-bottom: 10px; }
|
|
.mb-12 { margin-bottom: 12px; }
|
|
|
|
.ml-8 { margin-left: 8px; }
|
|
|
|
.my-8 { margin: 8px 0; }
|
|
.my-10 { margin: 10px 0; }
|
|
|
|
.zero-margin { margin: 0; }
|
|
|
|
.danger-icon {
|
|
margin-left: 8px;
|
|
cursor: pointer;
|
|
color: var(--ant-color-error);
|
|
}
|
|
|
|
.online-dot {
|
|
display: inline-block;
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
margin-inline-end: 5px;
|
|
vertical-align: middle;
|
|
background: var(--ant-color-success);
|
|
animation: online-blink 1.1s ease-in-out infinite;
|
|
}
|
|
|
|
/* For Tags that carry a status dot: inline layout aligns the dot to
|
|
baseline + half x-height (vertical-align: middle), which sits visibly
|
|
off-centre next to the label; flex centring is exact. */
|
|
.dot-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
@keyframes online-blink {
|
|
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(82, 196, 26, 0.55); }
|
|
50% { opacity: 0.35; box-shadow: 0 0 0 4px rgba(82, 196, 26, 0); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.online-dot { animation: none; }
|
|
}
|
|
|
|
/* Purple indicator for nodes that are reachable via the panel API (status=online)
|
|
but have Xray core in "error" or "stop" state. This is the new "xray failed on node"
|
|
monitoring state. */
|
|
.xray-error-dot {
|
|
display: inline-block;
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
margin-inline-end: 5px;
|
|
vertical-align: middle;
|
|
background: #722ED1;
|
|
animation: xray-error-blink 1.1s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes xray-error-blink {
|
|
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(114, 46, 209, 0.55); }
|
|
50% { opacity: 0.35; box-shadow: 0 0 0 4px rgba(114, 46, 209, 0); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.xray-error-dot { animation: none; }
|
|
}
|