@yworks/react-yfiles-process-mining/dist/index.css

yFiles React Process Mining Component - A powerful and versatile React component based on the yFiles library, allows you to seamlessly incorporate dynamic and interactive process mining visualizations into your applications.

@import "@yworks/react-yfiles-core/dist/index.css";

/* src/styles/RenderProcessStep.css */
.yfiles-react-render-process-step {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: #494949;
  color: #d0d0d0;
  border-radius: 7px;
  position: relative;
}
.yfiles-react-render-process-step-gauge {
  margin: 4px;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
}
.yfiles-react-render-process-step-text {
  padding: 17px 17px 17px 7px;
  font-family: Arial, sans-serif;
  max-height: 100%;
  overflow: hidden;
  flex: 1 0;
  box-sizing: border-box;
  line-height: 19px;
}
.yfiles-react-node-highlight {
  transition: box-shadow 0.5s ease-in-out;
}
.yfiles-react-node-highlight--selected {
  box-shadow: 0 0 0 5px #ffbb33;
}
.yfiles-react-node-highlight--hovered {
  box-shadow: 0 0 0 5px #249ae7;
}

/* src/styles/process-mining.css */
#react-yfiles-process-mining-stylesheet-detection {
  --yfiles-react-stylesheet-detection: react-yfiles-process-mining-stylesheet-detection;
  display: none;
}
.yfiles-react-popup__content {
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: "Roboto", sans-serif;
  border: 2px solid steelblue;
  color: #242424;
}
.yfiles-react-tooltip {
  color: #242424;
  background-color: white;
  font-family: Roboto, sans-serif;
  padding: 10px 15px;
  border-radius: 10px;
  border: 2px solid steelblue;
  line-height: 1.5em;
}
.yfiles-react-popup__items-props {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.yfiles-react-popup__close-button {
  align-self: flex-start;
}