@playcanvas/pcui-graph/styles/dist/index.mjs

A PCUI plugin for creating node-based graphs

function styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (typeof document === 'undefined') { return; }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css_248z = ".pcui-graph {\n  font-family: \"Helvetica Neue\", Arial, Helvetica, sans-serif;\n  width: 100%;\n  height: 100%;\n}\n.pcui-graph [magnet=true]:not(.joint-element) {\n  cursor: crosshair;\n}\n.pcui-graph [magnet=true]:hover {\n  opacity: 0.7;\n}\n.pcui-graph .available-magnet {\n  fill: greenyellow;\n}\n.pcui-graph #paper-html-elements {\n  position: relative;\n  border: 1px solid gray;\n  display: inline-block;\n  background: transparent;\n  overflow: hidden;\n}\n.pcui-graph #paper-html-elements svg {\n  background: transparent;\n}\n.pcui-graph #paper-html-elements svg .link {\n  z-index: 2;\n}\n.pcui-graph .html-element {\n  position: absolute;\n  background: #3498db;\n  /* Make sure events are propagated to the JointJS element so, e.g. dragging works. */\n  pointer-events: none;\n  user-select: none;\n  border-radius: 4px;\n  border: 2px solid #2980b9;\n  box-shadow: inset 0 0 5px black, 2px 2px 1px gray;\n  padding: 5px;\n  box-sizing: border-box;\n  z-index: 2;\n}\n.pcui-graph .html-element select,\n.pcui-graph .html-element input,\n.pcui-graph .html-element button {\n  /* Enable interacting with inputs only. */\n  pointer-events: auto;\n}\n.pcui-graph .html-element button.delete {\n  color: white;\n  border: none;\n  background-color: #c0392b;\n  border-radius: 20px;\n  width: 15px;\n  height: 15px;\n  line-height: 15px;\n  text-align: middle;\n  position: absolute;\n  top: -15px;\n  left: -15px;\n  padding: 0;\n  margin: 0;\n  font-weight: bold;\n  cursor: pointer;\n}\n.pcui-graph .html-element button.delete:hover {\n  width: 20px;\n  height: 20px;\n  line-height: 20px;\n}\n.pcui-graph .html-element select {\n  position: absolute;\n  right: 2px;\n  bottom: 28px;\n}\n.pcui-graph .html-element input {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  border: none;\n  color: #333;\n  padding: 5px;\n  height: 16px;\n}\n.pcui-graph .html-element label {\n  color: #333;\n  text-shadow: 1px 0 0 lightgray;\n  font-weight: bold;\n}\n.pcui-graph .html-element span {\n  position: absolute;\n  top: 2px;\n  right: 9px;\n  color: white;\n  font-size: 10px;\n}\n.pcui-graph .graph-node-div {\n  pointer-events: none;\n}\n.pcui-graph .graph-node-input {\n  pointer-events: all;\n}\n.pcui-graph .graph-node-input-no-pointer-events {\n  pointer-events: none;\n}\n.pcui-graph .graph-node-container {\n  margin-top: 5px;\n  margin-bottom: 5px;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  pointer-events: inherit;\n}\n.pcui-graph .graph-node-label {\n  max-width: 50px;\n  min-width: 50px;\n  font-size: 12px;\n  margin-left: 13px;\n}\n.pcui-graph .port-inner-body {\n  pointer-events: none;\n}\n.pcui-graph .pcui-contextmenu-parent,\n.pcui-graph .pcui-contextmenu-child {\n  height: 27px;\n}";
styleInject(css_248z);