GPQAPP

1
@-webkit-keyframes passing-through {
2
  0% {
3
    opacity: 0;
4
    -webkit-transform: translateY(40px);
5
    -moz-transform: translateY(40px);
6
    -ms-transform: translateY(40px);
7
    -o-transform: translateY(40px);
8
    transform: translateY(40px);
9
  }
10
  30%, 70% {
11
    opacity: 1;
12
    -webkit-transform: translateY(0px);
13
    -moz-transform: translateY(0px);
14
    -ms-transform: translateY(0px);
15
    -o-transform: translateY(0px);
16
    transform: translateY(0px);
17
  }
18
  100% {
19
    opacity: 0;
20
    -webkit-transform: translateY(-40px);
21
    -moz-transform: translateY(-40px);
22
    -ms-transform: translateY(-40px);
23
    -o-transform: translateY(-40px);
24
    transform: translateY(-40px);
25
  }
26
}
27
@-moz-keyframes passing-through {
28
  0% {
29
    opacity: 0;
30
    -webkit-transform: translateY(40px);
31
    -moz-transform: translateY(40px);
32
    -ms-transform: translateY(40px);
33
    -o-transform: translateY(40px);
34
    transform: translateY(40px);
35
  }
36
  30%, 70% {
37
    opacity: 1;
38
    -webkit-transform: translateY(0px);
39
    -moz-transform: translateY(0px);
40
    -ms-transform: translateY(0px);
41
    -o-transform: translateY(0px);
42
    transform: translateY(0px);
43
  }
44
  100% {
45
    opacity: 0;
46
    -webkit-transform: translateY(-40px);
47
    -moz-transform: translateY(-40px);
48
    -ms-transform: translateY(-40px);
49
    -o-transform: translateY(-40px);
50
    transform: translateY(-40px);
51
  }
52
}
53
@keyframes passing-through {
54
  0% {
55
    opacity: 0;
56
    -webkit-transform: translateY(40px);
57
    -moz-transform: translateY(40px);
58
    -ms-transform: translateY(40px);
59
    -o-transform: translateY(40px);
60
    transform: translateY(40px);
61
  }
62
  30%, 70% {
63
    opacity: 1;
64
    -webkit-transform: translateY(0px);
65
    -moz-transform: translateY(0px);
66
    -ms-transform: translateY(0px);
67
    -o-transform: translateY(0px);
68
    transform: translateY(0px);
69
  }
70
  100% {
71
    opacity: 0;
72
    -webkit-transform: translateY(-40px);
73
    -moz-transform: translateY(-40px);
74
    -ms-transform: translateY(-40px);
75
    -o-transform: translateY(-40px);
76
    transform: translateY(-40px);
77
  }
78
}
79
@-webkit-keyframes slide-in {
80
  0% {
81
    opacity: 0;
82
    -webkit-transform: translateY(40px);
83
    -moz-transform: translateY(40px);
84
    -ms-transform: translateY(40px);
85
    -o-transform: translateY(40px);
86
    transform: translateY(40px);
87
  }
88
  30% {
89
    opacity: 1;
90
    -webkit-transform: translateY(0px);
91
    -moz-transform: translateY(0px);
92
    -ms-transform: translateY(0px);
93
    -o-transform: translateY(0px);
94
    transform: translateY(0px);
95
  }
96
}
97
@-moz-keyframes slide-in {
98
  0% {
99
    opacity: 0;
100
    -webkit-transform: translateY(40px);
101
    -moz-transform: translateY(40px);
102
    -ms-transform: translateY(40px);
103
    -o-transform: translateY(40px);
104
    transform: translateY(40px);
105
  }
106
  30% {
107
    opacity: 1;
108
    -webkit-transform: translateY(0px);
109
    -moz-transform: translateY(0px);
110
    -ms-transform: translateY(0px);
111
    -o-transform: translateY(0px);
112
    transform: translateY(0px);
113
  }
114
}
115
@keyframes slide-in {
116
  0% {
117
    opacity: 0;
118
    -webkit-transform: translateY(40px);
119
    -moz-transform: translateY(40px);
120
    -ms-transform: translateY(40px);
121
    -o-transform: translateY(40px);
122
    transform: translateY(40px);
123
  }
124
  30% {
125
    opacity: 1;
126
    -webkit-transform: translateY(0px);
127
    -moz-transform: translateY(0px);
128
    -ms-transform: translateY(0px);
129
    -o-transform: translateY(0px);
130
    transform: translateY(0px);
131
  }
132
}
133
@-webkit-keyframes pulse {
134
  0% {
135
    -webkit-transform: scale(1);
136
    -moz-transform: scale(1);
137
    -ms-transform: scale(1);
138
    -o-transform: scale(1);
139
    transform: scale(1);
140
  }
141
  10% {
142
    -webkit-transform: scale(1.1);
143
    -moz-transform: scale(1.1);
144
    -ms-transform: scale(1.1);
145
    -o-transform: scale(1.1);
146
    transform: scale(1.1);
147
  }
148
  20% {
149
    -webkit-transform: scale(1);
150
    -moz-transform: scale(1);
151
    -ms-transform: scale(1);
152
    -o-transform: scale(1);
153
    transform: scale(1);
154
  }
155
}
156
@-moz-keyframes pulse {
157
  0% {
158
    -webkit-transform: scale(1);
159
    -moz-transform: scale(1);
160
    -ms-transform: scale(1);
161
    -o-transform: scale(1);
162
    transform: scale(1);
163
  }
164
  10% {
165
    -webkit-transform: scale(1.1);
166
    -moz-transform: scale(1.1);
167
    -ms-transform: scale(1.1);
168
    -o-transform: scale(1.1);
169
    transform: scale(1.1);
170
  }
171
  20% {
172
    -webkit-transform: scale(1);
173
    -moz-transform: scale(1);
174
    -ms-transform: scale(1);
175
    -o-transform: scale(1);
176
    transform: scale(1);
177
  }
178
}
179
@keyframes pulse {
180
  0% {
181
    -webkit-transform: scale(1);
182
    -moz-transform: scale(1);
183
    -ms-transform: scale(1);
184
    -o-transform: scale(1);
185
    transform: scale(1);
186
  }
187
  10% {
188
    -webkit-transform: scale(1.1);
189
    -moz-transform: scale(1.1);
190
    -ms-transform: scale(1.1);
191
    -o-transform: scale(1.1);
192
    transform: scale(1.1);
193
  }
194
  20% {
195
    -webkit-transform: scale(1);
196
    -moz-transform: scale(1);
197
    -ms-transform: scale(1);
198
    -o-transform: scale(1);
199
    transform: scale(1);
200
  }
201
}
202
.dropzone, .dropzone * {
203
  box-sizing: border-box;
204
}
205

