diff --git a/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/graph/styles.css b/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/graph/styles.css deleted file mode 100644 index 2032d919..00000000 --- a/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/graph/styles.css +++ /dev/null @@ -1,89 +0,0 @@ -@import '../../../../../../styling/reactflow.css'; - -/* stylelint-disable selector-class-pattern */ - -.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); - } -} - -.react-flow__node-input, -.react-flow__node-synthesis { - cursor: pointer; - - 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; -} - -.cc-node-operation { - cursor: pointer; - - border-radius: 5px; - border-color: var(--color-muted-foreground); - border-width: 1px; - - color: var(--color-foreground); - background-color: var(--color-card); - - 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: var(--color-foreground); - } -} - -.cc-node-block { - cursor: default; - - border-radius: 5px; - border-style: dashed; - border-width: 2px; - - padding: 4px; - - color: var(--color-muted-foreground); - background-color: transparent; - - .selected & { - color: var(--color-foreground); - border-color: var(--color-graph-selected); - } - - &:hover { - color: var(--color-foreground); - } -} diff --git a/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/oss-flow.tsx b/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/oss-flow.tsx index 066adfd1..e0501e40 100644 --- a/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/oss-flow.tsx +++ b/rsconcept/frontend/src/features/oss/pages/oss-page/editor-oss-graph/oss-flow.tsx @@ -32,8 +32,6 @@ import { type ContextMenuData, NodeContextMenu } from './node-context-menu'; import { ToolbarOssGraph } from './toolbar-oss-graph'; import { useGetLayout } from './use-get-layout'; -import './graph/styles.css'; - const ZOOM_MAX = 2; const ZOOM_MIN = 0.5; diff --git a/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/ast-flow.tsx b/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/ast-flow.tsx index e51a3bb7..b54f9e0f 100644 --- a/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/ast-flow.tsx +++ b/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/ast-flow.tsx @@ -9,8 +9,6 @@ import { ASTEdgeTypes } from './graph/ast-edge-types'; import { applyLayout } from './graph/ast-layout'; import { ASTNodeTypes } from './graph/ast-node-types'; -import './graph/styles.css'; - interface ASTFlowProps { data: SyntaxTree; onNodeEnter: (node: Node) => void; diff --git a/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/graph/styles.css b/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/graph/styles.css deleted file mode 100644 index 3e13cd3b..00000000 --- a/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-ast/graph/styles.css +++ /dev/null @@ -1,29 +0,0 @@ -@import '../../../../../styling/reactflow.css'; - -/* stylelint-disable selector-class-pattern */ - -.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; - } -} diff --git a/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-type-graph/graph/styles.css b/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-type-graph/graph/styles.css deleted file mode 100644 index 56dad892..00000000 --- a/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-type-graph/graph/styles.css +++ /dev/null @@ -1,30 +0,0 @@ -@import '../../../../../styling/reactflow.css'; - -/* stylelint-disable selector-class-pattern */ - -.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; - } -} diff --git a/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-type-graph/mgraph-flow.tsx b/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-type-graph/mgraph-flow.tsx index 80172bb7..cf1b6a50 100644 --- a/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-type-graph/mgraph-flow.tsx +++ b/rsconcept/frontend/src/features/rsform/dialogs/dlg-show-type-graph/mgraph-flow.tsx @@ -9,8 +9,6 @@ import { TMGraphEdgeTypes } from './graph/mgraph-edge-types'; import { applyLayout } from './graph/mgraph-layout'; import { TMGraphNodeTypes } from './graph/mgraph-node-types'; -import './graph/styles.css'; - const ZOOM_MAX = 2; const ZOOM_MIN = 0.5; diff --git a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/graph/styles.css b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/graph/styles.css deleted file mode 100644 index 87dd7ddc..00000000 --- a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/graph/styles.css +++ /dev/null @@ -1,29 +0,0 @@ -@import '../../../../../../styling/reactflow.css'; - -/* stylelint-disable selector-class-pattern */ - -.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; - } -} diff --git a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/tg-flow.tsx b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/tg-flow.tsx index 67026ce4..6240a707 100644 --- a/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/tg-flow.tsx +++ b/rsconcept/frontend/src/features/rsform/pages/rsform-page/editor-term-graph/tg-flow.tsx @@ -32,8 +32,6 @@ import { ToolbarTermGraph } from './toolbar-term-graph'; import { useFilteredGraph } from './use-filtered-graph'; import { ViewHidden } from './view-hidden'; -import './graph/styles.css'; - const ZOOM_MAX = 3; const ZOOM_MIN = 0.25; export const VIEW_PADDING = 0.3; diff --git a/rsconcept/frontend/src/styling/components.css b/rsconcept/frontend/src/styling/components.css index 3822d00a..20a16396 100644 --- a/rsconcept/frontend/src/styling/components.css +++ b/rsconcept/frontend/src/styling/components.css @@ -280,3 +280,50 @@ --tw-enter-translate-y: calc(2 * var(--spacing)); } } + +@utility cc-node-operation { + cursor: pointer; + + border-radius: 5px; + border-color: var(--color-muted-foreground); + border-width: 1px; + + color: var(--color-foreground); + background-color: var(--color-card); + + 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: var(--color-foreground); + } +} + +@utility cc-node-block { + cursor: default; + + border-radius: 5px; + border-style: dashed; + border-width: 2px; + + padding: 4px; + + color: var(--color-muted-foreground); + background-color: transparent; + + .selected & { + color: var(--color-foreground); + border-color: var(--color-graph-selected); + } + + &:hover { + color: var(--color-foreground); + } +} diff --git a/rsconcept/frontend/src/styling/overrides.css b/rsconcept/frontend/src/styling/overrides.css index aa93f5e9..d4f5a038 100644 --- a/rsconcept/frontend/src/styling/overrides.css +++ b/rsconcept/frontend/src/styling/overrides.css @@ -2,6 +2,7 @@ * Module: Override imported components CSS styling. */ @import './constants.css'; +@import './reactflow.css'; /* stylelint-disable selector-class-pattern */ diff --git a/rsconcept/frontend/src/styling/reactflow.css b/rsconcept/frontend/src/styling/reactflow.css index 0f9b4f46..7042a773 100644 --- a/rsconcept/frontend/src/styling/reactflow.css +++ b/rsconcept/frontend/src/styling/reactflow.css @@ -18,6 +18,21 @@ } } +.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); + } +} + .react-flow__pane { cursor: default; } @@ -41,3 +56,106 @@ box-shadow: 0 0 0 2px var(--color-selected) !important; } } + +.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 { + cursor: pointer; + + 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; +}