Refine secondary rail icons and animations
This commit is contained in:
@@ -243,11 +243,11 @@ export function DevicesToggle({
|
||||
onClick={onToggle}
|
||||
>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<rect className="client-rail-device-primary" x="3.5" y="5" width="7" height="10" rx="1.5" />
|
||||
<rect className="client-rail-device-secondary" x="13.5" y="8" width="7" height="7" rx="1.5" />
|
||||
<path className="client-rail-device-link" d="M7 15v4h3.5M17 15v4h-3.5" />
|
||||
<path className="client-rail-device-bridge" d="M10.5 19h3" />
|
||||
<path className="client-rail-device-pulse" pathLength="1" d="M7 19h10" />
|
||||
<rect className="client-rail-device-primary" x="3" y="4.5" width="9" height="11" rx="1.5" />
|
||||
<rect className="client-rail-device-secondary" x="15" y="7" width="6" height="9" rx="1.4" />
|
||||
<path className="client-rail-device-link" d="M5.5 19.5h4M7.5 15.5v4" />
|
||||
<path className="client-rail-device-bridge" d="M12 11.5h3" />
|
||||
<path className="client-rail-device-pulse" pathLength="1" d="M12 11.5h3" />
|
||||
</svg>
|
||||
</RailAction>;
|
||||
}
|
||||
|
||||
@@ -249,9 +249,9 @@ export function InstructionsToggle({
|
||||
onClick={onToggle}
|
||||
>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<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" />
|
||||
<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" />
|
||||
<path className="client-rail-book-spine" d="M12 7.5v11.2" />
|
||||
<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" />
|
||||
</svg>
|
||||
</RailAction>;
|
||||
}
|
||||
|
||||
@@ -416,8 +416,8 @@ export function RoutingToggle({
|
||||
>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path className="client-rail-rule-track" d="M4 7h16M4 17h16" />
|
||||
<circle className="client-rail-rule-knob is-top" cx="12" cy="7" r="2" />
|
||||
<circle className="client-rail-rule-knob is-bottom" cx="12" cy="17" r="2" />
|
||||
<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" />
|
||||
</svg>
|
||||
</RailAction>
|
||||
);
|
||||
|
||||
@@ -71,8 +71,9 @@
|
||||
.client-rail-subscription-back,
|
||||
.client-rail-subscription-front,
|
||||
.client-rail-subscription-lines,
|
||||
.client-rail-book-page,
|
||||
.client-rail-book-spine,
|
||||
.client-rail-info-ring,
|
||||
.client-rail-info-sweep,
|
||||
.client-rail-info-mark,
|
||||
.client-rail-device-primary,
|
||||
.client-rail-device-secondary,
|
||||
.client-rail-device-link,
|
||||
@@ -83,7 +84,7 @@
|
||||
.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-dashoffset 620ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
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);
|
||||
}
|
||||
|
||||
.client-rail-action .client-rail-subscription-card,
|
||||
@@ -92,63 +93,52 @@
|
||||
}
|
||||
|
||||
.client-rail-subscription-back {
|
||||
transform: translate(-1.4px, 1.4px);
|
||||
}
|
||||
|
||||
.client-rail-subscription-front {
|
||||
transform: translateX(1px);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
.client-rail-subscription-lines {
|
||||
opacity: 0.52;
|
||||
transform: scaleX(0.68);
|
||||
opacity: 0.9;
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.client-subscription-toggle.is-open .client-rail-subscription-back {
|
||||
transform: translate(0, 0);
|
||||
transform: translate(0.6px, -0.6px);
|
||||
}
|
||||
|
||||
.client-subscription-toggle.is-open .client-rail-subscription-front {
|
||||
transform: translate(-1px, 0.6px);
|
||||
transform: translate(-1.5px, 1px);
|
||||
}
|
||||
|
||||
.client-subscription-toggle.is-open .client-rail-subscription-lines {
|
||||
opacity: 1;
|
||||
transform: scaleX(1);
|
||||
animation: client-rail-detail-pulse 10s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.client-rail-book-page.is-left {
|
||||
transform: translateX(1.7px) scaleX(0.58);
|
||||
transform-origin: right center;
|
||||
.client-rail-info-ring {
|
||||
stroke-dasharray: 1 0;
|
||||
stroke-dashoffset: 0.25;
|
||||
}
|
||||
|
||||
.client-rail-book-page.is-right {
|
||||
transform: translateX(-1.7px) scaleX(0.58);
|
||||
transform-origin: left center;
|
||||
.client-rail-info-sweep {
|
||||
stroke-width: 2.4;
|
||||
stroke-dasharray: 0.14 0.86;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.client-rail-book-spine {
|
||||
opacity: 0.55;
|
||||
transform: scaleY(0.74);
|
||||
.client-instructions-toggle.is-open .client-rail-info-ring {
|
||||
stroke-dasharray: 0.78 0.22;
|
||||
}
|
||||
|
||||
.client-instructions-toggle.is-open .client-rail-book-page,
|
||||
.client-instructions-toggle.is-open .client-rail-book-spine {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0) scale(1);
|
||||
.client-instructions-toggle.is-open .client-rail-info-mark {
|
||||
transform: translateY(-0.6px);
|
||||
}
|
||||
|
||||
.client-rail-device-primary {
|
||||
transform: translate(-0.9px, -1.8px);
|
||||
}
|
||||
|
||||
.client-rail-device-secondary {
|
||||
transform: translate(0.9px, -1.8px);
|
||||
.client-instructions-toggle.is-open .client-rail-info-sweep {
|
||||
animation: client-rail-info-scan 10s linear infinite;
|
||||
}
|
||||
|
||||
.client-rail-device-link {
|
||||
opacity: 0.55;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.client-rail-device-bridge {
|
||||
@@ -163,9 +153,16 @@
|
||||
stroke-dasharray: 0.16 0.84;
|
||||
}
|
||||
|
||||
.client-devices-toggle.is-open .client-rail-device-primary,
|
||||
.client-rail-device-pulse {
|
||||
stroke-dasharray: 0.5 0.5;
|
||||
}
|
||||
|
||||
.client-devices-toggle.is-open .client-rail-device-primary {
|
||||
transform: translateX(0.6px);
|
||||
}
|
||||
|
||||
.client-devices-toggle.is-open .client-rail-device-secondary {
|
||||
transform: translate(0, 0);
|
||||
transform: translateX(-0.6px);
|
||||
}
|
||||
|
||||
.client-devices-toggle.is-open .client-rail-device-link {
|
||||
@@ -178,13 +175,13 @@
|
||||
}
|
||||
|
||||
.client-devices-toggle.is-open .client-rail-device-pulse {
|
||||
animation: client-rail-device-signal 760ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
animation: client-rail-device-signal 10s linear infinite;
|
||||
}
|
||||
|
||||
.client-rail-diagnostics-base,
|
||||
.client-rail-diagnostics-pulse {
|
||||
vector-effect: non-scaling-stroke;
|
||||
transform: scaleY(0.22);
|
||||
transform: scaleY(0.8);
|
||||
}
|
||||
|
||||
.client-diagnostics-toggle.is-open .client-rail-diagnostics-base,
|
||||
@@ -193,27 +190,47 @@
|
||||
}
|
||||
|
||||
.client-diagnostics-toggle.is-open .client-rail-diagnostics-pulse {
|
||||
animation: client-rail-diagnostics-scan 760ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
animation: client-rail-diagnostics-scan 10s linear infinite;
|
||||
}
|
||||
|
||||
.client-local-rules-toggle.is-open .client-rail-rule-knob.is-top {
|
||||
transform: translateX(3px);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.client-local-rules-toggle.is-open .client-rail-rule-knob.is-bottom {
|
||||
transform: translateX(-3px);
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
.client-local-rules-toggle.is-open .client-rail-rule-knob {
|
||||
animation: client-rail-rule-pulse 10s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes client-rail-detail-pulse {
|
||||
0%, 8%, 100% { transform: translateX(0); }
|
||||
4% { transform: translateX(0.8px); }
|
||||
}
|
||||
|
||||
@keyframes client-rail-info-scan {
|
||||
0% { opacity: 0; stroke-dashoffset: 1; }
|
||||
2%, 8% { opacity: 1; }
|
||||
10%, 100% { opacity: 0; stroke-dashoffset: 0; }
|
||||
}
|
||||
|
||||
@keyframes client-rail-device-signal {
|
||||
0% { opacity: 0; stroke-dashoffset: 1; }
|
||||
18%, 78% { opacity: 1; }
|
||||
100% { opacity: 0; stroke-dashoffset: 0; }
|
||||
2%, 8% { opacity: 1; }
|
||||
10%, 100% { opacity: 0; stroke-dashoffset: 0; }
|
||||
}
|
||||
|
||||
@keyframes client-rail-diagnostics-scan {
|
||||
0% { opacity: 0; stroke-dashoffset: 1; }
|
||||
16%, 84% { opacity: 1; }
|
||||
100% { opacity: 0; stroke-dashoffset: 0; }
|
||||
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 {
|
||||
|
||||
Reference in New Issue
Block a user