@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 = "/*! JointJS v3.4.1 (2021-08-18) - JavaScript diagramming library\n\n\nThis Source Code Form is subject to the terms of the Mozilla Public\nLicense, v. 2.0. If a copy of the MPL was not distributed with this\nfile, You can obtain one at http://mozilla.org/MPL/2.0/.\n*/\n/*\nA complete list of SVG properties that can be set through CSS is here:\nhttp://www.w3.org/TR/SVG/styling.html\n\nImportant note: Presentation attributes have a lower precedence over CSS style rules.\n*/\n/* .viewport is a <g> node wrapping all diagram elements in the paper */\n.joint-viewport {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n}\n\n.joint-paper > svg,\n.joint-paper-background,\n.joint-paper-grid {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n\n/*\n1. IE can't handle paths without the `d` attribute for bounding box calculation\n2. IE can't even handle 'd' attribute as a css selector (e.g path[d]) so the following rule will\n   break the links rendering.\n\npath:not([d]) {\n    display: none;\n}\n\n*/\n/* magnet is an element that can be either source or a target of a link */\n[magnet=true]:not(.joint-element) {\n  cursor: crosshair;\n}\n\n[magnet=true]:not(.joint-element):hover {\n  opacity: 0.7;\n}\n\n/*\n\nElements have CSS classes named by their types. E.g. type: basic.Rect has a CSS class \"element basic Rect\".\nThis makes it possible to easily style elements in CSS and have generic CSS rules applying to\nthe whole group of elements. Each plugin can provide its own stylesheet.\n\n*/\n.joint-element {\n  /* Give the user a hint that he can drag&drop the element. */\n  cursor: move;\n}\n\n.joint-element * {\n  user-drag: none;\n}\n\n.joint-element .scalable * {\n  /* The default behavior when scaling an element is not to scale the stroke in order to prevent the ugly effect of stroke with different proportions. */\n  vector-effect: non-scaling-stroke;\n}\n\n/*\n\nconnection-wrap is a <path> element of the joint.dia.Link that follows the .connection <path> of that link.\nIn other words, the `d` attribute of the .connection-wrap contains the same data as the `d` attribute of the\n.connection <path>. The advantage of using .connection-wrap is to be able to catch pointer events\nin the neighborhood of the .connection <path>. This is especially handy if the .connection <path> is\nvery thin.\n\n*/\n.marker-source,\n.marker-target {\n  /* This makes the arrowheads point to the border of objects even though the transform: scale() is applied on them. */\n  vector-effect: non-scaling-stroke;\n}\n\n/* Paper */\n.joint-paper {\n  position: relative;\n}\n\n/* Paper */\n/*  Highlighting  */\n.joint-highlight-opacity {\n  opacity: 0.3;\n}\n\n/*  Highlighting  */\n/*\n\nVertex markers are `<circle>` elements that appear at connection vertex positions.\n\n*/\n.joint-link .connection-wrap,\n.joint-link .connection {\n  fill: none;\n}\n\n/* <g> element wrapping .marker-vertex-group. */\n.marker-vertices {\n  opacity: 0;\n  cursor: move;\n}\n\n.marker-arrowheads {\n  opacity: 0;\n  cursor: move;\n  cursor: -webkit-grab;\n  cursor: -moz-grab;\n  /*   display: none;   */ /* setting `display: none` on .marker-arrowheads effectively switches of links reconnecting */\n}\n\n.link-tools {\n  opacity: 0;\n  cursor: pointer;\n}\n\n.link-tools .tool-options {\n  display: none; /* by default, we don't display link options tool */\n}\n\n.joint-link:hover .marker-vertices,\n.joint-link:hover .marker-arrowheads,\n.joint-link:hover .link-tools {\n  opacity: 1;\n}\n\n/* <circle> element used to remove a vertex */\n.marker-vertex-remove {\n  cursor: pointer;\n  opacity: 0.1;\n}\n\n.marker-vertex-group:hover .marker-vertex-remove {\n  opacity: 1;\n}\n\n.marker-vertex-remove-area {\n  opacity: 0.1;\n  cursor: pointer;\n}\n\n.marker-vertex-group:hover .marker-vertex-remove-area {\n  opacity: 1;\n}\n\n/*\nExample of custom changes (in pure CSS only!):\n\nDo not show marker vertices at all:  .marker-vertices { display: none; }\nDo not allow adding new vertices: .connection-wrap { pointer-events: none; }\n*/\n/* foreignObject inside the elements (i.e joint.shapes.basic.TextBlock) */\n.joint-element .fobj {\n  overflow: hidden;\n}\n\n.joint-element .fobj body {\n  background-color: transparent;\n  margin: 0px;\n  position: static;\n}\n\n.joint-element .fobj div {\n  text-align: center;\n  vertical-align: middle;\n  display: table-cell;\n  padding: 0px 5px 0px 5px;\n}\n\n/* Paper */\n.joint-paper.joint-theme-dark {\n  background-color: #18191b;\n}\n\n/* Paper */\n/*  Links  */\n.joint-link.joint-theme-dark .connection-wrap {\n  stroke: #8F8FF3;\n  stroke-width: 15;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  opacity: 0;\n  cursor: move;\n}\n\n.joint-link.joint-theme-dark .connection-wrap:hover {\n  opacity: 0.4;\n  stroke-opacity: 0.4;\n}\n\n.joint-link.joint-theme-dark .connection {\n  stroke-linejoin: round;\n}\n\n.joint-link.joint-theme-dark .link-tools .tool-remove circle {\n  fill: #F33636;\n}\n\n.joint-link.joint-theme-dark .link-tools .tool-remove path {\n  fill: white;\n}\n\n.joint-link.joint-theme-dark .link-tools [event=\"link:options\"] circle {\n  fill: green;\n}\n\n/* <circle> element inside .marker-vertex-group <g> element */\n.joint-link.joint-theme-dark .marker-vertex {\n  fill: #5652DB;\n}\n\n.joint-link.joint-theme-dark .marker-vertex:hover {\n  fill: #8E8CE1;\n  stroke: none;\n}\n\n.joint-link.joint-theme-dark .marker-arrowhead {\n  fill: #5652DB;\n}\n\n.joint-link.joint-theme-dark .marker-arrowhead:hover {\n  fill: #8E8CE1;\n  stroke: none;\n}\n\n/* <circle> element used to remove a vertex */\n.joint-link.joint-theme-dark .marker-vertex-remove-area {\n  fill: green;\n  stroke: darkgreen;\n}\n\n.joint-link.joint-theme-dark .marker-vertex-remove {\n  fill: white;\n  stroke: white;\n}\n\n/*  Links  */\n/* Paper */\n.joint-paper.joint-theme-default {\n  background-color: #FFFFFF;\n}\n\n/* Paper */\n/*  Links  */\n.joint-link.joint-theme-default .connection-wrap {\n  stroke: #000000;\n  stroke-width: 15;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  opacity: 0;\n  cursor: move;\n}\n\n.joint-link.joint-theme-default .connection-wrap:hover {\n  opacity: 0.4;\n  stroke-opacity: 0.4;\n}\n\n.joint-link.joint-theme-default .connection {\n  stroke-linejoin: round;\n}\n\n.joint-link.joint-theme-default .link-tools .tool-remove circle {\n  fill: #FF0000;\n}\n\n.joint-link.joint-theme-default .link-tools .tool-remove path {\n  fill: #FFFFFF;\n}\n\n/* <circle> element inside .marker-vertex-group <g> element */\n.joint-link.joint-theme-default .marker-vertex {\n  fill: #1ABC9C;\n}\n\n.joint-link.joint-theme-default .marker-vertex:hover {\n  fill: #34495E;\n  stroke: none;\n}\n\n.joint-link.joint-theme-default .marker-arrowhead {\n  fill: #1ABC9C;\n}\n\n.joint-link.joint-theme-default .marker-arrowhead:hover {\n  fill: #F39C12;\n  stroke: none;\n}\n\n/* <circle> element used to remove a vertex */\n.joint-link.joint-theme-default .marker-vertex-remove {\n  fill: #FFFFFF;\n}\n\n/*  Links  */\n.joint-link.joint-theme-material .connection-wrap {\n  stroke: #000000;\n  stroke-width: 15;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  opacity: 0;\n  cursor: move;\n}\n\n.joint-link.joint-theme-material .connection-wrap:hover {\n  opacity: 0.4;\n  stroke-opacity: 0.4;\n}\n\n.joint-link.joint-theme-material .connection {\n  stroke-linejoin: round;\n}\n\n.joint-link.joint-theme-material .link-tools .tool-remove circle {\n  fill: #C64242;\n}\n\n.joint-link.joint-theme-material .link-tools .tool-remove path {\n  fill: #FFFFFF;\n}\n\n/* <circle> element inside .marker-vertex-group <g> element */\n.joint-link.joint-theme-material .marker-vertex {\n  fill: #d0d8e8;\n}\n\n.joint-link.joint-theme-material .marker-vertex:hover {\n  fill: #5fa9ee;\n  stroke: none;\n}\n\n.joint-link.joint-theme-material .marker-arrowhead {\n  fill: #d0d8e8;\n}\n\n.joint-link.joint-theme-material .marker-arrowhead:hover {\n  fill: #5fa9ee;\n  stroke: none;\n}\n\n/* <circle> element used to remove a vertex */\n.joint-link.joint-theme-material .marker-vertex-remove-area {\n  fill: #5fa9ee;\n}\n\n.joint-link.joint-theme-material .marker-vertex-remove {\n  fill: white;\n}\n\n/*  Links  */\n/*  Links  */\n.joint-link.joint-theme-modern .connection-wrap {\n  stroke: #000000;\n  stroke-width: 15;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  opacity: 0;\n  cursor: move;\n}\n\n.joint-link.joint-theme-modern .connection-wrap:hover {\n  opacity: 0.4;\n  stroke-opacity: 0.4;\n}\n\n.joint-link.joint-theme-modern .connection {\n  stroke-linejoin: round;\n}\n\n.joint-link.joint-theme-modern .link-tools .tool-remove circle {\n  fill: #FF0000;\n}\n\n.joint-link.joint-theme-modern .link-tools .tool-remove path {\n  fill: #FFFFFF;\n}\n\n/* <circle> element inside .marker-vertex-group <g> element */\n.joint-link.joint-theme-modern .marker-vertex {\n  fill: #1ABC9C;\n}\n\n.joint-link.joint-theme-modern .marker-vertex:hover {\n  fill: #34495E;\n  stroke: none;\n}\n\n.joint-link.joint-theme-modern .marker-arrowhead {\n  fill: #1ABC9C;\n}\n\n.joint-link.joint-theme-modern .marker-arrowhead:hover {\n  fill: #F39C12;\n  stroke: none;\n}\n\n/* <circle> element used to remove a vertex */\n.joint-link.joint-theme-modern .marker-vertex-remove {\n  fill: white;\n}\n\n/*  Links  */\n/*\nA complete list of SVG properties that can be set through CSS is here:\nhttp://www.w3.org/TR/SVG/styling.html\n\nImportant note: Presentation attributes have a lower precedence over CSS style rules.\n*/\n/* .viewport is a <g> node wrapping all diagram elements in the paper */\n.joint-viewport {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n}\n\n.joint-paper > svg,\n.joint-paper-background,\n.joint-paper-grid {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n\n/*\n1. IE can't handle paths without the `d` attribute for bounding box calculation\n2. IE can't even handle 'd' attribute as a css selector (e.g path[d]) so the following rule will\n   break the links rendering.\n\npath:not([d]) {\n    display: none;\n}\n\n*/\n/* magnet is an element that can be either source or a target of a link */\n[magnet=true]:not(.joint-element) {\n  cursor: crosshair;\n}\n\n[magnet=true]:not(.joint-element):hover {\n  opacity: 0.7;\n}\n\n/*\n\nElements have CSS classes named by their types. E.g. type: basic.Rect has a CSS class \"element basic Rect\".\nThis makes it possible to easily style elements in CSS and have generic CSS rules applying to\nthe whole group of elements. Each plugin can provide its own stylesheet.\n\n*/\n.joint-element {\n  /* Give the user a hint that he can drag&drop the element. */\n  cursor: move;\n}\n\n.joint-element * {\n  user-drag: none;\n}\n\n.joint-element .scalable * {\n  /* The default behavior when scaling an element is not to scale the stroke in order to prevent the ugly effect of stroke with different proportions. */\n  vector-effect: non-scaling-stroke;\n}\n\n/*\n\nconnection-wrap is a <path> element of the joint.dia.Link that follows the .connection <path> of that link.\nIn other words, the `d` attribute of the .connection-wrap contains the same data as the `d` attribute of the\n.connection <path>. The advantage of using .connection-wrap is to be able to catch pointer events\nin the neighborhood of the .connection <path>. This is especially handy if the .connection <path> is\nvery thin.\n\n*/\n.marker-source,\n.marker-target {\n  /* This makes the arrowheads point to the border of objects even though the transform: scale() is applied on them. */\n  vector-effect: non-scaling-stroke;\n}\n\n/* Paper */\n.joint-paper {\n  position: relative;\n}\n\n/* Paper */\n/*  Highlighting  */\n.joint-highlight-opacity {\n  opacity: 0.3;\n}\n\n/*  Highlighting  */\n/*\n\nVertex markers are `<circle>` elements that appear at connection vertex positions.\n\n*/\n.joint-link .connection-wrap,\n.joint-link .connection {\n  fill: none;\n}\n\n/* <g> element wrapping .marker-vertex-group. */\n.marker-vertices {\n  opacity: 0;\n  cursor: move;\n}\n\n.marker-arrowheads {\n  opacity: 0;\n  cursor: move;\n  cursor: -webkit-grab;\n  cursor: -moz-grab;\n  /*   display: none;   */ /* setting `display: none` on .marker-arrowheads effectively switches of links reconnecting */\n}\n\n.link-tools {\n  opacity: 0;\n  cursor: pointer;\n}\n\n.link-tools .tool-options {\n  display: none; /* by default, we don't display link options tool */\n}\n\n.joint-link:hover .marker-vertices,\n.joint-link:hover .marker-arrowheads,\n.joint-link:hover .link-tools {\n  opacity: 1;\n}\n\n/* <circle> element used to remove a vertex */\n.marker-vertex-remove {\n  cursor: pointer;\n  opacity: 0.1;\n}\n\n.marker-vertex-group:hover .marker-vertex-remove {\n  opacity: 1;\n}\n\n.marker-vertex-remove-area {\n  opacity: 0.1;\n  cursor: pointer;\n}\n\n.marker-vertex-group:hover .marker-vertex-remove-area {\n  opacity: 1;\n}\n\n/*\nExample of custom changes (in pure CSS only!):\n\nDo not show marker vertices at all:  .marker-vertices { display: none; }\nDo not allow adding new vertices: .connection-wrap { pointer-events: none; }\n*/\n/* foreignObject inside the elements (i.e joint.shapes.basic.TextBlock) */\n.joint-element .fobj {\n  overflow: hidden;\n}\n\n.joint-element .fobj body {\n  background-color: transparent;\n  margin: 0px;\n  position: static;\n}\n\n.joint-element .fobj div {\n  text-align: center;\n  vertical-align: middle;\n  display: table-cell;\n  padding: 0px 5px 0px 5px;\n}\n\n/*  Links  */\n.joint-link.joint-theme-material .connection-wrap {\n  stroke: #000000;\n  stroke-width: 15;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  opacity: 0;\n  cursor: move;\n}\n\n.joint-link.joint-theme-material .connection-wrap:hover {\n  opacity: 0.4;\n  stroke-opacity: 0.4;\n}\n\n.joint-link.joint-theme-material .connection {\n  stroke-linejoin: round;\n}\n\n.joint-link.joint-theme-material .link-tools .tool-remove circle {\n  fill: #C64242;\n}\n\n.joint-link.joint-theme-material .link-tools .tool-remove path {\n  fill: #FFFFFF;\n}\n\n/* <circle> element inside .marker-vertex-group <g> element */\n.joint-link.joint-theme-material .marker-vertex {\n  fill: #d0d8e8;\n}\n\n.joint-link.joint-theme-material .marker-vertex:hover {\n  fill: #5fa9ee;\n  stroke: none;\n}\n\n.joint-link.joint-theme-material .marker-arrowhead {\n  fill: #d0d8e8;\n}\n\n.joint-link.joint-theme-material .marker-arrowhead:hover {\n  fill: #5fa9ee;\n  stroke: none;\n}\n\n/* <circle> element used to remove a vertex */\n.joint-link.joint-theme-material .marker-vertex-remove-area {\n  fill: #5fa9ee;\n}\n\n.joint-link.joint-theme-material .marker-vertex-remove {\n  fill: white;\n}\n\n/*  Links  */\n.pcui-graph {\n  font-family: \"Helvetica Neue\", Arial, Helvetica, sans-serif;\n  width: 100%;\n  height: 100%;\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);