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

Update VPN client and gateway behavior
Build and Deploy Gateway / build-and-push (push) Successful in 19s
Details
Build and Deploy Gateway / deploy (push) Successful in 6s
Details

Browse Source
This commit is contained in:
dokril
2026-08-11 08:50:44 +03:00
parent 396c5d1917
commit 79ffff194f
35 changed files with 1036 additions and 590 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/styles/primitives.css
+73 -71
View File
@@ -7,8 +7,7 @@
white-space: nowrap;
}
.client-instructions-toggle,
.client-local-rules-toggle {
.client-rail-action {
position: relative;
width: 42px;
height: 48px;
@@ -22,8 +21,7 @@
transition: color 240ms ease, transform 440ms cubic-bezier(0.16, 1, 0.3, 1);
}
.client-instructions-toggle svg,
.client-local-rules-toggle svg {
.client-rail-action svg {
width: 23px;
height: 23px;
fill: none;
@@ -35,14 +33,14 @@
transition: color 240ms ease, filter 360ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.client-instructions-toggle span,
.client-local-rules-toggle span {
.client-rail-action > span {
position: absolute;
right: 48px;
width: max-content;
color: var(--client-text);
font: 700 10px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
letter-spacing: 0.04em;
font: var(--type-control);
letter-spacing: var(--type-control-tracking);
text-transform: var(--type-control-transform);
opacity: 0;
filter: blur(5px);
pointer-events: none;
@@ -50,30 +48,23 @@
transition: opacity 350ms ease, filter 350ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.client-instructions-toggle:hover,
.client-instructions-toggle:focus-visible,
.client-local-rules-toggle:hover,
.client-local-rules-toggle:focus-visible {
.client-rail-action:hover,
.client-rail-action:focus-visible {
outline: 0;
color: var(--client-accent);
transform: translateX(-3px);
}
.client-instructions-toggle:hover span,
.client-instructions-toggle:focus-visible span,
.client-local-rules-toggle:hover span,
.client-local-rules-toggle:focus-visible span {
.client-rail-action:hover > span,
.client-rail-action:focus-visible > span {
opacity: 1;
filter: blur(0);
transform: translateX(0);
}
.client-instructions-toggle:hover svg,
.client-instructions-toggle:focus-visible svg,
.client-local-rules-toggle:hover svg,
.client-local-rules-toggle:focus-visible svg,
.client-instructions-toggle.is-open svg,
.client-local-rules-toggle.is-open svg {
.client-rail-action:hover svg,
.client-rail-action:focus-visible svg,
.client-rail-action.is-open svg {
filter: drop-shadow(0 0 7px color-mix(in oklch, var(--client-accent) 52%, transparent));
}
@@ -171,8 +162,7 @@
transform: translateX(0);
}
.client-instructions-toggle.is-open,
.client-local-rules-toggle.is-open {
.client-rail-action.is-open {
color: var(--client-accent);
}
@@ -184,8 +174,7 @@
filter: drop-shadow(0 0 7px oklch(0.68 0.14 72 / 0.42));
}
.client-instructions-toggle.is-open span,
.client-local-rules-toggle.is-open span {
.client-rail-action.is-open > span {
opacity: 0;
visibility: hidden;
}
@@ -215,7 +204,7 @@
position: relative;
min-height: 100%;
padding: 54px 72px 72px 34px;
font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
font-family: var(--font-family-client);
}
.client-delete-strike {
@@ -262,19 +251,19 @@
opacity: 0;
}
.client-local-rule-delete {
.client-row-delete {
width: 28px;
height: 32px;
padding: 0;
border: 0;
background: transparent;
color: var(--client-muted);
font-size: 17px;
font-size: var(--font-size-icon-delete);
cursor: pointer;
transition: color 180ms ease, filter 260ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.client-local-rule-delete:hover {
.client-row-delete:hover {
color: oklch(0.68 0.15 28);
filter: drop-shadow(0 0 7px oklch(0.68 0.15 28 / 0.42));
transform: rotate(8deg) scale(1.1);
@@ -282,8 +271,8 @@
.client-local-rule-enabled:focus-visible,
.client-rule-type-trigger:focus-visible,
.client-local-rule-delete:focus-visible,
.client-local-rule-add:focus-visible,
.client-row-delete:focus-visible,
.client-row-add:focus-visible,
.client-local-rules-save:focus-visible,
.client-local-rules-actions button:focus-visible {
outline: 0;
@@ -291,56 +280,59 @@
text-shadow: 0 0 10px color-mix(in oklch, var(--client-accent) 48%, transparent);
}
.client-local-rule-add {
.client-row-add {
width: fit-content;
padding: 7px 0;
border: 0;
background: transparent;
color: var(--client-accent);
font-size: 10px;
font-weight: 700;
font: var(--type-control);
letter-spacing: var(--type-control-tracking);
text-transform: var(--type-control-transform);
cursor: pointer;
transition: opacity 220ms ease, color 220ms ease, text-shadow 300ms ease;
}
.client-local-rule-add:hover {
.client-row-add:hover {
text-shadow: 0 0 10px color-mix(in oklch, var(--client-accent) 55%, transparent);
}
.client-local-rule-add:disabled {
.client-row-add:disabled {
opacity: 0.3;
cursor: not-allowed;
text-shadow: none;
}
.client-local-rule-add-slot {
.client-row-add-slot {
min-height: 40px;
display: flex;
align-items: center;
gap: 12px;
}
.client-local-rule-add-slot > span {
.client-row-add-slot > span {
color: var(--client-muted);
font-size: 8px;
font: var(--type-micro);
letter-spacing: var(--type-micro-tracking);
text-transform: var(--type-micro-transform);
opacity: 0;
filter: blur(5px);
transform: translateX(-6px);
transition: opacity 220ms ease, filter 320ms ease, transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}
.client-local-rule-add-slot > span.is-visible {
.client-row-add-slot > span.is-visible {
opacity: 1;
filter: blur(0);
transform: translateX(0);
}
@keyframes client-local-rule-enter {
@keyframes client-row-enter {
from { opacity: 0; filter: blur(8px); transform: translateY(-10px) scale(0.985); }
to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}
@keyframes client-local-rule-leave {
@keyframes client-row-leave {
0%, 52% { opacity: 1; filter: blur(0); transform: translateX(0); }
100% { opacity: 0; filter: blur(8px); transform: translateX(28px); }
}
@@ -373,7 +365,7 @@
border: 0;
background: transparent;
color: var(--client-muted);
font: 400 24px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
font: var(--type-icon-close);
cursor: pointer;
transition: color 220ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
@@ -391,16 +383,16 @@
.client-instructions-header span,
.client-instruction-summary > span {
color: var(--client-muted);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
}
.client-instructions-header h2 {
margin: 0;
font-size: 22px;
letter-spacing: -0.045em;
font: var(--type-drawer-title);
letter-spacing: var(--type-drawer-title-tracking);
text-transform: var(--type-drawer-title-transform);
}
.client-instructions-intro {
@@ -408,8 +400,9 @@
gap: 12px;
margin-top: 15px;
color: var(--client-muted);
font-size: 11px;
line-height: 1.7;
font: var(--type-body);
letter-spacing: var(--type-body-tracking);
text-transform: var(--type-body-transform);
}
.client-instructions-intro p {
@@ -441,8 +434,9 @@
background: oklch(0.14 0.012 145);
box-shadow: 0 8px 26px oklch(0.08 0.015 145 / 0.16);
color: oklch(0.94 0.008 145);
font: 600 10px/1.35 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
letter-spacing: 0;
font: var(--type-tooltip);
letter-spacing: var(--type-tooltip-tracking);
text-transform: var(--type-tooltip-transform);
text-align: center;
white-space: normal;
opacity: 0;
@@ -527,7 +521,7 @@
background: color-mix(in oklch, var(--client-bg) 82%, transparent);
box-shadow: 0 0 86px color-mix(in oklch, var(--client-bg) 86%, transparent);
color: var(--client-text);
font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
font-family: var(--font-family-client);
opacity: 0;
filter: blur(18px);
transform: scale(0.9);
@@ -578,23 +572,24 @@
.client-confirmation-kicker {
color: var(--client-muted);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
}
.client-confirmation-dialog h2 {
color: oklch(0.68 0.15 28);
font-size: 18px;
letter-spacing: -0.035em;
font: var(--type-state-title);
letter-spacing: var(--type-state-title-tracking);
text-transform: var(--type-state-title-transform);
}
.client-confirmation-dialog p {
max-width: 54ch;
color: var(--client-muted);
font-size: 11px;
line-height: 1.7;
font: var(--type-body);
letter-spacing: var(--type-body-tracking);
text-transform: var(--type-body-transform);
}
.client-confirmation-actions {
@@ -608,8 +603,9 @@
border: 0;
background: transparent;
color: var(--client-text);
font-size: 10px;
font-weight: 700;
font: var(--type-control);
letter-spacing: var(--type-control-tracking);
text-transform: var(--type-control-transform);
cursor: pointer;
transition: color 200ms ease, filter 300ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
@@ -656,14 +652,18 @@
gap: 8px;
flex-wrap: wrap;
color: oklch(0.62 0.2 28);
font: 600 11px/1.5 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
font: var(--type-body);
letter-spacing: var(--type-body-tracking);
text-transform: var(--type-body-transform);
text-align: center;
transform: translateX(-50%);
}
.client-inline-error small {
color: var(--client-muted);
font-size: 9px;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
white-space: nowrap;
}
@@ -673,8 +673,9 @@
border-radius: 6px;
background: color-mix(in oklch, var(--client-control) 72%, transparent);
color: var(--client-text);
font-size: 9px;
font-weight: 700;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
cursor: pointer;
white-space: nowrap;
}
@@ -709,8 +710,9 @@
border: 0;
background: transparent;
color: var(--client-muted);
font: 700 9px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
letter-spacing: 0.06em;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
cursor: pointer;
opacity: 0.76;
transition: color 220ms ease, opacity 220ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);