mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-08-13 06:40:59 +00:00
feat(clients): live online dot + last-online tooltip on offline
Two small UX cues on the clients table online column: - a pulsing green dot next to the Online tag so an active client reads as live at a glance (honors prefers-reduced-motion). - hovering the Offline tag shows the client's last-online timestamp from record.traffic.lastOnline, formatted with the panel's calendar setting (or "-" when the client has never connected).
This commit is contained in:
@@ -62,6 +62,26 @@
|
||||
.dot-orange { background: var(--ant-color-warning); }
|
||||
.dot-gray { background: var(--ant-color-text-quaternary); }
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@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; }
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
margin: 0 0 0 4px;
|
||||
font-size: 11px;
|
||||
|
||||
Reference in New Issue
Block a user