blob: 4b88ccbb2d4c2e952c24ca80149d164231c085ab [file] [log] [blame]
Matteo Scandolofcdbed32016-02-08 16:55:44 -08001/* CONTAINER */
2diagnostic .half-height {
3 position: relative;
4 height: 50%;
5}
6
Matteo Scandolo51031482016-02-17 13:54:11 -08007diagnostic .onethird-height {
8 position: relative;
9 height: 33%;
10}
11
12diagnostic .twothird-height {
13 position: relative;
14 height: 67%;
15}
16
Matteo Scandolo9fe01af2016-02-09 16:01:49 -080017diagnostic .subscriber-select{
18 max-width: 200px;
19 position: absolute;
20 top: 20px;
21 right: 20px;
22 z-index: 1;
23}
24
Matteo Scandolo219b1a72016-02-09 11:19:22 -080025.half-height + .half-height {
26 border-top: 1px solid black;
27}
28
29service-topology,
30logic-topology {
Matteo Scandolo8a64fa42016-01-21 11:21:03 -080031 height: 100%;
32 width: 100%;
33 display: block;
Matteo Scandolo219b1a72016-02-09 11:19:22 -080034 position: absolute;
35 top: 0;
Matteo Scandolo8a64fa42016-01-21 11:21:03 -080036}
37
Matteo Scandoloe4779902016-02-09 11:37:11 -080038logic-topology .subscriber circle,
39logic-topology .device circle{
40 fill: #fff;
41 stroke: green;
42 stroke-width: 1px;
43}
44
Matteo Scandoloc49ff702016-02-17 15:11:33 -080045logic-topology > svg {
46 position: absolute;
47 top: 0;
48}
49
50/* STATS */
51
52logic-topology > .instances-stats {
53 position: absolute;
54 top: 0;
55 z-index: 2;
56 width: 100%;
57}
58
59logic-topology > .instances-stats ul.list-group {
60 font-size: 10px !important;
61}
62
63logic-topology > .instances-stats ul.list-group li{
64 padding: 3px 15px;
65}
66
67logic-topology > .instances-stats ul.list-group .badge {
68 font-size: 8px;
69}
70
71/* CLOUDS */
72
Matteo Scandolo9fe01af2016-02-09 16:01:49 -080073logic-topology .network .cloud {
74 fill: #fff;
75 stroke: green;
76 stroke-width: 1px;
77}
78
Matteo Scandoloaf9402e2016-02-17 13:59:20 -080079/* RACK */
80logic-topology .node.rack > g > rect{
81 fill: #ccc;
82 stroke: steelblue;
83 stroke-width: 1px;
84}
85
86/* CP NODE */
87
88logic-topology .compute-node > rect{
Matteo Scandoload5b2282016-02-16 11:50:51 -080089 fill: #fff;
90 stroke: steelblue;
91 stroke-width: 1px;
92}
93
Matteo Scandoloaf9402e2016-02-17 13:59:20 -080094/* INSTANCE */
95
96logic-topology .instance > rect{
97 fill: #eee;
98 stroke: steelblue;
99 stroke-width: 1px;
100}
101
Matteo Scandolo79de20a2016-02-16 15:06:11 -0800102logic-topology .node .instance.active rect{
103 fill: lightsteelblue;
104 stroke: steelblue;
105 stroke-width: 1px;
106}
107
Matteo Scandolo2c33a4c2016-01-25 16:24:42 -0800108/* LEGEND */
109
110.legend {
111 fill: #fff;
112 stroke: #ccc;
113 stroke-width: 1px;
114 position: relative;
115}
116
117.legend text {
118 stroke: #000;
119}
120
Matteo Scandolo8a64fa42016-01-21 11:21:03 -0800121.node {
122 cursor: pointer;
123}
124
Matteo Scandolo5bf04572016-01-25 17:36:08 -0800125.node circle,
126.node rect{
Matteo Scandolo8a64fa42016-01-21 11:21:03 -0800127 fill: #fff;
128 stroke: steelblue;
Matteo Scandolofcdbed32016-02-08 16:55:44 -0800129 stroke-width: 1px;
Matteo Scandolo8a64fa42016-01-21 11:21:03 -0800130}
131
Matteo Scandolof2c99012016-01-25 10:10:38 -0800132.node.subscriber circle,
Matteo Scandolo9fe01af2016-02-09 16:01:49 -0800133.node.subscriber rect,
134.node.router circle,
135.node.router rect {
Matteo Scandolo2c33a4c2016-01-25 16:24:42 -0800136 stroke: #05ffcb;
Matteo Scandolof2c99012016-01-25 10:10:38 -0800137}
138
Matteo Scandolo5bf04572016-01-25 17:36:08 -0800139.node.slice rect {
Matteo Scandolo071ef462016-01-25 12:00:42 -0800140 stroke: #b01dff;
141}
142
Matteo Scandolo5bf04572016-01-25 17:36:08 -0800143.node.instance rect {
Matteo Scandoloc9ebd922016-01-28 12:02:57 -0800144 stroke: #ccc;
145}
146
147.node.instance rect.active {
Matteo Scandolo2c33a4c2016-01-25 16:24:42 -0800148 stroke: #ff8b00;
Matteo Scandolo071ef462016-01-25 12:00:42 -0800149}
150
Matteo Scandolo6e8a75a2016-01-22 09:33:26 -0800151.node rect.slice-detail{
152 fill: #fff;
153 stroke: steelblue;
154 stroke-width: 3px;
155}
156
Matteo Scandolo8a64fa42016-01-21 11:21:03 -0800157.node text {
158 font: 12px sans-serif;
159}
160
Matteo Scandolo219b1a72016-02-09 11:19:22 -0800161.link, .device-link {
Matteo Scandolo8a64fa42016-01-21 11:21:03 -0800162 fill: none;
163 stroke: #ccc;
164 stroke-width: 2px;
Matteo Scandolo06f45d62016-01-21 15:38:06 -0800165}
166
Matteo Scandolo2c33a4c2016-01-25 16:24:42 -0800167.link.slice {
Matteo Scandolo9ef3c842016-01-25 13:55:09 -0800168 stroke: rgba(157, 4, 183, 0.29);
169}
Matteo Scandolo2c33a4c2016-01-25 16:24:42 -0800170.link.instance{
Matteo Scandoloc9ebd922016-01-28 12:02:57 -0800171 stroke: #ccc;
172}
173
174.link.instance.active{
Matteo Scandolo2c33a4c2016-01-25 16:24:42 -0800175 stroke: rgba(255, 138, 0, 0.65);
176}
Matteo Scandolo9ef3c842016-01-25 13:55:09 -0800177
Matteo Scandolo06f45d62016-01-21 15:38:06 -0800178.service-details{
179 width: 200px;
180 position: absolute;
181 top: 20px;
182 right: 20px;
Matteo Scandolo3501ccb2016-01-21 16:02:57 -0800183}
184
185/* when showing the thing */
186
187.animate.ng-hide-remove {
188 animation:0.5s bounceInRight ease;
189}
190
191/* when hiding the picture */
192.animate.ng-hide-add {
193 animation:0.5s bounceOutRight ease;
194}
195
Matteo Scandolo07246ca2016-02-22 09:16:46 -0800196/* LOADER */
197.loader {
198 font-size: 10px;
199 margin: 150px auto;
200 text-indent: -9999em;
201 width: 11em;
202 height: 11em;
203 border-radius: 50%;
204 background: #ffffff;
205 background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
206 background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
207 background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
208 background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
209 background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
210 position: relative;
211 animation: load3 1.4s infinite linear;
212 transform: translateZ(0);
213}
214.loader:before {
215 width: 50%;
216 height: 50%;
217 background: #105E9E;
218 border-radius: 100% 0 0 0;
219 position: absolute;
220 top: 0;
221 left: 0;
222 content: '';
223}
224.loader:after {
225 background: #fff;
226 width: 75%;
227 height: 75%;
228 border-radius: 50%;
229 content: '';
230 margin: auto;
231 position: absolute;
232 top: 0;
233 left: 0;
234 bottom: 0;
235 right: 0;
236}
237
238@keyframes load3 {
239 0% {
240 -webkit-transform: rotate(0deg);
241 transform: rotate(0deg);
242 }
243 100% {
244 -webkit-transform: rotate(360deg);
245 transform: rotate(360deg);
246 }
247}
248
Matteo Scandolo388795a2016-02-22 09:57:55 -0800249/* MODALS */
250
251.modal.fade.in {
252 display: block;
253}
254
Matteo Scandolo3501ccb2016-01-21 16:02:57 -0800255/* ANIMATIONS */
256
257@keyframes bounceInRight {
258 from, 60%, 75%, 90%, to {
259 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
260 }
261
262 from {
263 opacity: 0;
264 transform: translate3d(3000px, 0, 0);
265 }
266
267 60% {
268 opacity: 1;
269 transform: translate3d(-25px, 0, 0);
270 }
271
272 75% {
273 transform: translate3d(10px, 0, 0);
274 }
275
276 90% {
277 transform: translate3d(-5px, 0, 0);
278 }
279
280 to {
281 transform: none;
282 }
283}
284
Matteo Scandoloc49ff702016-02-17 15:11:33 -0800285@keyframes bounceOutRight {
286 20% {
287 opacity: 1;
288 transform: translate3d(-20px, 0, 0);
289 }
Matteo Scandolo3501ccb2016-01-21 16:02:57 -0800290
Matteo Scandoloc49ff702016-02-17 15:11:33 -0800291 to {
292 opacity: 0;
293 transform: translate3d(2000px, 0, 0);
294 }
Matteo Scandolo8a64fa42016-01-21 11:21:03 -0800295}