189 lines
3.5 KiB
CSS
189 lines
3.5 KiB
CSS
/**
|
|
* Module: react-flow base style overrides.
|
|
*/
|
|
@import 'reactflow/dist/style.css';
|
|
|
|
/* stylelint-disable selector-class-pattern */
|
|
|
|
.react-flow__handle {
|
|
pointer-events: auto;
|
|
|
|
z-index: var(--z-index-navigation);
|
|
cursor: default !important;
|
|
border-radius: 9999px;
|
|
|
|
border-color: var(--color-border);
|
|
background-color: var(--color-card);
|
|
|
|
.selected & {
|
|
border-color: var(--color-muted-foreground);
|
|
}
|
|
|
|
.space-mode & {
|
|
pointer-events: none !important;
|
|
}
|
|
}
|
|
|
|
.react-flow__resize-control.handle {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
|
|
z-index: var(--z-index-navigation);
|
|
color: var(--color-muted-foreground);
|
|
|
|
width: 0;
|
|
height: 0;
|
|
|
|
&:hover {
|
|
color: var(--color-foreground);
|
|
}
|
|
|
|
.space-mode & {
|
|
pointer-events: none !important;
|
|
}
|
|
}
|
|
|
|
.react-flow__pane {
|
|
cursor: inherit;
|
|
|
|
.space-mode & {
|
|
cursor: grab;
|
|
|
|
&.dragging {
|
|
cursor: grabbing;
|
|
}
|
|
}
|
|
}
|
|
|
|
.react-flow__edge {
|
|
cursor: inherit;
|
|
}
|
|
|
|
.react-flow__attribution {
|
|
font-size: var(--font-size-sm);
|
|
font-family: var(--font-ui);
|
|
font-weight: 400;
|
|
margin: 1rem;
|
|
|
|
background-color: transparent;
|
|
color: var(--color-muted-foreground);
|
|
}
|
|
|
|
[class*='react-flow__node-'] {
|
|
.space-mode & {
|
|
box-shadow: none;
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
transition-property: box-shadow;
|
|
transition-timing-function: var(--transition-bezier);
|
|
transition-duration: var(--duration-select);
|
|
|
|
&:hover:not(.selected) {
|
|
box-shadow: 0 0 0 2px var(--color-selected);
|
|
transition-delay: var(--duration-select);
|
|
}
|
|
}
|
|
|
|
.react-flow__node-token {
|
|
font-size: 14px;
|
|
cursor: default;
|
|
|
|
border: 1px solid;
|
|
border-color: var(--color-border);
|
|
border-radius: 100%;
|
|
|
|
width: 40px;
|
|
height: 40px;
|
|
|
|
outline-offset: -2px;
|
|
outline-style: solid;
|
|
outline-color: transparent;
|
|
|
|
transition-property: outline-offset;
|
|
transition-timing-function: var(--transition-bezier);
|
|
transition-duration: var(--duration-select);
|
|
|
|
&.selected {
|
|
outline-offset: 4px;
|
|
outline-color: var(--color-graph-selected);
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
.react-flow__node-step {
|
|
font-size: 14px;
|
|
cursor: default;
|
|
|
|
color: var(--color-foreground);
|
|
border: 1px solid;
|
|
border-color: var(--color-border);
|
|
border-radius: 100%;
|
|
|
|
width: 40px;
|
|
height: 40px;
|
|
|
|
outline-offset: -2px;
|
|
outline-style: solid;
|
|
outline-color: transparent;
|
|
|
|
transition-property: outline-offset;
|
|
transition-timing-function: var(--transition-bezier);
|
|
transition-duration: var(--duration-select);
|
|
|
|
&.selected {
|
|
outline-offset: 4px;
|
|
outline-color: var(--color-graph-selected);
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
.react-flow__node-concept {
|
|
cursor: default;
|
|
font-size: 14px;
|
|
|
|
border: 1px solid;
|
|
border-color: var(--color-border);
|
|
border-radius: 100%;
|
|
|
|
width: 40px;
|
|
height: 40px;
|
|
|
|
outline-offset: -2px;
|
|
outline-style: solid;
|
|
outline-color: transparent;
|
|
|
|
transition-property: outline-offset;
|
|
transition-timing-function: var(--transition-bezier);
|
|
transition-duration: var(--duration-select);
|
|
|
|
&.selected {
|
|
outline-offset: 4px;
|
|
outline-color: var(--color-graph-selected);
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
.react-flow__node-input,
|
|
.react-flow__node-synthesis,
|
|
.react-flow__node-reference {
|
|
border-radius: 5px;
|
|
border-width: 0;
|
|
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
background-color: transparent;
|
|
}
|
|
|
|
.react-flow__node-block {
|
|
border-radius: 5px;
|
|
border-width: 0;
|
|
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
background-color: transparent;
|
|
pointer-events: none !important;
|
|
}
|