blob: 1cf0848af015ae3086cd6ce49b85eccd76f6b3c8 [file] [log] [blame]
Matteo Scandolo871f9cd2016-03-29 14:06:13 -07001/* CONTAINER */
2#xosDiagnostic, [ui-view] {
3 min-height: 700px;
4 position: relative; }
5
6diagnostic-container .form-control.small-padding {
7 padding: 6px; }
8
9diagnostic-container .half-height {
10 position: relative;
11 height: 50%; }
12
13diagnostic-container .onethird-height {
14 position: relative;
15 height: 33%;
16 border-bottom: 1px solid #999; }
17
18diagnostic-container .twothird-height {
19 position: relative;
20 height: 67%; }
21
22diagnostic-container .subscriber-select {
23 max-width: 200px;
24 position: absolute;
25 top: 20px;
26 right: 20px;
27 z-index: 1; }
28
29diagnostic-container .onethird-height .well,
30diagnostic-container .twothird-height .well {
31 font-weight: bold;
32 max-width: 165px;
33 text-align: center;
34 margin-top: 15px;
35 background: #eee;
36 border-color: steelblue;
37 padding: 10px; }
38
39diagnostic-container .onethird-height .well.pull-right {
40 position: absolute;
41 right: 0px;
42 top: -15px;
43 cursor: pointer;
44 z-index: 200; }
45
46/* subscriber-status-modal */
47subscriber-status-modal .row + .row {
48 margin-top: 20px; }
49
50.half-height + .half-height {
51 border-top: 1px solid black; }
52
53service-topology,
54logic-topology {
55 height: 100%;
56 width: 100%;
57 display: block;
58 position: absolute;
59 top: 0; }
60
61logic-topology .subscriber circle,
62logic-topology .device circle {
63 fill: #fff;
64 stroke: green;
65 stroke-width: 1px; }
66
67logic-topology > svg {
68 position: absolute;
69 top: 0; }
70
71/* CLOUDS */
72logic-topology .network .cloud {
73 fill: #fff;
74 stroke: green;
75 stroke-width: 1px; }
76
77/* RACK */
78logic-topology .node.rack > g > rect {
79 fill: #ccc;
80 stroke: steelblue;
81 stroke-width: 1px; }
82
83/* CP NODE */
84logic-topology .compute-node > rect {
85 fill: #fff;
86 stroke: steelblue;
87 stroke-width: 1px; }
88
89logic-topology .compute-node > text {
90 font-size: 16px; }
91
92/* INSTANCE */
93logic-topology .instance > rect {
94 fill: #eee;
95 stroke: steelblue;
96 stroke-width: 1px; }
97
98logic-topology .node .instance.active rect {
99 fill: lightsteelblue;
100 stroke: steelblue;
101 stroke-width: 1px; }
102
103logic-topology .node .instance.active.good > rect {
104 fill: green; }
105
106logic-topology .node .instance.active.provisioning > rect {
107 fill: yellow; }
108
109logic-topology .node .instance.active.bad > rect {
110 fill: red; }
111
112/* INSTANCE STATS */
113logic-topology .node .instance .stats-container rect {
114 fill: white; }
115
116logic-topology .node .instance .stats-container text.name {
117 font-weight: bold; }
118
119logic-topology .node .instance .stats-container text.ip {
120 font-style: italic;
121 font-size: 10px; }
122
123/* CONTAINERS */
124logic-topology .node .instance .stats-container .container rect {
125 fill: #eee;
126 stroke: steelblue;
127 stroke-width: 1px; }
128
129/* LEGEND */
130.legend {
131 fill: #fff;
132 stroke: #ccc;
133 stroke-width: 1px;
134 position: relative; }
135
136.legend text {
137 stroke: #000; }
138
139.node {
140 cursor: pointer; }
141
142.node circle,
143.node rect {
144 fill: #fff;
145 stroke: steelblue;
146 stroke-width: 1px; }
147
148.node.subscriber circle,
149.node.subscriber rect,
150.node.router circle,
151.node.router rect {
152 stroke: #05ffcb; }
153
154.node.slice rect {
155 stroke: #b01dff; }
156
157.node.instance rect {
158 stroke: #ccc; }
159
160.node.instance rect.active {
161 stroke: #ff8b00; }
162
163.node rect.slice-detail {
164 fill: #fff;
165 stroke: steelblue;
166 stroke-width: 3px; }
167
168.node text {
169 font: 18px sans-serif; }
170
171.node .instance text {
172 font: 12px sans-serif; }
173
174.node text.small {
175 font-size: 10px; }
176
177.link, .device-link {
178 fill: none;
179 stroke: #ccc;
180 stroke-width: 2px; }
181
182.link.slice {
183 stroke: rgba(157, 4, 183, 0.29); }
184
185.link.instance {
186 stroke: #ccc; }
187
188.link.instance.active {
189 stroke: rgba(255, 138, 0, 0.65); }
190
191.service-details {
192 width: 200px;
193 position: absolute;
194 top: 20px;
195 right: 20px; }
196
197/* when showing the thing */
198.animate.ng-hide-remove {
199 animation: 0.5s bounceInRight ease; }
200
201/* when hiding the picture */
202.animate.ng-hide-add {
203 animation: 0.5s bounceOutRight ease; }
204
205/* LOADER */
206.loader {
207 font-size: 10px;
208 margin: 150px auto;
209 text-indent: -9999em;
210 width: 11em;
211 height: 11em;
212 border-radius: 50%;
213 background: #ffffff;
214 background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
215 background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
216 background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
217 background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
218 background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
219 position: relative;
220 animation: load3 1.4s infinite linear;
221 transform: translateZ(0); }
222
223.loader:before {
224 width: 50%;
225 height: 50%;
226 background: #105E9E;
227 border-radius: 100% 0 0 0;
228 position: absolute;
229 top: 0;
230 left: 0;
231 content: ''; }
232
233.loader:after {
234 background: #fff;
235 width: 75%;
236 height: 75%;
237 border-radius: 50%;
238 content: '';
239 margin: auto;
240 position: absolute;
241 top: 0;
242 left: 0;
243 bottom: 0;
244 right: 0; }
245
246@keyframes load3 {
247 0% {
248 -webkit-transform: rotate(0deg);
249 transform: rotate(0deg); }
250 100% {
251 -webkit-transform: rotate(360deg);
252 transform: rotate(360deg); } }
253
254/* MODALS */
255.modal.fade.in {
256 display: block; }
257
258/* ANIMATIONS */
259@keyframes bounceInRight {
260 from, 60%, 75%, 90%, to {
261 animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
262 from {
263 opacity: 0;
264 transform: translate3d(3000px, 0, 0); }
265 60% {
266 opacity: 1;
267 transform: translate3d(-25px, 0, 0); }
268 75% {
269 transform: translate3d(10px, 0, 0); }
270 90% {
271 transform: translate3d(-5px, 0, 0); }
272 to {
273 transform: none; } }
274
275@keyframes bounceOutRight {
276 20% {
277 opacity: 1;
278 transform: translate3d(-20px, 0, 0); }
279 to {
280 opacity: 0;
281 transform: translate3d(2000px, 0, 0); } }