smartgraph.css

/*
STYLESHEET FOR SMARTGRAPH VISUALIZATION.

For your customization, please see:
https://openjfx.io/javadoc/19/javafx.graphics/javafx/scene/doc-files/cssref.html

And know that:
- The drawing area is a Pane, which is an extension of Region;
- A vertex is of type Shape;
- The edges are of type CubicLine (Shape);
- The labels are of type Pane (background) + Text (accept both sets of properties);
- The arrows are of type Path.

This should help you understand which styles you can apply to each type of elements.
*/

.graph {
    -fx-background-color: #F4FFFB;
    /* you can use -fx-background-image to set a background image */
}

.vertex {
    -fx-stroke-width: 3;
    -fx-stroke: #61B5F1;
    -fx-stroke-type: inside; /* you should keep this if using arrows; it will keep the shape radius consistent. */
    -fx-fill: #B1DFF7;
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.25), 8, 0.2, 0, 4);
}

.vertex:hover { /* pseudo-classes also work */
    /*-fx-cursor: default; */ /* You can use this style to override the hand/move cursors while hovering. */
    -fx-stroke-width: 4;
}

.vertex-label {
    -fx-font: bold 8pt "sans-serif";
    -fx-padding: 5px;
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.25), 8, 0.2, 0, 4);
}

.vertex-label:hover {
    -fx-background-color: white;
    -fx-background-radius: 5;
    -fx-border-radius: 5;
    -fx-border-color: black;
}

.edge {
    -fx-stroke-width: 2;
    -fx-stroke: #FF6D66;  
    -fx-stroke-dash-array: 2 5 2 5; /* remove for clean lines */
    -fx-fill: transparent; /* important to keep for curved edges */
    -fx-stroke-line-cap: round;
    -fx-opacity: 0.8;
}

.edge:hover {
    -fx-stroke-width: 3;
}

.edge-label {
    -fx-font: normal 5pt "sans-serif";
    -fx-fill: white;
    -fx-background-color: red;
    -fx-background-radius: 0;
    -fx-border-color: black;
    -fx-padding: 2px;
}

.edge-label:hover {
    -fx-font: bold 5pt "sans-serif";
    -fx-background-radius: 5;
    -fx-border-radius: 5;
}

/* Since version 2.0.0-rc2 this style is cumulatively applied to arrows, after the "edge" class.
 * Use to, e.g., to remove the dash effect (that will not look good in arrows).
 * Afterwards, styles applied to the edges are propagated to the respective arrows. You can, however, apply
 * specific styles to the arrows programmatically. See example programs.
 */
.arrow {
    -fx-stroke-dash-array: none;
}

/* Custom vertex class. If you use node.setStyleClass("myVertex"), any previous styling
 * will be overwritten. If you use node.addStyleClass("myVertex"), the styles are applied
 * cumulatively; in the later case, any properties not wanted from the default "vertex" class
 * must be overwritten.
 */
.myVertex {
    -fx-stroke-width: 4;
    -fx-stroke: green;
    -fx-stroke-type: inside; /* you should keep this if using arrows */
    -fx-fill: yellowgreen;
    -fx-opacity: 0.5;
}

/* Custom edge class. The same above logic applies to edges.
 */
.myEdge {
    -fx-stroke-width: 2;
    -fx-stroke: red;
    -fx-opacity: 1;
    -fx-fill: transparent; /* important to keep for curved edges */
}