206
.dropzone {
207
  min-height: 150px;
208
  border: 2px solid rgba(0, 0, 0, 0.3);
209
  background: white;
210
  padding: 20px 20px;
211
}
212
.dropzone.dz-clickable {
213
  cursor: pointer;
214
}
215
.dropzone.dz-clickable * {
216
  cursor: default;
217
}
218
.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
219
  cursor: pointer;
220
}
221
.dropzone.dz-started .dz-message {
222
  display: none;
223
}
224
.dropzone.dz-drag-hover {
225
  border-style: solid;
226
}
227
.dropzone.dz-drag-hover .dz-message {
228
  opacity: 0.5;
229
}
230
.dropzone .dz-message {
231
  text-align: center;
232
  margin: 2em 0;
233
}
234
.dropzone .dz-message .dz-button {
235
  background: none;
236
  color: inherit;
237
  border: none;
238
  padding: 0;
239
  font: inherit;
240
  cursor: pointer;
241
  outline: inherit;
242
}
243
.dropzone .dz-preview {
244
  position: relative;
245
  display: inline-block;
246
  vertical-align: top;
247
  margin: 16px;
248
  min-height: 100px;
249
}
250
.dropzone .dz-preview:hover {
251
  z-index: 1000;
252
}
253
.dropzone .dz-preview:hover .dz-details {
254
  opacity: 1;
255
}
256
.dropzone .dz-preview.dz-file-preview .dz-image {
257
  border-radius: 20px;
258
  background: #999;
259
  background: linear-gradient(to bottom, #eee, #ddd);
260
}
261
.dropzone .dz-preview.dz-file-preview .dz-details {
262
  opacity: 1;
263
}
264
.dropzone .dz-preview.dz-image-preview {
265
  background: white;
266
}
267
.dropzone .dz-preview.dz-image-preview .dz-details {
268
  -webkit-transition: opacity 0.2s linear;
269
  -moz-transition: opacity 0.2s linear;
270
  -ms-transition: opacity 0.2s linear;
271
  -o-transition: opacity 0.2s linear;
272
  transition: opacity 0.2s linear;
273
}
274
.dropzone .dz-preview .dz-remove {
275
  font-size: 14px;
276
  text-align: center;
277
  display: block;
278
  cursor: pointer;
279
  border: none;
280
}
281
.dropzone .dz-preview .dz-remove:hover {
282
  text-decoration: underline;
283
}
284
.dropzone .dz-preview:hover .dz-details {
285
  opacity: 1;
286
}
287
.dropzone .dz-preview .dz-details {
288
  z-index: 20;
289
  position: absolute;
290
  top: 0;
291
  left: 0;
292
  opacity: 0;
293
  font-size: 13px;
294
  min-width: 100%;
295
  max-width: 100%;
296
  padding: 2em 1em;
297
  text-align: center;
298
  color: rgba(0, 0, 0, 0.9);
299
  line-height: 150%;
300
}
301
.dropzone .dz-preview .dz-details .dz-size {
302
  margin-bottom: 1em;
303
  font-size: 16px;
304
}
305
.dropzone .dz-preview .dz-details .dz-filename {
306
  white-space: nowrap;
307
}
308
.dropzone .dz-preview .dz-details .dz-filename:hover span {
309
  border: 1px solid rgba(200, 200, 200, 0.8);
310
  background-color: rgba(255, 255, 255, 0.8);
311
}
312
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
313
  overflow: hidden;
314
  text-overflow: ellipsis;
315
}
316
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
317
  border: 1px solid transparent;
