* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
background: #ffffff;
}
#viewport {
width: 100%;
height: 100%;
overflow: hidden;
cursor: grab;
}
#viewport.grabbing {
cursor: grabbing;
}
#canvas {
width: 100%;
height: 100%;
transform-origin: 0 0;
}
#canvas svg {
width: 100%;
height: 100%;
display: block;
}
.input-port, .output-port, .link {
transition: opacity 0.15s ease, stroke-width 0.15s ease;
}
.link-hitarea {
pointer-events: stroke;
}
.input-port.highlight, .output-port.highlight {
filter: drop-shadow(0 0 4px rgba(0, 100, 200, 0.8));
}
.link.highlight {
stroke-width: 3px !important;
filter: drop-shadow(0 0 3px rgba(0, 100, 200, 0.6));
}
.input-port.dimmed, .output-port.dimmed, .link.dimmed {
opacity: 0.15;
}
.input-port.pinned, .output-port.pinned, .link.pinned {
opacity: 1 !important;
}