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

Refine device traffic chart collapse animation
Build and Deploy Gateway / build-and-push (push) Successful in 19s
Details
Build and Deploy Gateway / deploy (push) Successful in 6s
Details

Browse Source
This commit is contained in:
dokril
2026-08-10 00:17:13 +03:00
parent 3a4173db43
commit ec68ba6a7b
7 changed files with 89 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/styles/features/devices.css
+58 -27
View File
@@ -670,13 +670,40 @@
overflow: visible;
}
.client-device.is-pinned .client-device-traffic-chart {
transform-origin: bottom center;
animation: client-device-chart-expand 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
.client-device.is-pinned .client-device-traffic-plot {
transform-origin: top center;
animation: client-device-traffic-plot-expand 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.client-device.is-pinned .client-device-traffic-chart.is-collapsing {
animation-name: client-device-chart-collapse;
.client-device.is-collapsing .client-device-traffic-plot {
transform-origin: top center;
animation: client-device-traffic-plot-collapse 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.client-device.is-pinned .client-device-traffic-axis,
.client-device.is-pinned .client-device-traffic-grid {
animation: client-device-traffic-detail-in 360ms 80ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.client-device.is-collapsing .client-device-traffic-axis {
position: absolute;
top: 0;
left: 0;
width: 34px;
height: 58px;
}
.client-device.is-collapsing .client-device-traffic-axis,
.client-device.is-collapsing .client-device-traffic-grid {
animation: client-device-traffic-detail-out 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.client-device.is-pinned .client-device-traffic-time {
animation: client-device-traffic-time-expand 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.client-device.is-collapsing .client-device-traffic-time {
animation: client-device-traffic-time-collapse 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.client-device-traffic-axis {
@@ -861,30 +888,34 @@
from { opacity: 0; filter: blur(3px); }
}
@keyframes client-device-chart-expand {
from {
opacity: 0.72;
clip-path: inset(calc(100% - 34px) 0 0);
transform: scaleY(0.48);
}
to {
opacity: 1;
clip-path: inset(0);
transform: scaleY(1);
}
@keyframes client-device-traffic-plot-expand {
from { transform: scaleY(0.3448275862); }
to { transform: scaleY(1); }
}
@keyframes client-device-chart-collapse {
from {
opacity: 1;
clip-path: inset(0);
transform: scaleY(1);
}
to {
opacity: 0.72;
clip-path: inset(calc(100% - 34px) 0 0);
transform: scaleY(0.48);
}
@keyframes client-device-traffic-plot-collapse {
from { transform: scaleY(2.9); }
to { transform: scaleY(1); }
}
@keyframes client-device-traffic-time-expand {
from { transform: translateY(-38px); }
to { transform: translateY(0); }
}
@keyframes client-device-traffic-time-collapse {
from { transform: translateY(38px); }
to { transform: translateY(0); }
}
@keyframes client-device-traffic-detail-in {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes client-device-traffic-detail-out {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(5px); }
}
.client-device-policy-wrap {