318
}
319
.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
320
  background-color: rgba(255, 255, 255, 0.4);
321
  padding: 0 0.4em;
322
  border-radius: 3px;
323
}
324
.dropzone .dz-preview:hover .dz-image img {
325
  -webkit-transform: scale(1.05, 1.05);
326
  -moz-transform: scale(1.05, 1.05);
327
  -ms-transform: scale(1.05, 1.05);
328
  -o-transform: scale(1.05, 1.05);
329
  transform: scale(1.05, 1.05);
330
  -webkit-filter: blur(8px);
331
  filter: blur(8px);
332
}
333
.dropzone .dz-preview .dz-image {
334
  border-radius: 20px;
335
  overflow: hidden;
336
  width: 120px;
337
  height: 120px;
338
  position: relative;
339
  display: block;
340
  z-index: 10;
341
}
342
.dropzone .dz-preview .dz-image img {
343
  display: block;
344
}
345
.dropzone .dz-preview.dz-success .dz-success-mark {
346
  -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
347
  -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
348
  -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
349
  -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
350
  animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
351
}
352
.dropzone .dz-preview.dz-error .dz-error-mark {
353
  opacity: 1;
354
  -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
355
  -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
356
  -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
357
  -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
358
  animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
359
}
360
.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
361
  pointer-events: none;
