Spaces:
Running
Running
| /* Node editor custom styles and animations */ | |
| /* ======================================== | |
| CONNECTION LINE ANIMATIONS | |
| ======================================== */ | |
| /* Animation for regular connection lines when dragging - now truly continuous */ | |
| @keyframes flow { | |
| from { | |
| stroke-dashoffset: 10; /* Start offset equal to one complete dash cycle */ | |
| } | |
| to { | |
| stroke-dashoffset: 0; /* Move to next cycle, creating seamless continuous flow */ | |
| } | |
| } | |
| /* Applied to connection lines when user is actively dragging to connect nodes */ | |
| .connection-animated { | |
| animation: flow 0.8s linear infinite; /* Smooth continuous animation, slightly faster */ | |
| stroke-dasharray: 5, 5; /* Create dashed line: 5px dash, 5px gap pattern */ | |
| } | |
| /* Animation for processing connections - shows data flowing through active connections - now truly continuous */ | |
| @keyframes processingFlow { | |
| from { | |
| stroke-dashoffset: 12; /* Start offset equal to one complete dash cycle (8+4=12) */ | |
| } | |
| to { | |
| stroke-dashoffset: 0; /* Move to next cycle, creating seamless continuous flow */ | |
| } | |
| } | |
| /* Applied to connection lines when nodes are actively processing data */ | |
| .connection-processing { | |
| animation: processingFlow 1.0s linear infinite; /* Smooth continuous animation, optimized timing */ | |
| stroke: #22c55e; /* Green color to indicate active processing */ | |
| stroke-width: 3; /* Thicker line to make it more prominent */ | |
| stroke-dasharray: 8, 4; /* Longer dashes (8px) with smaller gaps (4px) for better visibility */ | |
| } | |
| /* ======================================== | |
| PARTICLE FLOW EFFECT (EXPERIMENTAL) | |
| ======================================== */ | |
| /* Animation for particles flowing along paths - uses CSS motion path */ | |
| @keyframes flowParticle { | |
| 0% { | |
| offset-distance: 0%; /* Start at beginning of path */ | |
| opacity: 0; /* Fade in from transparent */ | |
| } | |
| 10% { | |
| opacity: 1; /* Fully visible after 10% of animation */ | |
| } | |
| 90% { | |
| opacity: 1; /* Stay visible until 90% of animation */ | |
| } | |
| 100% { | |
| offset-distance: 100%; /* End at end of path */ | |
| opacity: 0; /* Fade out to transparent */ | |
| } | |
| } | |
| /* Class for individual particles flowing along connection paths */ | |
| .flow-particle { | |
| animation: flowParticle 2s linear infinite; /* 2 second cycle for particle to travel full path */ | |
| } | |
| /* ======================================== | |
| NODE PROCESSING STATES | |
| ======================================== */ | |
| /* Animation for nodes themselves when they're processing */ | |
| .nb-node.processing { | |
| animation: processingPulse 1.5s ease-in-out infinite; /* Gentle pulsing effect */ | |
| } | |
| /* Special styling for processing node headers */ | |
| .nb-node.processing .nb-header { | |
| /* Subtle green gradient background to indicate processing state */ | |
| background: linear-gradient(90deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1)); | |
| } | |