diagram.css

/**
 * Copyright (c) 2024 ipyelk contributors.
 * Distributed under the terms of the Modified BSD License.
 */

/*
  CSS for in-DOM or standalone viewing: all selectors should tolerate having
  `.jp-ElkView` stripped.
*/
:root {
  --jp-elk-stroke-width: 1;

  --jp-elk-node-fill: var(--jp-layout-color1);
  --jp-elk-node-stroke: var(--jp-border-color0);

  --jp-elk-edge-stroke: var(--jp-border-color0);

  --jp-elk-port-fill: var(--jp-layout-color1);
  --jp-elk-port-stroke: var(--jp-border-color0);

  --jp-elk-label-color: var(--jp-ui-font-color0);
  --jp-elk-label-font: var(--jp-content-font-family);
  --jp-elk-label-font-size: var(--jp-ui-font-size0);

  /* stable states */
  --jp-elk-color-selected: var(--jp-brand-color2);
  --jp-elk-stroke-width-selected: 3;

  /* interactive states */
  --jp-elk-stroke-hover: var(--jp-brand-color3);
  --jp-elk-stroke-width-hover: 2;

  --jp-elk-stroke-hover-selected: var(--jp-warn-color3);

  /* sugar */
  --jp-elk-transition: 0.1s ease-in;
}

/* firefox doesnt apply style correctly with the addition of .jp-ElkView */
symbol.elksymbol {
  overflow: visible;
}

.jp-ElkView .elknode {
  stroke: var(--jp-elk-node-stroke);
  stroke-width: var(--jp-elk-stroke-width);
  fill: var(--jp-elk-node-fill);
}

.jp-ElkView .elkport {
  stroke: var(--jp-elk-port-stroke);
  stroke-width: var(--jp-elk-stroke-width);
  fill: var(--jp-elk-port-fill);
}

.jp-ElkView .elkedge {
  fill: none;
  stroke: var(--jp-elk-edge-stroke);
  stroke-width: var(--jp-elk-stroke-width);
}

.jp-ElkView .elklabel {
  stroke-width: 0;
  stroke: var(--jp-elk-label-color);
  fill: var(--jp-elk-label-color);
  font-family: var(--jp-elk-label-font);
  font-size: var(--jp-elk-label-font-size);
  dominant-baseline: hanging;
}

.jp-ElkView .elkjunction {
  stroke: none;
  fill: var(--jp-elk-edge-stroke);
}

/* stable states */
.jp-ElkView .elknode.selected,
.jp-ElkView .elkport.selected,
.jp-ElkView .elkedge.selected,
.jp-ElkView .elkedge.selected .elkarrow {
  stroke: var(--jp-elk-color-selected);
  stroke-width: var(--jp-elk-stroke-width-selected);
  transition: stroke stroke-width var(--jp-elk-transition);
}

.jp-ElkView .elklabel.selected {
  fill: var(--jp-elk-color-selected);
  transition: fill var(--jp-elk-transition);
}

/* interactive states: elklabel does not have a mouseover selector/ancestor */
.jp-ElkView .elknode.mouseover,
.jp-ElkView .elkport.mouseover,
.jp-ElkView .elkedge.mouseover {
  stroke: var(--jp-elk-stroke-hover);
  stroke-width: var(--jp-elk-stroke-width-hover);
  transition: stroke stroke-width var(--jp-elk-transition);
}

.jp-ElkView .elklabel.mouseover {
  fill: var(--jp-elk-stroke-hover);
  transition: fill stroke var(--jp-elk-transition);
}

.jp-ElkView .elknode.selected.mouseover,
.jp-ElkView .elkport.selected.mouseover,
.jp-ElkView .elkedge.selected.mouseover,
.jp-ElkView .elkedge.selected.mouseover .elkarrow {
  stroke-width: var(--jp-elk-stroke-width-hover);
  stroke: var(--jp-elk-stroke-hover-selected);
  transition: fill stroke var(--jp-elk-transition);
}

.jp-ElkView .elklabel.selected.mouseover {
  fill: var(--jp-elk-stroke-hover-selected);
  transition: fill stroke var(--jp-elk-transition);
}

.elkcontainer.widget {
  overflow: hidden;
}

.elkcontainer.widget .jupyter-widgets {
  transition: transform 0.5s;
}