CoCalc -- dropzone.css

GitHub Repository: malwaredllc/byob
Path: blob/master/web-gui/buildyourownbotnet/assets/js/dropzone/dropzone.css
¹²⁹³ views
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
  display: block;
128
  position: absolute;
129
  top: 0;
130
  bottom: 0;
131
  left: 0;
132
  width: 0%;
133
  background-color: #8cc657;
134
}
135
.dropzone .dz-preview.dz-processing .dz-progress,
136
.dropzone-previews .dz-preview.dz-processing .dz-progress {
137
  display: block;
138
}
139
.dropzone .dz-preview .dz-error-message,
140
.dropzone-previews .dz-preview .dz-error-message {
141
  display: none;
142
  position: absolute;
143
  top: -5px;
144
  left: -20px;
145
  background: rgba(245,245,245,0.8);
146
  padding: 8px 10px;
147
  color: #800;
148
  min-width: 140px;
149
  max-width: 500px;
150
  z-index: 500;
151
}
152
.dropzone .dz-preview:hover.dz-error .dz-error-message,
153
.dropzone-previews .dz-preview:hover.dz-error .dz-error-message {
154
  display: block;
155
}
156
.dropzone {
157
  border: 1px solid rgba(0,0,0,0.03);
158
  min-height: 360px;
159
  -webkit-border-radius: 3px;
160
  border-radius: 3px;
161
  background: rgba(0,0,0,0.03);
162
  padding: 23px;
163
}
164
.dropzone.dz-min {
165
	min-height: 200px;
166
}
167
.dropzone .dz-default.dz-message {
168
  opacity: 1;
169
  -ms-filter: none;
170
  filter: none;
171
  -webkit-transition: opacity 0.3s ease-in-out;
172
  -moz-transition: opacity 0.3s ease-in-out;
173
  -o-transition: opacity 0.3s ease-in-out;
174
  -ms-transition: opacity 0.3s ease-in-out;
175
  transition: opacity 0.3s ease-in-out;
176
  background-image: url("spritemap.png");
177
  background-repeat: no-repeat;
178
  background-position: 0 0;
179
  position: absolute;
180
  width: 428px;
181
  height: 123px;
182
  margin-left: -214px;
183
  margin-top: -61.5px;
184
  top: 50%;
185
  left: 50%;
186
}
187
@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) {
188
  .dropzone .dz-default.dz-message {
189
    background-image: url("[email protected]");
190
    -webkit-background-size: 428px 406px;
191
    -moz-background-size: 428px 406px;
192
    background-size: 428px 406px;
193
  }
194
}
195
.dropzone .dz-default.dz-message span {
196
  display: none;
197
}
198
.dropzone.dz-square .dz-default.dz-message {
199
  background-position: 0 -123px;
200
  width: 268px;
201
  margin-left: -134px;
202
  height: 174px;
203
  margin-top: -87px;
204
}
205
.dropzone.dz-drag-hover .dz-message {
206
  opacity: 0.15;
207
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
208
  filter: alpha(opacity=15);
209
}
210
.dropzone.dz-started .dz-message {
211
  display: block;
212
  opacity: 0;
213
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
214
  filter: alpha(opacity=0);
215
}
216
.dropzone .dz-preview,
217
.dropzone-previews .dz-preview {
218
  -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.16);
219
  box-shadow: 1px 1px 4px rgba(0,0,0,0.16);
220
  font-size: 14px;
