dropzone.css 12 KB

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