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

Refine device last-seen text morph animation
Build and Deploy Gateway / build-and-push (push) Successful in 13s
Details
Build and Deploy Gateway / deploy (push) Successful in 7s
Details

Browse Source
This commit is contained in:
dokril
2026-08-07 13:52:41 +03:00
parent 76b75624b8
commit 36c8438b7f
4 changed files with 12 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/styles.css
+8 -13
View File
@@ -933,16 +933,8 @@ p {
transform: translate(0, 0);
}
.client-text-morph-filter {
position: absolute;
width: 0;
height: 0;
pointer-events: none;
}
.client-text-morph {
display: inline-grid;
filter: url('#client-text-morph-goo');
}
.client-text-morph-anchor,
@@ -958,20 +950,23 @@ p {
.client-text-morph-value {
will-change: opacity, filter, transform;
transition: opacity 240ms ease, filter 280ms cubic-bezier(0.16, 1, 0.3, 1), transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
filter: blur(0);
transform: translateY(0) scale(1);
transform-origin: right center;
transition: opacity 360ms ease, filter 480ms cubic-bezier(0.16, 1, 0.3, 1), transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.client-text-morph-value.is-relative {
opacity: 0;
filter: blur(4px);
transform: scale(0.9);
filter: blur(8px);
transform: translateY(0.18em) scale(0.96);
}
.client-device-last-seen:hover .client-text-morph-value.is-date,
.client-device-last-seen:focus-visible .client-text-morph-value.is-date {
opacity: 0;
filter: blur(4px);
transform: scale(1.08);
filter: blur(8px);
transform: translateY(-0.18em) scale(1.04);
}
.client-device-last-seen:hover .client-text-morph-value.is-relative,