blob: d9d14703c22954fa0180db09502329fd787590f8 [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
Matteo Scandolo97b82cf2016-03-08 17:01:17 -08007diagnostic-container .form-control.small-padding{
8 padding: 6px;
9}
10
Matteo Scandolo16763e92016-02-24 15:40:22 -080011diagnostic-container .half-height {
Matteo Scandoloda19dff2016-02-08 16:55:44 -080012 position: relative;
13 height: 50%;
14}
15
Matteo Scandolo16763e92016-02-24 15:40:22 -080016diagnostic-container .onethird-height {
Matteo Scandoloba2d63d2016-02-17 13:54:11 -080017 position: relative;
18 height: 33%;
Matteo Scandolobd663742016-03-07 16:07:13 -080019 border-bottom: 1px solid #999;
Matteo Scandoloba2d63d2016-02-17 13:54:11 -080020}
21
Matteo Scandolo16763e92016-02-24 15:40:22 -080022diagnostic-container .twothird-height {
Matteo Scandoloba2d63d2016-02-17 13:54:11 -080023 position: relative;
24 height: 67%;
25}
26
Matteo Scandolo16763e92016-02-24 15:40:22 -080027diagnostic-container .subscriber-select{
Matteo Scandolo38ba3312016-02-09 16:01:49 -080028 max-width: 200px;
29 position: absolute;
30 top: 20px;
31 right: 20px;
32 z-index: 1;
33}
34
Matteo Scandolobd663742016-03-07 16:07:13 -080035diagnostic-container .onethird-height .well,
36diagnostic-container .twothird-height .well {
37 font-weight: bold;
38 max-width: 165px;
39 text-align: center;
40 margin-top: 15px;
41 background: #eee;
42 border-color: steelblue;
43 padding: 10px;
44}
45
Matteo Scandolod1b3bf52016-03-07 16:42:03 -080046diagnostic-container .onethird-height .well.pull-right{
47 position: absolute;
48 right: 0px;
49 top: -15px;
50 cursor: pointer;
51 z-index: 200;
52}
53
Matteo Scandolo5fc82c32016-03-02 10:59:46 -080054
55/* subscriber-status-modal */
56subscriber-status-modal .row + .row {
57 margin-top: 20px;
58}
59
Matteo Scandoloeeb9c082016-02-09 11:19:22 -080060.half-height + .half-height {
61 border-top: 1px solid black;
62}
63
64service-topology,
65logic-topology {
Matteo Scandolobe9b13d2016-01-21 11:21:03 -080066 height: 100%;
67 width: 100%;
68 display: block;
Matteo Scandoloeeb9c082016-02-09 11:19:22 -080069 position: absolute;
70 top: 0;
Matteo Scandolobe9b13d2016-01-21 11:21:03 -080071}
72
Matteo Scandolob373a102016-02-09 11:37:11 -080073logic-topology .subscriber circle,
74logic-topology .device circle{
75 fill: #fff;
76 stroke: green;
77 stroke-width: 1px;
78}
79
Matteo Scandoloc303fd02016-02-17 15:11:33 -080080logic-topology > svg {
81 position: absolute;
82 top: 0;
83}
84
Matteo Scandoloc303fd02016-02-17 15:11:33 -080085/* CLOUDS */
86
Matteo Scandolo38ba3312016-02-09 16:01:49 -080087logic-topology .network .cloud {
88 fill: #fff;
89 stroke: green;
90 stroke-width: 1px;
91}
92
Matteo Scandolo3b507bc2016-02-17 13:59:20 -080093/* RACK */
94logic-topology .node.rack > g > rect{
95 fill: #ccc;
96 stroke: steelblue;
97 stroke-width: 1px;
98}
99
100/* CP NODE */
101
102logic-topology .compute-node > rect{
Matteo Scandolob785b572016-02-16 11:50:51 -0800103 fill: #fff;
104 stroke: steelblue;
105 stroke-width: 1px;
106}
107
Matteo Scandolo3b507bc2016-02-17 13:59:20 -0800108/* INSTANCE */
109
110logic-topology .instance > rect{
111 fill: #eee;
112 stroke: steelblue;
113 stroke-width: 1px;
114}
115
Matteo Scandoloedd3d6f2016-02-16 15:06:11 -0800116logic-topology .node .instance.active rect{
117 fill: lightsteelblue;
118 stroke: steelblue;
119 stroke-width: 1px;
120}
121
Matteo Scandolo06afdfe2016-02-23 13:47:14 -0800122logic-topology .node .instance.active.good > rect{
123 fill: green;
124}
125
126logic-topology .node .instance.active.provisioning > rect{
127 fill: yellow;
128}
129
130logic-topology .node .instance.active.bad > rect{
131 fill: red;
132}
133
134/* INSTANCE STATS */
135
136logic-topology .node .instance .stats-container rect {
137 fill: white;
138}
139
140logic-topology .node .instance .stats-container text.name{
141 font-weight: bold;
142}
143
144logic-topology .node .instance .stats-container text.ip{
145 font-style: italic;
146 font-size: 10px;
147}
148
149/* CONTAINERS */
Matteo Scandolo653c5092016-02-24 11:14:01 -0800150logic-topology .node .instance .stats-container .container rect {
Matteo Scandolo06afdfe2016-02-23 13:47:14 -0800151 fill: #eee;
152 stroke: steelblue;
153 stroke-width: 1px;
154}
155
Matteo Scandolo65d6fc42016-01-25 16:24:42 -0800156/* LEGEND */
157
158.legend {
159 fill: #fff;
160 stroke: #ccc;
161 stroke-width: 1px;
162 position: relative;
163}
164
165.legend text {
166 stroke: #000;
167}
168
Matteo Scandolobe9b13d2016-01-21 11:21:03 -0800169.node {
170 cursor: pointer;
171}
172
Matteo Scandoloc86b4c12016-01-25 17:36:08 -0800173.node circle,
174.node rect{
Matteo Scandolobe9b13d2016-01-21 11:21:03 -0800175 fill: #fff;
176 stroke: steelblue;
Matteo Scandoloda19dff2016-02-08 16:55:44 -0800177 stroke-width: 1px;
Matteo Scandolobe9b13d2016-01-21 11:21:03 -0800178}
179
Matteo Scandolofb46f5b2016-01-25 10:10:38 -0800180.node.subscriber circle,
Matteo Scandolo38ba3312016-02-09 16:01:49 -0800181.node.subscriber rect,
182.node.router circle,
183.node.router rect {
Matteo Scandolo65d6fc42016-01-25 16:24:42 -0800184 stroke: #05ffcb;
Matteo Scandolofb46f5b2016-01-25 10:10:38 -0800185}
186
Matteo Scandoloc86b4c12016-01-25 17:36:08 -0800187.node.slice rect {
Matteo Scandolo4889f5a2016-01-25 12:00:42 -0800188 stroke: #b01dff;
189}
190
Matteo Scandoloc86b4c12016-01-25 17:36:08 -0800191.node.instance rect {
Matteo Scandolo998e4652016-01-28 12:02:57 -0800192 stroke: #ccc;
193}
194
195.node.instance rect.active {
Matteo Scandolo65d6fc42016-01-25 16:24:42 -0800196 stroke: #ff8b00;
Matteo Scandolo4889f5a2016-01-25 12:00:42 -0800197}
198
Matteo Scandolo793e1dd2016-01-22 09:33:26 -0800199.node rect.slice-detail{
200 fill: #fff;
201 stroke: steelblue;
202 stroke-width: 3px;
203}
204
Matteo Scandolobe9b13d2016-01-21 11:21:03 -0800205.node text {
206 font: 12px sans-serif;
207}
208
Matteo Scandolobd663742016-03-07 16:07:13 -0800209.node text.small {
210 font-size: 10px;
211}
212
Matteo Scandoloeeb9c082016-02-09 11:19:22 -0800213.link, .device-link {
Matteo Scandolobe9b13d2016-01-21 11:21:03 -0800214 fill: none;
215 stroke: #ccc;
216 stroke-width: 2px;
Matteo Scandolo68236262016-01-21 15:38:06 -0800217}
218
Matteo Scandolo65d6fc42016-01-25 16:24:42 -0800219.link.slice {
Matteo Scandolo39f49472016-01-25 13:55:09 -0800220 stroke: rgba(157, 4, 183, 0.29);
221}
Matteo Scandolo65d6fc42016-01-25 16:24:42 -0800222.link.instance{
Matteo Scandolo998e4652016-01-28 12:02:57 -0800223 stroke: #ccc;
224}
225
226.link.instance.active{
Matteo Scandolo65d6fc42016-01-25 16:24:42 -0800227 stroke: rgba(255, 138, 0, 0.65);
228}
Matteo Scandolo39f49472016-01-25 13:55:09 -0800229
Matteo Scandolo68236262016-01-21 15:38:06 -0800230.service-details{
231 width: 200px;
232 position: absolute;
233 top: 20px;
234 right: 20px;
Matteo Scandolo53a02262016-01-21 16:02:57 -0800235}
236
237/* when showing the thing */
238
239.animate.ng-hide-remove {
240 animation:0.5s bounceInRight ease;
241}
242
243/* when hiding the picture */
244.animate.ng-hide-add {
245 animation:0.5s bounceOutRight ease;
246}
247
Matteo Scandolo17dc11d2016-02-22 09:16:46 -0800248/* LOADER */
249.loader {
250 font-size: 10px;
251 margin: 150px auto;
252 text-indent: -9999em;
253 width: 11em;
254 height: 11em;
255 border-radius: 50%;
256 background: #ffffff;
257 background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
258 background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
259 background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
260 background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
261 background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
262 position: relative;
263 animation: load3 1.4s infinite linear;
264 transform: translateZ(0);
265}
266.loader:before {
267 width: 50%;
268 height: 50%;
269 background: #105E9E;
270 border-radius: 100% 0 0 0;
271 position: absolute;
272 top: 0;
273 left: 0;
274 content: '';
275}
276.loader:after {
277 background: #fff;
278 width: 75%;
279 height: 75%;
280 border-radius: 50%;
281 content: '';
282 margin: auto;
283 position: absolute;
284 top: 0;
285 left: 0;
286 bottom: 0;
287 right: 0;
288}
289
290@keyframes load3 {
291 0% {
292 -webkit-transform: rotate(0deg);
293 transform: rotate(0deg);
294 }
295 100% {
296 -webkit-transform: rotate(360deg);
297 transform: rotate(360deg);
298 }
299}
300
Matteo Scandolocc8fa152016-02-22 09:57:55 -0800301/* MODALS */
302
303.modal.fade.in {
304 display: block;
305}
306
Matteo Scandolo53a02262016-01-21 16:02:57 -0800307/* ANIMATIONS */
308
309@keyframes bounceInRight {
310 from, 60%, 75%, 90%, to {
311 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
312 }
313
314 from {
315 opacity: 0;
316 transform: translate3d(3000px, 0, 0);
317 }
318
319 60% {
320 opacity: 1;
321 transform: translate3d(-25px, 0, 0);
322 }
323
324 75% {
325 transform: translate3d(10px, 0, 0);
326 }
327
328 90% {
329 transform: translate3d(-5px, 0, 0);
330 }
331
332 to {
333 transform: none;
334 }
335}
336
Matteo Scandoloc303fd02016-02-17 15:11:33 -0800337@keyframes bounceOutRight {
338 20% {
339 opacity: 1;
340 transform: translate3d(-20px, 0, 0);
341 }
Matteo Scandolo53a02262016-01-21 16:02:57 -0800342
Matteo Scandoloc303fd02016-02-17 15:11:33 -0800343 to {
344 opacity: 0;
345 transform: translate3d(2000px, 0, 0);
346 }
Matteo Scandolobe9b13d2016-01-21 11:21:03 -0800347}