dokril/harbor-net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Polish client duration and tooltip interactions
All checks were successful
Build and Deploy Gateway / build-and-push (push) Successful in 13s
Details
Build and Deploy Gateway / deploy (push) Successful in 1s
Details

Browse Source
This commit is contained in:
Dmitriy Petrov
2026-07-11 16:12:09 +03:00
parent 85053f9948
commit 322f5a125b
6 changed files with 109 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/web/styles.css
View File

@@ -346,7 +346,7 @@ p {
gap: 2px;
padding: 5px 6px;
border-radius: 5px;
background: color-mix(in oklch, var(--client-panel) 64%, transparent);
background: color-mix(in oklch, var(--client-panel) 68%, transparent);
box-shadow: 0 5px 18px oklch(0.08 0.015 145 / 0.1);
backdrop-filter: blur(8px) saturate(0.9);
color: var(--client-muted);
@@ -359,7 +359,7 @@ p {
filter: blur(2px);
pointer-events: none;
transform: translateY(3px);
transition: opacity 240ms ease, filter 320ms ease, transform 400ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 400ms;
transition: opacity 90ms ease, filter 120ms ease, transform 140ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 140ms;
}
.harbor-mode-tooltip strong {
@@ -373,7 +373,7 @@ p {
visibility: visible;
filter: blur(0);
transform: translateY(0);
transition-delay: 120ms, 120ms, 120ms, 0s;
transition-delay: 20ms, 20ms, 20ms, 0s;
}
.harbor-brand-control:hover .harbor-mode-swap,
@@ -968,6 +968,16 @@ p {
content: ' ';
}
.client-duration-seconds-value {
display: inline-block;
animation: client-second-tick 380ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes client-second-tick {
from { opacity: 0.28; filter: blur(3px); transform: scale(0.9); }
to { opacity: 1; filter: blur(0); transform: scale(1); }
}
.client-duration-toggle {
width: 290px;
min-height: 24px;
@@ -990,6 +1000,44 @@ p {
outline: none;
}
.client-tooltip-anchor {
position: relative;
}
.client-tooltip {
position: absolute;
top: calc(100% + 6px);
left: 50%;
z-index: 12;
width: max-content;
max-width: 220px;
padding: 6px 8px;
border-radius: 8px;
background: color-mix(in oklch, var(--client-panel) 68%, transparent);
box-shadow: 0 7px 22px oklch(0.08 0.015 145 / 0.1);
backdrop-filter: blur(10px) saturate(0.9);
color: var(--client-text);
font: 600 10px/1.35 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
letter-spacing: 0;
text-align: center;
white-space: normal;
opacity: 0;
visibility: hidden;
filter: blur(2px);
pointer-events: none;
transform: translate(-50%, -2px);
transition: opacity 90ms ease, filter 120ms ease, transform 140ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 140ms;
}
.client-tooltip-anchor:hover > .client-tooltip,
.client-tooltip-anchor:focus-visible > .client-tooltip {
opacity: 1;
visibility: visible;
filter: blur(0);
transform: translate(-50%, 0);
transition-delay: 20ms, 20ms, 20ms, 0s;
}
.client-power-section p {
min-height: 0;
line-height: 20px;
@@ -1855,6 +1903,7 @@ p {
.client-access-point,
.client-copy-feedback,
.client-duration,
.client-duration-seconds-value,
.client-instructions,
.client-instructions-toggle,
.client-instructions-toggle svg,
@@ -1899,6 +1948,10 @@ p {
animation: none;
}
.client-tooltip {
transition: none;
}
.client-state-copy h2,
.client-state-detail > * {
animation: none;