Enhance device traffic feedback and totals

src/web/styles.css

@@ -909,6 +909,7 @@ p {
 }
 
 .client-device-main {
+  height: 34px;
   min-width: 0;
   display: flex;
   align-items: center;
@@ -916,8 +917,11 @@ p {
 }
 
 .client-device-main > h3 {
+  height: 32px;
   flex: 0 1 auto;
   min-width: 0;
+  display: flex;
+  align-items: center;
   overflow: hidden;
   margin: 0;
   font-size: 15px;
@@ -927,9 +931,11 @@ p {
 }
 
 .client-device-name {
+  height: 32px;
   width: 100%;
   min-width: 0;
   display: grid;
+  align-items: center;
   padding: 0;
   overflow: hidden;
   border: 0;
@@ -945,22 +951,32 @@ p {
   grid-area: 1 / 1;
   overflow: hidden;
   opacity: 0;
+  filter: blur(8px);
   text-overflow: ellipsis;
   white-space: nowrap;
+  transform: translateY(0.18em) scale(0.96);
+  transform-origin: left center;
+  transition: opacity 360ms ease, filter 480ms cubic-bezier(0.16, 1, 0.3, 1), transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .client-device-name > .client-device-name-primary {
   opacity: 1;
+  filter: blur(0);
+  transform: translateY(0) scale(1);
 }
 
 .client-device-name:hover .client-device-name-primary,
 .client-device-name:focus-visible .client-device-name-primary {
   opacity: 0;
+  filter: blur(8px);
+  transform: translateY(-0.18em) scale(1.04);
 }
 
 .client-device-name:hover .client-device-name-ip,
 .client-device-name:focus-visible .client-device-name-ip {
   opacity: 1;
+  filter: blur(0);
+  transform: translateY(0) scale(1);
 }
 
 .client-device-name.is-copied .client-device-name-primary,
@@ -968,11 +984,21 @@ p {
 .client-device-name.is-copy-error .client-device-name-primary,
 .client-device-name.is-copy-error .client-device-name-ip {
   opacity: 0;
+  filter: blur(8px);
+  transform: translateY(-0.18em) scale(1.04);
 }
 
 .client-device-name.is-copied .client-device-name-feedback,
 .client-device-name.is-copy-error .client-device-name-feedback {
   opacity: 1;
+  filter: blur(0);
+  transform: translateY(0) scale(1);
+}
+
+.client-device-name-feedback {
+  font-size: 9px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
 .client-device-name.is-copied .client-device-name-feedback {
@@ -1066,8 +1092,11 @@ p {
 }
 
 .client-device-last-seen {
+  height: 32px;
   flex: 0 1 auto;
   min-width: 0;
+  display: flex;
+  align-items: center;
   max-width: 116px;
   overflow: hidden;
   font-size: 10px;
@@ -1077,6 +1106,12 @@ p {
   white-space: nowrap;
 }
 
+.client-device-last-seen time {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
 .client-device-last-seen.is-online {
   color: var(--client-accent);
   font-weight: 700;
@@ -1155,7 +1190,7 @@ p {
   gap: 2px;
 }
 
-.client-device-traffic-sources span {
+.client-device-traffic-sources > span {
   display: grid;
   grid-template-columns: 46px minmax(0, 1fr);
   align-items: baseline;
@@ -1178,6 +1213,41 @@ p {
   white-space: nowrap;
 }
 
+.client-device-traffic-value {
+  min-width: 0;
+  display: inline-grid;
+}
+
+.client-device-traffic-value > span {
+  grid-area: 1 / 1;
+  overflow: hidden;
+  justify-self: end;
+  opacity: 0;
+  filter: blur(6px);
+  text-overflow: ellipsis;
+  transform: translateY(0.18em) scale(0.96);
+  transform-origin: right center;
+  transition: opacity 260ms ease, filter 360ms cubic-bezier(0.16, 1, 0.3, 1), transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
+  white-space: nowrap;
+}
+
+.client-device-traffic-value > .is-total,
+.client-device-traffic-value.has-delta > .is-delta {
+  opacity: 1;
+  filter: blur(0);
+  transform: translateY(0) scale(1);
+}
+
+.client-device-traffic-value.has-delta > .is-total {
+  opacity: 0;
+  filter: blur(6px);
+  transform: translateY(-0.18em) scale(1.04);
+}
+
+.client-device-traffic-value > .is-delta {
+  color: var(--client-accent);
+}
+
 .client-device-traffic-sources .is-proxy {
   color: var(--client-accent);
 }
@@ -1186,6 +1256,15 @@ p {
   color: color-mix(in oklch, var(--client-accent) 72%, var(--client-muted));
 }
 
+.client-device-traffic-sources > .is-total {
+  margin-top: 2px;
+  color: var(--client-text);
+}
+
+.client-device-traffic-sources > .is-total b {
+  color: var(--client-muted);
+}
+
 .client-device-policy-wrap {
   width: 34px;
   position: relative;
@@ -4243,6 +4322,8 @@ p {
   .client-device-pin svg,
   .client-device-policy,
   .client-device-policy svg,
+  .client-device-name > span,
+  .client-device-traffic-value > span,
   .client-device-edit,
   .client-device-edit svg,
   .client-device-edit-wrap,