@yworks/react-yfiles-core/dist/index.css

This module provides shared functionality for the yFiles React components.

/* src/context-menu/ContextMenu.css */
.yfiles-react-context-menu {
  box-shadow:
    0 2px 4px -1px rgba(0, 0, 0, 0.2),
    0 4px 5px 0 rgba(0, 0, 0, 0.14),
    0 1px 10px 0 rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
}
.yfiles-react-context-menu__item {
  padding: 8px;
  font-weight: 500;
  font-family: Roboto, sans-serif;
  cursor: pointer;
  outline: none;
  border: none;
}
.yfiles-react-context-menu__item:hover {
  box-shadow: 0 0 100px 100px rgba(0, 0, 0, 0.1) inset;
}

/* src/controls/Controls.css */
.yfiles-react-controls__toolbar-container {
  display: flex;
  width: min-content;
  height: min-content;
}
.yfiles-react-controls__button-container {
  display: flex;
}
.yfiles-react-controls__button-container--horizontal {
  flex-direction: row;
}
.yfiles-react-controls__button-container--vertical {
  flex-direction: column;
}
.yfiles-react-controls {
  z-index: 10;
  background-color: #ebeef0;
  border-radius: 2px;
  border: 1px solid #d5d7d8;
  display: flex;
  width: min-content;
}
.yfiles-react-controls--vertical {
  flex-direction: column;
}
.yfiles-react-controls__positioned {
  display: flex;
  position: absolute;
}
.yfiles-react-controls__positioned--top-left {
  top: 20px;
  left: 20px;
}
.yfiles-react-controls__positioned--top-right {
  top: 20px;
  right: 30px;
}
.yfiles-react-controls__positioned--top-center {
  top: 20px;
  left: 0;
  right: 0;
  margin: auto;
}
.yfiles-react-controls__positioned--bottom-right {
  bottom: 25px;
  right: 30px;
}
.yfiles-react-controls__positioned--bottom-left {
  bottom: 25px;
  left: 20px;
}
.yfiles-react-controls__positioned--bottom-center {
  bottom: 25px;
  left: 0;
  right: 0;
  margin: auto;
}
.yfiles-react-controls__button {
  border: none;
  height: 32px;
  width: auto;
  min-width: 32px;
  cursor: pointer;
  color: #2f373a;
  padding: 5px;
  transition: background-color 200ms ease-in-out;
}
.yfiles-react-controls__button-img {
  width: 100%;
  height: 100%;
}
.yfiles-react-controls__button:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}
.yfiles-react-controls__button:hover {
  background-color: #dedede;
}
.yfiles-react-controls__separator {
  border-right: 1px solid #9d9998;
  border-bottom: none;
}
.yfiles-react-controls__separator--vertical {
  border-bottom: 1px solid #9d9998;
  border-right: none;
}
.yfiles-react-controls__button--zoom-fit {
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' viewBox='0.5 16.5 16 16' enable-background='new 0.5 16.5 16 16' xml:space='preserve'%3E%3Cg%3E%3Cpolygon fill='%23666666' points='1.5,17.5 1.5,22.5 6.5,17.5'/%3E%3Cpolygon fill='%23666666' points='15.5,17.5 10.5,17.5 15.5,22.5 '/%3E%3Cpolygon fill='%23666666' points='15.5,31.5 15.5,26.5 10.5,31.5 '/%3E%3Cpolygon fill='%23666666' points='1.5,31.5 1.5,26.5 6.5,31.5 '/%3E%3C/g%3E%3C/svg%3E") no-repeat 50% 50%;
}
.yfiles-react-controls__button--zoom-in {
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' viewBox='0.5 16.5 16 16' enable-background='new 0.5 16.5 16 16' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23666666' d='M10.5,16.5c-3.313,0-6,2.687-6,6c0,1.043,0.267,2.023,0.735,2.878L0.5,30.113L2.887,32.5 l4.735-4.735C8.477,28.232,9.457,28.5,10.5,28.5c3.313,0,6-2.687,6-6S13.813,16.5,10.5,16.5z M14.5,23.5h-3v3h-2v-3h-3v-2h3v-3h2 v3h3V23.5z'/%3E%3C/g%3E%3C/svg%3E") no-repeat 50% 50%;
}
.yfiles-react-controls__button--zoom-out {
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' viewBox='0.5 16.5 16 16' enable-background='new 0.5 16.5 16 16' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23666666' d='M10.5,16.5c-3.313,0-6,2.687-6,6c0,1.043,0.267,2.023,0.735,2.878L0.5,30.113L2.887,32.5 l4.735-4.735C8.477,28.232,9.457,28.5,10.5,28.5c3.313,0,6-2.687,6-6S13.813,16.5,10.5,16.5z M14.5,23.5h-8v-2h8V23.5z'/%3E%3C/g%3E%3C/svg%3E") no-repeat 50% 50%;
}
.yfiles-react-controls__button--zoom-original {
  background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' viewBox='0.5 16.5 16 16' enable-background='new 0.5 16.5 16 16' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23666666' d='m 6.272,27.932 -4.212,0 0,-1.033 1.562,0 0,-4.598 -1.288,0 0,-0.793 c 0.353,-0.066 0.655,-0.145 0.908,-0.236 0.253,-0.091 0.489,-0.203 0.709,-0.336 l 0.946,0 0,5.963 1.375,0 z m 2.717,-0.11 C 8.835,27.982 8.64,28.064 8.406,28.064 8.172,28.064 7.975,27.982 7.818,27.822 7.66,27.66 7.581,27.455 7.581,27.207 c 0,-0.25 0.079,-0.455 0.237,-0.617 0.157,-0.16 0.354,-0.242 0.588,-0.242 0.234,0 0.429,0.082 0.583,0.242 0.154,0.162 0.231,0.367 0.231,0.617 10e-4,0.248 -0.076,0.453 -0.231,0.615 z m 0,-3.761 c -0.154,0.16 -0.349,0.242 -0.583,0.242 -0.234,0 -0.431,-0.082 -0.588,-0.242 -0.158,-0.162 -0.237,-0.367 -0.237,-0.617 0,-0.248 0.079,-0.453 0.237,-0.615 0.157,-0.162 0.354,-0.242 0.588,-0.242 0.234,0 0.429,0.08 0.583,0.242 0.154,0.162 0.231,0.367 0.231,0.615 10e-4,0.249 -0.076,0.454 -0.231,0.617 z m 1.739,3.871 0,-1.033 1.562,0 0,-4.598 -1.287,0 0,-0.793 c 0.353,-0.066 0.654,-0.145 0.907,-0.236 0.253,-0.091 0.49,-0.203 0.71,-0.336 l 0.946,0 0,5.963 1.375,0 0,1.033 z'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat 50% 50%;
}

