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

Refine server picker toggle and bump Harbor versions
All checks were successful
Build and Deploy Gateway / build-and-push (push) Successful in 15s
Details
Build and Deploy Gateway / deploy (push) Successful in 7s
Details

Browse Source
This commit is contained in:
Dmitriy Petrov
2026-07-12 14:31:34 +03:00
parent d9745e9aed
commit fca3c0b705
4 changed files with 215 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/web/styles.css
View File

@@ -2708,7 +2708,10 @@ p {
.client-server-mode-toggle {
min-height: 32px;
display: block;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
margin: 0 auto 8px;
padding: 5px 8px;
border: 0;
@@ -2716,14 +2719,94 @@ p {
color: var(--client-muted);
font: 700 9px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
cursor: pointer;
transition: color 220ms ease, text-shadow 320ms ease;
}
.client-server-mode-toggle:hover {
.client-server-mode-toggle:hover,
.client-server-mode-toggle.is-open {
color: var(--client-accent);
text-shadow: 0 0 10px color-mix(in oklch, var(--client-accent) 38%, transparent);
}
.client-server-scroll > .client-server-mode-toggle {
margin-top: 8px;
.client-server-mode-toggle svg {
width: 10px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.client-server-mode-toggle.is-open svg {
transform: rotate(180deg);
}
.client-server-mode-panels {
display: grid;
}
.client-server-mode-panel {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
visibility: hidden;
filter: blur(7px);
transform: translateY(-10px);
transition:
grid-template-rows 620ms cubic-bezier(0.16, 1, 0.3, 1),
opacity 260ms ease,
filter 420ms ease,
transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
visibility 0s 620ms;
}
.client-server-mode-panel.is-open {
grid-template-rows: 1fr;
opacity: 1;
visibility: visible;
filter: blur(0);
transform: translateY(0);
transition-delay: 0s;
}
.client-server-mode-panel-inner {
min-height: 0;
overflow: hidden;
}
.client-server-mode-panel.is-advanced .client-server-tools,
.client-server-mode-panel.is-advanced .client-server-pinned,
.client-server-mode-panel.is-advanced .client-server-scroll {
opacity: 0;
filter: blur(5px);
transform: translateY(-8px);
transition: opacity 300ms ease, filter 440ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
.client-server-mode-panel.is-advanced.is-open .client-server-tools,
.client-server-mode-panel.is-advanced.is-open .client-server-pinned,
.client-server-mode-panel.is-advanced.is-open .client-server-scroll {
opacity: 1;
filter: blur(0);
transform: translateY(0);
}
.client-server-mode-panel.is-advanced.is-open .client-server-tools {
transition-delay: 90ms;
}
.client-server-mode-panel.is-advanced.is-open .client-server-pinned {
transition-delay: 150ms;
}
.client-server-mode-panel.is-advanced.is-open .client-server-scroll {
transition-delay: 210ms;
}
.client-server-overflow-note {
margin: 10px 0 0;
color: var(--client-muted);
font-size: 9px;
text-align: center;
}
.client-server-tools input {
@@ -3398,6 +3481,11 @@ p {
.client-server,
.client-server-auto,
.client-server-mode-toggle,
.client-server-mode-toggle svg,
.client-server-mode-panel,
.client-server-mode-panel .client-server-tools,
.client-server-mode-panel .client-server-pinned,
.client-server-mode-panel .client-server-scroll,
.client-server-favorite,
.client-server-group-toggle,
.client-server-more,