input highlights

This commit is contained in:
2026-03-08 09:29:41 +01:00
parent 4065bde50d
commit 78c3ebddd7
7 changed files with 90 additions and 7 deletions

View File

@@ -33,6 +33,29 @@ body {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}
/* Connection validation: valid targets clearly highlighted (from drag start and when hovering), invalid dimmed while connecting */
.react-flow__handle.react-flow__handle-connecting.react-flow__handle-valid,
.react-flow__handle.connection-valid-target {
background: hsl(var(--primary)) !important;
color: hsl(var(--primary-foreground));
box-shadow: 0 0 0 3px hsl(var(--primary)), 0 0 12px 2px hsl(var(--primary) / 0.5) !important;
opacity: 1 !important;
}
.react-flow__handle.react-flow__handle-connecting.react-flow__handle-valid svg,
.react-flow__handle.connection-valid-target svg {
color: inherit;
}
.dark .react-flow__handle.react-flow__handle-connecting.react-flow__handle-valid,
.dark .react-flow__handle.connection-valid-target {
background: hsl(var(--primary)) !important;
box-shadow: 0 0 0 3px hsl(var(--primary)), 0 0 14px 4px hsl(var(--primary) / 0.6) !important;
}
.react-flow__handle.react-flow__handle-connecting:not(.react-flow__handle-valid):not(.connection-valid-target),
.react-flow__handle.connection-invalid-target {
opacity: 0.25 !important;
pointer-events: none;
}
/* Animated React Flow edges: thicker stroke + path animation */
.react-flow__edge path.animated-edge-path,
.animated-edge-path {