/* LSH design-token overrides for Drawflow's default theme. * Drawflow ships with a bright red selected state + cyan gradient that clashes * with the LSH portal palette. This file re-skins nodes to match DaisyUI tokens. * * Load order: drawflow.min.css first, then this file (index.html ). */ /* Node container — neutral background, soft border. Kind-specific colors come * from the inner .lshdi-node markup produced by RenderNodeHtml in Razor. * * Issue 6 fix (2026-04-20): overflow was "hidden" which clipped the Drawflow * delete button (.drawflow-delete) positioned absolutely outside the node box. * Changed to "visible" so the button renders at the top-right corner. The * inner .lshdi-node handles its own rounded corners via clip-path so visual * appearance is unchanged. */ .drawflow .drawflow-node { background: #ffffff; border: 1px solid #d1d5db; /* base-300 equivalent */ border-radius: 10px; padding: 0; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; overflow: visible; width: 200px; } /* Clip the inner content separately so rounded corners still apply. * padding: 0 lets .lshdi-node control layout; width: 100% fills the node. */ .drawflow .drawflow-node .drawflow_content_node { overflow: hidden; border-radius: 10px; padding: 0; width: 100%; } /* Issue 6 — ensure the delete/close button sits above the node body and is * reachable. Drawflow renders .drawflow-delete as an absolutely-positioned * child; we bump its z-index and move it just outside the top-right corner. */ .drawflow .drawflow-node .drawflow-delete { position: absolute; top: -10px; right: -10px; z-index: 10; width: 22px; height: 22px; line-height: 22px; font-size: 14px; border-radius: 50%; background: #ef4444; /* error red */ color: #ffffff; text-align: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); display: none; /* shown on node:hover — see rule below */ } .drawflow .drawflow-node:hover { border-color: #6366f1; /* primary hover */ box-shadow: 0 3px 10px rgba(99, 102, 241, 0.18); } /* Selected state — Drawflow default applies a vivid red background to both * the node and its inner content, which makes the text inside unreadable * (issue 2026-04-27). Force the LSH primary ring and KEEP the white * background so the inner .lshdi-node markup stays legible. * * !important is intentional here — Drawflow's default rule uses the same * specificity but is loaded later by some browsers' CSS parsing order. */ .drawflow .drawflow-node.selected { background: #ffffff !important; border: 2px solid #6366f1 !important; /* primary */ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important; } .drawflow .drawflow-node.selected .drawflow_content_node { background: #ffffff !important; } /* Kind stripe — a 3px left border keeps the source/transform/sink palette * visible even when nodes are zoomed out. Matches RenderNodeHtml icon colors. */ .drawflow .drawflow-node.csv-source, .drawflow .drawflow-node.sqlserver-source, .drawflow .drawflow-node.sapb1-source, .drawflow .drawflow-node.json-source, .drawflow .drawflow-node.excel-source, .drawflow .drawflow-node.rest-source { border-left: 3px solid #0ea5e9; /* info */ } .drawflow .drawflow-node.map-transform, .drawflow .drawflow-node.filter-transform, .drawflow .drawflow-node.groupby-transform, .drawflow .drawflow-node.lookup-transform, .drawflow .drawflow-node.reconcile-transform { border-left: 3px solid #f59e0b; /* warning */ } .drawflow .drawflow-node.sqlserver-sink, .drawflow .drawflow-node.sapb1-sink { border-left: 3px solid #10b981; /* success */ } /* Ports — smaller, neutral. Drawflow default is bright yellow / white circles. */ .drawflow .drawflow-node .input, .drawflow .drawflow-node .output { width: 14px; height: 14px; background: #ffffff; border: 2px solid #94a3b8; /* slate-400 */ transition: background 120ms ease, border-color 120ms ease; } .drawflow .drawflow-node .input:hover, .drawflow .drawflow-node .output:hover { background: #6366f1; border-color: #6366f1; } /* Connection line — subtle slate, a touch thicker for readability. */ .drawflow .connection .main-path { stroke: #94a3b8; stroke-width: 3px; } .drawflow .connection .main-path:hover, .drawflow .connection.selected .main-path { stroke: #6366f1; } /* Canvas grid — very faint, non-distracting. */ #drawflow-canvas, .drawflow { background-color: #f8fafc; /* slate-50 */ background-image: linear-gradient(to right, rgba(148, 163, 184, 0.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(148, 163, 184, 0.08) 1px, transparent 1px); background-size: 20px 20px; } /* Show delete button when hovering a node (already styled above). */ .drawflow .drawflow-node:hover .drawflow-delete { display: block; } /* Typography inside nodes — slightly tighter line height to fit 2 lines. */ .drawflow .drawflow-node .lshdi-node { font-size: 13px; line-height: 1.35; color: #0f172a; }