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/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;
}
}