wehub-resource-sync
98 lines
2.3 KiB
CSS
98 lines
2.3 KiB
CSS
/* Workflow Execution Animations - Fire Design System */
|
|
|
|
@keyframes pulse-heat {
|
|
0%, 100% {
|
|
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4), 0 0 20px 0 rgba(34, 197, 94, 0.2);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 0 8px rgba(34, 197, 94, 0), 0 0 30px 0 rgba(34, 197, 94, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes glow-heat {
|
|
0%, 100% {
|
|
filter: drop-shadow(0 0 2px rgba(34, 197, 94, 0.3));
|
|
}
|
|
50% {
|
|
filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.8));
|
|
}
|
|
}
|
|
|
|
.executing-node {
|
|
animation: pulse-heat 2s ease-in-out infinite;
|
|
border-color: #22C55E !important;
|
|
transition: border-color 0.3s ease-out, box-shadow 0.3s ease-out;
|
|
}
|
|
|
|
.completed-node {
|
|
animation: none !important; /* Stop any running animations immediately */
|
|
transition: border-color 0.4s ease-out, opacity 0.4s ease-out;
|
|
border-color: #9ca3af !important;
|
|
opacity: 1;
|
|
}
|
|
|
|
.failed-node {
|
|
animation: shake 0.4s ease-out !important; /* Only shake, no pulse */
|
|
border-color: #ef4444 !important;
|
|
}
|
|
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-4px); }
|
|
75% { transform: translateX(4px); }
|
|
}
|
|
|
|
/* React Flow custom styles for execution */
|
|
.react-flow__node.executing-node {
|
|
z-index: 2 !important;
|
|
}
|
|
|
|
/* Keep selected nodes within the normal stacking context so they don't float above others */
|
|
.react-flow__node.selected {
|
|
z-index: 1 !important;
|
|
}
|
|
|
|
.react-flow__edge.active-edge {
|
|
stroke: #22C55E !important;
|
|
stroke-width: 2.5px !important;
|
|
animation: dash 1.5s linear infinite, glow-edge 2s ease-in-out infinite;
|
|
z-index: 100;
|
|
}
|
|
|
|
.react-flow__edge.active-edge .react-flow__edge-text,
|
|
.react-flow__edge.selected-edge .react-flow__edge-text {
|
|
fill: #18181b !important;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
.react-flow__edge.active-edge .react-flow__edge-textbg,
|
|
.react-flow__edge.selected-edge .react-flow__edge-textbg {
|
|
fill: white !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.react-flow__edge.selected-edge {
|
|
stroke: #22C55E !important;
|
|
stroke-width: 2px !important;
|
|
}
|
|
|
|
@keyframes dash {
|
|
to {
|
|
stroke-dashoffset: -20;
|
|
}
|
|
}
|
|
|
|
@keyframes glow-edge {
|
|
0%, 100% {
|
|
filter: drop-shadow(0 0 2px rgba(34, 197, 94, 0.4));
|
|
}
|
|
50% {
|
|
filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.8));
|
|
}
|
|
}
|
|
|
|
/* No viewport transitions - keep canvas still */
|
|
.react-flow__viewport {
|
|
transition: none;
|
|
}
|