/* src/graph-component/GraphComponentStyles.css */
.yfiles-react-graph-component-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* src/tooltip-component/Tooltip.css */
.yfiles-react-tooltip {
  color: #242424;
  background-color: white;
  font-family: Roboto, sans-serif;
  padding: 10px 15px;
  border-radius: 10px;
  border: 1px solid steelblue;
}
.yfiles-tooltip {
  padding: 0;
  border: none;
  background-color: transparent;
}

/* src/overview-component/Overview.css */
.yfiles-react-overview {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 200px;
  border-radius: 4px;
  box-shadow:
    0 2px 4px -1px rgba(0, 0, 0, 0.2),
    0 4px 5px 0 rgba(0, 0, 0, 0.14),
    0 1px 10px 0 rgba(0, 0, 0, 0.12);
  background-color: white;
}
.yfiles-react-overview__positioned {
  position: absolute;
}
.yfiles-react-overview__positioned--top-left {
  top: 20px;
  left: 20px;
}
.yfiles-react-overview__positioned--top-center {
  top: 20px;
  left: 0;
  right: 0;
  margin: auto;
}
.yfiles-react-overview__positioned--top-right {
  top: 20px;
  right: 30px;
}
.yfiles-react-overview__positioned--bottom-left {
  bottom: 25px;
  left: 20px;
}
.yfiles-react-overview__positioned--bottom-center {
  bottom: 25px;
  left: 0;
  right: 0;
  margin: auto;
}
.yfiles-react-overview__positioned--bottom-right {
  bottom: 25px;
  right: 30px;
}
.yfiles-react-overview__graph-component {
  width: 100%;
  height: 100%;
  border-radius: 0 0 4px 4px;
}
.yfiles-react-overview__title {
  padding: 5px;
  display: flex;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 2rem;
  letter-spacing: 0.0125em;
  font-family: "Roboto", sans-serif;
  color: #fff;
  background-color: midnightblue;
  border-radius: 4px 4px 0 0;
}

