jointjs/docs/demo/shapes/shapes.devs.css

JavaScript diagramming library

.joint-type-devs text {
    text-transform: uppercase;
    font-weight: 800;
    font-family: "Source Sans Pro", sans-serif;
}

.joint-type-devs .body {
    fill: #ffffff;
    stroke: #31d0c6;
    stroke-width: 6px;
}

.joint-type-devs .label {
    fill: #31d0c6;
    font-size: 16px;
}

.joint-type-devs .port-body {
    stroke: #ffffff;
    stroke-width: 3px;
    fill: #7c68fc;
}

.joint-type-devs .port-body:hover {
    opacity: 1;
    fill: #ff7e5d;
}

.joint-type-devs .port-label {
    fill: #7c68fc;
    text-decoration: none;
}

.joint-type-devs.joint-type-devs-atomic .body {
    stroke: #feb663;
}

.joint-type-devs.joint-type-devs-atomic .label {
    fill: #feb663;
}

/* links */

.joint-link .connection {
    stroke: #4B4F6A;
    stroke-width: 4px;
}

.joint-link .marker-arrowheads .marker-arrowhead,
.joint-link .marker-vertex-group .marker-vertex,
.joint-link .marker-vertex-group .marker-vertex:hover {
    fill: #31D0C6;
}

.joint-link .marker-arrowheads .marker-arrowhead:hover {
    fill: #F39C12;
}

.joint-link .link-tools .link-tool .tool-remove circle {
    fill: #fe854f;
}

/* highlighting */

.highlighted-parent .body {
    stroke: #fe854f;
    transition: stroke 1s;
}

.highlighted-parent .label {
    fill: #fe854f;
    transition: fill 1s;
    text-decoration: underline;
}

.joint-type-devs .joint-highlight-stroke {
    stroke: #ff7e5d;
    stroke-width: 6px;
    pointer-events: none;
}