362
  opacity: 0;
363
  z-index: 500;
364
  position: absolute;
365
  display: block;
366
  top: 50%;
367
  left: 50%;
368
  margin-left: -27px;
369
  margin-top: -27px;
370
}
371
.dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
372
  display: block;
373
  width: 54px;
374
  height: 54px;
375
}
376
.dropzone .dz-preview.dz-processing .dz-progress {
377
  opacity: 1;
378
  -webkit-transition: all 0.2s linear;
379
  -moz-transition: all 0.2s linear;
380
  -ms-transition: all 0.2s linear;
381
  -o-transition: all 0.2s linear;
382
  transition: all 0.2s linear;
383
}
384
.dropzone .dz-preview.dz-complete .dz-progress {
385
  opacity: 0;
386
  -webkit-transition: opacity 0.4s ease-in;
387
  -moz-transition: opacity 0.4s ease-in;
388
  -ms-transition: opacity 0.4s ease-in;
389
  -o-transition: opacity 0.4s ease-in;
390
  transition: opacity 0.4s ease-in;
391
}
392
.dropzone .dz-preview:not(.dz-processing) .dz-progress {
393
  -webkit-animation: pulse 6s ease infinite;
394
  -moz-animation: pulse 6s ease infinite;
395
  -ms-animation: pulse 6s ease infinite;
396
  -o-animation: pulse 6s ease infinite;
397
  animation: pulse 6s ease infinite;
398
}
399
.dropzone .dz-preview .dz-progress {
400
  opacity: 1;
401
  z-index: 1000;
402
  pointer-events: none;
403
  position: absolute;
404
  height: 16px;
405
  left: 50%;
406
  top: 50%;
407
  margin-top: -8px;
408
  width: 80px;
409
  margin-left: -40px;
410
  background: rgba(255, 255, 255, 0.9);
411
  -webkit-transform: scale(1);
412
  border-radius: 8px;
413
  overflow: hidden;
414
}
415
.dropzone .dz-preview .dz-progress .dz-upload {
416
  background: #333;
417
  background: linear-gradient(to bottom, #666, #444);
418
  position: absolute;
419
  top: 0;
420
  left: 0;
421
  bottom: 0;
422
  width: 0;
423
  -webkit-transition: width 300ms ease-in-out;
424
  -moz-transition: width 300ms ease-in-out;
425
  -ms-transition: width 300ms ease-in-out;
426
  -o-transition: width 300ms ease-in-out;
427
  transition: width 300ms ease-in-out;
428
}
429
.dropzone .dz-preview.dz-error .dz-error-message {
430
  display: block;
431
}
432
.dropzone .dz-preview.dz-error:hover .dz-error-message {
433
  opacity: 1;
434
  pointer-events: auto;
435
}
436
.dropzone .dz-preview .dz-error-message {
437
  pointer-events: none;
438
  z-index: 1000;
439
  position: absolute;
440
  display: block;
441
  display: none;
442
  opacity: 0;
443
  -webkit-transition: opacity 0.3s ease;
444
  -moz-transition: opacity 0.3s ease;
445
  -ms-transition: opacity 0.3s ease;
446
  -o-transition: opacity 0.3s ease;
447
  transition: opacity 0.3s ease;
448
  border-radius: 8px;
449
  font-size: 13px;
450
  top: 130px;
451
  left: -10px;
452
  width: 140px;
453
  background: #be2626;
454
  background: linear-gradient(to bottom, #be2626, #a92222);
455
  padding: 0.5em 1.2em;
456
  color: white;
457
}
458
.dropzone .dz-preview .dz-error-message:after {
459
  content: "";
460
  position: absolute;
461
  top: -6px;
462
  left: 64px;
463
  width: 0;
464
  height: 0;
465
  border-left: 6px solid transparent;
466
  border-right: 6px solid transparent;
467
  border-bottom: 6px solid #be2626;
468
}