faircoinmap-webapp/statics/css/sidebar-loader.css
statics/css/sidebar-loader.cssRaw
1
2
3.lorem {
4 font-style: italic;
5 color: #AAA;
6}
7
8.sidebar {
9 position: absolute;
10 top: 0;
11 bottom: 0;
12 width: 100%;
13 overflow: hidden;
14 z-index: 2000; }
15 .sidebar.collapsed {
16 width: 40px; }
17 @media (min-width: 768px) {
18 .sidebar {
19 top: 10px;
20 bottom: 10px;
21 transition: width 500ms; } }
22 @media (min-width: 768px) and (max-width: 991px) {
23 .sidebar {
24 width: 305px; } }
25 @media (min-width: 992px) and (max-width: 1199px) {
26 .sidebar {
27 width: 390px; } }
28 @media (min-width: 1200px) {
29 .sidebar {
30 width: 460px; } }
31
32.sidebar-left {
33 left: 0; }
34 @media (min-width: 768px) {
35 .sidebar-left {
36 left: 10px; } }
37
38.sidebar-right {
39 right: 0; }
40 @media (min-width: 768px) {
41 .sidebar-right {
42 right: 10px; } }
43
44.sidebar-tabs {
45 top: 0;
46 bottom: 0;
47 height: 100%;
48 background-color: #fff; }
49 .sidebar-left .sidebar-tabs {
50 left: 0; }
51 .sidebar-right .sidebar-tabs {
52 right: 0; }
53 .sidebar-tabs, .sidebar-tabs > ul {
54 position: absolute;
55 width: 40px;
56 margin: 0;
57 padding: 0;
58 list-style-type: none; }
59 .sidebar-tabs > li, .sidebar-tabs > ul > li {
60 width: 100%;
61 height: 40px;
62 color: #333;
63 font-size: 12pt;
64 overflow: hidden;
65 transition: all 80ms; }
66 .sidebar-tabs > li:hover, .sidebar-tabs > ul > li:hover {
67 color: #000;
68 background-color: #eee; }
69 .sidebar-tabs > li.active, .sidebar-tabs > ul > li.active {
70 color: #fff;
71 background-color: #343a40; }
72 .sidebar-tabs > li.disabled, .sidebar-tabs > ul > li.disabled {
73 color: rgba(51, 51, 51, 0.4); }
74 .sidebar-tabs > li.disabled:hover, .sidebar-tabs > ul > li.disabled:hover {
75 background: transparent; }
76 .sidebar-tabs > li.disabled > a, .sidebar-tabs > ul > li.disabled > a {
77 cursor: default; }
78 .sidebar-tabs > li > a, .sidebar-tabs > ul > li > a {
79 display: block;
80 width: 100%;
81 height: 100%;
82 line-height: 40px;
83 color: inherit;
84 text-decoration: none;
85 text-align: center; }
86 .sidebar-tabs > ul + ul {
87 bottom: 0; }
88
89.sidebar-content {
90 position: absolute;
91 top: 0;
92 bottom: 0;
93 background-color: rgba(255, 255, 255, 0.95);
94 overflow-x: hidden;
95 overflow-y: auto; }
96 .sidebar-left .sidebar-content {
97 left: 40px;
98 right: 0; }
99 .sidebar-right .sidebar-content {
100 left: 0;
101 right: 40px; }
102 .sidebar.collapsed > .sidebar-content {
103 overflow-y: hidden; }
104
105.sidebar-pane {
106 display: none;
107 left: 0;
108 right: 0;
109 box-sizing: border-box;
110 padding: 10px 20px; }
111 .sidebar-pane.active {
112 display: block; }
113 @media (min-width: 768px) and (max-width: 991px) {
114 .sidebar-pane {
115 min-width: 265px; } }
116 @media (min-width: 992px) and (max-width: 1199px) {
117 .sidebar-pane {
118 min-width: 350px; } }
119 @media (min-width: 1200px) {
120 .sidebar-pane {
121 min-width: 420px; } }
122
123.sidebar-header {
124 margin: -10px -20px 0;
125 height: 40px;
126 padding: 0 20px;
127 line-height: 40px;
128 font-size: 14.4pt;
129 color: #fff;
130 background-color: #343a40; }
131 .sidebar-right .sidebar-header {
132 padding-left: 40px; }
133
134.sidebar-close {
135 position: absolute;
136 top: 0;
137 width: 40px;
138 height: 40px;
139 text-align: center;
140 cursor: pointer; }
141 .sidebar-left .sidebar-close {
142 right: 0; }
143 .sidebar-right .sidebar-close {
144 left: 0; }
145
146.sidebar-left ~ .sidebar-map {
147 margin-left: 40px; }
148 @media (min-width: 768px) {
149 .sidebar-left ~ .sidebar-map {
150 margin-left: 0; } }
151
152.sidebar-right ~ .sidebar-map {
153 margin-right: 40px; }
154 @media (min-width: 768px) {
155 .sidebar-right ~ .sidebar-map {
156 margin-right: 0; } }
157
158.sidebar {
159 box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65); }
160 .sidebar.leaflet-touch {
161 box-shadow: none;
162 border-right: 2px solid rgba(0, 0, 0, 0.2); }
163 @media (min-width: 768px) {
164 .sidebar {
165 border-radius: 4px; }
166 .sidebar.leaflet-touch {
167 border: 2px solid rgba(0, 0, 0, 0.2); } }
168
169@media (min-width: 768px) {
170 .sidebar-left ~ .sidebar-map .leaflet-left {
171 transition: left 500ms; } }
172
173@media (min-width: 768px) and (max-width: 991px) {
174 .sidebar-left ~ .sidebar-map .leaflet-left {
175 left: 315px; } }
176
177@media (min-width: 992px) and (max-width: 1199px) {
178 .sidebar-left ~ .sidebar-map .leaflet-left {
179 left: 400px; } }
180
181@media (min-width: 1200px) {
182 .sidebar-left ~ .sidebar-map .leaflet-left {
183 left: 470px; } }
184
185@media (min-width: 768px) {
186 .sidebar-left.collapsed ~ .sidebar-map .leaflet-left {
187 left: 50px; } }
188
189@media (min-width: 768px) {
190 .sidebar-right ~ .sidebar-map .leaflet-right {
191 transition: right 500ms; } }
192
193@media (min-width: 768px) and (max-width: 991px) {
194 .sidebar-right ~ .sidebar-map .leaflet-right {
195 right: 315px; } }
196
197@media (min-width: 992px) and (max-width: 1199px) {
198 .sidebar-right ~ .sidebar-map .leaflet-right {
199 right: 400px; } }
200
201@media (min-width: 1200px) {
202 .sidebar-right ~ .sidebar-map .leaflet-right {
203 right: 470px; } }
204
205@media (min-width: 768px) {
206 .sidebar-right.collapsed ~ .sidebar-map .leaflet-right {
207 right: 50px; } }
208
209
210
211
212#loadingbar {
213 position:absolute;
214 top:40%;
215 left:45%;
216 z-index:2000;
217}
218.cssload-loader-inner {
219 bottom: 0;
220 height: 58px;
221 left: 0;
222 margin: auto;
223 position: absolute;
224 right: 0;
225 top: 0;
226 width: 97px;
227}
228
229.cssload-cssload-loader-line-wrap-wrap {
230 animation: cssload-spin 2300ms cubic-bezier(.175, .885, .32, 1.275) infinite;
231 -o-animation: cssload-spin 2300ms cubic-bezier(.175, .885, .32, 1.275) infinite;
232 -ms-animation: cssload-spin 2300ms cubic-bezier(.175, .885, .32, 1.275) infinite;
233 -webkit-animation: cssload-spin 2300ms cubic-bezier(.175, .885, .32, 1.275) infinite;
234 -moz-animation: cssload-spin 2300ms cubic-bezier(.175, .885, .32, 1.275) infinite;
235 box-sizing: border-box;
236 -o-box-sizing: border-box;
237 -ms-box-sizing: border-box;
238 -webkit-box-sizing: border-box;
239 -moz-box-sizing: border-box;
240 height: 49px;
241 left: 0;
242 overflow: hidden;
243 position: absolute;
244 top: 0;
245 transform-origin: 50% 100%;
246 -o-transform-origin: 50% 100%;
247 -ms-transform-origin: 50% 100%;
248 -webkit-transform-origin: 50% 100%;
249 -moz-transform-origin: 50% 100%;
250 width: 97px;
251}
252.cssload-loader-line-wrap {
253 border: 4px solid transparent;
254 border-radius: 100%;
255 -o-border-radius: 100%;
256 -ms-border-radius: 100%;
257 -webkit-border-radius: 100%;
258 -moz-border-radius: 100%;
259 box-sizing: border-box;
260 -o-box-sizing: border-box;
261 -ms-box-sizing: border-box;
262 -webkit-box-sizing: border-box;
263 -moz-box-sizing: border-box;
264 height: 97px;
265 left: 0;
266 margin: 0 auto;
267 position: absolute;
268 right: 0;
269 top: 0;
270 width: 97px;
271}
272.cssload-cssload-loader-line-wrap-wrap:nth-child(1) { animation-delay: -57.5ms;
273 -o-animation-delay: -57.5ms;
274 -ms-animation-delay: -57.5ms;
275 -webkit-animation-delay: -57.5ms;
276 -moz-animation-delay: -57.5ms; }
277.cssload-cssload-loader-line-wrap-wrap:nth-child(2) { animation-delay: -115ms;
278 -o-animation-delay: -115ms;
279 -ms-animation-delay: -115ms;
280 -webkit-animation-delay: -115ms;
281 -moz-animation-delay: -115ms; }
282.cssload-cssload-loader-line-wrap-wrap:nth-child(3) { animation-delay: -172.5ms;
283 -o-animation-delay: -172.5ms;
284 -ms-animation-delay: -172.5ms;
285 -webkit-animation-delay: -172.5ms;
286 -moz-animation-delay: -172.5ms; }
287.cssload-cssload-loader-line-wrap-wrap:nth-child(4) { animation-delay: -230ms;
288 -o-animation-delay: -230ms;
289 -ms-animation-delay: -230ms;
290 -webkit-animation-delay: -230ms;
291 -moz-animation-delay: -230ms; }
292.cssload-cssload-loader-line-wrap-wrap:nth-child(5) { animation-delay: -287.5ms;
293 -o-animation-delay: -287.5ms;
294 -ms-animation-delay: -287.5ms;
295 -webkit-animation-delay: -287.5ms;
296 -moz-animation-delay: -287.5ms; }
297
298.cssload-cssload-loader-line-wrap-wrap:nth-child(1) .cssload-loader-line-wrap {
299 border-color: rgb(234,71,71);
300 height: 88px;
301 width: 88px;
302 top: 7px;
303}
304.cssload-cssload-loader-line-wrap-wrap:nth-child(2) .cssload-loader-line-wrap {
305 border-color: rgb(234,234,71);
306 height: 74px;
307 width: 74px;
308 top: 14px;
309}
310.cssload-cssload-loader-line-wrap-wrap:nth-child(3) .cssload-loader-line-wrap {
311 border-color: rgb(71,234,71);
312 height: 60px;
313 width: 60px;
314 top: 20px;
315}
316.cssload-cssload-loader-line-wrap-wrap:nth-child(4) .cssload-loader-line-wrap {
317 border-color: rgb(71,234,234);
318 height: 47px;
319 width: 47px;
320 top: 27px;
321}
322.cssload-cssload-loader-line-wrap-wrap:nth-child(5) .cssload-loader-line-wrap {
323 border-color: rgb(71,71,234);
324 height: 33px;
325 width: 33px;
326 top: 34px;
327}
328
329
330
331
332@keyframes cssload-spin {
333 0%, 15% {
334 transform: rotate(0);
335 transform: rotate(0);
336 }
337 100% {
338 transform: rotate(360deg);
339 transform: rotate(360deg);
340 }
341}
342
343@-o-keyframes cssload-spin {
344 0%, 15% {
345 -o-transform: rotate(0);
346 transform: rotate(0);
347 }
348 100% {
349 -o-transform: rotate(360deg);
350 transform: rotate(360deg);
351 }
352}
353
354@-ms-keyframes cssload-spin {
355 0%, 15% {
356 -ms-transform: rotate(0);
357 transform: rotate(0);
358 }
359 100% {
360 -ms-transform: rotate(360deg);
361 transform: rotate(360deg);
362 }
363}
364
365@-webkit-keyframes cssload-spin {
366 0%, 15% {
367 -webkit-transform: rotate(0);
368 transform: rotate(0);
369 }
370 100% {
371 -webkit-transform: rotate(360deg);
372 transform: rotate(360deg);
373 }
374}
375
376@-moz-keyframes cssload-spin {
377 0%, 15% {
378 -moz-transform: rotate(0);
379 transform: rotate(0);
380 }
381 100% {
382 -moz-transform: rotate(360deg);
383 transform: rotate(360deg);
384 }
385}