blob: 54beba3cf6b7b664cdf18277a2b69586d26048b0 [file] [log] [blame]
Matteo Scandolofcdbed32016-02-08 16:55:44 -08001/* CONTAINER */
2diagnostic .half-height {
3 position: relative;
4 height: 50%;
5}
6
7service-topology {
Matteo Scandolo8a64fa42016-01-21 11:21:03 -08008 height: 100%;
9 width: 100%;
10 display: block;
11}
12
Matteo Scandolo2c33a4c2016-01-25 16:24:42 -080013/* LEGEND */
14
15.legend {
16 fill: #fff;
17 stroke: #ccc;
18 stroke-width: 1px;
19 position: relative;
20}
21
22.legend text {
23 stroke: #000;
24}
25
Matteo Scandolo8a64fa42016-01-21 11:21:03 -080026.node {
27 cursor: pointer;
28}
29
Matteo Scandolo5bf04572016-01-25 17:36:08 -080030.node circle,
31.node rect{
Matteo Scandolo8a64fa42016-01-21 11:21:03 -080032 fill: #fff;
33 stroke: steelblue;
Matteo Scandolofcdbed32016-02-08 16:55:44 -080034 stroke-width: 1px;
Matteo Scandolo8a64fa42016-01-21 11:21:03 -080035}
36
Matteo Scandolof2c99012016-01-25 10:10:38 -080037.node.subscriber circle,
38.node.internet circle {
Matteo Scandolo2c33a4c2016-01-25 16:24:42 -080039 stroke: #05ffcb;
Matteo Scandolof2c99012016-01-25 10:10:38 -080040}
41
Matteo Scandolo5bf04572016-01-25 17:36:08 -080042.node.slice rect {
Matteo Scandolo071ef462016-01-25 12:00:42 -080043 stroke: #b01dff;
44}
45
Matteo Scandolo5bf04572016-01-25 17:36:08 -080046.node.instance rect {
Matteo Scandoloc9ebd922016-01-28 12:02:57 -080047 stroke: #ccc;
48}
49
50.node.instance rect.active {
Matteo Scandolo2c33a4c2016-01-25 16:24:42 -080051 stroke: #ff8b00;
Matteo Scandolo071ef462016-01-25 12:00:42 -080052}
53
Matteo Scandolo6e8a75a2016-01-22 09:33:26 -080054.node rect.slice-detail{
55 fill: #fff;
56 stroke: steelblue;
57 stroke-width: 3px;
58}
59
Matteo Scandolo8a64fa42016-01-21 11:21:03 -080060.node text {
61 font: 12px sans-serif;
62}
63
64.link {
65 fill: none;
66 stroke: #ccc;
67 stroke-width: 2px;
Matteo Scandolo06f45d62016-01-21 15:38:06 -080068}
69
Matteo Scandolo2c33a4c2016-01-25 16:24:42 -080070.link.slice {
Matteo Scandolo9ef3c842016-01-25 13:55:09 -080071 stroke: rgba(157, 4, 183, 0.29);
72}
Matteo Scandolo2c33a4c2016-01-25 16:24:42 -080073.link.instance{
Matteo Scandoloc9ebd922016-01-28 12:02:57 -080074 stroke: #ccc;
75}
76
77.link.instance.active{
Matteo Scandolo2c33a4c2016-01-25 16:24:42 -080078 stroke: rgba(255, 138, 0, 0.65);
79}
Matteo Scandolo9ef3c842016-01-25 13:55:09 -080080
Matteo Scandolo06f45d62016-01-21 15:38:06 -080081.service-details{
82 width: 200px;
83 position: absolute;
84 top: 20px;
85 right: 20px;
Matteo Scandolo3501ccb2016-01-21 16:02:57 -080086}
87
88/* when showing the thing */
89
90.animate.ng-hide-remove {
91 animation:0.5s bounceInRight ease;
92}
93
94/* when hiding the picture */
95.animate.ng-hide-add {
96 animation:0.5s bounceOutRight ease;
97}
98
99/* ANIMATIONS */
100
101@keyframes bounceInRight {
102 from, 60%, 75%, 90%, to {
103 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
104 }
105
106 from {
107 opacity: 0;
108 transform: translate3d(3000px, 0, 0);
109 }
110
111 60% {
112 opacity: 1;
113 transform: translate3d(-25px, 0, 0);
114 }
115
116 75% {
117 transform: translate3d(10px, 0, 0);
118 }
119
120 90% {
121 transform: translate3d(-5px, 0, 0);
122 }
123
124 to {
125 transform: none;
126 }
127}
128
129@keyframes bounceInLeft {
130 from, 60%, 75%, 90%, to {
131 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
132 }
133
134 0% {
135 opacity: 0;
136 transform: translate3d(-3000px, 0, 0);
137 }
138
139 60% {
140 opacity: 1;
141 transform: translate3d(25px, 0, 0);
142 }
143
144 75% {
145 transform: translate3d(-10px, 0, 0);
146 }
147
148 90% {
149 transform: translate3d(5px, 0, 0);
150 }
151
152 to {
153 transform: none;
154 }
Matteo Scandolo8a64fa42016-01-21 11:21:03 -0800155}