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

Refine Harbor mode swap icon animation
All checks were successful
Build and Deploy Gateway / build-and-push (push) Successful in 12s
Details
Build and Deploy Gateway / deploy (push) Successful in 1s
Details

Browse Source
This commit is contained in:
Dmitriy Petrov
2026-07-11 15:56:02 +03:00
parent aa54be9c9b
commit 89feffd0b7
2 changed files with 26 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/web/styles.css
View File

@@ -288,6 +288,7 @@ p {
transition: color 320ms ease, opacity 320ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.harbor-mode-swap g,
.harbor-mode-swap path {
transform-box: fill-box;
transform-origin: center;
@@ -295,10 +296,20 @@ p {
.harbor-mode-swap .is-connect {
stroke: var(--harbor-connect);
transition: transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
}
.harbor-mode-swap .is-gateway {
stroke: var(--harbor-gateway);
transition: transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
}
.harbor-brand.is-gateway-active .harbor-mode-swap .is-connect {
transform: translateY(6px);
}
.harbor-brand.is-gateway-active .harbor-mode-swap .is-gateway {
transform: translateY(-6px);
}
.harbor-mode-tooltip {
@@ -345,24 +356,24 @@ p {
opacity: 1;
}
.harbor-brand-control:hover .harbor-mode-swap .is-connect,
.harbor-brand-control:focus-visible .harbor-mode-swap .is-connect {
animation: harbor-arrow-float-up 1500ms ease-in-out infinite;
.harbor-brand-control:hover .harbor-mode-swap .is-connect path,
.harbor-brand-control:focus-visible .harbor-mode-swap .is-connect path {
animation: harbor-arrow-float-right 1500ms ease-in-out infinite;
}
.harbor-brand-control:hover .harbor-mode-swap .is-gateway,
.harbor-brand-control:focus-visible .harbor-mode-swap .is-gateway {
animation: harbor-arrow-float-down 1500ms ease-in-out infinite;
.harbor-brand-control:hover .harbor-mode-swap .is-gateway path,
.harbor-brand-control:focus-visible .harbor-mode-swap .is-gateway path {
animation: harbor-arrow-float-left 1500ms ease-in-out infinite;
}
@keyframes harbor-arrow-float-up {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-1.5px); }
@keyframes harbor-arrow-float-right {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(1.5px); }
}
@keyframes harbor-arrow-float-down {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(1.5px); }
@keyframes harbor-arrow-float-left {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(-1.5px); }
}
.client-instructions-toggle {
@@ -1839,6 +1850,7 @@ p {
}
.harbor-mode-stack em,
.harbor-mode-swap g,
.harbor-mode-swap path,
.harbor-brand .harbor-mode-swap,
.harbor-mode-tooltip {