Spaces:
Running
Running
File size: 3,089 Bytes
f09b9f0 dbc2c2a f09b9f0 dbc2c2a f09b9f0 dbc2c2a f09b9f0 dbc2c2a f09b9f0 dbc2c2a f09b9f0 dbc2c2a f09b9f0 dbc2c2a f09b9f0 dbc2c2a f09b9f0 dbc2c2a f09b9f0 dbc2c2a f09b9f0 dbc2c2a f09b9f0 dbc2c2a f09b9f0 dbc2c2a f09b9f0 dbc2c2a f09b9f0 dbc2c2a f09b9f0 dbc2c2a f09b9f0 dbc2c2a f09b9f0 dbc2c2a f09b9f0 dbc2c2a f09b9f0 dbc2c2a f09b9f0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
/* 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));
}
|