mirror of https://github.com/ANL-CEEESA/RELOG.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
495 lines
13 KiB
495 lines
13 KiB
/* this will be exported as base.css and can be used for a basic styling */
|
|
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
|
|
.react-flow {
|
|
direction: ltr;
|
|
|
|
--xy-edge-stroke-default: #b1b1b7;
|
|
--xy-edge-stroke-width-default: 1;
|
|
--xy-edge-stroke-selected-default: #555;
|
|
|
|
--xy-connectionline-stroke-default: #b1b1b7;
|
|
--xy-connectionline-stroke-width-default: 1;
|
|
|
|
--xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);
|
|
|
|
--xy-minimap-background-color-default: #fff;
|
|
--xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
|
|
--xy-minimap-mask-stroke-color-default: transparent;
|
|
--xy-minimap-mask-stroke-width-default: 1;
|
|
--xy-minimap-node-background-color-default: #e2e2e2;
|
|
--xy-minimap-node-stroke-color-default: transparent;
|
|
--xy-minimap-node-stroke-width-default: 2;
|
|
|
|
--xy-background-color-default: transparent;
|
|
--xy-background-pattern-dots-color-default: #91919a;
|
|
--xy-background-pattern-lines-color-default: #eee;
|
|
--xy-background-pattern-cross-color-default: #e2e2e2;
|
|
background-color: var(--xy-background-color, var(--xy-background-color-default));
|
|
--xy-node-border-default: 1px solid #bbb;
|
|
--xy-node-border-selected-default: 1px solid #555;
|
|
|
|
--xy-handle-background-color-default: #333;
|
|
|
|
--xy-selection-background-color-default: rgba(150, 150, 180, 0.1);
|
|
--xy-selection-border-default: 1px dotted rgba(155, 155, 155, 0.8);
|
|
--xy-resize-background-color-default: #3367d9;
|
|
}
|
|
.react-flow.dark {
|
|
--xy-edge-stroke-default: #3e3e3e;
|
|
--xy-edge-stroke-width-default: 1;
|
|
--xy-edge-stroke-selected-default: #727272;
|
|
|
|
--xy-connectionline-stroke-default: #b1b1b7;
|
|
--xy-connectionline-stroke-width-default: 1;
|
|
|
|
--xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);
|
|
|
|
--xy-minimap-background-color-default: #141414;
|
|
--xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
|
|
--xy-minimap-mask-stroke-color-default: transparent;
|
|
--xy-minimap-mask-stroke-width-default: 1;
|
|
--xy-minimap-node-background-color-default: #2b2b2b;
|
|
--xy-minimap-node-stroke-color-default: transparent;
|
|
--xy-minimap-node-stroke-width-default: 2;
|
|
|
|
--xy-background-color-default: #141414;
|
|
--xy-background-pattern-dots-color-default: #777;
|
|
--xy-background-pattern-lines-color-default: #777;
|
|
--xy-background-pattern-cross-color-default: #777;
|
|
--xy-node-color-default: #f8f8f8;
|
|
}
|
|
.react-flow__background {
|
|
background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
.react-flow__container {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.react-flow__pane {
|
|
z-index: 1;
|
|
}
|
|
.react-flow__pane.draggable {
|
|
cursor: grab;
|
|
}
|
|
.react-flow__pane.dragging {
|
|
cursor: grabbing;
|
|
}
|
|
.react-flow__pane.selection {
|
|
cursor: pointer;
|
|
}
|
|
.react-flow__viewport {
|
|
transform-origin: 0 0;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
.react-flow__renderer {
|
|
z-index: 4;
|
|
}
|
|
.react-flow__selection {
|
|
z-index: 6;
|
|
}
|
|
.react-flow__nodesselection-rect:focus,
|
|
.react-flow__nodesselection-rect:focus-visible {
|
|
outline: none;
|
|
}
|
|
.react-flow__edge-path {
|
|
stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
|
|
stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
|
|
fill: none;
|
|
}
|
|
.react-flow__connection-path {
|
|
stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
|
|
stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
|
|
fill: none;
|
|
}
|
|
.react-flow .react-flow__edges {
|
|
position: absolute;
|
|
}
|
|
.react-flow .react-flow__edges svg {
|
|
overflow: visible;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
.react-flow__edge {
|
|
pointer-events: visibleStroke;
|
|
}
|
|
.react-flow__edge.selectable {
|
|
cursor: pointer;
|
|
}
|
|
.react-flow__edge.animated path {
|
|
stroke-dasharray: 5;
|
|
animation: dashdraw 0.5s linear infinite;
|
|
}
|
|
.react-flow__edge.animated path.react-flow__edge-interaction {
|
|
stroke-dasharray: none;
|
|
animation: none;
|
|
}
|
|
.react-flow__edge.inactive {
|
|
pointer-events: none;
|
|
}
|
|
.react-flow__edge.selected,
|
|
.react-flow__edge:focus,
|
|
.react-flow__edge:focus-visible {
|
|
outline: none;
|
|
}
|
|
.react-flow__edge.selected .react-flow__edge-path,
|
|
.react-flow__edge.selectable:focus .react-flow__edge-path,
|
|
.react-flow__edge.selectable:focus-visible .react-flow__edge-path {
|
|
stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
|
|
}
|
|
.react-flow__edge-textwrapper {
|
|
pointer-events: all;
|
|
}
|
|
.react-flow__edge .react-flow__edge-text {
|
|
pointer-events: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
}
|
|
.react-flow__connection {
|
|
pointer-events: none;
|
|
}
|
|
.react-flow__connection .animated {
|
|
stroke-dasharray: 5;
|
|
animation: dashdraw 0.5s linear infinite;
|
|
}
|
|
svg.react-flow__connectionline {
|
|
z-index: 1001;
|
|
overflow: visible;
|
|
position: absolute;
|
|
}
|
|
.react-flow__nodes {
|
|
pointer-events: none;
|
|
transform-origin: 0 0;
|
|
}
|
|
.react-flow__node {
|
|
position: absolute;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
pointer-events: all;
|
|
transform-origin: 0 0;
|
|
box-sizing: border-box;
|
|
cursor: default;
|
|
}
|
|
.react-flow__node.selectable {
|
|
cursor: pointer;
|
|
}
|
|
.react-flow__node.draggable {
|
|
cursor: grab;
|
|
pointer-events: all;
|
|
}
|
|
.react-flow__node.draggable.dragging {
|
|
cursor: grabbing;
|
|
}
|
|
.react-flow__nodesselection {
|
|
z-index: 3;
|
|
transform-origin: left top;
|
|
pointer-events: none;
|
|
}
|
|
.react-flow__nodesselection-rect {
|
|
position: absolute;
|
|
pointer-events: all;
|
|
cursor: grab;
|
|
}
|
|
.react-flow__handle {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
min-width: 5px;
|
|
min-height: 5px;
|
|
background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
|
|
}
|
|
.react-flow__handle.connectingfrom {
|
|
pointer-events: all;
|
|
}
|
|
.react-flow__handle.connectionindicator {
|
|
pointer-events: all;
|
|
cursor: crosshair;
|
|
}
|
|
.react-flow__handle-bottom {
|
|
top: auto;
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translate(-50%, 50%);
|
|
}
|
|
.react-flow__handle-top {
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.react-flow__handle-left {
|
|
top: 50%;
|
|
left: 0;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.react-flow__handle-right {
|
|
top: 50%;
|
|
right: 0;
|
|
transform: translate(50%, -50%);
|
|
}
|
|
.react-flow__edgeupdater {
|
|
cursor: move;
|
|
pointer-events: all;
|
|
}
|
|
.react-flow__panel {
|
|
position: absolute;
|
|
z-index: 5;
|
|
margin: 15px;
|
|
}
|
|
.react-flow__panel.top {
|
|
top: 0;
|
|
}
|
|
.react-flow__panel.bottom {
|
|
bottom: 0;
|
|
}
|
|
.react-flow__panel.top.center, .react-flow__panel.bottom.center {
|
|
left: 50%;
|
|
transform: translateX(-15px) translateX(-50%);
|
|
}
|
|
.react-flow__panel.left {
|
|
left: 0;
|
|
}
|
|
.react-flow__panel.right {
|
|
right: 0;
|
|
}
|
|
.react-flow__panel.left.center, .react-flow__panel.right.center {
|
|
top: 50%;
|
|
transform: translateY(-15px) translateY(-50%);
|
|
}
|
|
.react-flow__attribution {
|
|
font-size: 10px;
|
|
background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
|
|
padding: 2px 3px;
|
|
margin: 0;
|
|
}
|
|
.react-flow__attribution a {
|
|
text-decoration: none;
|
|
color: #999;
|
|
}
|
|
@keyframes dashdraw {
|
|
from {
|
|
stroke-dashoffset: 10;
|
|
}
|
|
}
|
|
.react-flow__edgelabel-renderer {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
.react-flow__viewport-portal {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
}
|
|
.react-flow__minimap {
|
|
background: var(
|
|
--xy-minimap-background-color-props,
|
|
var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
|
|
);
|
|
}
|
|
.react-flow__minimap-svg {
|
|
display: block;
|
|
}
|
|
.react-flow__minimap-mask {
|
|
fill: var(
|
|
--xy-minimap-mask-background-color-props,
|
|
var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
|
|
);
|
|
stroke: var(
|
|
--xy-minimap-mask-stroke-color-props,
|
|
var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
|
|
);
|
|
stroke-width: var(
|
|
--xy-minimap-mask-stroke-width-props,
|
|
var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
|
|
);
|
|
}
|
|
.react-flow__minimap-node {
|
|
fill: var(
|
|
--xy-minimap-node-background-color-props,
|
|
var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
|
|
);
|
|
stroke: var(
|
|
--xy-minimap-node-stroke-color-props,
|
|
var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
|
|
);
|
|
stroke-width: var(
|
|
--xy-minimap-node-stroke-width-props,
|
|
var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
|
|
);
|
|
}
|
|
.react-flow__background-pattern.dots {
|
|
fill: var(
|
|
--xy-background-pattern-color-props,
|
|
var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
|
|
);
|
|
}
|
|
.react-flow__background-pattern.lines {
|
|
stroke: var(
|
|
--xy-background-pattern-color-props,
|
|
var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
|
|
);
|
|
}
|
|
.react-flow__background-pattern.cross {
|
|
stroke: var(
|
|
--xy-background-pattern-color-props,
|
|
var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
|
|
);
|
|
}
|
|
.react-flow__controls {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.react-flow__controls.horizontal {
|
|
flex-direction: row;
|
|
}
|
|
.react-flow__controls-button {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 26px;
|
|
width: 26px;
|
|
padding: 4px;
|
|
}
|
|
.react-flow__controls-button svg {
|
|
width: 100%;
|
|
max-width: 12px;
|
|
max-height: 12px;
|
|
fill: currentColor;
|
|
}
|
|
.react-flow__node-input,
|
|
.react-flow__node-default,
|
|
.react-flow__node-output,
|
|
.react-flow__node-group {
|
|
border: var(--xy-node-border, var(--xy-node-border-default));
|
|
color: var(--xy-node-color, var(--xy-node-color-default));
|
|
}
|
|
.react-flow__node-input.selected,
|
|
.react-flow__node-input:focus,
|
|
.react-flow__node-input:focus-visible,
|
|
.react-flow__node-default.selected,
|
|
.react-flow__node-default:focus,
|
|
.react-flow__node-default:focus-visible,
|
|
.react-flow__node-output.selected,
|
|
.react-flow__node-output:focus,
|
|
.react-flow__node-output:focus-visible,
|
|
.react-flow__node-group.selected,
|
|
.react-flow__node-group:focus,
|
|
.react-flow__node-group:focus-visible {
|
|
outline: none;
|
|
border: var(--xy-node-border-selected, var(--xy-node-border-selected-default));
|
|
}
|
|
.react-flow__nodesselection-rect,
|
|
.react-flow__selection {
|
|
background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
|
|
border: var(--xy-selection-border, var(--xy-selection-border-default));
|
|
}
|
|
.react-flow__resize-control {
|
|
position: absolute;
|
|
}
|
|
.react-flow__resize-control.left,
|
|
.react-flow__resize-control.right {
|
|
cursor: ew-resize;
|
|
}
|
|
.react-flow__resize-control.top,
|
|
.react-flow__resize-control.bottom {
|
|
cursor: ns-resize;
|
|
}
|
|
.react-flow__resize-control.top.left,
|
|
.react-flow__resize-control.bottom.right {
|
|
cursor: nwse-resize;
|
|
}
|
|
.react-flow__resize-control.bottom.left,
|
|
.react-flow__resize-control.top.right {
|
|
cursor: nesw-resize;
|
|
}
|
|
/* handle styles */
|
|
.react-flow__resize-control.handle {
|
|
width: 5px;
|
|
height: 5px;
|
|
border: 1px solid #fff;
|
|
border-radius: 1px;
|
|
background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
|
|
translate: -50% -50%;
|
|
}
|
|
.react-flow__resize-control.handle.left {
|
|
left: 0;
|
|
top: 50%;
|
|
}
|
|
.react-flow__resize-control.handle.right {
|
|
left: 100%;
|
|
top: 50%;
|
|
}
|
|
.react-flow__resize-control.handle.top {
|
|
left: 50%;
|
|
top: 0;
|
|
}
|
|
.react-flow__resize-control.handle.bottom {
|
|
left: 50%;
|
|
top: 100%;
|
|
}
|
|
.react-flow__resize-control.handle.top.left {
|
|
left: 0;
|
|
}
|
|
.react-flow__resize-control.handle.bottom.left {
|
|
left: 0;
|
|
}
|
|
.react-flow__resize-control.handle.top.right {
|
|
left: 100%;
|
|
}
|
|
.react-flow__resize-control.handle.bottom.right {
|
|
left: 100%;
|
|
}
|
|
/* line styles */
|
|
.react-flow__resize-control.line {
|
|
border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
|
|
border-width: 0;
|
|
border-style: solid;
|
|
}
|
|
.react-flow__resize-control.line.left,
|
|
.react-flow__resize-control.line.right {
|
|
width: 1px;
|
|
transform: translate(-50%, 0);
|
|
top: 0;
|
|
height: 100%;
|
|
}
|
|
.react-flow__resize-control.line.left {
|
|
left: 0;
|
|
border-left-width: 1px;
|
|
}
|
|
.react-flow__resize-control.line.right {
|
|
left: 100%;
|
|
border-right-width: 1px;
|
|
}
|
|
.react-flow__resize-control.line.top,
|
|
.react-flow__resize-control.line.bottom {
|
|
height: 1px;
|
|
transform: translate(0, -50%);
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
.react-flow__resize-control.line.top {
|
|
top: 0;
|
|
border-top-width: 1px;
|
|
}
|
|
.react-flow__resize-control.line.bottom {
|
|
border-bottom-width: 1px;
|
|
top: 100%;
|
|
}
|