CoCalc -- dropzone.css

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

GitHub Repository: sagemathinc/cocalc
Path: blob/master/src/packages/assets/dropzone/css/dropzone.css
Views: ⁶⁸⁷
1
/*
2
 *  This file is part of CoCalc: Copyright © 2020 Sagemath, Inc.
3
 *  License: MS-RSL – see LICENSE.md for details
4
 */
5

6
.dropzone,
7
.dropzone *,
8
.dropzone-previews,
9
.dropzone-previews * {
10
  -webkit-box-sizing: border-box;
11
  -moz-box-sizing: border-box;
12
  box-sizing: border-box;
13
}
14
.dropzone {
15
  position: relative;
16
  border: 1px solid rgba(0,0,0,0.08);
17
  background: rgba(0,0,0,0.02);
18
  padding: 1em;
19
}
20
.dropzone.dz-clickable {
21
  cursor: pointer;
22
}
23
.dropzone.dz-clickable .dz-message,
24
.dropzone.dz-clickable .dz-message span {
25
  cursor: pointer;
26
}
27
.dropzone.dz-clickable * {
28
  cursor: default;
29
}
30
.dropzone .dz-message {
31
  opacity: 1;
32
  -ms-filter: none;
33
  filter: none;
34
}
35
.dropzone.dz-drag-hover {
36
  border-color: rgba(0,0,0,0.15);
37
  background: rgba(0,0,0,0.04);
38
}
39
.dropzone.dz-started .dz-message {
40
  display: none;
41
}
42
.dropzone .dz-preview,
43
.dropzone-previews .dz-preview {
44
  background: rgba(255,255,255,0.8);
45
  position: relative;
46
  display: inline-block;
47
  margin: 17px;
48
  vertical-align: top;
49
  border: 1px solid #acacac;
50
  padding: 6px 6px 6px 6px;
51
}
52
.dropzone .dz-preview.dz-file-preview [data-dz-thumbnail],
53
.dropzone-previews .dz-preview.dz-file-preview [data-dz-thumbnail] {
54
  display: none;
55
}
56
.dropzone .dz-preview .dz-details,
57
.dropzone-previews .dz-preview .dz-details {
58
  width: 100px;
59
  height: 100px;
60
  position: relative;
61
  background: #ebebeb;
62
  padding: 5px;
63
  margin-bottom: 22px;
64
}
65
.dropzone .dz-preview .dz-details .dz-filename,
66
.dropzone-previews .dz-preview .dz-details .dz-filename {
67
  overflow: hidden;
68
  height: 100%;
69
}
70
.dropzone .dz-preview .dz-details img,
71
.dropzone-previews .dz-preview .dz-details img {
72
  position: absolute;
73
  top: 0;
74
  left: 0;
75
  width: 100px;
76
  height: 100px;
77
}
78
.dropzone .dz-preview .dz-details .dz-size,
79
.dropzone-previews .dz-preview .dz-details .dz-size {
80
  position: absolute;
81
  bottom: -28px;
82
  left: 3px;
83
  height: 28px;
84
  line-height: 28px;
85
}
86
.dropzone .dz-preview.dz-error .dz-error-mark,
87
.dropzone-previews .dz-preview.dz-error .dz-error-mark {
88
  display: block;
89
}
90
.dropzone .dz-preview.dz-success .dz-success-mark,
91
.dropzone-previews .dz-preview.dz-success .dz-success-mark {
92
  display: block;
93
}
94
.dropzone .dz-preview:hover .dz-details img,
95
.dropzone-previews .dz-preview:hover .dz-details img {
96
  display: none;
97
}
98
.dropzone .dz-preview .dz-success-mark,
99
.dropzone-previews .dz-preview .dz-success-mark,
100
.dropzone .dz-preview .dz-error-mark,
101
.dropzone-previews .dz-preview .dz-error-mark {
102
  display: none;
103
  position: absolute;
104
  width: 40px;
105
  height: 40px;
106
  font-size: 30px;
107
  text-align: center;
108
  right: -10px;
109
  top: -10px;
110
}
111
.dropzone .dz-preview .dz-success-mark,
112
.dropzone-previews .dz-preview .dz-success-mark {
113
  color: #8cc657;
114
}
115
.dropzone .dz-preview .dz-error-mark,
116
.dropzone-previews .dz-preview .dz-error-mark {
117
  color: #ee162d;
118
}
119
.dropzone .dz-preview .dz-progress,
120
.dropzone-previews .dz-preview .dz-progress {
121
  position: absolute;
122
  top: 100px;
123
  left: 6px;
124
  right: 6px;
125
  height: 6px;
126
  background: #d7d7d7;
127
  display: none;
128
}
129
.dropzone .dz-preview .dz-progress .dz-upload,
130
.dropzone-previews .dz-preview .dz-progress .dz-upload {
131
  position: absolute;
132
  top: 0;
133
  bottom: 0;
134
  left: 0;
135
  width: 0%;
136
  background-color: #8cc657;
137
}
138
.dropzone .dz-preview.dz-processing .dz-progress,
139
.dropzone-previews .dz-preview.dz-processing .dz-progress {
140
  display: block;
141
}
142
.dropzone .dz-preview .dz-error-message,
143
.dropzone-previews .dz-preview .dz-error-message {
144
  display: none;
145
  position: absolute;
146
  top: -5px;
147
  left: -20px;
148
  background: rgba(245,245,245,0.8);
149
  padding: 8px 10px;
150
  color: #800;
151
  min-width: 140px;
152
  max-width: 500px;
153
  z-index: 500;
154
}
155
.dropzone .dz-preview:hover.dz-error .dz-error-message,
156
.dropzone-previews .dz-preview:hover.dz-error .dz-error-message {
157
  display: block;
158
}
159
.dropzone {
160
  border: 1px solid rgba(0,0,0,0.03);
161
  min-height: 360px;
162
  -webkit-border-radius: 3px;
163
  border-radius: 3px;
164
  background: rgba(0,0,0,0.03);
165
  padding: 23px;
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(~!url-loader!dropzone/images/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),(-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(~!url-loader!dropzone/images/[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(~!url-loader!dropzone/images/spritemap.png);
259
  background-repeat: no-repeat;
260
}
261
@media all and (-webkit-min-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(~!url-loader!dropzone/images/[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(~!url-loader!dropzone/images/spritemap.png);
306
  background-repeat: repeat-x;
307
  background-position: 0px -400px;
308
}
309
@media all and (-webkit-min-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(~!url-loader!dropzone/images/[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
Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

Product

Resources

Company

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more, all in one place.

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.
