pyc-website
main website for pyc inc.
git clone https://9o.is/git/pyc-website.git
dropzone.less
(11527B)
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 background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.25, rgba(0, 0, 0, 0.03)), color-stop(0.25, rgba(0, 0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.03)), color-stop(0.75, rgba(0, 0, 0, 0.03)), color-stop(0.75, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
33 background-image: -webkit-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.03) 50%, rgba(0, 0, 0, 0.03) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
34 background-image: -moz-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.03) 50%, rgba(0, 0, 0, 0.03) 75%, transparent 75%, transparent);
35 background-image: -ms-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.03) 50%, rgba(0, 0, 0, 0.03) 75%, transparent 75%, transparent);
36 background-image: -o-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.03) 50%, rgba(0, 0, 0, 0.03) 75%, transparent 75%, transparent);
37 background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.03) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.03) 50%, rgba(0, 0, 0, 0.03) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
38 background-color: #fafafa;
39 background-size: 22px 22px;
40 border:5px dashed #ccc;
41
42 }
43 .dropzone.dz-started .dz-message {
44 display: none;
45 }
46 .dropzone .dz-preview,
47 .dropzone-previews .dz-preview {
48 background: rgba(255,255,255,0.8);
49 position: relative;
50 display: inline-block;
51 margin: 10px;
52 vertical-align: top;
53 border: 1px solid #acacac;
54 padding: 6px 6px 6px 6px;
55 }
56 .dropzone .dz-preview.dz-file-preview [data-dz-thumbnail],
57 .dropzone-previews .dz-preview.dz-file-preview [data-dz-thumbnail] {
58 display: none;
59 }
60 .dropzone .dz-preview .dz-details,
61 .dropzone-previews .dz-preview .dz-details {
62 width: 100px;
63 height: 100px;
64 position: relative;
65 background: #ebebeb;
66 padding: 5px;
67 margin-bottom: 22px;
68 }
69 .dropzone .dz-preview .dz-details .dz-filename,
70 .dropzone-previews .dz-preview .dz-details .dz-filename {
71 overflow: hidden;
72 height: 100%;
73 }
74 .dropzone .dz-preview .dz-details img,
75 .dropzone-previews .dz-preview .dz-details img {
76 position: absolute;
77 top: 0;
78 left: 0;
79 width: 100px;
80 height: 100px;
81 }
82 .dropzone .dz-preview .dz-details .dz-size,
83 .dropzone-previews .dz-preview .dz-details .dz-size {
84 position: absolute;
85 bottom: -28px;
86 left: 3px;
87 height: 28px;
88 line-height: 28px;
89 }
90 .dropzone .dz-preview.dz-error .dz-error-mark,
91 .dropzone-previews .dz-preview.dz-error .dz-error-mark {
92 display: block;
93 }
94 .dropzone .dz-preview.dz-success .dz-success-mark,
95 .dropzone-previews .dz-preview.dz-success .dz-success-mark {
96 display: block;
97 }
98 .dropzone .dz-preview:hover .dz-details img,
99 .dropzone-previews .dz-preview:hover .dz-details img {
100 display: none;
101 }
102 .dropzone .dz-preview .dz-success-mark,
103 .dropzone-previews .dz-preview .dz-success-mark,
104 .dropzone .dz-preview .dz-error-mark,
105 .dropzone-previews .dz-preview .dz-error-mark {
106 display: none;
107 position: absolute;
108 width: 40px;
109 height: 40px;
110 font-size: 30px;
111 text-align: center;
112 right: -10px;
113 top: -10px;
114 }
115 .dropzone .dz-preview .dz-success-mark,
116 .dropzone-previews .dz-preview .dz-success-mark {
117 color: #8cc657;
118 }
119 .dropzone .dz-preview .dz-error-mark,
120 .dropzone-previews .dz-preview .dz-error-mark {
121 color: #ee162d;
122 }
123 .dropzone .dz-preview .dz-progress,
124 .dropzone-previews .dz-preview .dz-progress {
125 position: absolute;
126 top: 100px;
127 left: 6px;
128 right: 6px;
129 height: 6px;
130 background: #d7d7d7;
131 display: none;
132 }
133 .dropzone .dz-preview .dz-progress .dz-upload,
134 .dropzone-previews .dz-preview .dz-progress .dz-upload {
135 position: absolute;
136 top: 0;
137 bottom: 0;
138 left: 0;
139 width: 0%;
140 background-color: #8cc657;
141 }
142 .dropzone .dz-preview.dz-processing .dz-progress,
143 .dropzone-previews .dz-preview.dz-processing .dz-progress {
144 display: block;
145 }
146 .dropzone .dz-preview .dz-error-message,
147 .dropzone-previews .dz-preview .dz-error-message {
148 display: none;
149 position: absolute;
150 top: -5px;
151 left: -20px;
152 background: rgba(245,245,245,0.8);
153 padding: 8px 10px;
154 color: #800;
155 min-width: 140px;
156 max-width: 500px;
157 z-index: 500;
158 }
159 .dropzone .dz-preview:hover.dz-error .dz-error-message,
160 .dropzone-previews .dz-preview:hover.dz-error .dz-error-message {
161 display: block;
162 }
163 .dropzone {
164 border: 1px solid rgba(0,0,0,0.03);
165 min-height: 360px;
166 -webkit-border-radius: 3px;
167 border-radius: 3px;
168 background: rgba(0,0,0,0.03);
169 }
170 .dropzone .dz-default.dz-message {
171 opacity: 1;
172 -ms-filter: none;
173 filter: none;
174 -webkit-transition: opacity 0.3s ease-in-out;
175 -moz-transition: opacity 0.3s ease-in-out;
176 -o-transition: opacity 0.3s ease-in-out;
177 -ms-transition: opacity 0.3s ease-in-out;
178 transition: opacity 0.3s ease-in-out;
179 background-image: url("@{base-url}/dropzone/spritemap.png");
180 background-repeat: no-repeat;
181 background-position: 0 0;
182 position: absolute;
183 width: 428px;
184 height: 123px;
185 margin-left: -214px;
186 margin-top: -61.5px;
187 top: 50%;
188 left: 50%;
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("@{base-url}/dropzone/spritemap.png");
255 background-repeat: no-repeat;
256 }
257
258 .dropzone .dz-preview .dz-error-mark span,
259 .dropzone-previews .dz-preview .dz-error-mark span,
260 .dropzone .dz-preview .dz-success-mark span,
261 .dropzone-previews .dz-preview .dz-success-mark span {
262 display: none;
263 }
264 .dropzone .dz-preview .dz-error-mark,
265 .dropzone-previews .dz-preview .dz-error-mark {
266 background-position: -268px -123px;
267 }
268 .dropzone .dz-preview .dz-success-mark,
269 .dropzone-previews .dz-preview .dz-success-mark {
270 background-position: -268px -163px;
271 }
272 .dropzone .dz-preview .dz-progress .dz-upload,
273 .dropzone-previews .dz-preview .dz-progress .dz-upload {
274 -webkit-animation: loading 0.4s linear infinite;
275 -moz-animation: loading 0.4s linear infinite;
276 -o-animation: loading 0.4s linear infinite;
277 -ms-animation: loading 0.4s linear infinite;
278 animation: loading 0.4s linear infinite;
279 -webkit-transition: width 0.3s ease-in-out;
280 -moz-transition: width 0.3s ease-in-out;
281 -o-transition: width 0.3s ease-in-out;
282 -ms-transition: width 0.3s ease-in-out;
283 transition: width 0.3s ease-in-out;
284 -webkit-border-radius: 2px;
285 border-radius: 2px;
286 position: absolute;
287 top: 0;
288 left: 0;
289 width: 0%;
290 height: 100%;
291 background-image: url("@{base-url}/dropzone/spritemap.png");
292 background-repeat: repeat-x;
293 background-position: 0px -400px;
294 }
295
296 .dropzone .dz-preview.dz-success .dz-progress,
297 .dropzone-previews .dz-preview.dz-success .dz-progress {
298 display: block;
299 opacity: 0;
300 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
301 filter: alpha(opacity=0);
302 -webkit-transition: opacity 0.4s ease-in-out;
303 -moz-transition: opacity 0.4s ease-in-out;
304 -o-transition: opacity 0.4s ease-in-out;
305 -ms-transition: opacity 0.4s ease-in-out;
306 transition: opacity 0.4s ease-in-out;
307 }
308 .dropzone .dz-preview .dz-error-message,
309 .dropzone-previews .dz-preview .dz-error-message {
310 display: block;
311 opacity: 0;
312 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
313 filter: alpha(opacity=0);
314 -webkit-transition: opacity 0.3s ease-in-out;
315 -moz-transition: opacity 0.3s ease-in-out;
316 -o-transition: opacity 0.3s ease-in-out;
317 -ms-transition: opacity 0.3s ease-in-out;
318 transition: opacity 0.3s ease-in-out;
319 }
320 .dropzone .dz-preview:hover.dz-error .dz-error-message,
321 .dropzone-previews .dz-preview:hover.dz-error .dz-error-message {
322 opacity: 1;
323 -ms-filter: none;
324 filter: none;
325 }
326 .dropzone a.dz-remove,
327 .dropzone-previews a.dz-remove {
328 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fafafa), color-stop(1, #eee));
329 background-image: -webkit-linear-gradient(top, #fafafa 0, #eee 100%);
330 background-image: -moz-linear-gradient(top, #fafafa 0, #eee 100%);
331 background-image: -o-linear-gradient(top, #fafafa 0, #eee 100%);
332 background-image: -ms-linear-gradient(top, #fafafa 0, #eee 100%);
333 background-image: linear-gradient(top, #fafafa 0, #eee 100%);
334 -webkit-border-radius: 2px;
335 border-radius: 2px;
336 border: 1px solid #eee;
337 text-decoration: none;
338 display: block;
339 padding: 4px 5px;
340 text-align: center;
341 color: #aaa;
342 margin-top: 26px;
343 }
344 .dropzone a.dz-remove:hover,
345 .dropzone-previews a.dz-remove:hover {
346 color: #666;
347 }
348 @-moz-keyframes loading {
349 0% {
350 background-position: 0 -400px;
351 }
352
353 100% {
354 background-position: -7px -400px;
355 }
356 }
357 @-webkit-keyframes loading {
358 0% {
359 background-position: 0 -400px;
360 }
361
362 100% {
363 background-position: -7px -400px;
364 }
365 }
366 @-o-keyframes loading {
367 0% {
368 background-position: 0 -400px;
369 }
370
371 100% {
372 background-position: -7px -400px;
373 }
374 }
375 @-ms-keyframes loading {
376 0% {
377 background-position: 0 -400px;
378 }
379
380 100% {
381 background-position: -7px -400px;
382 }
383 }
384 @keyframes loading {
385 0% {
386 background-position: 0 -400px;
387 }
388
389 100% {
390 background-position: -7px -400px;
391 }
392 }
393
394
395