web/src/app.scss

// Import all of Bootstrap's CSS
$form-select-indicator-color: oklch(90% 0.01 55);
@import "bootstrap/scss/bootstrap";
@import "tabulator-tables";
:root {
  --bs-border-color: oklch(90% 0.01 55);
}

path.svelte-flow__edge-path {
  stroke-width: 2;
  stroke: black;
}
.svelte-flow__edge.selected path.svelte-flow__edge-path {
  outline: var(--xy-selection-border, var(--xy-selection-border-default));
  outline-offset: 10px;
  border-radius: 1px;
}
.svelte-flow__handle {
  border-color: black;
  background: white;
  width: 10px;
  height: 10px;
}
.svelte-flow__arrowhead * {
  stroke: none;
  fill: black;
}
// We want the area node to be above the sub-flow node if its inside the sub-flow.
// This will need some more thinking for a general solution.
.svelte-flow__node-sub_flow {
  z-index: -20 !important;
}
.svelte-flow__node-area {
  z-index: -10 !important;
}
.selected .lynxkite-node {
  outline: var(--xy-selection-border, var(--xy-selection-border-default));
  outline-offset: 7.5px;
}