neo4jd3-graph/lib/styles/styles.css

The neo4jd3-graph npm package is a tool designed for visualizing Neo4j graph data. This package utilizes the power of D3.js (version 4.2.1) for rendering interactive and dynamic graphs representing relationships within Neo4j databases. The visualization i

* {
    margin: 0;
    padding: 0;
}

body {
    font: 13px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 20px;
}

.neo4jd3-graph {
    width: 100vw;
    height: 100vh;
}

.neo4jd3-info {
    font-size: 16px;
    padding: 10px;
    position: absolute;
    right: 0;
    top: 10;
}

.node {
    &.node-highlighted .ring {
        -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
        filter: alpha(opacity=50);
        opacity: .5;
        stroke: #888;
        stroke-width: 12px;
    }

    .outline {
        cursor: pointer;
        fill: rgb(165, 171, 182);
        pointer-events: all;
        stroke: rgb(154, 161, 172);
        stroke-width: 2px;
    }

    .ring {
        fill: none;
        -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
        filter: alpha(opacity=0);
        opacity: 0;
        stroke: #6ac6ff;
        stroke-width: 8px;
    }

    .text.icon {
        font-family: FontAwesome;
    }
}

.node.selected .ring,
.node:hover .ring {
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)';
    filter: alpha(opacity=30);
    opacity: .3;
}

.relationship {
    cursor: default;

    line {
        stroke: #aaa;
    }

    .outline {
        cursor: default;
    }

    .overlay {
        cursor: default;
        fill: #6ac6ff;
        -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
        filter: alpha(opacity=0);
        opacity: 0;
    }

    text {
        cursor: default;
    }
}

.relationship.selected .overlay,
.relationship:hover .overlay {
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)';
    filter: alpha(opacity=30);
    opacity: .3;
}

svg {
    cursor: move;
}