Refine client rail icons and motion

src/web/styles/primitives.css

@@ -8,6 +8,7 @@
 }
 
 .client-rail-action {
+  --client-rail-state-duration: 340ms;
   position: relative;
   width: 42px;
   height: 48px;
@@ -26,11 +27,16 @@
   height: 23px;
   fill: none;
   stroke: currentColor;
-  stroke-width: 1.6;
+  stroke-width: 1.75;
   stroke-linecap: round;
   stroke-linejoin: round;
   overflow: visible;
-  transition: color 240ms ease, filter 360ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
+  transition: color 240ms ease, filter 360ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.client-rail-action:active:not(:disabled) svg {
+  transform: scale(0.94);
+  transition: color 120ms ease, filter 120ms ease, transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .client-rail-action > span {
@@ -70,21 +76,16 @@
 
 .client-rail-subscription-back,
 .client-rail-subscription-front,
-.client-rail-subscription-lines,
 .client-rail-info-ring,
-.client-rail-info-sweep,
 .client-rail-info-mark,
-.client-rail-device-primary,
-.client-rail-device-secondary,
-.client-rail-device-link,
+.client-rail-device-monitor,
+.client-rail-device-phone,
 .client-rail-device-bridge,
-.client-rail-device-pulse,
-.client-rail-diagnostics-base,
-.client-rail-diagnostics-pulse,
+.client-rail-diagnostics-glass,
 .client-rail-rule-knob {
   transform-box: fill-box;
   transform-origin: center;
-  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1), opacity 360ms ease, stroke-dasharray 620ms cubic-bezier(0.16, 1, 0.3, 1), stroke-dashoffset 620ms cubic-bezier(0.16, 1, 0.3, 1);
+  transition: transform var(--client-rail-state-duration) cubic-bezier(0.16, 1, 0.3, 1), opacity 260ms ease, stroke-dasharray var(--client-rail-state-duration) cubic-bezier(0.16, 1, 0.3, 1), stroke-dashoffset var(--client-rail-state-duration) cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .client-rail-action .client-rail-subscription-card,
@@ -92,53 +93,29 @@
   fill: var(--client-bg);
 }
 
-.client-rail-subscription-back {
-  transform: translate(0, 0);
-}
-
 .client-rail-subscription-lines {
-  opacity: 0.9;
-  transform-origin: left center;
+  opacity: 1;
 }
 
 .client-subscription-toggle.is-open .client-rail-subscription-back {
-  transform: translate(0.6px, -0.6px);
+  transform: translate(1.5px, -1px);
 }
 
 .client-subscription-toggle.is-open .client-rail-subscription-front {
-  transform: translate(-1.5px, 1px);
-}
-
-.client-subscription-toggle.is-open .client-rail-subscription-lines {
-  opacity: 1;
-  animation: client-rail-detail-pulse 10s ease-in-out infinite;
+  transform: translate(-2px, 1px);
 }
 
 .client-rail-info-ring {
   stroke-dasharray: 1 0;
-  stroke-dashoffset: 0.25;
-}
-
-.client-rail-info-sweep {
-  stroke-width: 2.4;
-  stroke-dasharray: 0.14 0.86;
-  opacity: 0;
+  stroke-dashoffset: 0.1;
 }
 
 .client-instructions-toggle.is-open .client-rail-info-ring {
-  stroke-dasharray: 0.78 0.22;
+  stroke-dasharray: 0.9 0.1;
 }
 
 .client-instructions-toggle.is-open .client-rail-info-mark {
-  transform: translateY(-0.6px);
-}
-
-.client-instructions-toggle.is-open .client-rail-info-sweep {
-  animation: client-rail-info-scan 10s linear infinite;
-}
-
-.client-rail-device-link {
-  opacity: 0.9;
+  transform: translateY(-1px);
 }
 
 .client-rail-device-bridge {
@@ -146,27 +123,27 @@
   transform: scaleX(0);
 }
 
-.client-rail-device-pulse,
-.client-rail-diagnostics-pulse {
+.client-rail-subscription-scan,
+.client-rail-info-sweep,
+.client-rail-device-packet,
+.client-rail-diagnostics-scan,
+.client-rail-rule-scan {
   stroke-width: 2.4;
   opacity: 0;
-  stroke-dasharray: 0.16 0.84;
+  stroke-dasharray: 0.18 0.82;
+  stroke-dashoffset: 1;
 }
 
-.client-rail-device-pulse {
-  stroke-dasharray: 0.5 0.5;
+.client-rail-device-packet {
+  stroke-dasharray: 0.36 0.64;
 }
 
-.client-devices-toggle.is-open .client-rail-device-primary {
-  transform: translateX(0.6px);
+.client-devices-toggle.is-open .client-rail-device-monitor {
+  transform: translateX(1px);
 }
 
-.client-devices-toggle.is-open .client-rail-device-secondary {
-  transform: translateX(-0.6px);
-}
-
-.client-devices-toggle.is-open .client-rail-device-link {
-  opacity: 1;
+.client-devices-toggle.is-open .client-rail-device-phone {
+  transform: translateX(-1px);
 }
 
 .client-devices-toggle.is-open .client-rail-device-bridge {
@@ -174,23 +151,8 @@
   transform: scaleX(1);
 }
 
-.client-devices-toggle.is-open .client-rail-device-pulse {
-  animation: client-rail-device-signal 10s linear infinite;
-}
-
-.client-rail-diagnostics-base,
-.client-rail-diagnostics-pulse {
-  vector-effect: non-scaling-stroke;
-  transform: scaleY(0.8);
-}
-
-.client-diagnostics-toggle.is-open .client-rail-diagnostics-base,
-.client-diagnostics-toggle.is-open .client-rail-diagnostics-pulse {
-  transform: scaleY(1);
-}
-
-.client-diagnostics-toggle.is-open .client-rail-diagnostics-pulse {
-  animation: client-rail-diagnostics-scan 10s linear infinite;
+.client-diagnostics-toggle.is-open .client-rail-diagnostics-glass {
+  transform: translate(1px, -1px) rotate(-4deg);
 }
 
 .client-local-rules-toggle.is-open .client-rail-rule-knob.is-top {
@@ -201,38 +163,25 @@
   transform: translateX(-2px);
 }
 
-.client-local-rules-toggle.is-open .client-rail-rule-knob {
-  animation: client-rail-rule-pulse 10s ease-in-out infinite;
+.client-subscription-toggle.is-open .client-rail-subscription-scan,
+.client-instructions-toggle.is-open .client-rail-info-sweep,
+.client-devices-toggle.is-open .client-rail-device-packet,
+.client-diagnostics-toggle.is-open .client-rail-diagnostics-scan,
+.client-local-rules-toggle.is-open .client-rail-rule-scan {
+  animation: client-rail-ambient-trace 10s 1.1s linear infinite;
 }
 
-@keyframes client-rail-detail-pulse {
-  0%, 8%, 100% { transform: translateX(0); }
-  4% { transform: translateX(0.8px); }
+.client-local-rules-toggle.is-open .client-rail-rule-scan.is-bottom {
+  animation: client-rail-ambient-trace 10s 1.32s linear infinite;
 }
 
-@keyframes client-rail-info-scan {
+@keyframes client-rail-ambient-trace {
   0% { opacity: 0; stroke-dashoffset: 1; }
-  2%, 8% { opacity: 1; }
+  2% { opacity: 1; }
+  8% { opacity: 1; stroke-dashoffset: 0; }
   10%, 100% { opacity: 0; stroke-dashoffset: 0; }
 }
 
-@keyframes client-rail-device-signal {
-  0% { opacity: 0; stroke-dashoffset: 1; }
-  2%, 8% { opacity: 1; }
-  10%, 100% { opacity: 0; stroke-dashoffset: 0; }
-}
-
-@keyframes client-rail-diagnostics-scan {
-  0% { opacity: 0; stroke-dashoffset: 1; }
-  2%, 8% { opacity: 1; }
-  10%, 100% { opacity: 0; stroke-dashoffset: 0; }
-}
-
-@keyframes client-rail-rule-pulse {
-  0%, 10%, 100% { stroke-width: 1.6; }
-  5% { stroke-width: 2.4; }
-}
-
 .client-local-rules-toggle:disabled {
   cursor: default;
   color: var(--client-muted);
@@ -252,6 +201,7 @@
 }
 
 .client-rail-action.is-open {
+  --client-rail-state-duration: 480ms;
   color: var(--client-accent);
 }
 

src/web/styles/themes.css

@@ -117,6 +117,10 @@
     stroke-dashoffset: 0;
   }
 
+  .client-rail-action:active:not(:disabled) svg {
+    transform: none;
+  }
+
   .client-local-rule,
   .client-local-rule-enabled svg,
   .client-local-rule-enabled circle,