blob: 54beba3cf6b7b664cdf18277a2b69586d26048b0 [file] [log] [blame]
/* CONTAINER */
diagnostic .half-height {
position: relative;
height: 50%;
}
service-topology {
height: 100%;
width: 100%;
display: block;
}
/* LEGEND */
.legend {
fill: #fff;
stroke: #ccc;
stroke-width: 1px;
position: relative;
}
.legend text {
stroke: #000;
}
.node {
cursor: pointer;
}
.node circle,
.node rect{
fill: #fff;
stroke: steelblue;
stroke-width: 1px;
}
.node.subscriber circle,
.node.internet circle {
stroke: #05ffcb;
}
.node.slice rect {
stroke: #b01dff;
}
.node.instance rect {
stroke: #ccc;
}
.node.instance rect.active {
stroke: #ff8b00;
}
.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;
}
.link.slice {
stroke: rgba(157, 4, 183, 0.29);
}
.link.instance{
stroke: #ccc;
}
.link.instance.active{
stroke: rgba(255, 138, 0, 0.65);
}
.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;
}
}