Refine secondary rail icon animations
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
export const HARBOR_VERSIONS = Object.freeze({
|
||||
macClient: '0.26.3',
|
||||
gatewayClient: '0.27.3',
|
||||
macClient: '0.26.4',
|
||||
gatewayClient: '0.27.4',
|
||||
gatewayBackend: '0.27.0',
|
||||
});
|
||||
|
||||
|
||||
@@ -245,11 +245,12 @@ export function DevicesToggle({
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<g className="client-rail-device-monitor">
|
||||
<rect x="2.5" y="4.5" width="9" height="10.5" rx="1.5" />
|
||||
<path d="M5 19h4M7 15v4" />
|
||||
<path d="M5 19h5.5M7 15v4" />
|
||||
</g>
|
||||
<rect className="client-rail-device-phone" x="16.5" y="7" width="5" height="9" rx="1.3" />
|
||||
<path className="client-rail-device-bridge" d="M11.5 11.5h5" />
|
||||
<path className="client-rail-device-packet" pathLength="1" d="M11.5 11.5h5" />
|
||||
<path className="client-rail-device-link" d="M19 16v3h-5.5" />
|
||||
<path className="client-rail-device-bridge" d="M10.5 19h3" />
|
||||
<path className="client-rail-device-packet" pathLength="1" d="M7 19h12" />
|
||||
</svg>
|
||||
</RailAction>;
|
||||
}
|
||||
|
||||
@@ -60,11 +60,13 @@ export function DiagnosticsToggle({
|
||||
onClick={onToggle}
|
||||
>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<g className="client-rail-diagnostics-glass">
|
||||
<circle cx="9.5" cy="9.5" r="6.5" />
|
||||
<path d="m14.2 14.2 6.3 6.3" />
|
||||
<path className="client-rail-diagnostics-trace" d="M4.5 10h2l1.2-2.4 2.2 4.8 1.2-2.4h3.4" />
|
||||
<path className="client-rail-diagnostics-scan" pathLength="1" d="M4.5 10h2l1.2-2.4 2.2 4.8 1.2-2.4h3.4" />
|
||||
<path className="client-rail-diagnostics-trace" d="M4.5 10h2l1.2-2.4 2.2 4.8 1.2-2.4h3.4" />
|
||||
<path className="client-rail-diagnostics-scan" pathLength="1" d="M4.5 10h2l1.2-2.4 2.2 4.8 1.2-2.4h3.4" />
|
||||
<g className="client-rail-diagnostics-position">
|
||||
<g className="client-rail-diagnostics-glass">
|
||||
<circle cx="9.5" cy="9.5" r="6.5" />
|
||||
<path d="m14.2 14.2 6.3 6.3" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</RailAction>;
|
||||
|
||||
@@ -249,9 +249,13 @@ export function InstructionsToggle({
|
||||
onClick={onToggle}
|
||||
>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<circle className="client-rail-info-ring" cx="12" cy="12" r="8.5" pathLength="1" />
|
||||
<circle className="client-rail-info-sweep" cx="12" cy="12" r="8.5" pathLength="1" />
|
||||
<path className="client-rail-info-mark" d="M12 11v5M12 8h.01" />
|
||||
<g className="client-rail-book-page-position is-left">
|
||||
<path className="client-rail-book-page is-left" d="M12 7.5C10.2 6.1 7.7 5.7 5 6v11c2.8-.3 5.2.3 7 1.7z" />
|
||||
</g>
|
||||
<g className="client-rail-book-page-position is-right">
|
||||
<path className="client-rail-book-page is-right" d="M12 7.5c1.8-1.4 4.3-1.8 7-1.5v11c-2.8-.3-5.2.3-7 1.7z" />
|
||||
</g>
|
||||
<path className="client-rail-book-spine" d="M12 7.5v11.2" />
|
||||
</svg>
|
||||
</RailAction>;
|
||||
}
|
||||
|
||||
@@ -832,10 +832,12 @@ export function RoutingToggle({
|
||||
>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path className="client-rail-rule-track" d="M4 7h16M4 17h16" />
|
||||
<path className="client-rail-rule-scan is-top" pathLength="1" d="M4 7h16" />
|
||||
<path className="client-rail-rule-scan is-bottom" pathLength="1" d="M4 17h16" />
|
||||
<circle className="client-rail-rule-knob is-top" cx="15" cy="7" r="2" />
|
||||
<circle className="client-rail-rule-knob is-bottom" cx="9" cy="17" r="2" />
|
||||
<g className="client-rail-rule-knob-position is-top">
|
||||
<circle className="client-rail-rule-knob is-top" cx="15" cy="7" r="2" />
|
||||
</g>
|
||||
<g className="client-rail-rule-knob-position is-bottom">
|
||||
<circle className="client-rail-rule-knob is-bottom" cx="9" cy="17" r="2" />
|
||||
</g>
|
||||
</svg>
|
||||
</RailAction>
|
||||
);
|
||||
|
||||
@@ -76,16 +76,26 @@
|
||||
|
||||
.client-rail-subscription-back,
|
||||
.client-rail-subscription-front,
|
||||
.client-rail-info-ring,
|
||||
.client-rail-info-mark,
|
||||
.client-rail-device-monitor,
|
||||
.client-rail-device-phone,
|
||||
.client-rail-book-page-position,
|
||||
.client-rail-book-spine,
|
||||
.client-rail-device-link,
|
||||
.client-rail-device-bridge,
|
||||
.client-rail-diagnostics-position,
|
||||
.client-rail-rule-knob-position {
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
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-book-page,
|
||||
.client-rail-diagnostics-glass,
|
||||
.client-rail-rule-knob {
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
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-book-page.is-right {
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.client-rail-action .client-rail-subscription-card,
|
||||
@@ -105,17 +115,20 @@
|
||||
transform: translate(-2px, 1px);
|
||||
}
|
||||
|
||||
.client-rail-info-ring {
|
||||
stroke-dasharray: 1 0;
|
||||
stroke-dashoffset: 0.1;
|
||||
.client-instructions-toggle.is-open .client-rail-book-page-position.is-left {
|
||||
transform: translateX(-1.25px) rotate(-2.5deg);
|
||||
}
|
||||
|
||||
.client-instructions-toggle.is-open .client-rail-info-ring {
|
||||
stroke-dasharray: 0.9 0.1;
|
||||
.client-instructions-toggle.is-open .client-rail-book-page-position.is-right {
|
||||
transform: translateX(1.25px) rotate(2.5deg);
|
||||
}
|
||||
|
||||
.client-instructions-toggle.is-open .client-rail-info-mark {
|
||||
transform: translateY(-1px);
|
||||
.client-instructions-toggle.is-open .client-rail-book-spine {
|
||||
transform: scaleY(1.06);
|
||||
}
|
||||
|
||||
.client-rail-device-link {
|
||||
opacity: 0.68;
|
||||
}
|
||||
|
||||
.client-rail-device-bridge {
|
||||
@@ -124,10 +137,8 @@
|
||||
}
|
||||
|
||||
.client-rail-subscription-scan,
|
||||
.client-rail-info-sweep,
|
||||
.client-rail-device-packet,
|
||||
.client-rail-diagnostics-scan,
|
||||
.client-rail-rule-scan {
|
||||
.client-rail-diagnostics-scan {
|
||||
stroke-width: 2.4;
|
||||
opacity: 0;
|
||||
stroke-dasharray: 0.18 0.82;
|
||||
@@ -138,12 +149,8 @@
|
||||
stroke-dasharray: 0.36 0.64;
|
||||
}
|
||||
|
||||
.client-devices-toggle.is-open .client-rail-device-monitor {
|
||||
transform: translateX(1px);
|
||||
}
|
||||
|
||||
.client-devices-toggle.is-open .client-rail-device-phone {
|
||||
transform: translateX(-1px);
|
||||
.client-devices-toggle.is-open .client-rail-device-link {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.client-devices-toggle.is-open .client-rail-device-bridge {
|
||||
@@ -151,28 +158,42 @@
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.client-diagnostics-toggle.is-open .client-rail-diagnostics-glass {
|
||||
transform: translate(1px, -1px) rotate(-4deg);
|
||||
.client-rail-diagnostics-trace {
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
.client-local-rules-toggle.is-open .client-rail-rule-knob.is-top {
|
||||
transform: translateX(2px);
|
||||
.client-diagnostics-toggle.is-open .client-rail-diagnostics-position {
|
||||
transform: translate(2px, -1px) rotate(-7deg);
|
||||
}
|
||||
|
||||
.client-local-rules-toggle.is-open .client-rail-rule-knob.is-bottom {
|
||||
transform: translateX(-2px);
|
||||
.client-local-rules-toggle.is-open .client-rail-rule-knob-position.is-top {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.client-local-rules-toggle.is-open .client-rail-rule-knob-position.is-bottom {
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
|
||||
.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 {
|
||||
.client-diagnostics-toggle.is-open .client-rail-diagnostics-scan {
|
||||
animation: client-rail-ambient-trace 10s 1.1s linear infinite;
|
||||
}
|
||||
|
||||
.client-local-rules-toggle.is-open .client-rail-rule-scan.is-bottom {
|
||||
animation: client-rail-ambient-trace 10s 1.32s linear infinite;
|
||||
.client-instructions-toggle.is-open .client-rail-book-page.is-right {
|
||||
animation: client-rail-book-turn 10s 1.1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.client-diagnostics-toggle.is-open .client-rail-diagnostics-glass {
|
||||
animation: client-rail-glass-scan 10s 1.1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.client-local-rules-toggle.is-open .client-rail-rule-knob.is-top {
|
||||
animation: client-rail-rule-tune-top 10s 1.1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.client-local-rules-toggle.is-open .client-rail-rule-knob.is-bottom {
|
||||
animation: client-rail-rule-tune-bottom 10s 1.28s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes client-rail-ambient-trace {
|
||||
@@ -182,6 +203,28 @@
|
||||
10%, 100% { opacity: 0; stroke-dashoffset: 0; }
|
||||
}
|
||||
|
||||
@keyframes client-rail-book-turn {
|
||||
0%, 2%, 10%, 100% { transform: translateX(0) scaleX(1); }
|
||||
5% { transform: translateX(-1px) scaleX(0.18); }
|
||||
7% { transform: translateX(-0.5px) scaleX(0.55); }
|
||||
}
|
||||
|
||||
@keyframes client-rail-glass-scan {
|
||||
0%, 2%, 10%, 100% { transform: translateX(0) rotate(0); }
|
||||
4% { transform: translateX(-3px) rotate(6deg); }
|
||||
7% { transform: translateX(1.5px) rotate(-3deg); }
|
||||
}
|
||||
|
||||
@keyframes client-rail-rule-tune-top {
|
||||
0%, 2%, 10%, 100% { transform: translateX(0); }
|
||||
6% { transform: translateX(-2px); }
|
||||
}
|
||||
|
||||
@keyframes client-rail-rule-tune-bottom {
|
||||
0%, 2%, 10%, 100% { transform: translateX(0); }
|
||||
6% { transform: translateX(2px); }
|
||||
}
|
||||
|
||||
.client-local-rules-toggle:disabled {
|
||||
cursor: default;
|
||||
color: var(--client-muted);
|
||||
|
||||
Reference in New Issue
Block a user