1 @-webkit-keyframes passing-through {
4 -webkit-transform: translateY(40px);
5 -moz-transform: translateY(40px);
6 -ms-transform: translateY(40px);
7 -o-transform: translateY(40px);
8 transform: translateY(40px);
12 -webkit-transform: translateY(0px);
13 -moz-transform: translateY(0px);
14 -ms-transform: translateY(0px);
15 -o-transform: translateY(0px);
16 transform: translateY(0px);
20 -webkit-transform: translateY(-40px);
21 -moz-transform: translateY(-40px);
22 -ms-transform: translateY(-40px);
23 -o-transform: translateY(-40px);
24 transform: translateY(-40px);
27 @-moz-keyframes passing-through {
30 -webkit-transform: translateY(40px);
31 -moz-transform: translateY(40px);
32 -ms-transform: translateY(40px);
33 -o-transform: translateY(40px);
34 transform: translateY(40px);
38 -webkit-transform: translateY(0px);
39 -moz-transform: translateY(0px);
40 -ms-transform: translateY(0px);
41 -o-transform: translateY(0px);
42 transform: translateY(0px);
46 -webkit-transform: translateY(-40px);
47 -moz-transform: translateY(-40px);
48 -ms-transform: translateY(-40px);
49 -o-transform: translateY(-40px);
50 transform: translateY(-40px);
53 @keyframes passing-through {
56 -webkit-transform: translateY(40px);
57 -moz-transform: translateY(40px);
58 -ms-transform: translateY(40px);
59 -o-transform: translateY(40px);
60 transform: translateY(40px);
64 -webkit-transform: translateY(0px);
65 -moz-transform: translateY(0px);
66 -ms-transform: translateY(0px);
67 -o-transform: translateY(0px);
68 transform: translateY(0px);
72 -webkit-transform: translateY(-40px);
73 -moz-transform: translateY(-40px);
74 -ms-transform: translateY(-40px);
75 -o-transform: translateY(-40px);
76 transform: translateY(-40px);
79 @-webkit-keyframes slide-in {
82 -webkit-transform: translateY(40px);
83 -moz-transform: translateY(40px);
84 -ms-transform: translateY(40px);
85 -o-transform: translateY(40px);
86 transform: translateY(40px);
90 -webkit-transform: translateY(0px);
91 -moz-transform: translateY(0px);
92 -ms-transform: translateY(0px);
93 -o-transform: translateY(0px);
94 transform: translateY(0px);
97 @-moz-keyframes slide-in {
100 -webkit-transform: translateY(40px);
101 -moz-transform: translateY(40px);
102 -ms-transform: translateY(40px);
103 -o-transform: translateY(40px);
104 transform: translateY(40px);
108 -webkit-transform: translateY(0px);
109 -moz-transform: translateY(0px);
110 -ms-transform: translateY(0px);
111 -o-transform: translateY(0px);
112 transform: translateY(0px);
115 @keyframes slide-in {
118 -webkit-transform: translateY(40px);
119 -moz-transform: translateY(40px);
120 -ms-transform: translateY(40px);
121 -o-transform: translateY(40px);
122 transform: translateY(40px);
126 -webkit-transform: translateY(0px);
127 -moz-transform: translateY(0px);
128 -ms-transform: translateY(0px);
129 -o-transform: translateY(0px);
130 transform: translateY(0px);
133 @-webkit-keyframes pulse {
135 -webkit-transform: scale(1);
136 -moz-transform: scale(1);
137 -ms-transform: scale(1);
138 -o-transform: scale(1);
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);
149 -webkit-transform: scale(1);
150 -moz-transform: scale(1);
151 -ms-transform: scale(1);
152 -o-transform: scale(1);
156 @-moz-keyframes pulse {
158 -webkit-transform: scale(1);
159 -moz-transform: scale(1);
160 -ms-transform: scale(1);
161 -o-transform: scale(1);
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);
172 -webkit-transform: scale(1);
173 -moz-transform: scale(1);
174 -ms-transform: scale(1);
175 -o-transform: scale(1);
181 -webkit-transform: scale(1);
182 -moz-transform: scale(1);
183 -ms-transform: scale(1);
184 -o-transform: scale(1);
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);
195 -webkit-transform: scale(1);
196 -moz-transform: scale(1);
197 -ms-transform: scale(1);
198 -o-transform: scale(1);
202 .dropzone, .dropzone * {
203 box-sizing: border-box;
208 border: 1px solid rgba(0, 0, 0, 0.3);
212 .dropzone.dz-clickable {
215 .dropzone.dz-clickable * {
218 .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
221 .dropzone.dz-started .dz-message {
224 .dropzone.dz-drag-hover {
227 .dropzone.dz-drag-hover .dz-message {
230 .dropzone .dz-message {
233 .dropzone .dz-message .dz-button {
242 .dropzone .dz-preview {
244 display: inline-block;
249 .dropzone .dz-preview:hover {
252 .dropzone .dz-preview:hover .dz-details {
255 .dropzone .dz-preview.dz-file-preview .dz-image {
258 background: linear-gradient(to bottom, #eee, #ddd);
260 .dropzone .dz-preview.dz-file-preview .dz-details {
263 .dropzone .dz-preview.dz-image-preview {
266 .dropzone .dz-preview.dz-image-preview .dz-details {
267 -webkit-transition: opacity 0.2s linear;
268 -moz-transition: opacity 0.2s linear;
269 -ms-transition: opacity 0.2s linear;
270 -o-transition: opacity 0.2s linear;
271 transition: opacity 0.2s linear;
273 .dropzone .dz-preview .dz-remove {
280 .dropzone .dz-preview .dz-remove:hover {
281 text-decoration: underline;
283 .dropzone .dz-preview:hover .dz-details {
286 .dropzone .dz-preview .dz-details {
297 color: rgba(0, 0, 0, 0.9);
300 .dropzone .dz-preview .dz-details .dz-size {
304 .dropzone .dz-preview .dz-details .dz-filename {
307 .dropzone .dz-preview .dz-details .dz-filename:hover span {
308 border: 1px solid rgba(200, 200, 200, 0.8);
309 background-color: rgba(255, 255, 255, 0.8);
311 .dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
313 text-overflow: ellipsis;
315 .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
316 border: 1px solid transparent;
318 .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
319 background-color: rgba(255, 255, 255, 0.4);
323 .dropzone .dz-preview:hover .dz-image img {
324 -webkit-transform: scale(1.05, 1.05);
325 -moz-transform: scale(1.05, 1.05);
326 -ms-transform: scale(1.05, 1.05);
327 -o-transform: scale(1.05, 1.05);
328 transform: scale(1.05, 1.05);
329 -webkit-filter: blur(8px);
332 .dropzone .dz-preview .dz-image {
341 .dropzone .dz-preview .dz-image img {
344 .dropzone .dz-preview.dz-success .dz-success-mark {
345 -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
346 -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
347 -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
348 -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
349 animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
351 .dropzone .dz-preview.dz-error .dz-error-mark {
353 -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
354 -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
355 -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
356 -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
357 animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
359 .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
360 pointer-events: none;
370 .dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
375 .dropzone .dz-preview.dz-processing .dz-progress {
377 -webkit-transition: all 0.2s linear;
378 -moz-transition: all 0.2s linear;
379 -ms-transition: all 0.2s linear;
380 -o-transition: all 0.2s linear;
381 transition: all 0.2s linear;
383 .dropzone .dz-preview.dz-complete .dz-progress {
385 -webkit-transition: opacity 0.4s ease-in;
386 -moz-transition: opacity 0.4s ease-in;
387 -ms-transition: opacity 0.4s ease-in;
388 -o-transition: opacity 0.4s ease-in;
389 transition: opacity 0.4s ease-in;
391 .dropzone .dz-preview:not(.dz-processing) .dz-progress {
392 -webkit-animation: pulse 6s ease infinite;
393 -moz-animation: pulse 6s ease infinite;
394 -ms-animation: pulse 6s ease infinite;
395 -o-animation: pulse 6s ease infinite;
396 animation: pulse 6s ease infinite;
398 .dropzone .dz-preview .dz-progress {
401 pointer-events: none;
409 background: rgba(255, 255, 255, 0.9);
410 -webkit-transform: scale(1);
414 .dropzone .dz-preview .dz-progress .dz-upload {
416 background: linear-gradient(to bottom, #666, #444);
422 -webkit-transition: width 300ms ease-in-out;
423 -moz-transition: width 300ms ease-in-out;
424 -ms-transition: width 300ms ease-in-out;
425 -o-transition: width 300ms ease-in-out;
426 transition: width 300ms ease-in-out;
428 .dropzone .dz-preview.dz-error .dz-error-message {
431 .dropzone .dz-preview.dz-error:hover .dz-error-message {
433 pointer-events: auto;
435 .dropzone .dz-preview .dz-error-message {
436 pointer-events: none;
442 -webkit-transition: opacity 0.3s ease;
443 -moz-transition: opacity 0.3s ease;
444 -ms-transition: opacity 0.3s ease;
445 -o-transition: opacity 0.3s ease;
446 transition: opacity 0.3s ease;
453 background: linear-gradient(to bottom, #be2626, #a92222);
454 padding: 0.5em 1.2em;
457 .dropzone .dz-preview .dz-error-message:after {
464 border-left: 6px solid transparent;
465 border-right: 6px solid transparent;
466 border-bottom: 6px solid #be2626;