arswarog
8596500665
Заменяет захардкоженное "Ready to help" на живой индикатор. Статус берётся из поля status ответа GET /v1/status, капитализируется и показывается справа от имени бота. Polling каждые 30с, пауза при скрытой вкладке, recheck по клику, tooltip с API URL.
54 lines
947 B
CSS
54 lines
947 B
CSS
.Status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
padding: 0;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: var(--ifm-color-emphasis-600);
|
|
font-size: 0.85rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.Status:hover .Status__label {
|
|
color: var(--ifm-color-emphasis-800);
|
|
}
|
|
|
|
.Status:focus-visible {
|
|
outline: 2px solid var(--ifm-color-primary);
|
|
outline-offset: 2px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.Status__dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--ifm-color-emphasis-400);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.Status_kind_server .Status__dot {
|
|
background: #22c55e;
|
|
}
|
|
|
|
.Status_kind_offline .Status__dot {
|
|
background: #ef4444;
|
|
}
|
|
|
|
.Status_kind_connecting .Status__dot {
|
|
background: #eab308;
|
|
animation: Status__pulse 1s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes Status__pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.4;
|
|
}
|
|
}
|