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

Refine harbor brand mode swap positioning and styling
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 15:24:23 +03:00
parent a58fb26e4f
commit e6bcdc9c62
1 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/web/styles.css
View File

@@ -135,6 +135,7 @@ p {
} }
.harbor-brand-content { .harbor-brand-content {
position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 9px; gap: 9px;
@@ -207,12 +208,12 @@ p {
transition: color 420ms ease, opacity 420ms ease, filter 420ms ease, transform 560ms cubic-bezier(0.16, 1, 0.3, 1); transition: color 420ms ease, opacity 420ms ease, filter 420ms ease, transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
} }
.harbor-mode-connect { .harbor-brand .harbor-mode-connect {
z-index: 2; z-index: 2;
color: var(--harbor-connect); color: var(--harbor-connect);
} }
.harbor-mode-gateway { .harbor-brand .harbor-mode-gateway {
z-index: 1; z-index: 1;
color: var(--harbor-gateway); color: var(--harbor-gateway);
opacity: 0.2; opacity: 0.2;
@@ -235,18 +236,26 @@ p {
} }
.harbor-brand .harbor-mode-swap { .harbor-brand .harbor-mode-swap {
position: absolute;
top: 50%;
left: calc(100% + 12px);
width: 14px; width: 14px;
height: 14px; height: 14px;
opacity: 0.42; color: var(--harbor-connect);
opacity: 0.82;
stroke-width: 1.35; stroke-width: 1.35;
transform: translateY(-50%);
transition: color 320ms ease, opacity 320ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1); transition: color 320ms ease, opacity 320ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
} }
.harbor-brand.is-gateway-active .harbor-mode-swap {
color: var(--harbor-gateway);
}
.harbor-brand-control:hover .harbor-mode-swap, .harbor-brand-control:hover .harbor-mode-swap,
.harbor-brand-control:focus-visible .harbor-mode-swap { .harbor-brand-control:focus-visible .harbor-mode-swap {
color: var(--harbor-gateway);
opacity: 1; opacity: 1;
transform: translateX(1px); transform: translate(1px, -50%);
} }
.client-instructions-toggle { .client-instructions-toggle {