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

Expose outbound traffic totals and simplify Direct chart breakdown
Build and Deploy Gateway / build-and-push (push) Successful in 20s
Details
Build and Deploy Gateway / deploy (push) Successful in 13s
Details

Browse Source
This commit is contained in:
dokril
2026-08-12 22:43:40 +03:00
parent 9d43e74d97
commit 72c085a5b8
10 changed files with 173 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/styles/features/devices.css
+29 -19
View File
@@ -694,6 +694,10 @@
transition-delay: 45ms;
}
.client-device-traffic-breakdown > span:nth-child(3) {
transition-delay: 90ms;
}
.client-device-traffic:hover .client-device-traffic-breakdown,
.client-device-traffic:focus .client-device-traffic-breakdown {
visibility: visible;
@@ -764,6 +768,18 @@
color: color-mix(in oklch, var(--client-accent) 76%, var(--client-text));
}
.client-device-traffic-breakdown .is-vpn {
color: var(--harbor-connect);
}
.client-device-traffic-breakdown .is-direct-total {
color: var(--harbor-gateway);
}
.client-device-traffic-breakdown .is-unknown {
color: var(--client-muted);
}
.client-device-traffic-breakdown b {
color: var(--client-accent);
text-shadow: 0 0 3px var(--client-bg), 0 0 8px var(--client-bg);
@@ -773,6 +789,12 @@
color: color-mix(in oklch, var(--client-accent) 76%, var(--client-text));
}
.client-device-traffic-breakdown .is-vpn b,
.client-device-traffic-breakdown .is-direct-total b,
.client-device-traffic-breakdown .is-unknown b {
color: inherit;
}
.client-device-traffic:focus-visible {
border-radius: 3px;
outline: 2px solid var(--client-accent);
@@ -913,16 +935,11 @@
stroke: var(--harbor-connect);
}
.client-device-traffic-lines .is-direct-tracked {
.client-device-traffic-lines .is-direct-total {
stroke: var(--harbor-gateway);
stroke-dasharray: 5 4;
}
.client-device-traffic-lines .is-direct-ipv4 {
stroke: var(--harbor-word);
stroke-dasharray: 2 3;
}
.client-device-traffic-lines .is-unknown {
stroke: color-mix(in oklch, var(--client-text) 54%, var(--client-muted));
stroke-dasharray: 1 4;
@@ -967,14 +984,10 @@
stroke: var(--harbor-connect);
}
.client-device-traffic-cursor .is-point.is-direct-tracked {
.client-device-traffic-cursor .is-point.is-direct-total {
stroke: var(--harbor-gateway);
}
.client-device-traffic-cursor .is-point.is-direct-ipv4 {
stroke: var(--harbor-word);
}
.client-device-traffic-cursor .is-point.is-unknown {
stroke: color-mix(in oklch, var(--client-text) 54%, var(--client-muted));
}
@@ -1000,14 +1013,10 @@
color: var(--harbor-connect);
}
.client-device-traffic-legend .is-direct-tracked {
.client-device-traffic-legend .is-direct-total {
color: var(--harbor-gateway);
}
.client-device-traffic-legend .is-direct-ipv4 {
color: var(--harbor-word);
}
.client-device-traffic-legend .is-unknown {
color: color-mix(in oklch, var(--client-text) 54%, var(--client-muted));
}
@@ -1072,12 +1081,13 @@
color: oklch(0.75 0.1 185);
}
.client-device-traffic-point-tooltip .is-direct-tracked {
.client-device-traffic-point-tooltip .is-direct-total {
color: oklch(0.79 0.11 72);
}
.client-device-traffic-point-tooltip .is-direct-ipv4 {
color: oklch(0.78 0.07 232);
.client-device-traffic-point-tooltip .is-direct-detail {
padding-left: 8px;
color: oklch(0.68 0.012 145);
}
.client-device-traffic-point-tooltip .is-unknown {