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

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

Browse Source
This commit is contained in:
Dmitriy Petrov
2026-07-11 16:02:49 +03:00
parent bfc85c3056
commit 9efd446d4e
2 changed files with 32 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/web/styles.css
View File

@@ -246,23 +246,19 @@ p {
transform: none;
}
.harbor-brand-control:hover .harbor-mode-connect,
.harbor-brand-control:focus-visible .harbor-mode-connect {
.harbor-brand-control.is-mode-animating .harbor-mode-connect {
animation: harbor-mode-float-front 1500ms ease-in-out infinite;
}
.harbor-brand-control:hover .harbor-mode-gateway,
.harbor-brand-control:focus-visible .harbor-mode-gateway {
.harbor-brand-control.is-mode-animating .harbor-mode-gateway {
animation: harbor-mode-float-back 1500ms ease-in-out infinite;
}
.harbor-brand.is-gateway-active .harbor-brand-control:hover .harbor-mode-connect,
.harbor-brand.is-gateway-active .harbor-brand-control:focus-visible .harbor-mode-connect {
.harbor-brand.is-gateway-active .harbor-brand-control.is-mode-animating .harbor-mode-connect {
animation-name: harbor-mode-float-back;
}
.harbor-brand.is-gateway-active .harbor-brand-control:hover .harbor-mode-gateway,
.harbor-brand.is-gateway-active .harbor-brand-control:focus-visible .harbor-mode-gateway {
.harbor-brand.is-gateway-active .harbor-brand-control.is-mode-animating .harbor-mode-gateway {
animation-name: harbor-mode-float-front;
}
@@ -357,13 +353,11 @@ p {
opacity: 1;
}
.harbor-brand-control:hover .harbor-mode-swap .is-connect path,
.harbor-brand-control:focus-visible .harbor-mode-swap .is-connect path {
.harbor-brand-control.is-mode-animating .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 path,
.harbor-brand-control:focus-visible .harbor-mode-swap .is-gateway path {
.harbor-brand-control.is-mode-animating .harbor-mode-swap .is-gateway path {
animation: harbor-arrow-float-left 1500ms ease-in-out infinite;
}