dropify.css 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
  1. @font-face {
  2. font-family: "dropify";
  3. font-style: normal;
  4. font-weight: normal;
  5. src: url(".//dropify.eot");
  6. src: url(".//dropify.eot#iefix") format("embedded-opentype"), url(".//dropify.woff") format("woff"), url(".//dropify.ttf") format("truetype"), url(".//dropify.svg#dropify") format("svg"); }
  7. [class^="dropify-font-"]:before, [class*=" dropify-font-"]:before, .dropify-font:before, .dropify-wrapper .dropify-message span.file-icon:before, .dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-filename span.file-icon:before {
  8. display: inline-block;
  9. width: 1em;
  10. margin-right: .2em;
  11. margin-left: .2em;
  12. font-family: "dropify";
  13. font-style: normal;
  14. font-weight: normal;
  15. font-variant: normal;
  16. line-height: 1em;
  17. text-align: center;
  18. text-decoration: inherit;
  19. text-transform: none;
  20. speak: none; }
  21. .dropify-font-upload:before, .dropify-wrapper .dropify-message span.file-icon:before {
  22. content: "\e800"; }
  23. .dropify-font-file:before {
  24. content: "\e801"; }
  25. .dropify-wrapper {
  26. position: relative;
  27. display: block;
  28. width: 100%;
  29. max-width: 100%;
  30. height: 200px;
  31. padding: 5px 10px;
  32. overflow: hidden;
  33. font-family: "Roboto", sans-serif;
  34. font-size: 14px;
  35. line-height: 22px;
  36. color: #76838f;
  37. text-align: center;
  38. cursor: pointer;
  39. background-color: #fff;
  40. background-image: none;
  41. border: 2px solid #e4eaec; }
  42. .dropify-wrapper:hover {
  43. background-image: linear-gradient(-45deg, #f6f6f6 25%, transparent 25%, transparent 50%, #f6f6f6 50%, #f6f6f6 75%, transparent 75%, transparent);
  44. background-size: 30px 30px;
  45. -webkit-animation: stripes 2s linear infinite;
  46. animation: stripes 2s linear infinite; }
  47. .dropify-wrapper.has-preview .dropify-clear {
  48. display: block; }
  49. .dropify-wrapper.has-error .dropify-message .dropify-error {
  50. display: block; }
  51. .dropify-wrapper.disabled input {
  52. cursor: not-allowed; }
  53. .dropify-wrapper.disabled:hover {
  54. background-image: none;
  55. -webkit-animation: none;
  56. animation: none; }
  57. .dropify-wrapper.disabled .dropify-message {
  58. text-decoration: line-through;
  59. opacity: .5; }
  60. .dropify-wrapper.disabled .dropify-infos-message {
  61. display: none; }
  62. .dropify-wrapper input {
  63. position: absolute;
  64. top: 0;
  65. right: 0;
  66. bottom: 0;
  67. left: 0;
  68. z-index: 5;
  69. width: 100%;
  70. height: 100%;
  71. cursor: pointer;
  72. opacity: 0; }
  73. .dropify-wrapper .dropify-message {
  74. position: relative;
  75. top: 50%;
  76. -webkit-transform: translateY(-50%);
  77. transform: translateY(-50%); }
  78. .dropify-wrapper .dropify-message span.file-icon {
  79. font-size: 50px;
  80. color: #ccc; }
  81. .dropify-wrapper .dropify-message p {
  82. margin: 5px 0 0; }
  83. .dropify-wrapper .dropify-message p.dropify-error {
  84. display: none;
  85. font-weight: 500;
  86. color: #ff4c52; }
  87. .dropify-wrapper .dropify-clear {
  88. position: absolute;
  89. top: 10px;
  90. right: 10px;
  91. z-index: 7;
  92. display: none;
  93. padding: 4px 8px;
  94. font-family: "Roboto", sans-serif;
  95. font-size: 11px;
  96. font-weight: 500;
  97. color: #fff;
  98. text-transform: uppercase;
  99. background: none;
  100. border: 2px solid #fff;
  101. opacity: 0;
  102. transition: all .15s linear; }
  103. .dropify-wrapper .dropify-clear:hover {
  104. background: rgba(255, 255, 255, 0.2); }
  105. .dropify-wrapper .dropify-preview {
  106. position: absolute;
  107. top: 0;
  108. right: 0;
  109. bottom: 0;
  110. left: 0;
  111. z-index: 1;
  112. display: none;
  113. width: 100%;
  114. height: 100%;
  115. padding: 5px;
  116. overflow: hidden;
  117. text-align: center;
  118. background-color: #fff; }
  119. .dropify-wrapper .dropify-preview .dropify-render img {
  120. position: relative;
  121. top: 50%;
  122. max-width: 100%;
  123. max-height: 100%;
  124. background-color: #fff;
  125. transition: border-color .15s linear;
  126. -webkit-transform: translate(0, -50%);
  127. transform: translate(0, -50%); }
  128. .dropify-wrapper .dropify-preview .dropify-render i {
  129. position: absolute;
  130. top: 50%;
  131. left: 50%;
  132. font-size: 70px;
  133. color: #777;
  134. -webkit-transform: translate(-50%, -50%);
  135. transform: translate(-50%, -50%); }
  136. .dropify-wrapper .dropify-preview .dropify-render .dropify-extension {
  137. position: absolute;
  138. top: 50%;
  139. left: 50%;
  140. width: 42px;
  141. margin-top: 10px;
  142. overflow: hidden;
  143. font-size: 13px;
  144. font-weight: 700;
  145. text-overflow: ellipsis;
  146. text-transform: uppercase;
  147. letter-spacing: -0.03em;
  148. white-space: nowrap;
  149. -webkit-transform: translate(-50%, -50%);
  150. transform: translate(-50%, -50%); }
  151. .dropify-wrapper .dropify-preview .dropify-infos {
  152. position: absolute;
  153. top: 0;
  154. right: 0;
  155. bottom: 0;
  156. left: 0;
  157. z-index: 3;
  158. background: rgba(0, 0, 0, 0.7);
  159. opacity: 0;
  160. transition: opacity .15s linear; }
  161. .dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner {
  162. position: absolute;
  163. top: 50%;
  164. width: 100%;
  165. padding: 0 20px;
  166. transition: all .2s ease;
  167. -webkit-transform: translate(0, -40%);
  168. transform: translate(0, -40%);
  169. -webkit-backface-visibility: hidden;
  170. backface-visibility: hidden; }
  171. .dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner p {
  172. position: relative;
  173. width: 100%;
  174. padding: 0;
  175. margin: 0;
  176. overflow: hidden;
  177. line-height: 25px;
  178. color: #fff;
  179. text-align: center;
  180. text-overflow: ellipsis;
  181. white-space: nowrap; }
  182. .dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-filename span.file-icon {
  183. margin-right: 2px; }
  184. .dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-infos-message {
  185. position: relative;
  186. padding-top: 15px;
  187. margin-top: 15px;
  188. font-size: 12px;
  189. opacity: .5; }
  190. .dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-infos-message::before {
  191. position: absolute;
  192. top: 0;
  193. left: 50%;
  194. width: 30px;
  195. height: 2px;
  196. content: "";
  197. background: #fff;
  198. -webkit-transform: translate(-50%, 0);
  199. transform: translate(-50%, 0); }
  200. .dropify-wrapper:hover .dropify-clear {
  201. opacity: 1; }
  202. .dropify-wrapper:hover .dropify-preview .dropify-infos {
  203. opacity: 1; }
  204. .dropify-wrapper:hover .dropify-preview .dropify-infos .dropify-infos-inner {
  205. margin-top: -5px; }
  206. .dropify-wrapper.touch-fallback {
  207. height: auto !important; }
  208. .dropify-wrapper.touch-fallback:hover {
  209. background-image: none;
  210. -webkit-animation: none;
  211. animation: none; }
  212. .dropify-wrapper.touch-fallback .dropify-preview {
  213. position: relative;
  214. padding: 0; }
  215. .dropify-wrapper.touch-fallback .dropify-preview .dropify-render {
  216. position: relative;
  217. display: block; }
  218. .dropify-wrapper.touch-fallback .dropify-preview .dropify-render .dropify-font-file {
  219. position: relative;
  220. top: 0;
  221. left: 0;
  222. -webkit-transform: translate(0, 0);
  223. transform: translate(0, 0); }
  224. .dropify-wrapper.touch-fallback .dropify-preview .dropify-render .dropify-font-file::before {
  225. margin-top: 30px;
  226. margin-bottom: 30px; }
  227. .dropify-wrapper.touch-fallback .dropify-preview .dropify-render img {
  228. position: relative;
  229. -webkit-transform: translate(0, 0);
  230. transform: translate(0, 0); }
  231. .dropify-wrapper.touch-fallback .dropify-preview .dropify-infos {
  232. position: relative;
  233. background: transparent;
  234. opacity: 1; }
  235. .dropify-wrapper.touch-fallback .dropify-preview .dropify-infos .dropify-infos-inner {
  236. position: relative;
  237. top: 0;
  238. padding: 5px 90px 5px 0;
  239. -webkit-transform: translate(0, 0);
  240. transform: translate(0, 0); }
  241. .dropify-wrapper.touch-fallback .dropify-preview .dropify-infos .dropify-infos-inner p {
  242. position: relative;
  243. width: 100%;
  244. padding: 0;
  245. margin: 0;
  246. overflow: hidden;
  247. line-height: 25px;
  248. color: #76838f;
  249. text-align: left;
  250. text-overflow: ellipsis;
  251. white-space: nowrap; }
  252. .dropify-wrapper.touch-fallback .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-filename {
  253. font-weight: 500; }
  254. .dropify-wrapper.touch-fallback .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-infos-message {
  255. position: relative;
  256. padding-top: 0;
  257. margin-top: 0;
  258. font-size: 11px;
  259. opacity: 1; }
  260. .dropify-wrapper.touch-fallback .dropify-preview .dropify-infos .dropify-infos-inner p.dropify-infos-message::before {
  261. display: none; }
  262. .dropify-wrapper.touch-fallback .dropify-message {
  263. padding: 40px 0;
  264. -webkit-transform: translate(0, 0);
  265. transform: translate(0, 0); }
  266. .dropify-wrapper.touch-fallback .dropify-clear {
  267. top: auto;
  268. bottom: 23px;
  269. color: #76838f;
  270. border-color: rgba(118, 131, 143, 0.7);
  271. opacity: 1; }
  272. .dropify-wrapper.touch-fallback.has-preview .dropify-message {
  273. display: none; }
  274. .dropify-wrapper.touch-fallback:hover .dropify-preview .dropify-infos .dropify-infos-inner {
  275. margin-top: 0; }
  276. @-webkit-keyframes stripes {
  277. from {
  278. background-position: 0 0; }
  279. to {
  280. background-position: 60px 30px; } }
  281. @keyframes stripes {
  282. from {
  283. background-position: 0 0; }
  284. to {
  285. background-position: 60px 30px; } }