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/base.css
+22 -11
View File
@@ -40,7 +40,9 @@ p {
min-height: 100vh;
display: grid;
place-items: center;
font: 700 16px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
font: var(--type-section-title);
letter-spacing: var(--type-section-title-tracking);
text-transform: var(--type-section-title-transform);
color: light-dark(oklch(0.42 0.01 145), oklch(0.76 0.01 145));
background: light-dark(oklch(0.965 0.006 145), oklch(0.18 0.012 145));
}
@@ -54,27 +56,31 @@ p {
padding: 32px;
background: light-dark(oklch(0.965 0.006 145), oklch(0.18 0.012 145));
color: light-dark(oklch(0.24 0.014 145), oklch(0.93 0.008 145));
font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
font-family: var(--font-family-client);
}
.app-boot > span,
.app-boot summary {
color: light-dark(oklch(0.53 0.014 145), oklch(0.68 0.012 145));
font-size: 11px;
font: var(--type-body);
letter-spacing: var(--type-body-tracking);
text-transform: var(--type-body-transform);
}
.app-boot h1 {
max-width: 22ch;
margin: 0;
font-size: clamp(22px, 5vw, 34px);
letter-spacing: -0.05em;
font: var(--type-drawer-title);
letter-spacing: var(--type-drawer-title-tracking);
text-transform: var(--type-drawer-title-transform);
}
.app-boot p {
max-width: 58ch;
color: light-dark(oklch(0.53 0.014 145), oklch(0.68 0.012 145));
font-size: 12px;
line-height: 1.7;
font: var(--type-data);
letter-spacing: var(--type-data-tracking);
text-transform: var(--type-data-transform);
}
.app-boot button,
@@ -106,8 +112,9 @@ p {
display: block;
overflow-x: auto;
margin: 12px 0 0;
font-size: 11px;
line-height: 1.6;
font: var(--type-body);
letter-spacing: var(--type-body-tracking);
text-transform: var(--type-body-transform);
white-space: pre-wrap;
}
@@ -126,7 +133,9 @@ p {
box-shadow: 0 10px 32px oklch(0.08 0.015 145 / 0.14);
backdrop-filter: blur(12px);
color: var(--client-muted);
font: 600 10px/1.3 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
font: var(--type-control);
letter-spacing: var(--type-control-tracking);
text-transform: var(--type-control-transform);
transform: translateX(-50%);
}
@@ -136,5 +145,7 @@ p {
.client-stale-banner button {
color: var(--client-text);
font-size: 10px;
font: var(--type-control);
letter-spacing: var(--type-control-tracking);
text-transform: var(--type-control-transform);
}
src/web/styles/features/connection.css
+27 -19
View File
@@ -1,6 +1,8 @@
.client-power-section p {
color: var(--client-muted);
font-size: 11px;
font: var(--type-body);
letter-spacing: var(--type-body-tracking);
text-transform: var(--type-body-transform);
}
.client-power-section {
@@ -47,9 +49,9 @@
max-width: min(320px, calc(100vw - 42px));
overflow: hidden;
color: var(--client-text);
font-size: 12px;
font-weight: 650;
letter-spacing: -0.025em;
font: var(--type-data);
letter-spacing: var(--type-data-tracking);
text-transform: var(--type-data-transform);
text-overflow: ellipsis;
white-space: nowrap;
transition: opacity 260ms ease, filter 360ms cubic-bezier(0.16, 1, 0.3, 1), transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
@@ -70,8 +72,9 @@
min-height: 15px;
overflow: hidden;
color: var(--client-accent);
font-size: 8px;
font-weight: 700;
font: var(--type-micro);
letter-spacing: var(--type-micro-tracking);
text-transform: var(--type-micro-transform);
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -248,8 +251,9 @@
}
.client-power-section h2 {
font: 700 18px/1.3 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
letter-spacing: -0.04em;
font: var(--type-state-title);
letter-spacing: var(--type-state-title-tracking);
text-transform: var(--type-state-title-transform);
animation: client-state-reveal 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
@@ -290,16 +294,20 @@
grid-area: 1 / 1;
display: block;
color: var(--client-text);
font-size: 14px;
font-variant-numeric: tabular-nums;
letter-spacing: 0.04em;
font: var(--type-item-title);
letter-spacing: var(--type-item-title-tracking);
text-transform: var(--type-item-title-transform);
font-variant-numeric: var(--numeric-tabular);
opacity: 0;
filter: blur(5px);
transition: opacity 260ms ease, filter 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.client-power-section.is-gateway .client-duration {
font-size: 15px;
font: var(--type-item-title);
letter-spacing: var(--type-item-title-tracking);
text-transform: var(--type-item-title-transform);
font-variant-numeric: var(--numeric-tabular);
}
.client-duration.is-active {
@@ -393,7 +401,6 @@
.client-power-section p {
min-height: 0;
line-height: 20px;
}
@keyframes client-state-reveal {
@@ -432,10 +439,9 @@
display: grid;
place-items: center;
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-proxy-label > span {
@@ -477,8 +483,10 @@
.client-proxy-address {
color: var(--client-text);
font-size: 12px;
font-weight: 500;
font: var(--type-data);
letter-spacing: var(--type-data-tracking);
text-transform: var(--type-data-transform);
font-variant-numeric: var(--numeric-tabular);
text-shadow: 0 0 12px color-mix(in oklch, var(--client-accent) 12%, transparent);
}
src/web/styles/features/devices.css
+88 -50
View File
@@ -7,11 +7,15 @@
}
.client-devices-header h2 {
font-size: 24px;
font: var(--type-drawer-title);
letter-spacing: var(--type-drawer-title-tracking);
text-transform: var(--type-drawer-title-transform);
}
.client-devices-header .client-instructions-intro {
font-size: 12px;
font: var(--type-data);
letter-spacing: var(--type-data-tracking);
text-transform: var(--type-data-transform);
}
.client-devices-kicker {
@@ -22,7 +26,9 @@
}
.client-devices-kicker > span:first-child {
font-size: 10px;
font: var(--type-control);
letter-spacing: var(--type-control-tracking);
text-transform: var(--type-control-transform);
}
.client-devices-refresh-wrap {
@@ -49,7 +55,9 @@
border-radius: 999px;
background: transparent;
color: var(--client-muted);
font: 700 9px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
cursor: pointer;
}
@@ -67,7 +75,9 @@
border: 0;
background: transparent;
color: var(--client-muted);
font: 700 10px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
font: var(--type-control);
letter-spacing: var(--type-control-tracking);
text-transform: var(--type-control-transform);
cursor: pointer;
transition: color 220ms ease, filter 300ms ease;
}
@@ -161,7 +171,6 @@
.client-instructions-header .client-devices-refresh-wrap > .client-tooltip,
.client-instructions-header .client-devices-sort-wrap > .client-tooltip {
text-transform: none;
}
@keyframes client-devices-refresh-progress {
@@ -173,8 +182,9 @@
.client-devices-empty {
margin: 0 8px 20px;
color: var(--client-muted);
font-size: 11px;
line-height: 1.6;
font: var(--type-body);
letter-spacing: var(--type-body-tracking);
text-transform: var(--type-body-transform);
}
.client-devices-source {
@@ -226,10 +236,9 @@
top: -17px;
left: 8px;
color: var(--client-muted);
font-size: 8px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
}
.client-device:not(.is-group-start) > .client-device-group-heading {
@@ -271,8 +280,9 @@
overflow: hidden;
margin: 0;
gap: 5px;
font-size: 14px;
letter-spacing: -0.03em;
font: var(--type-item-title);
letter-spacing: var(--type-item-title-tracking);
text-transform: var(--type-item-title-transform);
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -298,8 +308,9 @@
.client-device-alias-trigger {
flex: 0 1 auto;
font: 700 14px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
letter-spacing: -0.03em;
font: var(--type-item-title);
letter-spacing: var(--type-item-title-tracking);
text-transform: var(--type-item-title-transform);
cursor: text;
}
@@ -313,8 +324,9 @@
outline: 0;
background: transparent;
caret-color: var(--client-accent);
font: 700 14px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
letter-spacing: -0.03em;
font: var(--type-item-title);
letter-spacing: var(--type-item-title-tracking);
text-transform: var(--type-item-title-transform);
animation: client-device-alias-edit-in 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
@@ -334,12 +346,17 @@
.client-device-name-separator {
flex: 0 0 auto;
color: var(--client-muted);
font-size: 11px;
font: var(--type-body);
letter-spacing: var(--type-body-tracking);
text-transform: var(--type-body-transform);
}
.client-device-ip {
flex: 0 0 auto;
font: 600 12px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
font: var(--type-data);
letter-spacing: var(--type-data-tracking);
text-transform: var(--type-data-transform);
font-variant-numeric: var(--numeric-tabular);
cursor: copy;
}
@@ -478,7 +495,9 @@
align-items: center;
max-width: 150px;
overflow: hidden;
font-size: 8.5px;
font: var(--type-micro);
letter-spacing: var(--type-micro-tracking);
text-transform: var(--type-micro-transform);
text-overflow: ellipsis;
color: var(--client-text);
cursor: default;
@@ -493,7 +512,7 @@
.client-device-last-seen.is-online {
color: var(--client-accent);
font-weight: 700;
font-weight: var(--font-weight-bold);
}
.client-device-pin-wrap.client-tooltip-anchor > .client-tooltip {
@@ -564,7 +583,7 @@
position: relative;
z-index: 6;
color: var(--client-text);
font-variant-numeric: tabular-nums;
font-variant-numeric: var(--numeric-tabular);
}
.client-device-traffic-total,
@@ -624,15 +643,17 @@
.client-device-traffic b {
color: var(--client-muted);
font-size: 8px;
letter-spacing: 0.03em;
text-transform: uppercase;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
}
.client-device-traffic strong {
overflow: hidden;
font-size: 10px;
font-weight: 600;
font: var(--type-control);
letter-spacing: var(--type-control-tracking);
text-transform: var(--type-control-transform);
font-variant-numeric: var(--numeric-tabular);
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
@@ -747,7 +768,9 @@
position: relative;
z-index: 3;
color: color-mix(in oklch, var(--client-text) 62%, var(--client-muted));
font: 700 7.5px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
font: var(--type-micro);
letter-spacing: var(--type-micro-tracking);
text-transform: var(--type-micro-transform);
pointer-events: none;
}
@@ -862,8 +885,9 @@
display: flex;
justify-content: space-between;
color: color-mix(in oklch, var(--client-text) 46%, var(--client-muted));
font-size: 8.5px;
line-height: 10px;
font: var(--type-micro);
letter-spacing: var(--type-micro-tracking);
text-transform: var(--type-micro-transform);
}
.client-device-traffic-point-tooltip {
@@ -881,8 +905,10 @@
inset 0 0 0 1px color-mix(in oklch, var(--client-border) 55%, transparent),
0 8px 24px oklch(0.08 0.015 145 / 0.22);
color: oklch(0.92 0.008 145);
font: 600 9px/1.25 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
font-variant-numeric: tabular-nums;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
font-variant-numeric: var(--numeric-tabular);
white-space: nowrap;
pointer-events: none;
animation: client-device-traffic-tooltip-in 140ms cubic-bezier(0.16, 1, 0.3, 1) both;
@@ -890,12 +916,18 @@
.client-device-traffic-point-tooltip time {
color: oklch(0.68 0.012 145);
font-size: 8px;
font: var(--type-micro);
letter-spacing: var(--type-micro-tracking);
text-transform: var(--type-micro-transform);
font-variant-numeric: var(--numeric-tabular);
}
.client-device-traffic-point-tooltip strong {
color: oklch(0.98 0.006 145);
font-size: 10px;
font: var(--type-control);
letter-spacing: var(--type-control-tracking);
text-transform: var(--type-control-transform);
font-variant-numeric: var(--numeric-tabular);
}
.client-device-traffic-point-tooltip .is-proxy {
@@ -1027,7 +1059,6 @@
.client-device-deprioritize-wrap.client-tooltip-anchor > .client-tooltip {
right: 0;
left: auto;
text-transform: none;
transform: translate(0, 2px);
}
@@ -1069,8 +1100,9 @@
.client-devices-error button {
justify-self: start;
font-size: 10px;
font-weight: 700;
font: var(--type-control);
letter-spacing: var(--type-control-tracking);
text-transform: var(--type-control-transform);
}
.client-devices button:focus-visible {
@@ -1101,10 +1133,9 @@
.client-gateway-traffic-total > small {
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-gateway-traffic-heading {
@@ -1128,9 +1159,10 @@
.client-gateway-traffic-total > strong {
color: var(--client-text);
font-size: 15px;
font-weight: 600;
font-variant-numeric: tabular-nums;
font: var(--type-item-title);
letter-spacing: var(--type-item-title-tracking);
text-transform: var(--type-item-title-transform);
font-variant-numeric: var(--numeric-tabular);
}
.client-gateway-traffic-speed {
@@ -1138,8 +1170,10 @@
display: flex;
justify-self: end;
gap: 18px;
font-size: 11px;
font-variant-numeric: tabular-nums;
font: var(--type-body);
letter-spacing: var(--type-body-tracking);
text-transform: var(--type-body-transform);
font-variant-numeric: var(--numeric-tabular);
white-space: nowrap;
}
@@ -1166,8 +1200,9 @@
.client-gateway-traffic-freshness {
min-height: 26px;
color: var(--client-muted);
font-size: 8.5px;
line-height: 1.5;
font: var(--type-micro);
letter-spacing: var(--type-micro-tracking);
text-transform: var(--type-micro-transform);
}
.client-gateway-traffic-freshness.is-stale {
@@ -1187,7 +1222,10 @@
.client-gateway-traffic-speed {
justify-self: start;
gap: 14px;
font-size: 10px;
font: var(--type-control);
letter-spacing: var(--type-control-tracking);
text-transform: var(--type-control-transform);
font-variant-numeric: var(--numeric-tabular);
}
.client-gateway-traffic-chart,
src/web/styles/features/diagnostics.css
+38 -28
View File
@@ -75,7 +75,6 @@
.client-diagnostics-refresh-wrap > .client-tooltip {
right: 0;
left: auto;
text-transform: none;
transform: translate(0, 2px);
}
@@ -96,8 +95,9 @@
align-items: center;
gap: 12px;
color: oklch(0.68 0.15 28);
font-size: 9px;
line-height: 1.5;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
}
.client-diagnostics-error button {
@@ -105,7 +105,7 @@
border: 0;
background: transparent;
color: inherit;
font-weight: 700;
font-weight: var(--font-weight-bold);
cursor: pointer;
}
@@ -122,10 +122,9 @@
justify-content: space-between;
gap: 14px;
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-diagnostics-section-title button {
@@ -133,7 +132,9 @@
border: 0;
background: transparent;
color: var(--client-accent);
font: 700 9px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
cursor: pointer;
}
@@ -173,10 +174,9 @@
padding-top: 2px;
padding-bottom: 7px;
color: var(--client-muted);
font-size: 8px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
}
.client-diagnostics-table tbody tr {
@@ -219,8 +219,9 @@
.client-diagnostics-table tbody th {
color: var(--client-text);
font-size: 9px;
font-weight: 600;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
transition: color 420ms ease, text-shadow 520ms ease;
}
@@ -239,10 +240,9 @@
.client-diagnostics-service-header {
padding: 2px 0 7px;
color: var(--client-muted);
font-size: 8px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
}
.client-diagnostics-service-header > span,
@@ -257,12 +257,12 @@
isolation: isolate;
min-height: 37px;
border-top: 1px solid color-mix(in oklch, var(--client-border) 48%, transparent);
animation: client-local-rule-enter 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
animation: client-row-enter 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.client-diagnostics-service-row.is-removing {
pointer-events: none;
animation: client-local-rule-leave 820ms cubic-bezier(0.7, 0, 0.84, 0) both;
animation: client-row-leave 820ms cubic-bezier(0.7, 0, 0.84, 0) both;
}
.client-diagnostics-service-row.is-running .client-diagnostics-service-name {
@@ -273,8 +273,9 @@
.client-diagnostics-service-name {
overflow-wrap: anywhere;
color: var(--client-text);
font-size: 9px;
font-weight: 600;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
transition: color 420ms ease, text-shadow 520ms ease;
}
@@ -284,7 +285,10 @@
max-width: 100%;
overflow-wrap: anywhere;
color: var(--client-text);
font: 600 9px/1.4 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
font-variant-numeric: var(--numeric-tabular);
}
.client-diagnostics-status.is-good {
@@ -338,7 +342,9 @@
outline: 0;
background: transparent;
color: var(--client-text);
font: 500 9px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
box-shadow: 0 1px 0 transparent;
transition: box-shadow 300ms ease, text-shadow 300ms ease;
}
@@ -369,7 +375,9 @@
border: 0;
background: transparent;
color: var(--client-accent);
font: 700 8px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
font: var(--type-control);
letter-spacing: var(--type-control-tracking);
text-transform: var(--type-control-transform);
cursor: pointer;
transition: filter 260ms ease, text-shadow 300ms ease;
}
@@ -384,7 +392,9 @@
.client-diagnostics-services-empty {
padding: 14px 8px 4px;
color: var(--client-muted);
font-size: 9px;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
}
.client-diagnostics-add-slot {
@@ -420,7 +430,7 @@
grid-row: 2;
}
.client-diagnostics-service-draft > .client-local-rule-delete {
.client-diagnostics-service-draft > .client-row-delete {
grid-column: 2;
grid-row: 1 / 3;
width: 44px;
src/web/styles/features/instructions.css
+17 -10
View File
@@ -116,14 +116,17 @@
}
.client-instruction-summary strong {
font-size: 14px;
font: var(--type-item-title);
letter-spacing: var(--type-item-title-tracking);
text-transform: var(--type-item-title-transform);
}
.client-instruction-summary small {
max-width: 54ch;
color: var(--client-muted);
font-size: 10px;
line-height: 1.55;
font: var(--type-control);
letter-spacing: var(--type-control-tracking);
text-transform: var(--type-control-transform);
}
.client-instruction-reveal {
@@ -147,8 +150,9 @@
gap: 14px;
padding: 0 22px 24px;
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-instruction-body p,
@@ -164,7 +168,7 @@
.client-instruction-body li::marker {
color: var(--client-accent);
font-variant-numeric: tabular-nums;
font-variant-numeric: var(--numeric-tabular);
}
.client-instruction-body code {
@@ -174,7 +178,9 @@
border-radius: 12px;
background: color-mix(in oklch, var(--client-control) 84%, transparent);
color: var(--client-text);
font: 500 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);
white-space: nowrap;
}
@@ -192,7 +198,6 @@
padding: 0;
border-radius: 0;
background: transparent;
line-height: 1.55;
white-space: pre;
}
@@ -214,7 +219,9 @@
min-width: 0;
overflow: hidden;
color: var(--client-text);
font-size: 10px;
font: var(--type-control);
letter-spacing: var(--type-control-tracking);
text-transform: var(--type-control-transform);
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -229,7 +236,7 @@
.client-instruction-body a {
width: fit-content;
color: var(--client-accent);
font-weight: 700;
font-weight: var(--font-weight-bold);
text-decoration: none;
}
src/web/styles/features/routing.css
+38 -28
View File
@@ -12,24 +12,25 @@
.client-local-rules-header > span,
.client-local-rules-group > 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-local-rules-header h2 {
grid-column: 1 / -1;
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-local-rules-header p {
grid-column: 1 / -1;
max-width: 46ch;
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-local-rules-save {
@@ -38,8 +39,9 @@
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: color 200ms ease, filter 300ms ease, opacity 220ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
@@ -86,7 +88,7 @@
align-items: center;
gap: 10px;
padding: 7px 0;
animation: client-local-rule-enter 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
animation: client-row-enter 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
transition: opacity 260ms ease, filter 360ms ease;
}
@@ -96,11 +98,10 @@
.client-local-rule-status {
color: var(--client-muted);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.07em;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
text-align: right;
text-transform: uppercase;
transition: color 280ms ease, opacity 280ms ease, filter 360ms ease;
}
@@ -120,7 +121,7 @@
.client-local-rule.is-removing {
pointer-events: none;
animation: client-local-rule-leave 820ms cubic-bezier(0.7, 0, 0.84, 0) both;
animation: client-row-leave 820ms cubic-bezier(0.7, 0, 0.84, 0) both;
}
.client-local-rule-enabled {
@@ -196,7 +197,9 @@
border: 0;
background: transparent;
color: var(--client-text);
font: 600 9px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
text-align: left;
cursor: pointer;
transition: color 220ms ease, text-shadow 300ms ease;
@@ -255,7 +258,9 @@
border: 0;
background: transparent;
color: var(--client-muted);
font: 600 9px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
text-align: left;
white-space: nowrap;
cursor: pointer;
@@ -295,7 +300,9 @@
outline: 0;
background: transparent;
color: var(--client-text);
font: 500 10px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
font: var(--type-control);
letter-spacing: var(--type-control-tracking);
text-transform: var(--type-control-transform);
box-shadow: 0 1px 0 transparent;
transition: color 220ms ease, box-shadow 300ms ease, text-shadow 300ms ease;
}
@@ -312,15 +319,17 @@
.client-local-rules-empty {
padding: 14px 4px 4px;
color: var(--client-muted);
font-size: 10px;
line-height: 1.6;
font: var(--type-control);
letter-spacing: var(--type-control-tracking);
text-transform: var(--type-control-transform);
}
.client-local-rules-note {
max-width: 48ch;
color: var(--client-muted);
font-size: 9px;
line-height: 1.65;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
}
.client-inline-error.is-routing {
@@ -340,8 +349,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);
}
@@ -369,9 +379,9 @@
gap: 10px;
margin: -10px 0 -8px;
color: var(--client-warning, oklch(0.72 0.12 72));
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
opacity: 0;
filter: blur(5px);
transform: translateY(-3px);
src/web/styles/features/servers.css
+52 -28
View File
@@ -6,11 +6,10 @@
display: block;
margin-bottom: 12px;
color: var(--client-muted);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
text-align: center;
text-transform: uppercase;
animation: client-state-reveal 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@@ -93,14 +92,17 @@
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: anywhere;
font-size: 11px;
line-height: 1.4;
font: var(--type-body);
letter-spacing: var(--type-body-tracking);
text-transform: var(--type-body-transform);
text-align: center;
}
.client-server small {
color: var(--client-muted);
font-size: 11px;
font: var(--type-body);
letter-spacing: var(--type-body-tracking);
text-transform: var(--type-body-transform);
text-align: center;
}
@@ -108,9 +110,10 @@
display: grid;
place-items: center;
color: var(--client-muted);
font-size: 9px;
font-variant-numeric: tabular-nums;
line-height: 1.2;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
font-variant-numeric: var(--numeric-tabular);
white-space: nowrap;
}
@@ -174,9 +177,9 @@
grid-column: 2;
grid-row: 1;
color: var(--client-muted);
font: 700 9px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
letter-spacing: 0.08em;
text-transform: uppercase;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
white-space: nowrap;
}
@@ -197,7 +200,9 @@
border: 0;
background: transparent;
color: var(--client-muted);
font: 700 9px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
cursor: pointer;
transition: color 220ms ease, text-shadow 320ms ease;
}
@@ -357,7 +362,9 @@
outline: 0;
background: transparent;
color: var(--client-text);
font: 500 11px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
font: var(--type-body);
letter-spacing: var(--type-body-tracking);
text-transform: var(--type-body-transform);
}
.client-server-tools input:focus {
@@ -379,7 +386,9 @@
border: 0;
background: transparent;
color: var(--client-muted);
font: 700 9px/1.2 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
cursor: pointer;
}
@@ -422,12 +431,16 @@
}
.client-server-auto strong {
font-size: 11px;
font: var(--type-body);
letter-spacing: var(--type-body-tracking);
text-transform: var(--type-body-transform);
}
.client-server-auto small {
color: var(--client-muted);
font-size: 9px;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
}
.client-server-scroll {
@@ -471,11 +484,12 @@
display: flex;
justify-content: space-between;
text-align: left;
text-transform: uppercase;
}
.client-server-group-toggle small {
font-size: 9px;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
}
.client-servers.is-scalable .client-server-grid {
@@ -508,7 +522,9 @@
border: 0;
background: transparent;
color: var(--client-border);
font-size: 10px;
font: var(--type-control);
letter-spacing: var(--type-control-tracking);
text-transform: var(--type-control-transform);
cursor: pointer;
opacity: 0.45;
transform: translateY(-50%);
@@ -522,7 +538,9 @@
.client-server-empty {
padding: 24px 4px;
color: var(--client-muted);
font-size: 10px;
font: var(--type-control);
letter-spacing: var(--type-control-tracking);
text-transform: var(--type-control-transform);
text-align: center;
}
@@ -536,7 +554,9 @@
justify-content: center;
gap: 12px;
color: var(--client-muted);
font-size: 9px;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
}
.client-server-more:disabled {
@@ -592,9 +612,9 @@
.client-profile-body .client-server-check-label {
display: inline;
font: 600 9px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
letter-spacing: 0.03em;
text-transform: uppercase;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
}
.client-profile-body .client-server-mode-toggle {
@@ -705,12 +725,16 @@
}
.client-profile-body .client-server strong {
font-size: 10px;
font: var(--type-control);
letter-spacing: var(--type-control-tracking);
text-transform: var(--type-control-transform);
}
.client-profile-body .client-server small {
grid-column: 3;
font-size: 8px;
font: var(--type-micro);
letter-spacing: var(--type-micro-tracking);
text-transform: var(--type-micro-transform);
}
.client-profile-body .client-server-meta {
src/web/styles/features/subscription.css
+44 -27
View File
@@ -9,9 +9,9 @@
.client-inline-error.is-subscription small {
flex-basis: 100%;
font-size: 8px;
font-weight: 500;
letter-spacing: 0.04em;
font: var(--type-micro);
letter-spacing: var(--type-micro-tracking);
text-transform: var(--type-micro-transform);
opacity: 0.45;
animation: client-subscription-code-in 560ms 90ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@@ -56,8 +56,9 @@
.client-profiles-header h2 {
flex: 1;
margin: 0;
font-size: 16px;
letter-spacing: 0.02em;
font: var(--type-drawer-title);
letter-spacing: var(--type-drawer-title-tracking);
text-transform: var(--type-drawer-title-transform);
}
.client-profile-list {
@@ -95,7 +96,7 @@
.client-profile-chevron {
color: var(--client-muted);
font-size: 20px;
font-size: var(--font-size-icon-chevron);
transform: rotate(0);
transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
@@ -126,28 +127,34 @@
}
.client-profile-title strong {
font-size: 12px;
letter-spacing: -0.02em;
font: var(--type-data);
letter-spacing: var(--type-data-tracking);
text-transform: var(--type-data-transform);
}
.client-profile-title small {
color: var(--client-muted);
font-size: 9px;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
}
.client-profile-title em {
padding: 0;
color: var(--client-accent);
font-size: 7px;
font: var(--type-micro);
letter-spacing: var(--type-micro-tracking);
text-transform: var(--type-micro-transform);
font-style: normal;
letter-spacing: 0.08em;
}
.client-profile-usage {
max-width: 126px;
overflow: hidden;
color: var(--client-muted);
font-size: 8px;
font: var(--type-micro);
letter-spacing: var(--type-micro-tracking);
text-transform: var(--type-micro-transform);
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -293,14 +300,18 @@
.client-profile-selected-server strong {
min-width: 0;
overflow: hidden;
font-size: 10px;
font: var(--type-control);
letter-spacing: var(--type-control-tracking);
text-transform: var(--type-control-transform);
text-overflow: ellipsis;
white-space: nowrap;
}
.client-profile-selected-server small {
color: var(--client-muted);
font-size: 8px;
font: var(--type-micro);
letter-spacing: var(--type-micro-tracking);
text-transform: var(--type-micro-transform);
white-space: nowrap;
}
@@ -321,9 +332,9 @@
border: 0;
background: transparent;
color: var(--client-accent);
font: 600 9px/1 inherit;
letter-spacing: 0.03em;
text-transform: uppercase;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
cursor: pointer;
}
@@ -377,8 +388,9 @@
min-height: 18px;
margin: 0;
color: var(--client-muted);
font-size: 8px;
line-height: 1.45;
font: var(--type-micro);
letter-spacing: var(--type-micro-tracking);
text-transform: var(--type-micro-transform);
}
.client-profile-local-status {
@@ -403,7 +415,9 @@
outline: 0;
background: transparent;
color: var(--client-text);
font: 500 10px/1 inherit;
font: var(--type-control);
letter-spacing: var(--type-control-tracking);
text-transform: var(--type-control-transform);
}
.client-profile-add input:focus {
@@ -426,7 +440,9 @@
border: 0;
background: transparent;
color: var(--client-muted);
font: 600 9px/1 inherit;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
cursor: pointer;
}
@@ -451,13 +467,15 @@
.client-first-run-copy span {
color: var(--client-muted);
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
font: var(--type-label);
letter-spacing: var(--type-label-tracking);
text-transform: var(--type-label-transform);
}
.client-first-run-copy strong {
font-size: 16px;
font: var(--type-section-title);
letter-spacing: var(--type-section-title-tracking);
text-transform: var(--type-section-title-transform);
}
@media (max-width: 520px) {
@@ -471,8 +489,7 @@
.client-profile-disclosure,
.client-profile-refresh,
.client-profile-delete,
.client-profiles-header > button:not(.client-drawer-close) {
.client-profile-delete {
min-height: 44px;
}
}
src/web/styles/layout.css
+29 -35
View File
@@ -22,7 +22,7 @@
width: min(100%, 1100px);
display: grid;
gap: 12px;
font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
font-family: var(--font-family-client);
color: var(--client-text);
}
@@ -35,8 +35,10 @@
justify-items: end;
gap: 4px;
color: var(--client-muted);
font: 650 12px/1 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
font-variant-numeric: tabular-nums;
font: var(--type-data);
letter-spacing: var(--type-data-tracking);
text-transform: var(--type-data-transform);
font-variant-numeric: var(--numeric-tabular);
}
.harbor-version {
@@ -61,13 +63,17 @@
.harbor-version-code {
width: 1.3ch;
color: var(--client-accent);
font-size: 10px;
font: var(--type-control);
letter-spacing: var(--type-control-tracking);
text-transform: var(--type-control-transform);
font-variant-numeric: var(--numeric-tabular);
text-align: center;
}
.harbor-version-number {
display: flex;
align-items: center;
font-variant-numeric: var(--numeric-tabular);
}
.harbor-version-part {
@@ -102,9 +108,9 @@
background: oklch(0.14 0.012 145);
box-shadow: 0 9px 30px oklch(0.08 0.015 145 / 0.16);
color: oklch(0.88 0.012 145);
font-size: 11px;
font-weight: 500;
line-height: 1.5;
font: var(--type-body);
letter-spacing: var(--type-body-tracking);
text-transform: var(--type-body-transform);
text-align: left;
opacity: 0;
visibility: hidden;
@@ -116,12 +122,16 @@
.harbor-version-tooltip strong {
color: oklch(0.96 0.008 145);
font-size: 11px;
font: var(--type-body);
letter-spacing: var(--type-body-tracking);
text-transform: var(--type-body-transform);
}
.harbor-version-tooltip small {
color: var(--client-accent);
font-size: 10px;
font: var(--type-control);
letter-spacing: var(--type-control-tracking);
text-transform: var(--type-control-transform);
}
.harbor-version-tooltip .is-warning {
@@ -143,8 +153,8 @@
left: 50%;
z-index: 2;
color: var(--harbor-word);
font-size: 13px;
letter-spacing: -0.035em;
font-size: var(--font-size-brand);
letter-spacing: var(--tracking-title);
transform: translate(-50%, calc(-50% - 25vh)) scale(3);
transform-origin: center;
transition: transform 1800ms cubic-bezier(0.16, 1, 0.3, 1);
@@ -264,7 +274,7 @@
}
.harbor-brand strong {
font-weight: 800;
font-weight: var(--font-weight-brand);
}
.harbor-brand-name {
@@ -276,7 +286,7 @@
.harbor-brand em {
color: var(--harbor-connect);
font-style: normal;
font-weight: 600;
font-weight: var(--font-weight-strong);
}
.harbor-brand.is-gateway em {
@@ -464,9 +474,9 @@
background: oklch(0.14 0.012 145);
box-shadow: 0 5px 18px oklch(0.08 0.015 145 / 0.1);
color: oklch(0.88 0.012 145);
font-size: 4px;
line-height: 1.5;
letter-spacing: 0;
font-size: var(--font-size-brand-tooltip);
line-height: var(--line-height-micro);
letter-spacing: var(--tracking-normal);
text-align: left;
opacity: 0;
visibility: hidden;
@@ -478,7 +488,7 @@
.harbor-mode-tooltip strong {
color: oklch(0.96 0.008 145);
font-size: 4.2px;
font-size: var(--font-size-brand-tooltip-strong);
}
.harbor-brand-control:hover .harbor-mode-tooltip,
@@ -696,7 +706,6 @@
.client-copy-button {
min-height: 44px;
font-size: 10px;
}
.client-server-filters button,
@@ -726,18 +735,11 @@
}
.client-local-rule-enabled,
.client-local-rule-delete {
.client-row-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 58px 60px 18px;
}
@@ -746,10 +748,6 @@
padding: 40px 58px 60px 18px;
}
.client-local-rules-header h2 {
font-size: 18px;
}
.client-local-rule {
gap: 8px;
}
@@ -764,7 +762,7 @@
grid-row: 1;
}
.client-local-rule-delete {
.client-row-delete {
grid-column: 3;
grid-row: 1;
}
@@ -774,10 +772,6 @@
grid-row: 2;
}
.client-instructions-header h2 {
font-size: 18px;
}
.client-instruction-block:nth-child(n) {
margin-inline: 0;
}
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);
src/web/styles/themes.css
+10 -16
View File
@@ -24,7 +24,7 @@
.client-power-section,
.client-gateway-traffic-chart,
.client-gateway-traffic-freshness,
.client-subscription-drawer,
.client-drawer,
.client-form,
.client-server,
.client-server-auto,
@@ -47,14 +47,13 @@
.client-duration,
.client-duration-seconds-value,
.client-duration-second-digit,
.client-instructions,
.client-drawer-close,
.client-instructions-toggle,
.client-instructions-toggle svg,
.client-instructions-toggle circle,
.client-instructions-toggle path,
.client-instructions-toggle rect,
.client-instructions-toggle span,
.client-rail-action,
.client-rail-action svg,
.client-rail-action circle,
.client-rail-action path,
.client-rail-action rect,
.client-rail-action span,
.client-instruction-block,
.client-instruction-reveal,
.client-instruction-summary > i::before,
@@ -114,11 +113,6 @@
stroke-dashoffset: 0;
}
.client-local-rules,
.client-local-rules-toggle,
.client-local-rules-toggle svg,
.client-local-rules-toggle circle,
.client-local-rules-toggle span,
.client-local-rule,
.client-local-rule-enabled svg,
.client-local-rule-enabled circle,
@@ -128,9 +122,9 @@
.client-rule-type-list,
.client-rule-type-list button,
.client-local-rule input,
.client-local-rule-delete,
.client-local-rule-add,
.client-local-rule-add-slot > span,
.client-row-delete,
.client-row-add,
.client-row-add-slot > span,
.client-local-rules-save,
.client-local-rules-runtime,
.client-local-rules-actions button {
src/web/styles/tokens.css
+72
View File
@@ -1,5 +1,77 @@
:root {
color-scheme: light dark;
--font-family-client: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
--font-size-brand-tooltip: 0.25rem;
--font-size-brand-tooltip-strong: 0.2625rem;
--font-size-micro: 0.5rem;
--font-size-label: 0.5625rem;
--font-size-control: 0.625rem;
--font-size-body: 0.6875rem;
--font-size-data: 0.75rem;
--font-size-brand: 0.8125rem;
--font-size-item-title: 0.875rem;
--font-size-section-title: 1rem;
--font-size-icon-delete: 1.0625rem;
--font-size-state-title: 1.125rem;
--font-size-icon-chevron: 1.25rem;
--font-size-drawer-title: 1.375rem;
--font-size-icon-close: 1.5rem;
--font-weight-regular: 400;
--font-weight-body: 500;
--font-weight-strong: 600;
--font-weight-bold: 700;
--font-weight-brand: 800;
--line-height-solid: 1;
--line-height-micro: 1.45;
--line-height-label: 1.2;
--line-height-control: 1.2;
--line-height-body: 1.7;
--line-height-data: 1.2;
--line-height-item-title: 1.2;
--line-height-section-title: 1.25;
--line-height-state-title: 1.3;
--line-height-drawer-title: 1.15;
--line-height-tooltip: 1.35;
--tracking-tight: -0.04em;
--tracking-title: -0.03em;
--tracking-normal: 0;
--tracking-control: 0.03em;
--tracking-label: 0.08em;
--tracking-wide: 0.1em;
--text-transform-label: uppercase;
--text-transform-none: none;
--numeric-tabular: tabular-nums;
--type-micro: var(--font-weight-body) var(--font-size-micro)/var(--line-height-micro) var(--font-family-client);
--type-micro-tracking: var(--tracking-normal);
--type-micro-transform: var(--text-transform-none);
--type-label: var(--font-weight-bold) var(--font-size-label)/var(--line-height-label) var(--font-family-client);
--type-label-tracking: var(--tracking-label);
--type-label-transform: var(--text-transform-label);
--type-control: var(--font-weight-bold) var(--font-size-control)/var(--line-height-control) var(--font-family-client);
--type-control-tracking: var(--tracking-control);
--type-control-transform: var(--text-transform-none);
--type-tooltip: var(--font-weight-strong) var(--font-size-control)/var(--line-height-tooltip) var(--font-family-client);
--type-tooltip-tracking: var(--tracking-normal);
--type-tooltip-transform: var(--text-transform-none);
--type-body: var(--font-weight-body) var(--font-size-body)/var(--line-height-body) var(--font-family-client);
--type-body-tracking: var(--tracking-normal);
--type-body-transform: var(--text-transform-none);
--type-data: var(--font-weight-strong) var(--font-size-data)/var(--line-height-data) var(--font-family-client);
--type-data-tracking: var(--tracking-normal);
--type-data-transform: var(--text-transform-none);
--type-item-title: var(--font-weight-bold) var(--font-size-item-title)/var(--line-height-item-title) var(--font-family-client);
--type-item-title-tracking: var(--tracking-title);
--type-item-title-transform: var(--text-transform-none);
--type-section-title: var(--font-weight-bold) var(--font-size-section-title)/var(--line-height-section-title) var(--font-family-client);
--type-section-title-tracking: var(--tracking-title);
--type-section-title-transform: var(--text-transform-none);
--type-state-title: var(--font-weight-bold) var(--font-size-state-title)/var(--line-height-state-title) var(--font-family-client);
--type-state-title-tracking: var(--tracking-tight);
--type-state-title-transform: var(--text-transform-none);
--type-drawer-title: var(--font-weight-bold) var(--font-size-drawer-title)/var(--line-height-drawer-title) var(--font-family-client);
--type-drawer-title-tracking: var(--tracking-tight);
--type-drawer-title-transform: var(--text-transform-none);
--type-icon-close: var(--font-weight-regular) var(--font-size-icon-close)/var(--line-height-solid) var(--font-family-client);
}
.app.client-app {