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

Improve client accessibility and bump Harbor versions
All checks were successful
Build and Deploy Gateway / build-and-push (push) Successful in 14s
Details
Build and Deploy Gateway / deploy (push) Successful in 6s
Details

Browse Source
This commit is contained in:
Dmitriy Petrov
2026-07-12 13:24:05 +03:00
parent 5b3d288405
commit 24fda3e34e
7 changed files with 215 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/web/styles.css
View File

@@ -192,6 +192,15 @@ p {
--client-accent: var(--harbor-gateway);
}
.client-live-region {
position: fixed;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.harbor-versions {
position: fixed;
right: max(14px, env(safe-area-inset-right));
@@ -265,10 +274,9 @@ p {
gap: 7px;
padding: 12px 13px;
border-radius: 12px;
background: color-mix(in oklch, var(--client-panel) 84%, transparent);
background: oklch(0.14 0.012 145);
box-shadow: 0 9px 30px oklch(0.08 0.015 145 / 0.16);
backdrop-filter: blur(12px) saturate(0.9);
color: var(--client-muted);
color: oklch(0.88 0.012 145);
font-size: 11px;
font-weight: 500;
line-height: 1.5;
@@ -282,7 +290,7 @@ p {
}
.harbor-version-tooltip strong {
color: var(--client-text);
color: oklch(0.96 0.008 145);
font-size: 11px;
}
@@ -592,10 +600,9 @@ p {
gap: 2px;
padding: 5px 6px;
border-radius: 5px;
background: color-mix(in oklch, var(--client-panel) 68%, transparent);
background: oklch(0.14 0.012 145);
box-shadow: 0 5px 18px oklch(0.08 0.015 145 / 0.1);
backdrop-filter: blur(8px) saturate(0.9);
color: var(--client-muted);
color: oklch(0.88 0.012 145);
font-size: 4px;
line-height: 1.5;
letter-spacing: 0;
@@ -609,7 +616,7 @@ p {
}
.harbor-mode-tooltip strong {
color: var(--client-text);
color: oklch(0.96 0.008 145);
font-size: 4.2px;
}
@@ -865,6 +872,7 @@ p {
}
.client-local-rules-sheet {
position: relative;
min-height: 100%;
padding: 54px 72px 72px 34px;
font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
@@ -1393,6 +1401,7 @@ p {
}
.client-instructions-sheet {
position: relative;
min-height: 100%;
padding: 54px 34px 72px 72px;
font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
@@ -1404,6 +1413,31 @@ p {
margin: 0 8px 38px;
}
.client-drawer-close {
position: absolute;
top: 10px;
right: 10px;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: transparent;
color: var(--client-muted);
font: 400 24px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
cursor: pointer;
transition: color 220ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.client-drawer-close:hover {
color: var(--client-text);
transform: scale(1.08);
}
.client-drawer-close:focus-visible {
outline: 2px solid var(--client-accent);
outline-offset: 2px;
}
.client-instructions-header span,
.client-instruction-summary > span {
color: var(--client-muted);
@@ -1661,6 +1695,12 @@ p {
animation: client-power-arrive 850ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.client-power-section:has(.client-tooltip-anchor:hover),
.client-power-section:has(.client-tooltip-anchor:focus-visible),
.client-power-section:has(.client-tooltip-anchor > :focus-visible) {
z-index: 90;
}
.client-route-rules-pending {
min-height: 17px;
display: flex;
@@ -1958,15 +1998,14 @@ p {
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
z-index: 50;
z-index: 1000;
width: max-content;
max-width: 220px;
padding: 6px 8px;
border-radius: 8px;
background: color-mix(in oklch, var(--client-panel) 78%, transparent);
background: oklch(0.14 0.012 145);
box-shadow: 0 8px 26px oklch(0.08 0.015 145 / 0.16);
backdrop-filter: blur(10px) saturate(0.9);
color: var(--client-text);
color: oklch(0.94 0.008 145);
font: 600 10px/1.35 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
letter-spacing: 0;
text-align: center;
@@ -1980,7 +2019,8 @@ p {
}
.client-tooltip-anchor:hover > .client-tooltip,
.client-tooltip-anchor:focus-within > .client-tooltip {
.client-tooltip-anchor:focus-visible > .client-tooltip,
.client-tooltip-anchor:has(> :focus-visible) > .client-tooltip {
opacity: 1;
visibility: visible;
filter: blur(0);
@@ -2752,6 +2792,10 @@ p {
animation: client-access-reveal 450ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.client-access-point[hidden] {
display: none;
}
@keyframes client-access-reveal {
0% { opacity: 0; filter: blur(4px); }
100% { opacity: 1; filter: blur(0); }
@@ -3054,6 +3098,29 @@ p {
transform: translateX(0);
}
.client-access-tabs .client-access-tab,
.client-copy-button {
min-height: 44px;
font-size: 10px;
}
.client-local-rule {
grid-template-columns: 44px minmax(0, 1fr) 44px;
}
.client-local-rule-enabled,
.client-local-rule-delete {
width: 44px;
height: 44px;
}
.client-local-rules-header > span,
.client-local-rules-group > span,
.client-instructions-header span,
.client-instruction-summary > span {
font-size: 10px;
}
.client-instructions-sheet {
padding: 40px 18px 60px 58px;
}
@@ -3067,7 +3134,6 @@ p {
}
.client-local-rule {
grid-template-columns: 24px minmax(0, 1fr) 28px;
gap: 8px;
}
@@ -3134,6 +3200,7 @@ p {
.client-duration-seconds-value,
.client-duration-second-digit,
.client-instructions,
.client-drawer-close,
.client-instructions-toggle,
.client-instructions-toggle svg,
.client-instructions-toggle path,