vowl.css

/*-----------------------------------------------------------------
 VOWL graphical elements (part of spec) - mixed CSS and SVG styles
-----------------------------------------------------------------*/

/*-------- Text --------*/
.text {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
}

.subtext {
    font-size: 9px;
}

.text.instance-count {
    fill: #666;
}

.external + text .instance-count {
    fill: #aaa;
}

.cardinality {
    font-size: 10px;
}

.text, .embedded {
    pointer-events: none;
}

/*------- Colors ------*/
.class, .object, .disjoint, .objectproperty, .disjointwith, .equivalentproperty, .transitiveproperty, .functionalproperty, .inversefunctionalproperty, .symmetricproperty, .allvaluesfromproperty, .somevaluesfromproperty {
    fill: #acf;
}

.label .datatype, .datatypeproperty {
    fill: #9c6;
}

.rdf, .rdfproperty {
    fill: #c9c;
}

.literal, .node .datatype {
    fill: #fc3;
}

.deprecated, .deprecatedproperty {
    fill: #ccc;
}

.external, .externalproperty {
    /*fill: #36c;*/
}

path, .nofill {
    fill: none;
}

marker path {
    fill: #000;
}

.class, path, line, .fineline {
    stroke: #000;
}

.white, .subclass, .subclassproperty, .external + text {
    fill: #fff;
}

.class.hovered, .property.hovered, .cardinality.hovered, .cardinality.focused, .filled.hovered, .filled.focused, .values-from.filled.hovered {
    fill: #f00 !important;
    cursor: pointer;
}

.hoveredForEditing {
    fill: #f00 !important;
    cursor: pointer;
}

.feature {
    fill: #f00;
    cursor: pointer;
}

@-webkit-keyframes pulseAnimation {
    0% {
        -webkit-transform: scale(1.5);
        stroke-width: 3.33;
    }
    50% {
        stroke-width: 4;
    }
    100% {
        -webkit-transform: scale(1.0);
        stroke-width: 5;
    }
}

@-moz-keyframes pulseAnimation {
    0% {
        -webkit-transform: scale(1.5);
        stroke-width: 3.33;
    }
    50% {
        stroke-width: 4;
    }
    100% {
        -webkit-transform: scale(1.0);
        stroke-width: 5;
    }
}

@-o-keyframes pulseAnimation {
    0% {
        -webkit-transform: scale(1.5);
        stroke-width: 3.33;
    }
    50% {
        stroke-width: 4;
    }
    100% {
        -webkit-transform: scale(1.0);
        stroke-width: 5;
    }
}

@keyframes pulseAnimation {
    0% {
        -webkit-transform: scale(1.5);
        stroke-width: 3.33;
    }
    50% {
        stroke-width: 4;
    }
    100% {
        -webkit-transform: scale(1.0);
        stroke-width: 5;
    }
}

.searchResultA {
    fill: none;
    stroke-width: 5;
    stroke: #f00;
    -webkit-animation-name: pulseAnimation;
    -moz-animation-name: pulseAnimation;
    -o-animation-name: pulseAnimation;
    animation-name: pulseAnimation;

    -webkit-animation-duration: 0.8s;
    -moz-animation-duration: 0.8s;
    -o-animation-duration: 0.8s;
    animation-duration: 0.8s;

    -webkit-transform: translateZ(0);
    -o-transform: translateZ(0);
    -webkit-animation-iteration-count: 3;
    -moz-animation-iteration-count: 3;
    -o-animation-iteration-count: 3;
    animation-iteration-count: 3;

    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;

}

/* a class for not animated search results (hovered over node)*/
.searchResultB {
    fill: none;
    stroke-width: 5;
    stroke: #f00;
}

.hovered-MathSymbol {
    fill: none;
    stroke: #f00 !important;
}

.focused, path.hovered {
    stroke: #f00 !important;
}

.indirect-highlighting, .feature:hover {
    fill: #f90;
    cursor: pointer;
}

.feature_hover {
    fill: #f90;
    cursor: pointer;
}

.values-from {
    stroke: #69c;
}

.symbol, .values-from.filled {
    fill: #69c;
}

/*------- Strokes ------*/
.class, path, line {
    stroke-width: 2;
}

.fineline {
    stroke-width: 1;
}

.dashed, .anonymous {
    stroke-dasharray: 8;
}

.dotted {
    stroke-dasharray: 3;
}

rect.focused, circle.focused {
    stroke-width: 4px;
}

.nostroke {
    stroke: none;
}

/*-----------------------------------------------------------------
 Additional elements for the WebVOWL demo (NOT part of spec)
-----------------------------------------------------------------*/

.addDataPropertyElement {
    fill: #9c6 !important;
    cursor: pointer;
    stroke-width: 2;
    stroke: black;
}

.addDataPropertyElement:hover {
    fill: #f90 !important;
    cursor: pointer;
    stroke-width: 2;
    stroke: black;
}

.superHiddenElement {
    fill: rgba(255, 153, 0, 0.4);
    cursor: pointer;
    stroke-width: 0;
    stroke: black;
    /*opacity:0;*/
}

.superOpacityElement {
    opacity: 0;
}

.deleteParentElement:hover {
    fill: #f90;
    cursor: pointer;
    stroke-width: 2;
    stroke: black;
}

.deleteParentElement {
    fill: #f00;
    cursor: pointer;
    stroke-width: 2;
    stroke: black;
}

.classNodeDragPath {
    stroke: black;
    stroke-width: 2px;
}

.classDraggerNodeHovered {
    fill: #f90;
    stroke: black;
    stroke-width: 2px;
    cursor: pointer;
}

.classDraggerNode {
    fill: #acf;
    stroke: black;
    stroke-width: 2px;
}

marker path {
    /* Safari and Chrome workaround for inheriting the style of its link.
       Use any value that is larger than the length of the marker path. */
    stroke-dasharray: 100;
}