221
}
222
.dropzone .dz-preview.dz-image-preview:hover .dz-details img,
223
.dropzone-previews .dz-preview.dz-image-preview:hover .dz-details img {
224
  display: block;
225
  opacity: 0.1;
226
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
227
  filter: alpha(opacity=10);
228
}
229
.dropzone .dz-preview.dz-success .dz-success-mark,
230
.dropzone-previews .dz-preview.dz-success .dz-success-mark {
231
  opacity: 1;
232
  -ms-filter: none;
233
  filter: none;
234
}
235
.dropzone .dz-preview.dz-error .dz-error-mark,
236
.dropzone-previews .dz-preview.dz-error .dz-error-mark {
237
  opacity: 1;
238
  -ms-filter: none;
239
  filter: none;
240
}
241
.dropzone .dz-preview.dz-error .dz-progress .dz-upload,
242
.dropzone-previews .dz-preview.dz-error .dz-progress .dz-upload {
243
  background: #ee1e2d;
244
}
245
.dropzone .dz-preview .dz-error-mark,
246
.dropzone-previews .dz-preview .dz-error-mark,
247
.dropzone .dz-preview .dz-success-mark,
248
.dropzone-previews .dz-preview .dz-success-mark {
249
  display: block;
250
  opacity: 0;
251
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
252
  filter: alpha(opacity=0);
253
  -webkit-transition: opacity 0.4s ease-in-out;
254
  -moz-transition: opacity 0.4s ease-in-out;
255
  -o-transition: opacity 0.4s ease-in-out;
256
  -ms-transition: opacity 0.4s ease-in-out;
257
  transition: opacity 0.4s ease-in-out;
258
  background-image: url("spritemap.png");
259
  background-repeat: no-repeat;
260
}
261
@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) {
262
  .dropzone .dz-preview .dz-error-mark,
263
  .dropzone-previews .dz-preview .dz-error-mark,
264
  .dropzone .dz-preview .dz-success-mark,
265
  .dropzone-previews .dz-preview .dz-success-mark {
266
    background-image: url("[email protected]");
267
    -webkit-background-size: 428px 406px;
268
    -moz-background-size: 428px 406px;
269
    background-size: 428px 406px;
270
  }
271
}
272
.dropzone .dz-preview .dz-error-mark span,
273
.dropzone-previews .dz-preview .dz-error-mark span,
274
.dropzone .dz-preview .dz-success-mark span,
275
.dropzone-previews .dz-preview .dz-success-mark span {
276
  display: none;
277
}
278
.dropzone .dz-preview .dz-error-mark,
279
.dropzone-previews .dz-preview .dz-error-mark {
280
  background-position: -268px -123px;
281
}
282
.dropzone .dz-preview .dz-success-mark,
283
.dropzone-previews .dz-preview .dz-success-mark {
284
  background-position: -268px -163px;
285
}
286
.dropzone .dz-preview .dz-progress .dz-upload,
287
.dropzone-previews .dz-preview .dz-progress .dz-upload {
288
  -webkit-animation: loading 0.4s linear infinite;
289
  -moz-animation: loading 0.4s linear infinite;
290
  -o-animation: loading 0.4s linear infinite;
291
  -ms-animation: loading 0.4s linear infinite;
292
  animation: loading 0.4s linear infinite;
293
  -webkit-transition: width 0.3s ease-in-out;
294
  -moz-transition: width 0.3s ease-in-out;
295
  -o-transition: width 0.3s ease-in-out;
296
  -ms-transition: width 0.3s ease-in-out;
297
  transition: width 0.3s ease-in-out;
298
  -webkit-border-radius: 2px;
299
  border-radius: 2px;
300
  position: absolute;
301
  top: 0;
302
  left: 0;
303
  width: 0%;
304
  height: 100%;
305
  background-image: url("spritemap.png");
306
  background-repeat: repeat-x;
307
  background-position: 0px -400px;
308
}
309
@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) {
310
  .dropzone .dz-preview .dz-progress .dz-upload,
311
  .dropzone-previews .dz-preview .dz-progress .dz-upload {
312
    background-image: url("[email protected]");
313
    -webkit-background-size: 428px 406px;
314
    -moz-background-size: 428px 406px;
315
    background-size: 428px 406px;
316
  }
317
}
318
.dropzone .dz-preview.dz-success .dz-progress,
319
.dropzone-previews .dz-preview.dz-success .dz-progress {
320
  display: block;
321
  opacity: 0;
322
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
323
  filter: alpha(opacity=0);
324
  -webkit-transition: opacity 0.4s ease-in-out;
325
  -moz-transition: opacity 0.4s ease-in-out;
326
  -o-transition: opacity 0.4s ease-in-out;
327
  -ms-transition: opacity 0.4s ease-in-out;
328
  transition: opacity 0.4s ease-in-out;
329
}
330
.dropzone .dz-preview .dz-error-message,
331
.dropzone-previews .dz-preview .dz-error-message {
332
  display: block;
333
  opacity: 0;
334
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
335
  filter: alpha(opacity=0);
336
  -webkit-transition: opacity 0.3s ease-in-out;
337
  -moz-transition: opacity 0.3s ease-in-out;
338
  -o-transition: opacity 0.3s ease-in-out;
339
  -ms-transition: opacity 0.3s ease-in-out;
340
  transition: opacity 0.3s ease-in-out;
341
}
342
.dropzone .dz-preview:hover.dz-error .dz-error-message,
343
.dropzone-previews .dz-preview:hover.dz-error .dz-error-message {
344
  opacity: 1;
345
  -ms-filter: none;
346
  filter: none;
347
}
348
.dropzone a.dz-remove,
349
.dropzone-previews a.dz-remove {
350
  background-image: -webkit-linear-gradient(top, #fafafa, #eee);
351
  background-image: -moz-linear-gradient(top, #fafafa, #eee);
352
  background-image: -o-linear-gradient(top, #fafafa, #eee);
353
  background-image: -ms-linear-gradient(top, #fafafa, #eee);
354
  background-image: linear-gradient(to bottom, #fafafa, #eee);
355
  -webkit-border-radius: 2px;
356
  border-radius: 2px;
357
  border: 1px solid #eee;
358
  text-decoration: none;
359
  display: block;
360
  padding: 4px 5px;
361
  text-align: center;
362
  color: #aaa;
363
  margin-top: 26px;
364
}
365
.dropzone a.dz-remove:hover,
366
.dropzone-previews a.dz-remove:hover {
367
  color: #666;
368
}
369
@-moz-keyframes loading {
370
  0% {
371
    background-position: 0 -400px;
372
  }
373

374
  100% {
375
    background-position: -7px -400px;
376
  }
377
}
378
@-webkit-keyframes loading {
379
  0% {
380
    background-position: 0 -400px;
381
  }
382

383
  100% {
384
    background-position: -7px -400px;
385
  }
386
}
387
@-o-keyframes loading {
388
  0% {
389
    background-position: 0 -400px;
390
  }
391

392
  100% {
393
    background-position: -7px -400px;
394
  }
395
}
396
@-ms-keyframes loading {
397
  0% {
398
    background-position: 0 -400px;
399
  }
400

401
  100% {
402
    background-position: -7px -400px;
403
  }
404
}
405
@keyframes loading {
406
  0% {
407
    background-position: 0 -400px;
408
  }
409

410
  100% {
411
    background-position: -7px -400px;
412
  }
413
}
414

415
Product

Resources

Company
