blob: 5db9d7f204f3e3713e337cab560ca17fc5a2e6e4 [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 Scandolo105954e2016-03-11 11:16:58 -0800108logic-topology .compute-node > text{
109 font-size: 16px;
110}
111
Matteo Scandolo3b507bc2016-02-17 13:59:20 -0800112/* INSTANCE */
113
114logic-topology .instance > rect{
115 fill: #eee;
116 stroke: steelblue;
117 stroke-width: 1px;
118}
119
Matteo Scandoloedd3d6f2016-02-16 15:06:11 -0800120logic-topology .node .instance.active rect{
121 fill: lightsteelblue;
122 stroke: steelblue;
123 stroke-width: 1px;
124}
125
Matteo Scandolo06afdfe2016-02-23 13:47:14 -0800126logic-topology .node .instance.active.good > rect{
127 fill: green;
128}
129
130logic-topology .node .instance.active.provisioning > rect{
131 fill: yellow;
132}
133
134logic-topology .node .instance.active.bad > rect{
135 fill: red;
136}
137
138/* INSTANCE STATS */
139
140logic-topology .node .instance .stats-container rect {
141 fill: white;
142}
143
144logic-topology .node .instance .stats-container text.name{
145 font-weight: bold;
146}
147
148logic-topology .node .instance .stats-container text.ip{
149 font-style: italic;
150 font-size: 10px;
151}
152
153/* CONTAINERS */
Matteo Scandolo653c5092016-02-24 11:14:01 -0800154logic-topology .node .instance .stats-container .container rect {
Matteo Scandolo06afdfe2016-02-23 13:47:14 -0800155 fill: #eee;
156 stroke: steelblue;
157 stroke-width: 1px;
158}
159
Matteo Scandolo65d6fc42016-01-25 16:24:42 -0800160/* LEGEND */
161
162.legend {
163 fill: #fff;
164 stroke: #ccc;
165 stroke-width: 1px;
166 position: relative;
167}
168
169.legend text {
170 stroke: #000;
171}
172
Matteo Scandolobe9b13d2016-01-21 11:21:03 -0800173.node {
174 cursor: pointer;
175}
176
Matteo Scandoloc86b4c12016-01-25 17:36:08 -0800177.node circle,
178.node rect{
Matteo Scandolobe9b13d2016-01-21 11:21:03 -0800179 fill: #fff;
180 stroke: steelblue;
Matteo Scandoloda19dff2016-02-08 16:55:44 -0800181 stroke-width: 1px;
Matteo Scandolobe9b13d2016-01-21 11:21:03 -0800182}
183
Matteo Scandolofb46f5b2016-01-25 10:10:38 -0800184.node.subscriber circle,
Matteo Scandolo38ba3312016-02-09 16:01:49 -0800185.node.subscriber rect,
186.node.router circle,
187.node.router rect {
Matteo Scandolo65d6fc42016-01-25 16:24:42 -0800188 stroke: #05ffcb;
Matteo Scandolofb46f5b2016-01-25 10:10:38 -0800189}
190
Matteo Scandoloc86b4c12016-01-25 17:36:08 -0800191.node.slice rect {
Matteo Scandolo4889f5a2016-01-25 12:00:42 -0800192 stroke: #b01dff;
193}
194
Matteo Scandoloc86b4c12016-01-25 17:36:08 -0800195.node.instance rect {
Matteo Scandolo998e4652016-01-28 12:02:57 -0800196 stroke: #ccc;
197}
198
199.node.instance rect.active {
Matteo Scandolo65d6fc42016-01-25 16:24:42 -0800200 stroke: #ff8b00;
Matteo Scandolo4889f5a2016-01-25 12:00:42 -0800201}
202
Matteo Scandolo793e1dd2016-01-22 09:33:26 -0800203.node rect.slice-detail{
204 fill: #fff;
205 stroke: steelblue;
206 stroke-width: 3px;
207}
208
Matteo Scandolobe9b13d2016-01-21 11:21:03 -0800209.node text {
Matteo Scandolo105954e2016-03-11 11:16:58 -0800210 font: 18px sans-serif;
211}
212
213.node .instance text {
Matteo Scandolobe9b13d2016-01-21 11:21:03 -0800214 font: 12px sans-serif;
215}
216
Matteo Scandolobd663742016-03-07 16:07:13 -0800217.node text.small {
218 font-size: 10px;
219}
220
Matteo Scandoloeeb9c082016-02-09 11:19:22 -0800221.link, .device-link {
Matteo Scandolobe9b13d2016-01-21 11:21:03 -0800222 fill: none;
223 stroke: #ccc;
224 stroke-width: 2px;
Matteo Scandolo68236262016-01-21 15:38:06 -0800225}
226
Matteo Scandolo65d6fc42016-01-25 16:24:42 -0800227.link.slice {
Matteo Scandolo39f49472016-01-25 13:55:09 -0800228 stroke: rgba(157, 4, 183, 0.29);
229}
Matteo Scandolo65d6fc42016-01-25 16:24:42 -0800230.link.instance{
Matteo Scandolo998e4652016-01-28 12:02:57 -0800231 stroke: #ccc;
232}
233
234.link.instance.active{
Matteo Scandolo65d6fc42016-01-25 16:24:42 -0800235 stroke: rgba(255, 138, 0, 0.65);
236}
Matteo Scandolo39f49472016-01-25 13:55:09 -0800237
Matteo Scandolo68236262016-01-21 15:38:06 -0800238.service-details{
239 width: 200px;
240 position: absolute;
241 top: 20px;
242 right: 20px;
Matteo Scandolo53a02262016-01-21 16:02:57 -0800243}
244
245/* when showing the thing */
246
247.animate.ng-hide-remove {
248 animation:0.5s bounceInRight ease;
249}
250
251/* when hiding the picture */
252.animate.ng-hide-add {
253 animation:0.5s bounceOutRight ease;
254}
255
Matteo Scandolo17dc11d2016-02-22 09:16:46 -0800256/* LOADER */
257.loader {
258 font-size: 10px;
259 margin: 150px auto;
260 text-indent: -9999em;
261 width: 11em;
262 height: 11em;
263 border-radius: 50%;
264 background: #ffffff;
265 background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
266 background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
267 background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
268 background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
269 background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
270 position: relative;
271 animation: load3 1.4s infinite linear;
272 transform: translateZ(0);
273}
274.loader:before {
275 width: 50%;
276 height: 50%;
277 background: #105E9E;
278 border-radius: 100% 0 0 0;
279 position: absolute;
280 top: 0;
281 left: 0;
282 content: '';
283}
284.loader:after {
285 background: #fff;
286 width: 75%;
287 height: 75%;
288 border-radius: 50%;
289 content: '';
290 margin: auto;
291 position: absolute;
292 top: 0;
293 left: 0;
294 bottom: 0;
295 right: 0;
296}
297
298@keyframes load3 {
299 0% {
300 -webkit-transform: rotate(0deg);
301 transform: rotate(0deg);
302 }
303 100% {
304 -webkit-transform: rotate(360deg);
305 transform: rotate(360deg);
306 }
307}
308
Matteo Scandolocc8fa152016-02-22 09:57:55 -0800309/* MODALS */
310
311.modal.fade.in {
312 display: block;
313}
314
Matteo Scandolo53a02262016-01-21 16:02:57 -0800315/* ANIMATIONS */
316
317@keyframes bounceInRight {
318 from, 60%, 75%, 90%, to {
319 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
320 }
321
322 from {
323 opacity: 0;
324 transform: translate3d(3000px, 0, 0);
325 }
326
327 60% {
328 opacity: 1;
329 transform: translate3d(-25px, 0, 0);
330 }
331
332 75% {
333 transform: translate3d(10px, 0, 0);
334 }
335
336 90% {
337 transform: translate3d(-5px, 0, 0);
338 }
339
340 to {
341 transform: none;
342 }
343}
344
Matteo Scandoloc303fd02016-02-17 15:11:33 -0800345@keyframes bounceOutRight {
346 20% {
347 opacity: 1;
348 transform: translate3d(-20px, 0, 0);
349 }
Matteo Scandolo53a02262016-01-21 16:02:57 -0800350
Matteo Scandoloc303fd02016-02-17 15:11:33 -0800351 to {
352 opacity: 0;
353 transform: translate3d(2000px, 0, 0);
354 }
Matteo Scandolobe9b13d2016-01-21 11:21:03 -0800355}