/* src/license/LicenseError.css */
.yfiles-react-license-error {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Roboto, sans-serif;
}
.yfiles-react-license-error-dialog {
  max-width: 700px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: #f1f5f9;
  color: #334155;
  overflow-y: auto;
  text-align: left;
}
.yfiles-react-license-error-dialog__title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
.yfiles-react-license-error-dialog__paragraph {
  margin: 2ex 0;
}
.yfiles-react-license-error-dialog__code-snippet {
  background-color: #ffffff;
  padding: 0 10px;
  border-radius: 4px;
  overflow-x: auto;
}

/* src/timeline/TimelineTooltip/TimelineTooltip.css */
.yfiles-react-timeline__tooltip {
  background-color: #ffffff;
  border-color: #4281a4;
  border-width: 2px;
  border-radius: 20px;
  border-style: solid;
  padding: 5px 7px;
  font-family:
    Arial,
    Helvetica,
    sans-serif;
}
.yfiles-react-timeline__tooltip-title {
  margin: 0 0 5px 0;
  font-size: 16px;
  font-weight: bold;
}
.yfiles-react-timeline__tooltip-content {
  font-size: 14px;
}

/* src/timeline/TimelinePlayButton/TimelinePlayButton.css */
.yfiles-react-timeline__play-button {
  cursor: pointer;
  width: 32px;
  height: 32px;
  border: none;
  outline: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 32px 32px;
  margin: 8px 0 0 8px;
  background-color: transparent;
  display: inline-block;
}
.yfiles-react-timeline__play-button--idle {
  background-image: url("./play-MLO7T4TF.svg");
}
.yfiles-react-timeline__play-button--idle:hover {
  background-image: url("./play-hovered-7EEJWNTX.svg");
}
.yfiles-react-timeline__play-button--playing {
  background-image: url("./stop-EVZGSCLB.svg");
}
.yfiles-react-timeline__play-button--playing:hover {
  background-image: url("./stop-hovered-Q26FGTXI.svg");
}

/* src/popup/Popup.css */
.yfiles-react-popup {
  z-index: 10;
}
.yfiles-react-popup__content {
  box-shadow:
    0 2px 4px -1px rgba(0, 0, 0, 0.2),
    0 4px 5px 0 rgba(0, 0, 0, 0.14),
    0 1px 10px 0 rgba(0, 0, 0, 0.12);
  display: flex;
  border: 1px solid steelblue;
  border-radius: 10px;
  padding: 10px;
  overflow: hidden;
  background-color: white;
}

/* src/styles/fonts-montserrat.css */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./montserrat-400-AFX53SBF.woff2") format("woff2"), url("./montserrat-400-X37LQRFX.woff") format("woff");
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+2000-206F,
    U+2074,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./montserrat-500-6T4KANFG.woff2") format("woff2"), url("./montserrat-500-7OEWY7BO.woff") format("woff");
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+2000-206F,
    U+2074,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./montserrat-700-BXSRZYGS.woff2") format("woff2"), url("./montserrat-700-FTIHSXYV.woff") format("woff");
  unicode-range:
    U+0000-00FF,
    U+0131,
    U+0152-0153,
    U+02BB-02BC,
    U+02C6,
    U+02DA,
    U+02DC,
    U+2000-206F,
    U+2074,
    U+20AC,
    U+2122,
    U+2191,
    U+2193,
    U+2212,
    U+2215,
    U+FEFF,
    U+FFFD;
}

/* src/styles/fonts-roboto.css */
@font-face {
  font-family: "Roboto";
  src: url("./Roboto-Regular-GMKE7L63.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Roboto";
  src: url("./Roboto-Italic-LIEPUAIZ.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Roboto";
  src: url("./Roboto-Bold-HRCILAPB.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Roboto";
  src:
    local("Roboto BoldItalic"),
    local("Roboto-BoldItalic"),
    url("./Roboto-BoldItalic-ZIYRS7A2.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
}

/* src/styles/fonts.css */