blob: 2fe399312184fbda2b1e08f4c79a970fa884b2f3 [file] [log] [blame]
Matteo Scandolofcdbed32016-02-08 16:55:44 -08001/* CONTAINER */
Matteo Scandolo70ac2162016-02-24 15:40:22 -08002#xosDiagnostic, [ui-view] {
3 height: 700px;
4}
5
6diagnostic-container .half-height {
Matteo Scandolofcdbed32016-02-08 16:55:44 -08007 position: relative;
8 height: 50%;
9}
10
Matteo Scandolo70ac2162016-02-24 15:40:22 -080011diagnostic-container .onethird-height {
Matteo Scandolo51031482016-02-17 13:54:11 -080012 position: relative;
13 height: 33%;
14}
15
Matteo Scandolo70ac2162016-02-24 15:40:22 -080016diagnostic-container .twothird-height {
Matteo Scandolo51031482016-02-17 13:54:11 -080017 position: relative;
18 height: 67%;
19}
20
Matteo Scandolo70ac2162016-02-24 15:40:22 -080021diagnostic-container .subscriber-select{
Matteo Scandolo9fe01af2016-02-09 16:01:49 -080022 max-width: 200px;
23 position: absolute;
24 top: 20px;
25 right: 20px;
26 z-index: 1;
27}
28
Matteo Scandolo219b1a72016-02-09 11:19:22 -080029.half-height + .half-height {
30 border-top: 1px solid black;
31}
32
33service-topology,
34logic-topology {
Matteo Scandolo8a64fa42016-01-21 11:21:03 -080035 height: 100%;
36 width: 100%;
37 display: block;
Matteo Scandolo219b1a72016-02-09 11:19:22 -080038 position: absolute;
39 top: 0;
Matteo Scandolo8a64fa42016-01-21 11:21:03 -080040}
41
Matteo Scandoloe4779902016-02-09 11:37:11 -080042logic-topology .subscriber circle,
43logic-topology .device circle{
44 fill: #fff;
45 stroke: green;
46 stroke-width: 1px;
47}
48
Matteo Scandoloc49ff702016-02-17 15:11:33 -080049logic-topology > svg {
50 position: absolute;
51 top: 0;
52}
53
Matteo Scandoloc49ff702016-02-17 15:11:33 -080054/* CLOUDS */
55
Matteo Scandolo9fe01af2016-02-09 16:01:49 -080056logic-topology .network .cloud {
57 fill: #fff;
58 stroke: green;
59 stroke-width: 1px;
60}
61
Matteo Scandoloaf9402e2016-02-17 13:59:20 -080062/* RACK */
63logic-topology .node.rack > g > rect{
64 fill: #ccc;
65 stroke: steelblue;
66 stroke-width: 1px;
67}
68
69/* CP NODE */
70
71logic-topology .compute-node > rect{
Matteo Scandoload5b2282016-02-16 11:50:51 -080072 fill: #fff;
73 stroke: steelblue;
74 stroke-width: 1px;
75}
76
Matteo Scandoloaf9402e2016-02-17 13:59:20 -080077/* INSTANCE */
78
79logic-topology .instance > rect{
80 fill: #eee;
81 stroke: steelblue;
82 stroke-width: 1px;
83}
84
Matteo Scandolo79de20a2016-02-16 15:06:11 -080085logic-topology .node .instance.active rect{
86 fill: lightsteelblue;
87 stroke: steelblue;
88 stroke-width: 1px;
89}
90
Matteo Scandolo26d17e12016-02-23 13:47:14 -080091logic-topology .node .instance.active.good > rect{
92 fill: green;
93}
94
95logic-topology .node .instance.active.provisioning > rect{
96 fill: yellow;
97}
98
99logic-topology .node .instance.active.bad > rect{
100 fill: red;
101}
102
103/* INSTANCE STATS */
104
105logic-topology .node .instance .stats-container rect {
106 fill: white;
107}
108
109logic-topology .node .instance .stats-container text.name{
110 font-weight: bold;
111}
112
113logic-topology .node .instance .stats-container text.ip{
114 font-style: italic;
115 font-size: 10px;
116}
117
118/* CONTAINERS */
Matteo Scandolof0d6e692016-02-24 11:14:01 -0800119logic-topology .node .instance .stats-container .container rect {
Matteo Scandolo26d17e12016-02-23 13:47:14 -0800120 fill: #eee;
121 stroke: steelblue;
122 stroke-width: 1px;
123}
124
Matteo Scandolo2c33a4c2016-01-25 16:24:42 -0800125/* LEGEND */
126
127.legend {
128 fill: #fff;
129 stroke: #ccc;
130 stroke-width: 1px;
131 position: relative;
132}
133
134.legend text {
135 stroke: #000;
136}
137
Matteo Scandolo8a64fa42016-01-21 11:21:03 -0800138.node {
139 cursor: pointer;
140}
141
Matteo Scandolo5bf04572016-01-25 17:36:08 -0800142.node circle,
143.node rect{
Matteo Scandolo8a64fa42016-01-21 11:21:03 -0800144 fill: #fff;
145 stroke: steelblue;
Matteo Scandolofcdbed32016-02-08 16:55:44 -0800146 stroke-width: 1px;
Matteo Scandolo8a64fa42016-01-21 11:21:03 -0800147}
148
Matteo Scandolof2c99012016-01-25 10:10:38 -0800149.node.subscriber circle,
Matteo Scandolo9fe01af2016-02-09 16:01:49 -0800150.node.subscriber rect,
151.node.router circle,
152.node.router rect {
Matteo Scandolo2c33a4c2016-01-25 16:24:42 -0800153 stroke: #05ffcb;
Matteo Scandolof2c99012016-01-25 10:10:38 -0800154}
155
Matteo Scandolo5bf04572016-01-25 17:36:08 -0800156.node.slice rect {
Matteo Scandolo071ef462016-01-25 12:00:42 -0800157 stroke: #b01dff;
158}
159
Matteo Scandolo5bf04572016-01-25 17:36:08 -0800160.node.instance rect {
Matteo Scandoloc9ebd922016-01-28 12:02:57 -0800161 stroke: #ccc;
162}
163
164.node.instance rect.active {
Matteo Scandolo2c33a4c2016-01-25 16:24:42 -0800165 stroke: #ff8b00;
Matteo Scandolo071ef462016-01-25 12:00:42 -0800166}
167
Matteo Scandolo6e8a75a2016-01-22 09:33:26 -0800168.node rect.slice-detail{
169 fill: #fff;
170 stroke: steelblue;
171 stroke-width: 3px;
172}
173
Matteo Scandolo8a64fa42016-01-21 11:21:03 -0800174.node text {
175 font: 12px sans-serif;
176}
177
Matteo Scandolo219b1a72016-02-09 11:19:22 -0800178.link, .device-link {
Matteo Scandolo8a64fa42016-01-21 11:21:03 -0800179 fill: none;
180 stroke: #ccc;
181 stroke-width: 2px;
Matteo Scandolo06f45d62016-01-21 15:38:06 -0800182}
183
Matteo Scandolo2c33a4c2016-01-25 16:24:42 -0800184.link.slice {
Matteo Scandolo9ef3c842016-01-25 13:55:09 -0800185 stroke: rgba(157, 4, 183, 0.29);
186}
Matteo Scandolo2c33a4c2016-01-25 16:24:42 -0800187.link.instance{
Matteo Scandoloc9ebd922016-01-28 12:02:57 -0800188 stroke: #ccc;
189}
190
191.link.instance.active{
Matteo Scandolo2c33a4c2016-01-25 16:24:42 -0800192 stroke: rgba(255, 138, 0, 0.65);
193}
Matteo Scandolo9ef3c842016-01-25 13:55:09 -0800194
Matteo Scandolo06f45d62016-01-21 15:38:06 -0800195.service-details{
196 width: 200px;
197 position: absolute;
198 top: 20px;
199 right: 20px;
Matteo Scandolo3501ccb2016-01-21 16:02:57 -0800200}
201
202/* when showing the thing */
203
204.animate.ng-hide-remove {
205 animation:0.5s bounceInRight ease;
206}
207
208/* when hiding the picture */
209.animate.ng-hide-add {
210 animation:0.5s bounceOutRight ease;
211}
212
Matteo Scandolo07246ca2016-02-22 09:16:46 -0800213/* LOADER */
214.loader {
215 font-size: 10px;
216 margin: 150px auto;
217 text-indent: -9999em;
218 width: 11em;
219 height: 11em;
220 border-radius: 50%;
221 background: #ffffff;
222 background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
223 background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
224 background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
225 background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
226 background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
227 position: relative;
228 animation: load3 1.4s infinite linear;
229 transform: translateZ(0);
230}
231.loader:before {
232 width: 50%;
233 height: 50%;
234 background: #105E9E;
235 border-radius: 100% 0 0 0;
236 position: absolute;
237 top: 0;
238 left: 0;
239 content: '';
240}
241.loader:after {
242 background: #fff;
243 width: 75%;
244 height: 75%;
245 border-radius: 50%;
246 content: '';
247 margin: auto;
248 position: absolute;
249 top: 0;
250 left: 0;
251 bottom: 0;
252 right: 0;
253}
254
255@keyframes load3 {
256 0% {
257 -webkit-transform: rotate(0deg);
258 transform: rotate(0deg);
259 }
260 100% {
261 -webkit-transform: rotate(360deg);
262 transform: rotate(360deg);
263 }
264}
265
Matteo Scandolo388795a2016-02-22 09:57:55 -0800266/* MODALS */
267
268.modal.fade.in {
269 display: block;
270}
271
Matteo Scandolo3501ccb2016-01-21 16:02:57 -0800272/* ANIMATIONS */
273
274@keyframes bounceInRight {
275 from, 60%, 75%, 90%, to {
276 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
277 }
278
279 from {
280 opacity: 0;
281 transform: translate3d(3000px, 0, 0);
282 }
283
284 60% {
285 opacity: 1;
286 transform: translate3d(-25px, 0, 0);
287 }
288
289 75% {
290 transform: translate3d(10px, 0, 0);
291 }
292
293 90% {
294 transform: translate3d(-5px, 0, 0);
295 }
296
297 to {
298 transform: none;
299 }
300}
301
Matteo Scandoloc49ff702016-02-17 15:11:33 -0800302@keyframes bounceOutRight {
303 20% {
304 opacity: 1;
305 transform: translate3d(-20px, 0, 0);
306 }
Matteo Scandolo3501ccb2016-01-21 16:02:57 -0800307
Matteo Scandoloc49ff702016-02-17 15:11:33 -0800308 to {
309 opacity: 0;
310 transform: translate3d(2000px, 0, 0);
311 }
Matteo Scandolo8a64fa42016-01-21 11:21:03 -0800312}