Refine server health loading indicator and bump Harbor versions
This commit is contained in:
@@ -53,7 +53,9 @@ function ServerHealth({ ping, fallback }) {
|
||||
aria-label={ping?.checking ? 'Проверяем пинг' : health}
|
||||
>
|
||||
<span aria-hidden="true">{health}</span>
|
||||
<span className="client-server-health-checking" aria-hidden="true">Проверяем…</span>
|
||||
<svg className="client-server-health-checking" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M21 12a9 9 0 0 0-15.2-6.5L3 8m0-5v5h5M3 12a9 9 0 0 0 15.2 6.5L21 16m0 5v-5h-5" />
|
||||
</svg>
|
||||
</small>;
|
||||
}
|
||||
|
||||
|
||||
+15
-7
@@ -2697,31 +2697,38 @@ p {
|
||||
.client-server-meta .client-server-health {
|
||||
width: 42px;
|
||||
min-height: 44px;
|
||||
place-items: end center;
|
||||
padding-bottom: 4px;
|
||||
border-bottom: 1px solid var(--client-accent);
|
||||
place-items: end start;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
|
||||
.client-server-health > span {
|
||||
.client-server-health > span,
|
||||
.client-server-health > svg {
|
||||
grid-area: 1 / 1;
|
||||
transition: opacity 420ms ease, filter 520ms cubic-bezier(0.16, 1, 0.3, 1), color 520ms ease;
|
||||
}
|
||||
|
||||
.client-server-health-checking {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 1.6;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
color: var(--client-accent);
|
||||
opacity: 0;
|
||||
filter: blur(4px);
|
||||
text-shadow: 0 0 8px color-mix(in oklch, var(--client-accent) 42%, transparent);
|
||||
}
|
||||
|
||||
.client-server-health.is-checking > span:first-child {
|
||||
opacity: 0.32;
|
||||
opacity: 0;
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
.client-server-health.is-checking .client-server-health-checking {
|
||||
opacity: 1;
|
||||
filter: blur(0);
|
||||
animation: client-server-check-spin 700ms linear infinite;
|
||||
}
|
||||
|
||||
.client-servers.is-scalable {
|
||||
@@ -3058,7 +3065,7 @@ p {
|
||||
min-height: 44px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
margin-left: 8px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.client-server-row .client-server {
|
||||
@@ -3619,6 +3626,7 @@ p {
|
||||
.client-server,
|
||||
.client-server-auto,
|
||||
.client-server-health > span,
|
||||
.client-server-health > svg,
|
||||
.client-server-check,
|
||||
.client-server-check svg,
|
||||
.client-server-mode-toggle,
|
||||
|
||||
Reference in New Issue
Block a user