blob: de7606010166ab9aa638c183b193a49dfb2aa6ca [file] [log] [blame]
Matteo Scandoloda19dff2016-02-08 16:55:44 -08001/* CONTAINER */
Matteo Scandolo16763e92016-02-24 15:40:22 -08002#xosDiagnostic, [ui-view] {
Matteo Scandoloa03110c2016-03-01 15:20:29 -08003 min-height: 700px;
4 position: relative;
Matteo Scandolo16763e92016-02-24 15:40:22 -08005}
6
7diagnostic-container .half-height {
Matteo Scandoloda19dff2016-02-08 16:55:44 -08008 position: relative;
9 height: 50%;
10}
11
Matteo Scandolo16763e92016-02-24 15:40:22 -080012diagnostic-container .onethird-height {
Matteo Scandoloba2d63d2016-02-17 13:54:11 -080013 position: relative;
14 height: 33%;
15}
16
Matteo Scandolo16763e92016-02-24 15:40:22 -080017diagnostic-container .twothird-height {
Matteo Scandoloba2d63d2016-02-17 13:54:11 -080018 position: relative;
19 height: 67%;
20}
21
Matteo Scandolo16763e92016-02-24 15:40:22 -080022diagnostic-container .subscriber-select{
Matteo Scandolo38ba3312016-02-09 16:01:49 -080023 max-width: 200px;
24 position: absolute;
25 top: 20px;
26 right: 20px;
27 z-index: 1;
28}
29
Matteo Scandoloeeb9c082016-02-09 11:19:22 -080030.half-height + .half-height {
31 border-top: 1px solid black;
32}
33
34service-topology,
35logic-topology {
Matteo Scandolobe9b13d2016-01-21 11:21:03 -080036 height: 100%;
37 width: 100%;
38 display: block;
Matteo Scandoloeeb9c082016-02-09 11:19:22 -080039 position: absolute;
40 top: 0;
Matteo Scandolobe9b13d2016-01-21 11:21:03 -080041}
42
Matteo Scandolob373a102016-02-09 11:37:11 -080043logic-topology .subscriber circle,
44logic-topology .device circle{
45 fill: #fff;
46 stroke: green;
47 stroke-width: 1px;
48}
49
Matteo Scandoloc303fd02016-02-17 15:11:33 -080050logic-topology > svg {
51 position: absolute;
52 top: 0;
53}
54
Matteo Scandoloc303fd02016-02-17 15:11:33 -080055/* CLOUDS */
56
Matteo Scandolo38ba3312016-02-09 16:01:49 -080057logic-topology .network .cloud {
58 fill: #fff;
59 stroke: green;
60 stroke-width: 1px;
61}
62
Matteo Scandolo3b507bc2016-02-17 13:59:20 -080063/* RACK */
64logic-topology .node.rack > g > rect{
65 fill: #ccc;
66 stroke: steelblue;
67 stroke-width: 1px;
68}
69
70/* CP NODE */
71
72logic-topology .compute-node > rect{
Matteo Scandolob785b572016-02-16 11:50:51 -080073 fill: #fff;
74 stroke: steelblue;
75 stroke-width: 1px;
76}
77
Matteo Scandolo3b507bc2016-02-17 13:59:20 -080078/* INSTANCE */
79
80logic-topology .instance > rect{
81 fill: #eee;
82 stroke: steelblue;
83 stroke-width: 1px;
84}
85
Matteo Scandoloedd3d6f2016-02-16 15:06:11 -080086logic-topology .node .instance.active rect{
87 fill: lightsteelblue;
88 stroke: steelblue;
89 stroke-width: 1px;
90}
91
Matteo Scandolo06afdfe2016-02-23 13:47:14 -080092logic-topology .node .instance.active.good > rect{
93 fill: green;
94}
95
96logic-topology .node .instance.active.provisioning > rect{
97 fill: yellow;
98}
99
100logic-topology .node .instance.active.bad > rect{
101 fill: red;
102}
103
104/* INSTANCE STATS */
105
106logic-topology .node .instance .stats-container rect {
107 fill: white;
108}
109
110logic-topology .node .instance .stats-container text.name{
111 font-weight: bold;
112}
113
114logic-topology .node .instance .stats-container text.ip{
115 font-style: italic;
116 font-size: 10px;
117}
118
119/* CONTAINERS */
Matteo Scandolo653c5092016-02-24 11:14:01 -0800120logic-topology .node .instance .stats-container .container rect {
Matteo Scandolo06afdfe2016-02-23 13:47:14 -0800121 fill: #eee;
122 stroke: steelblue;
123 stroke-width: 1px;
124}
125
Matteo Scandolo65d6fc42016-01-25 16:24:42 -0800126/* LEGEND */
127
128.legend {
129 fill: #fff;
130 stroke: #ccc;
131 stroke-width: 1px;
132 position: relative;
133}
134
135.legend text {
136 stroke: #000;
137}
138
Matteo Scandolobe9b13d2016-01-21 11:21:03 -0800139.node {
140 cursor: pointer;
141}
142
Matteo Scandoloc86b4c12016-01-25 17:36:08 -0800143.node circle,
144.node rect{
Matteo Scandolobe9b13d2016-01-21 11:21:03 -0800145 fill: #fff;
146 stroke: steelblue;
Matteo Scandoloda19dff2016-02-08 16:55:44 -0800147 stroke-width: 1px;
Matteo Scandolobe9b13d2016-01-21 11:21:03 -0800148}
149
Matteo Scandolofb46f5b2016-01-25 10:10:38 -0800150.node.subscriber circle,
Matteo Scandolo38ba3312016-02-09 16:01:49 -0800151.node.subscriber rect,
152.node.router circle,
153.node.router rect {
Matteo Scandolo65d6fc42016-01-25 16:24:42 -0800154 stroke: #05ffcb;
Matteo Scandolofb46f5b2016-01-25 10:10:38 -0800155}
156
Matteo Scandoloc86b4c12016-01-25 17:36:08 -0800157.node.slice rect {
Matteo Scandolo4889f5a2016-01-25 12:00:42 -0800158 stroke: #b01dff;
159}
160
Matteo Scandoloc86b4c12016-01-25 17:36:08 -0800161.node.instance rect {
Matteo Scandolo998e4652016-01-28 12:02:57 -0800162 stroke: #ccc;
163}
164
165.node.instance rect.active {
Matteo Scandolo65d6fc42016-01-25 16:24:42 -0800166 stroke: #ff8b00;
Matteo Scandolo4889f5a2016-01-25 12:00:42 -0800167}
168
Matteo Scandolo793e1dd2016-01-22 09:33:26 -0800169.node rect.slice-detail{
170 fill: #fff;
171 stroke: steelblue;
172 stroke-width: 3px;
173}
174
Matteo Scandolobe9b13d2016-01-21 11:21:03 -0800175.node text {
176 font: 12px sans-serif;
177}
178
Matteo Scandoloeeb9c082016-02-09 11:19:22 -0800179.link, .device-link {
Matteo Scandolobe9b13d2016-01-21 11:21:03 -0800180 fill: none;
181 stroke: #ccc;
182 stroke-width: 2px;
Matteo Scandolo68236262016-01-21 15:38:06 -0800183}
184
Matteo Scandolo65d6fc42016-01-25 16:24:42 -0800185.link.slice {
Matteo Scandolo39f49472016-01-25 13:55:09 -0800186 stroke: rgba(157, 4, 183, 0.29);
187}
Matteo Scandolo65d6fc42016-01-25 16:24:42 -0800188.link.instance{
Matteo Scandolo998e4652016-01-28 12:02:57 -0800189 stroke: #ccc;
190}
191
192.link.instance.active{
Matteo Scandolo65d6fc42016-01-25 16:24:42 -0800193 stroke: rgba(255, 138, 0, 0.65);
194}
Matteo Scandolo39f49472016-01-25 13:55:09 -0800195
Matteo Scandolo68236262016-01-21 15:38:06 -0800196.service-details{
197 width: 200px;
198 position: absolute;
199 top: 20px;
200 right: 20px;
Matteo Scandolo53a02262016-01-21 16:02:57 -0800201}
202
203/* when showing the thing */
204
205.animate.ng-hide-remove {
206 animation:0.5s bounceInRight ease;
207}
208
209/* when hiding the picture */
210.animate.ng-hide-add {
211 animation:0.5s bounceOutRight ease;
212}
213
Matteo Scandolo17dc11d2016-02-22 09:16:46 -0800214/* LOADER */
215.loader {
216 font-size: 10px;
217 margin: 150px auto;
218 text-indent: -9999em;
219 width: 11em;
220 height: 11em;
221 border-radius: 50%;
222 background: #ffffff;
223 background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
224 background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
225 background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
226 background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
227 background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
228 position: relative;
229 animation: load3 1.4s infinite linear;
230 transform: translateZ(0);
231}
232.loader:before {
233 width: 50%;
234 height: 50%;
235 background: #105E9E;
236 border-radius: 100% 0 0 0;
237 position: absolute;
238 top: 0;
239 left: 0;
240 content: '';
241}
242.loader:after {
243 background: #fff;
244 width: 75%;
245 height: 75%;
246 border-radius: 50%;
247 content: '';
248 margin: auto;
249 position: absolute;
250 top: 0;
251 left: 0;
252 bottom: 0;
253 right: 0;
254}
255
256@keyframes load3 {
257 0% {
258 -webkit-transform: rotate(0deg);
259 transform: rotate(0deg);
260 }
261 100% {
262 -webkit-transform: rotate(360deg);
263 transform: rotate(360deg);
264 }
265}
266
Matteo Scandolocc8fa152016-02-22 09:57:55 -0800267/* MODALS */
268
269.modal.fade.in {
270 display: block;
271}
272
Matteo Scandolo53a02262016-01-21 16:02:57 -0800273/* ANIMATIONS */
274
275@keyframes bounceInRight {
276 from, 60%, 75%, 90%, to {
277 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
278 }
279
280 from {
281 opacity: 0;
282 transform: translate3d(3000px, 0, 0);
283 }
284
285 60% {
286 opacity: 1;
287 transform: translate3d(-25px, 0, 0);
288 }
289
290 75% {
291 transform: translate3d(10px, 0, 0);
292 }
293
294 90% {
295 transform: translate3d(-5px, 0, 0);
296 }
297
298 to {
299 transform: none;
300 }
301}
302
Matteo Scandoloc303fd02016-02-17 15:11:33 -0800303@keyframes bounceOutRight {
304 20% {
305 opacity: 1;
306 transform: translate3d(-20px, 0, 0);
307 }
Matteo Scandolo53a02262016-01-21 16:02:57 -0800308
Matteo Scandoloc303fd02016-02-17 15:11:33 -0800309 to {
310 opacity: 0;
311 transform: translate3d(2000px, 0, 0);
312 }
Matteo Scandolobe9b13d2016-01-21 11:21:03 -0800313}