160 lines
2.8 KiB
CSS
160 lines
2.8 KiB
CSS
.x6-graph {
|
|
position: relative;
|
|
overflow: hidden;
|
|
outline: none;
|
|
touch-action: none;
|
|
}
|
|
.x6-graph-background,
|
|
.x6-graph-grid,
|
|
.x6-graph-svg {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
.x6-graph-background-stage,
|
|
.x6-graph-grid-stage,
|
|
.x6-graph-svg-stage {
|
|
user-select: none;
|
|
}
|
|
.x6-graph.x6-graph-pannable {
|
|
cursor: grab;
|
|
cursor: -moz-grab;
|
|
cursor: -webkit-grab;
|
|
}
|
|
.x6-graph.x6-graph-panning {
|
|
cursor: grabbing;
|
|
cursor: -moz-grabbing;
|
|
cursor: -webkit-grabbing;
|
|
user-select: none;
|
|
}
|
|
.x6-node {
|
|
cursor: move;
|
|
/* stylelint-disable-next-line */
|
|
}
|
|
.x6-node.x6-node-immovable {
|
|
cursor: default;
|
|
}
|
|
.x6-node * {
|
|
-webkit-user-drag: none;
|
|
}
|
|
.x6-node .scalable * {
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
.x6-node [magnet='true'] {
|
|
cursor: crosshair;
|
|
transition: opacity 0.3s;
|
|
}
|
|
.x6-node [magnet='true']:hover {
|
|
opacity: 0.7;
|
|
}
|
|
.x6-node foreignObject {
|
|
display: block;
|
|
overflow: visible;
|
|
background-color: transparent;
|
|
}
|
|
.x6-node foreignObject > body {
|
|
position: static;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: visible;
|
|
background-color: transparent;
|
|
}
|
|
.x6-edge .source-marker,
|
|
.x6-edge .target-marker {
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
.x6-edge .connection {
|
|
stroke-linejoin: round;
|
|
fill: none;
|
|
}
|
|
.x6-edge .connection-wrap {
|
|
cursor: move;
|
|
opacity: 0;
|
|
fill: none;
|
|
stroke: #000;
|
|
stroke-width: 15;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
.x6-edge .connection-wrap:hover {
|
|
opacity: 0.4;
|
|
stroke-opacity: 0.4;
|
|
}
|
|
.x6-edge .vertices {
|
|
cursor: move;
|
|
opacity: 0;
|
|
}
|
|
.x6-edge .vertices .vertex {
|
|
fill: #1abc9c;
|
|
}
|
|
.x6-edge .vertices .vertex :hover {
|
|
fill: #34495e;
|
|
stroke: none;
|
|
}
|
|
.x6-edge .vertices .vertex-remove {
|
|
cursor: pointer;
|
|
fill: #fff;
|
|
}
|
|
.x6-edge .vertices .vertex-remove-area {
|
|
cursor: pointer;
|
|
opacity: 0.1;
|
|
}
|
|
.x6-edge .vertices .vertex-group:hover .vertex-remove-area {
|
|
opacity: 1;
|
|
}
|
|
.x6-edge .arrowheads {
|
|
cursor: move;
|
|
opacity: 0;
|
|
}
|
|
.x6-edge .arrowheads .arrowhead {
|
|
fill: #1abc9c;
|
|
}
|
|
.x6-edge .arrowheads .arrowhead :hover {
|
|
fill: #f39c12;
|
|
stroke: none;
|
|
}
|
|
.x6-edge .tools {
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
}
|
|
.x6-edge .tools .tool-options {
|
|
display: none;
|
|
}
|
|
.x6-edge .tools .tool-remove circle {
|
|
fill: #f00;
|
|
}
|
|
.x6-edge .tools .tool-remove path {
|
|
fill: #fff;
|
|
}
|
|
.x6-edge:hover .vertices,
|
|
.x6-edge:hover .arrowheads,
|
|
.x6-edge:hover .tools {
|
|
opacity: 1;
|
|
}
|
|
.x6-highlight-opacity {
|
|
opacity: 0.3;
|
|
}
|
|
.x6-cell-tool-editor {
|
|
position: relative;
|
|
display: inline-block;
|
|
min-height: 1em;
|
|
margin: 0;
|
|
padding: 0;
|
|
line-height: 1;
|
|
white-space: normal;
|
|
text-align: center;
|
|
vertical-align: top;
|
|
overflow-wrap: normal;
|
|
outline: none;
|
|
transform-origin: 0 0;
|
|
-webkit-user-drag: none;
|
|
}
|
|
.x6-edge-tool-editor {
|
|
border: 1px solid #275fc5;
|
|
border-radius: 2px;
|
|
}
|