gui/ngXosViews/serviceTopology/src/css/serviceTopology.css

service-canvas {
    height: 100%;
    width: 100%;
    display: block;
}

service-canvas svg {
    position: absolute;
    top: 0;
}

.node {
    cursor: pointer;
}

.node circle {
    fill: #fff;
    stroke: steelblue;
    stroke-width: 3px;
}

.node.subscriber circle,
.node.internet circle {
    stroke: #ffdb07;
}

.node.slice circle {
    stroke: #b01dff;
}

.node.instance circle {
    stroke: #ea25ff;
}

.node rect.slice-detail{
    fill: #fff;
    stroke: steelblue;
    stroke-width: 3px;
}

.node text {
    font: 12px sans-serif;
}

.link {
    fill: none;
    stroke: #ccc;
    stroke-width: 2px;
}

.service-details{
    width: 200px;
    position: absolute;
    top: 20px;
    right: 20px;
}

/* when showing the thing */

.animate.ng-hide-remove {
    animation:0.5s bounceInRight ease;
}

/* when hiding the picture */
.animate.ng-hide-add {
    animation:0.5s bounceOutRight ease;
}

/* ANIMATIONS */

@keyframes bounceInRight {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    from {
        opacity: 0;
        transform: translate3d(3000px, 0, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0);
    }

    75% {
        transform: translate3d(10px, 0, 0);
    }

    90% {
        transform: translate3d(-5px, 0, 0);
    }

    to {
        transform: none;
    }
}

@keyframes bounceInLeft {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0);
    }

    75% {
        transform: translate3d(-10px, 0, 0);
    }

    90% {
        transform: translate3d(5px, 0, 0);
    }

    to {
        transform: none;
    }
}