source: pro-violet-viettel/www/deploy/20150304/assets/css/dropzone.css @ 804

Last change on this file since 804 was 780, checked in by dungnv, 10 years ago
File size: 11.4 KB
Line 
1/* The MIT License */
2.dropzone,
3.dropzone *,
4.dropzone-previews,
5.dropzone-previews * {
6  -webkit-box-sizing: border-box;
7  -moz-box-sizing: border-box;
8  box-sizing: border-box;
9}
10.dropzone {
11  position: relative;
12  border: 1px solid rgba(0,0,0,0.08);
13  background: rgba(0,0,0,0.02);
14  padding: 1em;
15}
16.dropzone.dz-clickable {
17  cursor: pointer;
18}
19.dropzone.dz-clickable .dz-message,
20.dropzone.dz-clickable .dz-message span {
21  cursor: pointer;
22}
23.dropzone.dz-clickable * {
24  cursor: default;
25}
26.dropzone .dz-message {
27  opacity: 1;
28  -ms-filter: none;
29  filter: none;
30}
31.dropzone.dz-drag-hover {
32  border-color: rgba(0,0,0,0.15);
33  background: rgba(0,0,0,0.04);
34}
35.dropzone.dz-started .dz-message {
36  display: none;
37}
38.dropzone .dz-preview,
39.dropzone-previews .dz-preview {
40  background: rgba(255,255,255,0.8);
41  position: relative;
42  display: inline-block;
43  margin: 17px;
44  vertical-align: top;
45  border: 1px solid #acacac;
46  padding: 6px 6px 6px 6px;
47}
48.dropzone .dz-preview.dz-file-preview [data-dz-thumbnail],
49.dropzone-previews .dz-preview.dz-file-preview [data-dz-thumbnail] {
50  display: none;
51}
52.dropzone .dz-preview .dz-details,
53.dropzone-previews .dz-preview .dz-details {
54  width: 100px;
55  height: 100px;
56  position: relative;
57  background: #ebebeb;
58  padding: 5px;
59  margin-bottom: 22px;
60}
61.dropzone .dz-preview .dz-details .dz-filename,
62.dropzone-previews .dz-preview .dz-details .dz-filename {
63  overflow: hidden;
64  height: 100%;
65}
66.dropzone .dz-preview .dz-details img,
67.dropzone-previews .dz-preview .dz-details img {
68  position: absolute;
69  top: 0;
70  left: 0;
71  width: 100px;
72  height: 100px;
73}
74.dropzone .dz-preview .dz-details .dz-size,
75.dropzone-previews .dz-preview .dz-details .dz-size {
76  position: absolute;
77  bottom: -28px;
78  left: 3px;
79  height: 28px;
80  line-height: 28px;
81}
82.dropzone .dz-preview.dz-error .dz-error-mark,
83.dropzone-previews .dz-preview.dz-error .dz-error-mark {
84  display: block;
85}
86.dropzone .dz-preview.dz-success .dz-success-mark,
87.dropzone-previews .dz-preview.dz-success .dz-success-mark {
88  display: block;
89}
90.dropzone .dz-preview:hover .dz-details img,
91.dropzone-previews .dz-preview:hover .dz-details img {
92  display: none;
93}
94.dropzone .dz-preview .dz-success-mark,
95.dropzone-previews .dz-preview .dz-success-mark,
96.dropzone .dz-preview .dz-error-mark,
97.dropzone-previews .dz-preview .dz-error-mark {
98  display: none;
99  position: absolute;
100  width: 40px;
101  height: 40px;
102  font-size: 30px;
103  text-align: center;
104  right: -10px;
105  top: -10px;
106}
107.dropzone .dz-preview .dz-success-mark,
108.dropzone-previews .dz-preview .dz-success-mark {
109  color: #8cc657;
110}
111.dropzone .dz-preview .dz-error-mark,
112.dropzone-previews .dz-preview .dz-error-mark {
113  color: #ee162d;
114}
115.dropzone .dz-preview .dz-progress,
116.dropzone-previews .dz-preview .dz-progress {
117  position: absolute;
118  top: 100px;
119  left: 6px;
120  right: 6px;
121  height: 6px;
122  background: #d7d7d7;
123  display: none;
124}
125.dropzone .dz-preview .dz-progress .dz-upload,
126.dropzone-previews .dz-preview .dz-progress .dz-upload {
127  position: absolute;
128  top: 0;
129  bottom: 0;
130  left: 0;
131  width: 0%;
132  background-color: #8cc657;
133}
134.dropzone .dz-preview.dz-processing .dz-progress,
135.dropzone-previews .dz-preview.dz-processing .dz-progress {
136  display: block;
137}
138.dropzone .dz-preview .dz-error-message,
139.dropzone-previews .dz-preview .dz-error-message {
140  display: none;
141  position: absolute;
142  top: -5px;
143  left: -20px;
144  background: rgba(245,245,245,0.8);
145  padding: 8px 10px;
146  color: #800;
147  min-width: 140px;
148  max-width: 500px;
149  z-index: 500;
150}
151.dropzone .dz-preview:hover.dz-error .dz-error-message,
152.dropzone-previews .dz-preview:hover.dz-error .dz-error-message {
153  display: block;
154}
155.dropzone {
156  border: 1px solid rgba(0,0,0,0.03);
157  min-height: 360px;
158  -webkit-border-radius: 3px;
159  border-radius: 3px;
160  background: rgba(0,0,0,0.03);
161  padding: 23px;
162}
163.dropzone .dz-default.dz-message {
164  opacity: 1;
165  -ms-filter: none;
166  filter: none;
167  -webkit-transition: opacity 0.3s ease-in-out;
168  -moz-transition: opacity 0.3s ease-in-out;
169  -o-transition: opacity 0.3s ease-in-out;
170  -ms-transition: opacity 0.3s ease-in-out;
171  transition: opacity 0.3s ease-in-out;
172  background-image: url("../images/spritemap.png");
173  background-repeat: no-repeat;
174  background-position: 0 0;
175  position: absolute;
176  width: 428px;
177  height: 123px;
178  margin-left: -214px;
179  margin-top: -61.5px;
180  top: 50%;
181  left: 50%;
182}
183@media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
184  .dropzone .dz-default.dz-message {
185    background-image: url("../images/spritemap@2x.png");
186    -webkit-background-size: 428px 406px;
187    -moz-background-size: 428px 406px;
188    background-size: 428px 406px;
189  }
190}
191.dropzone .dz-default.dz-message span {
192  display: none;
193}
194.dropzone.dz-square .dz-default.dz-message {
195  background-position: 0 -123px;
196  width: 268px;
197  margin-left: -134px;
198  height: 174px;
199  margin-top: -87px;
200}
201.dropzone.dz-drag-hover .dz-message {
202  opacity: 0.15;
203  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
204  filter: alpha(opacity=15);
205}
206.dropzone.dz-started .dz-message {
207  display: block;
208  opacity: 0;
209  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
210  filter: alpha(opacity=0);
211}
212.dropzone .dz-preview,
213.dropzone-previews .dz-preview {
214  -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.16);
215  box-shadow: 1px 1px 4px rgba(0,0,0,0.16);
216  font-size: 14px;
217}
218.dropzone .dz-preview.dz-image-preview:hover .dz-details img,
219.dropzone-previews .dz-preview.dz-image-preview:hover .dz-details img {
220  display: block;
221  opacity: 0.1;
222  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
223  filter: alpha(opacity=10);
224}
225.dropzone .dz-preview.dz-success .dz-success-mark,
226.dropzone-previews .dz-preview.dz-success .dz-success-mark {
227  opacity: 1;
228  -ms-filter: none;
229  filter: none;
230}
231.dropzone .dz-preview.dz-error .dz-error-mark,
232.dropzone-previews .dz-preview.dz-error .dz-error-mark {
233  opacity: 1;
234  -ms-filter: none;
235  filter: none;
236}
237.dropzone .dz-preview.dz-error .dz-progress .dz-upload,
238.dropzone-previews .dz-preview.dz-error .dz-progress .dz-upload {
239  background: #ee1e2d;
240}
241.dropzone .dz-preview .dz-error-mark,
242.dropzone-previews .dz-preview .dz-error-mark,
243.dropzone .dz-preview .dz-success-mark,
244.dropzone-previews .dz-preview .dz-success-mark {
245  display: block;
246  opacity: 0;
247  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
248  filter: alpha(opacity=0);
249  -webkit-transition: opacity 0.4s ease-in-out;
250  -moz-transition: opacity 0.4s ease-in-out;
251  -o-transition: opacity 0.4s ease-in-out;
252  -ms-transition: opacity 0.4s ease-in-out;
253  transition: opacity 0.4s ease-in-out;
254  background-image: url("../images/spritemap.png");
255  background-repeat: no-repeat;
256}
257@media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
258  .dropzone .dz-preview .dz-error-mark,
259  .dropzone-previews .dz-preview .dz-error-mark,
260  .dropzone .dz-preview .dz-success-mark,
261  .dropzone-previews .dz-preview .dz-success-mark {
262    background-image: url("../images/spritemap@2x.png");
263    -webkit-background-size: 428px 406px;
264    -moz-background-size: 428px 406px;
265    background-size: 428px 406px;
266  }
267}
268.dropzone .dz-preview .dz-error-mark span,
269.dropzone-previews .dz-preview .dz-error-mark span,
270.dropzone .dz-preview .dz-success-mark span,
271.dropzone-previews .dz-preview .dz-success-mark span {
272  display: none;
273}
274.dropzone .dz-preview .dz-error-mark,
275.dropzone-previews .dz-preview .dz-error-mark {
276  background-position: -268px -123px;
277}
278.dropzone .dz-preview .dz-success-mark,
279.dropzone-previews .dz-preview .dz-success-mark {
280  background-position: -268px -163px;
281}
282.dropzone .dz-preview .dz-progress .dz-upload,
283.dropzone-previews .dz-preview .dz-progress .dz-upload {
284  -webkit-animation: loading 0.4s linear infinite;
285  -moz-animation: loading 0.4s linear infinite;
286  -o-animation: loading 0.4s linear infinite;
287  -ms-animation: loading 0.4s linear infinite;
288  animation: loading 0.4s linear infinite;
289  -webkit-transition: width 0.3s ease-in-out;
290  -moz-transition: width 0.3s ease-in-out;
291  -o-transition: width 0.3s ease-in-out;
292  -ms-transition: width 0.3s ease-in-out;
293  transition: width 0.3s ease-in-out;
294  -webkit-border-radius: 2px;
295  border-radius: 2px;
296  position: absolute;
297  top: 0;
298  left: 0;
299  width: 0%;
300  height: 100%;
301  background-image: url("../images/spritemap.png");
302  background-repeat: repeat-x;
303  background-position: 0px -400px;
304}
305@media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
306  .dropzone .dz-preview .dz-progress .dz-upload,
307  .dropzone-previews .dz-preview .dz-progress .dz-upload {
308    background-image: url("../images/spritemap@2x.png");
309    -webkit-background-size: 428px 406px;
310    -moz-background-size: 428px 406px;
311    background-size: 428px 406px;
312  }
313}
314.dropzone .dz-preview.dz-success .dz-progress,
315.dropzone-previews .dz-preview.dz-success .dz-progress {
316  display: block;
317  opacity: 0;
318  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
319  filter: alpha(opacity=0);
320  -webkit-transition: opacity 0.4s ease-in-out;
321  -moz-transition: opacity 0.4s ease-in-out;
322  -o-transition: opacity 0.4s ease-in-out;
323  -ms-transition: opacity 0.4s ease-in-out;
324  transition: opacity 0.4s ease-in-out;
325}
326.dropzone .dz-preview .dz-error-message,
327.dropzone-previews .dz-preview .dz-error-message {
328  display: block;
329  opacity: 0;
330  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
331  filter: alpha(opacity=0);
332  -webkit-transition: opacity 0.3s ease-in-out;
333  -moz-transition: opacity 0.3s ease-in-out;
334  -o-transition: opacity 0.3s ease-in-out;
335  -ms-transition: opacity 0.3s ease-in-out;
336  transition: opacity 0.3s ease-in-out;
337}
338.dropzone .dz-preview:hover.dz-error .dz-error-message,
339.dropzone-previews .dz-preview:hover.dz-error .dz-error-message {
340  opacity: 1;
341  -ms-filter: none;
342  filter: none;
343}
344.dropzone a.dz-remove,
345.dropzone-previews a.dz-remove {
346  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, #eee));
347  background-image: -webkit-linear-gradient(top, #fafafa 0, #eee 100%);
348  background-image: -moz-linear-gradient(top, #fafafa 0, #eee 100%);
349  background-image: -o-linear-gradient(top, #fafafa 0, #eee 100%);
350  background-image: -ms-linear-gradient(top, #fafafa 0, #eee 100%);
351  background-image: linear-gradient(top, #fafafa 0, #eee 100%);
352  -webkit-border-radius: 2px;
353  border-radius: 2px;
354  border: 1px solid #eee;
355  text-decoration: none;
356  display: block;
357  padding: 4px 5px;
358  text-align: center;
359  color: #aaa;
360  margin-top: 26px;
361}
362.dropzone a.dz-remove:hover,
363.dropzone-previews a.dz-remove:hover {
364  color: #666;
365}
366@-moz-keyframes loading {
367  0% {
368    background-position: 0 -400px;
369  }
370
371  100% {
372    background-position: -7px -400px;
373  }
374}
375@-webkit-keyframes loading {
376  0% {
377    background-position: 0 -400px;
378  }
379
380  100% {
381    background-position: -7px -400px;
382  }
383}
384@-o-keyframes loading {
385  0% {
386    background-position: 0 -400px;
387  }
388
389  100% {
390    background-position: -7px -400px;
391  }
392}
393@-ms-keyframes loading {
394  0% {
395    background-position: 0 -400px;
396  }
397
398  100% {
399    background-position: -7px -400px;
400  }
401}
402@keyframes loading {
403  0% {
404    background-position: 0 -400px;
405  }
406
407  100% {
408    background-position: -7px -400px;
409  }
410}
Note: See TracBrowser for help on using the repository browser.