Polish server health checking feedback and bump Harbor versions
This commit is contained in:
+64
-1
@@ -2717,6 +2717,34 @@ p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.client-server-health {
|
||||
min-height: 14px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.client-server-health > span {
|
||||
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 {
|
||||
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;
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
.client-server-health.is-checking .client-server-health-checking {
|
||||
opacity: 1;
|
||||
filter: blur(0);
|
||||
}
|
||||
|
||||
.client-servers.is-scalable {
|
||||
width: min(100%, 360px);
|
||||
margin-inline: auto;
|
||||
@@ -2766,8 +2794,37 @@ p {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--client-muted);
|
||||
font: 700 8px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
font: 700 9px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
|
||||
cursor: pointer;
|
||||
transition: color 300ms ease, opacity 300ms ease, text-shadow 500ms ease;
|
||||
}
|
||||
|
||||
.client-server-check svg {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 1.6;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.client-server-check.is-checking {
|
||||
color: var(--client-accent);
|
||||
opacity: 1;
|
||||
text-shadow: 0 0 9px color-mix(in oklch, var(--client-accent) 46%, transparent);
|
||||
}
|
||||
|
||||
.client-server-check.is-checking svg {
|
||||
animation: client-server-check-spin 700ms linear infinite;
|
||||
}
|
||||
|
||||
@keyframes client-server-check-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.client-server-check:hover:not(:disabled),
|
||||
@@ -2782,6 +2839,9 @@ p {
|
||||
|
||||
.client-server-check:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.client-server-check:disabled:not(.is-checking) {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
@@ -3553,6 +3613,9 @@ p {
|
||||
.client-usage > strong,
|
||||
.client-server,
|
||||
.client-server-auto,
|
||||
.client-server-health > span,
|
||||
.client-server-check,
|
||||
.client-server-check svg,
|
||||
.client-server-mode-toggle,
|
||||
.client-server-mode-toggle svg,
|
||||
.client-server-mode-panel,
|
||||
|
||||
Reference in New Issue
Block a user