No Description

dropzone.css 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388
  1. /*
  2. * The MIT License
  3. * Copyright (c) 2012 Matias Meno <m@tias.me>
  4. */
  5. @-webkit-keyframes passing-through {
  6. 0% {
  7. opacity: 0;
  8. -webkit-transform: translateY(40px);
  9. -moz-transform: translateY(40px);
  10. -ms-transform: translateY(40px);
  11. -o-transform: translateY(40px);
  12. transform: translateY(40px); }
  13. 30%, 70% {
  14. opacity: 1;
  15. -webkit-transform: translateY(0px);
  16. -moz-transform: translateY(0px);
  17. -ms-transform: translateY(0px);
  18. -o-transform: translateY(0px);
  19. transform: translateY(0px); }
  20. 100% {
  21. opacity: 0;
  22. -webkit-transform: translateY(-40px);
  23. -moz-transform: translateY(-40px);
  24. -ms-transform: translateY(-40px);
  25. -o-transform: translateY(-40px);
  26. transform: translateY(-40px); } }
  27. @-moz-keyframes passing-through {
  28. 0% {
  29. opacity: 0;
  30. -webkit-transform: translateY(40px);
  31. -moz-transform: translateY(40px);
  32. -ms-transform: translateY(40px);
  33. -o-transform: translateY(40px);
  34. transform: translateY(40px); }
  35. 30%, 70% {
  36. opacity: 1;
  37. -webkit-transform: translateY(0px);
  38. -moz-transform: translateY(0px);
  39. -ms-transform: translateY(0px);
  40. -o-transform: translateY(0px);
  41. transform: translateY(0px); }
  42. 100% {
  43. opacity: 0;
  44. -webkit-transform: translateY(-40px);
  45. -moz-transform: translateY(-40px);
  46. -ms-transform: translateY(-40px);
  47. -o-transform: translateY(-40px);
  48. transform: translateY(-40px); } }
  49. @keyframes passing-through {
  50. 0% {
  51. opacity: 0;
  52. -webkit-transform: translateY(40px);
  53. -moz-transform: translateY(40px);
  54. -ms-transform: translateY(40px);
  55. -o-transform: translateY(40px);
  56. transform: translateY(40px); }
  57. 30%, 70% {
  58. opacity: 1;
  59. -webkit-transform: translateY(0px);
  60. -moz-transform: translateY(0px);
  61. -ms-transform: translateY(0px);
  62. -o-transform: translateY(0px);
  63. transform: translateY(0px); }
  64. 100% {
  65. opacity: 0;
  66. -webkit-transform: translateY(-40px);
  67. -moz-transform: translateY(-40px);
  68. -ms-transform: translateY(-40px);
  69. -o-transform: translateY(-40px);
  70. transform: translateY(-40px); } }
  71. @-webkit-keyframes slide-in {
  72. 0% {
  73. opacity: 0;
  74. -webkit-transform: translateY(40px);
  75. -moz-transform: translateY(40px);
  76. -ms-transform: translateY(40px);
  77. -o-transform: translateY(40px);
  78. transform: translateY(40px); }
  79. 30% {
  80. opacity: 1;
  81. -webkit-transform: translateY(0px);
  82. -moz-transform: translateY(0px);
  83. -ms-transform: translateY(0px);
  84. -o-transform: translateY(0px);
  85. transform: translateY(0px); } }
  86. @-moz-keyframes slide-in {
  87. 0% {
  88. opacity: 0;
  89. -webkit-transform: translateY(40px);
  90. -moz-transform: translateY(40px);
  91. -ms-transform: translateY(40px);
  92. -o-transform: translateY(40px);
  93. transform: translateY(40px); }
  94. 30% {
  95. opacity: 1;
  96. -webkit-transform: translateY(0px);
  97. -moz-transform: translateY(0px);
  98. -ms-transform: translateY(0px);
  99. -o-transform: translateY(0px);
  100. transform: translateY(0px); } }
  101. @keyframes slide-in {
  102. 0% {
  103. opacity: 0;
  104. -webkit-transform: translateY(40px);
  105. -moz-transform: translateY(40px);
  106. -ms-transform: translateY(40px);
  107. -o-transform: translateY(40px);
  108. transform: translateY(40px); }
  109. 30% {
  110. opacity: 1;
  111. -webkit-transform: translateY(0px);
  112. -moz-transform: translateY(0px);
  113. -ms-transform: translateY(0px);
  114. -o-transform: translateY(0px);
  115. transform: translateY(0px); } }
  116. @-webkit-keyframes pulse {
  117. 0% {
  118. -webkit-transform: scale(1);
  119. -moz-transform: scale(1);
  120. -ms-transform: scale(1);
  121. -o-transform: scale(1);
  122. transform: scale(1); }
  123. 10% {
  124. -webkit-transform: scale(1.1);
  125. -moz-transform: scale(1.1);
  126. -ms-transform: scale(1.1);
  127. -o-transform: scale(1.1);
  128. transform: scale(1.1); }
  129. 20% {
  130. -webkit-transform: scale(1);
  131. -moz-transform: scale(1);
  132. -ms-transform: scale(1);
  133. -o-transform: scale(1);
  134. transform: scale(1); } }
  135. @-moz-keyframes pulse {
  136. 0% {
  137. -webkit-transform: scale(1);
  138. -moz-transform: scale(1);
  139. -ms-transform: scale(1);
  140. -o-transform: scale(1);
  141. transform: scale(1); }
  142. 10% {
  143. -webkit-transform: scale(1.1);
  144. -moz-transform: scale(1.1);
  145. -ms-transform: scale(1.1);
  146. -o-transform: scale(1.1);
  147. transform: scale(1.1); }
  148. 20% {
  149. -webkit-transform: scale(1);
  150. -moz-transform: scale(1);
  151. -ms-transform: scale(1);
  152. -o-transform: scale(1);
  153. transform: scale(1); } }
  154. @keyframes pulse {
  155. 0% {
  156. -webkit-transform: scale(1);
  157. -moz-transform: scale(1);
  158. -ms-transform: scale(1);
  159. -o-transform: scale(1);
  160. transform: scale(1); }
  161. 10% {
  162. -webkit-transform: scale(1.1);
  163. -moz-transform: scale(1.1);
  164. -ms-transform: scale(1.1);
  165. -o-transform: scale(1.1);
  166. transform: scale(1.1); }
  167. 20% {
  168. -webkit-transform: scale(1);
  169. -moz-transform: scale(1);
  170. -ms-transform: scale(1);
  171. -o-transform: scale(1);
  172. transform: scale(1); } }
  173. .dropzone, .dropzone * {
  174. box-sizing: border-box; }
  175. .dropzone {
  176. min-height: 150px;
  177. border: 2px solid rgba(0, 0, 0, 0.3);
  178. background: white;
  179. padding: 20px 20px; }
  180. .dropzone.dz-clickable {
  181. cursor: pointer; }
  182. .dropzone.dz-clickable * {
  183. cursor: default; }
  184. .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
  185. cursor: pointer; }
  186. .dropzone.dz-started .dz-message {
  187. display: none; }
  188. .dropzone.dz-drag-hover {
  189. border-style: solid; }
  190. .dropzone.dz-drag-hover .dz-message {
  191. opacity: 0.5; }
  192. .dropzone .dz-message {
  193. text-align: center;
  194. margin: 2em 0; }
  195. .dropzone .dz-preview {
  196. position: relative;
  197. display: inline-block;
  198. vertical-align: top;
  199. margin: 16px;
  200. min-height: 100px; }
  201. .dropzone .dz-preview:hover {
  202. z-index: 1000; }
  203. .dropzone .dz-preview:hover .dz-details {
  204. opacity: 1; }
  205. .dropzone .dz-preview.dz-file-preview .dz-image {
  206. border-radius: 20px;
  207. background: #999;
  208. background: linear-gradient(to bottom, #eee, #ddd); }
  209. .dropzone .dz-preview.dz-file-preview .dz-details {
  210. opacity: 1; }
  211. .dropzone .dz-preview.dz-image-preview {
  212. background: white; }
  213. .dropzone .dz-preview.dz-image-preview .dz-details {
  214. -webkit-transition: opacity 0.2s linear;
  215. -moz-transition: opacity 0.2s linear;
  216. -ms-transition: opacity 0.2s linear;
  217. -o-transition: opacity 0.2s linear;
  218. transition: opacity 0.2s linear; }
  219. .dropzone .dz-preview .dz-remove {
  220. font-size: 14px;
  221. text-align: center;
  222. display: block;
  223. cursor: pointer;
  224. border: none; }
  225. .dropzone .dz-preview .dz-remove:hover {
  226. text-decoration: underline; }
  227. .dropzone .dz-preview:hover .dz-details {
  228. opacity: 1; }
  229. .dropzone .dz-preview .dz-details {
  230. z-index: 20;
  231. position: absolute;
  232. top: 0;
  233. left: 0;
  234. opacity: 0;
  235. font-size: 13px;
  236. min-width: 100%;
  237. max-width: 100%;
  238. padding: 2em 1em;
  239. text-align: center;
  240. color: rgba(0, 0, 0, 0.9);
  241. line-height: 150%; }
  242. .dropzone .dz-preview .dz-details .dz-size {
  243. margin-bottom: 1em;
  244. font-size: 16px; }
  245. .dropzone .dz-preview .dz-details .dz-filename {
  246. white-space: nowrap; }
  247. .dropzone .dz-preview .dz-details .dz-filename:hover span {
  248. border: 1px solid rgba(200, 200, 200, 0.8);
  249. background-color: rgba(255, 255, 255, 0.8); }
  250. .dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
  251. overflow: hidden;
  252. text-overflow: ellipsis; }
  253. .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
  254. border: 1px solid transparent; }
  255. .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
  256. background-color: rgba(255, 255, 255, 0.4);
  257. padding: 0 0.4em;
  258. border-radius: 3px; }
  259. .dropzone .dz-preview:hover .dz-image img {
  260. -webkit-transform: scale(1.05, 1.05);
  261. -moz-transform: scale(1.05, 1.05);
  262. -ms-transform: scale(1.05, 1.05);
  263. -o-transform: scale(1.05, 1.05);
  264. transform: scale(1.05, 1.05);
  265. -webkit-filter: blur(8px);
  266. filter: blur(8px); }
  267. .dropzone .dz-preview .dz-image {
  268. border-radius: 20px;
  269. overflow: hidden;
  270. width: 120px;
  271. height: 120px;
  272. position: relative;
  273. display: block;
  274. z-index: 10; }
  275. .dropzone .dz-preview .dz-image img {
  276. display: block; }
  277. .dropzone .dz-preview.dz-success .dz-success-mark {
  278. -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  279. -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  280. -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  281. -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  282. animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); }
  283. .dropzone .dz-preview.dz-error .dz-error-mark {
  284. opacity: 1;
  285. -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  286. -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  287. -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  288. -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  289. animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); }
  290. .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
  291. pointer-events: none;
  292. opacity: 0;
  293. z-index: 500;
  294. position: absolute;
  295. display: block;
  296. top: 50%;
  297. left: 50%;
  298. margin-left: -27px;
  299. margin-top: -27px; }
  300. .dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
  301. display: block;
  302. width: 54px;
  303. height: 54px; }
  304. .dropzone .dz-preview.dz-processing .dz-progress {
  305. opacity: 1;
  306. -webkit-transition: all 0.2s linear;
  307. -moz-transition: all 0.2s linear;
  308. -ms-transition: all 0.2s linear;
  309. -o-transition: all 0.2s linear;
  310. transition: all 0.2s linear; }
  311. .dropzone .dz-preview.dz-complete .dz-progress {
  312. opacity: 0;
  313. -webkit-transition: opacity 0.4s ease-in;
  314. -moz-transition: opacity 0.4s ease-in;
  315. -ms-transition: opacity 0.4s ease-in;
  316. -o-transition: opacity 0.4s ease-in;
  317. transition: opacity 0.4s ease-in; }
  318. .dropzone .dz-preview:not(.dz-processing) .dz-progress {
  319. -webkit-animation: pulse 6s ease infinite;
  320. -moz-animation: pulse 6s ease infinite;
  321. -ms-animation: pulse 6s ease infinite;
  322. -o-animation: pulse 6s ease infinite;
  323. animation: pulse 6s ease infinite; }
  324. .dropzone .dz-preview .dz-progress {
  325. opacity: 1;
  326. z-index: 1000;
  327. pointer-events: none;
  328. position: absolute;
  329. height: 16px;
  330. left: 50%;
  331. top: 50%;
  332. margin-top: -8px;
  333. width: 80px;
  334. margin-left: -40px;
  335. background: rgba(255, 255, 255, 0.9);
  336. -webkit-transform: scale(1);
  337. border-radius: 8px;
  338. overflow: hidden; }
  339. .dropzone .dz-preview .dz-progress .dz-upload {
  340. background: #333;
  341. background: linear-gradient(to bottom, #666, #444);
  342. position: absolute;
  343. top: 0;
  344. left: 0;
  345. bottom: 0;
  346. width: 0;
  347. -webkit-transition: width 300ms ease-in-out;
  348. -moz-transition: width 300ms ease-in-out;
  349. -ms-transition: width 300ms ease-in-out;
  350. -o-transition: width 300ms ease-in-out;
  351. transition: width 300ms ease-in-out; }
  352. .dropzone .dz-preview.dz-error .dz-error-message {
  353. display: block; }
  354. .dropzone .dz-preview.dz-error:hover .dz-error-message {
  355. opacity: 1;
  356. pointer-events: auto; }
  357. .dropzone .dz-preview .dz-error-message {
  358. pointer-events: none;
  359. z-index: 1000;
  360. position: absolute;
  361. display: block;
  362. display: none;
  363. opacity: 0;
  364. -webkit-transition: opacity 0.3s ease;
  365. -moz-transition: opacity 0.3s ease;
  366. -ms-transition: opacity 0.3s ease;
  367. -o-transition: opacity 0.3s ease;
  368. transition: opacity 0.3s ease;
  369. border-radius: 8px;
  370. font-size: 13px;
  371. top: 130px;
  372. left: -10px;
  373. width: 140px;
  374. background: #be2626;
  375. background: linear-gradient(to bottom, #be2626, #a92222);
  376. padding: 0.5em 1.2em;
  377. color: white; }
  378. .dropzone .dz-preview .dz-error-message:after {
  379. content: '';
  380. position: absolute;
  381. top: -6px;
  382. left: 64px;
  383. width: 0;
  384. height: 0;
  385. border-left: 6px solid transparent;
  386. border-right: 6px solid transparent;
  387. border-bottom: 6px solid #be2626; }