180 lines
2.4 KiB
Plaintext
180 lines
2.4 KiB
Plaintext
@import url('./themes/index');
|
|
|
|
.noScalingStroke() {
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
|
|
.@{x6-prefix}-graph {
|
|
position: relative;
|
|
overflow: hidden;
|
|
outline: none;
|
|
touch-action: none;
|
|
|
|
&-background,
|
|
&-grid,
|
|
&-svg {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
|
|
&-stage {
|
|
user-select: none;
|
|
}
|
|
}
|
|
|
|
&&-pannable {
|
|
cursor: grab;
|
|
cursor: -moz-grab;
|
|
cursor: -webkit-grab;
|
|
}
|
|
|
|
&&-panning {
|
|
cursor: grabbing;
|
|
cursor: -moz-grabbing;
|
|
cursor: -webkit-grabbing;
|
|
user-select: none;
|
|
}
|
|
}
|
|
|
|
.@{x6-prefix}-node {
|
|
cursor: move;
|
|
|
|
&&-immovable {
|
|
cursor: default;
|
|
}
|
|
|
|
* {
|
|
-webkit-user-drag: none;
|
|
}
|
|
|
|
.scalable * {
|
|
.noScalingStroke();
|
|
}
|
|
|
|
[magnet='true'] {
|
|
cursor: crosshair;
|
|
transition: opacity 0.3s;
|
|
|
|
&:hover {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
/* stylelint-disable-next-line */
|
|
foreignObject {
|
|
display: block;
|
|
overflow: visible;
|
|
background-color: transparent;
|
|
|
|
& > body {
|
|
position: static;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: visible;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
.@{x6-prefix}-edge {
|
|
.source-marker,
|
|
.target-marker {
|
|
.noScalingStroke();
|
|
}
|
|
|
|
.connection {
|
|
stroke-linejoin: round;
|
|
fill: none;
|
|
}
|
|
|
|
.connection-wrap {
|
|
cursor: move;
|
|
opacity: 0;
|
|
fill: none;
|
|
stroke: #000;
|
|
stroke-width: 15;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
|
|
&:hover {
|
|
opacity: 0.4;
|
|
stroke-opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
.vertices {
|
|
cursor: move;
|
|
opacity: 0;
|
|
|
|
.vertex {
|
|
fill: #1abc9c;
|
|
|
|
:hover {
|
|
fill: #34495e;
|
|
stroke: none;
|
|
}
|
|
}
|
|
|
|
.vertex-remove {
|
|
cursor: pointer;
|
|
fill: #fff;
|
|
}
|
|
|
|
.vertex-remove-area {
|
|
cursor: pointer;
|
|
opacity: 0.1;
|
|
}
|
|
|
|
.vertex-group:hover .vertex-remove-area {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.arrowheads {
|
|
cursor: move;
|
|
opacity: 0;
|
|
|
|
.arrowhead {
|
|
fill: #1abc9c;
|
|
|
|
:hover {
|
|
fill: #f39c12;
|
|
stroke: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tools {
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
|
|
.tool-options {
|
|
display: none;
|
|
}
|
|
|
|
.tool-remove circle {
|
|
fill: #f00;
|
|
}
|
|
|
|
.tool-remove path {
|
|
fill: #fff;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.vertices,
|
|
.arrowheads,
|
|
.tools {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.@{x6-prefix}-highlight-opacity {
|
|
opacity: 0.3;
|
|
}
|