You are here

Home » API reference » Commerce Smart Importer 8

dropzone.css in Commerce Smart Importer 8 

/*
 * The MIT License
 * Copyright (c) 2012 Matias Meno <m@tias.me>
 */
@-webkit-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
}
  30%,
  70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
}
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
} }
@-moz-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
}
  30%,
  70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
}
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
} }
@keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
}
  30%,
  70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
}
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
} }
@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
}
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
} }
@-moz-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
}
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
} }
@keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
}
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
} }
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
} }
@-moz-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
} }
@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
} }
.dropzone,
.dropzone * {
  box-sizing: border-box;
}

.dropzone {
  min-height: 150px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  background: white;
  padding: 20px 20px;
}
.dropzone.dz-clickable {
  cursor: pointer;
}
.dropzone.dz-clickable * {
  cursor: default;
}
.dropzone.dz-clickable .dz-message,
.dropzone.dz-clickable .dz-message * {
  cursor: pointer;
}
.dropzone.dz-drag-hover {
  border-style: solid;
}
.dropzone.dz-drag-hover .dz-message {
  opacity: 0.5;
}
.dropzone .dz-message {
  text-align: center;
  margin: 2em 0;
}
.dropzone .dz-preview {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 16px;
  min-height: 100px;
}
.dropzone .dz-preview:hover {
  z-index: 1000;
}
.dropzone .dz-preview:hover .dz-details {
  opacity: 1;
}
.dropzone .dz-preview.dz-file-preview .dz-image {
  border-radius: 20px;
  background: #999;
  background: linear-gradient(to bottom, #eee, #ddd);
}
.dropzone .dz-preview.dz-file-preview .dz-details {
  opacity: 1;
}
.dropzone .dz-preview.dz-image-preview {
  background: white;
}
.dropzone .dz-preview.dz-image-preview .dz-details {
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  -ms-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
.dropzone .dz-preview .dz-remove {
  font-size: 14px;
  text-align: center;
  display: block;
  cursor: pointer;
  border: none;
}
.dropzone .dz-preview .dz-remove:hover {
  text-decoration: underline;
}
.dropzone .dz-preview:hover .dz-details {
  opacity: 1;
}
.dropzone .dz-preview .dz-details {
  z-index: 20;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  font-size: 13px;
  min-width: 100%;
  max-width: 100%;
  padding: 2em 1em;
  text-align: center;
  color: rgba(0, 0, 0, 0.9);
  line-height: 150%;
}
.dropzone .dz-preview .dz-details .dz-size {
  margin-bottom: 1em;
  font-size: 16px;
}
.dropzone .dz-preview .dz-details .dz-filename {
  white-space: nowrap;
}
.dropzone .dz-preview .dz-details .dz-filename:hover span {
  border: 1px solid rgba(200, 200, 200, 0.8);
  background-color: rgba(255, 255, 255, 0.8);
}
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
  border: 1px solid transparent;
}
.dropzone .dz-preview .dz-details .dz-filename span,
.dropzone .dz-preview .dz-details .dz-size span {
  background-color: rgba(255, 255, 255, 0.4);
  padding: 0 0.4em;
  border-radius: 3px;
}
.dropzone .dz-preview:hover .dz-image img {
  -webkit-transform: scale(1.05, 1.05);
  -moz-transform: scale(1.05, 1.05);
  -ms-transform: scale(1.05, 1.05);
  -o-transform: scale(1.05, 1.05);
  transform: scale(1.05, 1.05);
  -webkit-filter: blur(8px);
  filter: blur(8px);
}
.dropzone .dz-preview .dz-image {
  border-radius: 20px;
  overflow: hidden;
  width: 120px;
  height: 120px;
  position: relative;
  display: block;
  z-index: 10;
}
.dropzone .dz-preview .dz-image img {
  display: block;
}
.dropzone .dz-preview.dz-success .dz-success-mark {
  -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
}
.dropzone .dz-preview.dz-error .dz-error-mark {
  opacity: 1;
  -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
}
.dropzone .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark {
  pointer-events: none;
  opacity: 0;
  z-index: 500;
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  margin-left: -27px;
  margin-top: -27px;
}
.dropzone .dz-preview .dz-success-mark svg,
.dropzone .dz-preview .dz-error-mark svg {
  display: block;
  width: 54px;
  height: 54px;
}
.dropzone .dz-preview.dz-processing .dz-progress {
  opacity: 1;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.dropzone .dz-preview.dz-complete .dz-progress {
  opacity: 0;
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -ms-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in;
}
.dropzone .dz-preview:not(.dz-processing) .dz-progress {
  -webkit-animation: pulse 6s ease infinite;
  -moz-animation: pulse 6s ease infinite;
  -ms-animation: pulse 6s ease infinite;
  -o-animation: pulse 6s ease infinite;
  animation: pulse 6s ease infinite;
}
.dropzone .dz-preview .dz-progress {
  opacity: 1;
  z-index: 1000;
  pointer-events: none;
  position: absolute;
  height: 16px;
  left: 50%;
  top: 50%;
  margin-top: -8px;
  width: 80px;
  margin-left: -40px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-transform: scale(1);
  border-radius: 8px;
  overflow: hidden;
}
.dropzone .dz-preview .dz-progress .dz-upload {
  background: #333;
  background: linear-gradient(to bottom, #666, #444);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  -webkit-transition: width 300ms ease-in-out;
  -moz-transition: width 300ms ease-in-out;
  -ms-transition: width 300ms ease-in-out;
  -o-transition: width 300ms ease-in-out;
  transition: width 300ms ease-in-out;
}
.dropzone .dz-preview.dz-error .dz-error-message {
  display: block;
}
.dropzone .dz-preview.dz-error:hover .dz-error-message {
  opacity: 1;
  pointer-events: auto;
}
.dropzone .dz-preview .dz-error-message {
  pointer-events: none;
  z-index: 1000;
  position: absolute;
  display: block;
  display: none;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  border-radius: 8px;
  font-size: 13px;
  top: 130px;
  left: -10px;
  width: 140px;
  background: #be2626;
  background: linear-gradient(to bottom, #be2626, #a92222);
  padding: 0.5em 1.2em;
  color: white;
}
.dropzone .dz-preview .dz-error-message:after {
  content: '';
  position: absolute;
  top: -6px;
  left: 64px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #be2626;
}

.dropzone {
  margin: 1.5em 0 3em;
  border: 2px dashed #00a7dc;
  border-radius: 5px;
  background: white;
  color: #555;
}

.dropzone .dz-message {
  font-weight: 400;
  font-size: 20px;
}

File

css/dropzone.css
View source 
  1. /*

  2.  * The MIT License

  3.  * Copyright (c) 2012 Matias Meno 

  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. }

  14.   30%,

  15.   70% {

  16.     opacity: 1;

  17.     -webkit-transform: translateY(0px);

  18.     -moz-transform: translateY(0px);

  19.     -ms-transform: translateY(0px);

  20.     -o-transform: translateY(0px);

  21.     transform: translateY(0px);

  22. }

  23.   100% {

  24.     opacity: 0;

  25.     -webkit-transform: translateY(-40px);

  26.     -moz-transform: translateY(-40px);

  27.     -ms-transform: translateY(-40px);

  28.     -o-transform: translateY(-40px);

  29.     transform: translateY(-40px);

  30. } }

  31. @-moz-keyframes passing-through {

  32.   0% {

  33.     opacity: 0;

  34.     -webkit-transform: translateY(40px);

  35.     -moz-transform: translateY(40px);

  36.     -ms-transform: translateY(40px);

  37.     -o-transform: translateY(40px);

  38.     transform: translateY(40px);

  39. }

  40.   30%,

  41.   70% {

  42.     opacity: 1;

  43.     -webkit-transform: translateY(0px);

  44.     -moz-transform: translateY(0px);

  45.     -ms-transform: translateY(0px);

  46.     -o-transform: translateY(0px);

  47.     transform: translateY(0px);

  48. }

  49.   100% {

  50.     opacity: 0;

  51.     -webkit-transform: translateY(-40px);

  52.     -moz-transform: translateY(-40px);

  53.     -ms-transform: translateY(-40px);

  54.     -o-transform: translateY(-40px);

  55.     transform: translateY(-40px);

  56. } }

  57. @keyframes passing-through {

  58.   0% {

  59.     opacity: 0;

  60.     -webkit-transform: translateY(40px);

  61.     -moz-transform: translateY(40px);

  62.     -ms-transform: translateY(40px);

  63.     -o-transform: translateY(40px);

  64.     transform: translateY(40px);

  65. }

  66.   30%,

  67.   70% {

  68.     opacity: 1;

  69.     -webkit-transform: translateY(0px);

  70.     -moz-transform: translateY(0px);

  71.     -ms-transform: translateY(0px);

  72.     -o-transform: translateY(0px);

  73.     transform: translateY(0px);

  74. }

  75.   100% {

  76.     opacity: 0;

  77.     -webkit-transform: translateY(-40px);

  78.     -moz-transform: translateY(-40px);

  79.     -ms-transform: translateY(-40px);

  80.     -o-transform: translateY(-40px);

  81.     transform: translateY(-40px);

  82. } }

  83. @-webkit-keyframes slide-in {

  84.   0% {

  85.     opacity: 0;

  86.     -webkit-transform: translateY(40px);

  87.     -moz-transform: translateY(40px);

  88.     -ms-transform: translateY(40px);

  89.     -o-transform: translateY(40px);

  90.     transform: translateY(40px);

  91. }

  92.   30% {

  93.     opacity: 1;

  94.     -webkit-transform: translateY(0px);

  95.     -moz-transform: translateY(0px);

  96.     -ms-transform: translateY(0px);

  97.     -o-transform: translateY(0px);

  98.     transform: translateY(0px);

  99. } }

  100. @-moz-keyframes slide-in {

  101.   0% {

  102.     opacity: 0;

  103.     -webkit-transform: translateY(40px);

  104.     -moz-transform: translateY(40px);

  105.     -ms-transform: translateY(40px);

  106.     -o-transform: translateY(40px);

  107.     transform: translateY(40px);

  108. }

  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. } }

  117. @keyframes slide-in {

  118.   0% {

  119.     opacity: 0;

  120.     -webkit-transform: translateY(40px);

  121.     -moz-transform: translateY(40px);

  122.     -ms-transform: translateY(40px);

  123.     -o-transform: translateY(40px);

  124.     transform: translateY(40px);

  125. }

  126.   30% {

  127.     opacity: 1;

  128.     -webkit-transform: translateY(0px);

  129.     -moz-transform: translateY(0px);

  130.     -ms-transform: translateY(0px);

  131.     -o-transform: translateY(0px);

  132.     transform: translateY(0px);

  133. } }

  134. @-webkit-keyframes pulse {

  135.   0% {

  136.     -webkit-transform: scale(1);

  137.     -moz-transform: scale(1);

  138.     -ms-transform: scale(1);

  139.     -o-transform: scale(1);

  140.     transform: scale(1);

  141. }

  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. }

  149.   20% {

  150.     -webkit-transform: scale(1);

  151.     -moz-transform: scale(1);

  152.     -ms-transform: scale(1);

  153.     -o-transform: scale(1);

  154.     transform: scale(1);

  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. @keyframes pulse {

  179.   0% {

  180.     -webkit-transform: scale(1);

  181.     -moz-transform: scale(1);

  182.     -ms-transform: scale(1);

  183.     -o-transform: scale(1);

  184.     transform: scale(1);

  185. }

  186.   10% {

  187.     -webkit-transform: scale(1.1);

  188.     -moz-transform: scale(1.1);

  189.     -ms-transform: scale(1.1);

  190.     -o-transform: scale(1.1);

  191.     transform: scale(1.1);

  192. }

  193.   20% {

  194.     -webkit-transform: scale(1);

  195.     -moz-transform: scale(1);

  196.     -ms-transform: scale(1);

  197.     -o-transform: scale(1);

  198.     transform: scale(1);

  199. } }

  200. .dropzone,

  201. .dropzone * {

  202.   box-sizing: border-box;

  203. }

  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,

  218. .dropzone.dz-clickable .dz-message * {

  219.   cursor: pointer;

  220. }

  221. .dropzone.dz-drag-hover {

  222.   border-style: solid;

  223. }

  224. .dropzone.dz-drag-hover .dz-message {

  225.   opacity: 0.5;

  226. }

  227. .dropzone .dz-message {

  228.   text-align: center;

  229.   margin: 2em 0;

  230. }

  231. .dropzone .dz-preview {

  232.   position: relative;

  233.   display: inline-block;

  234.   vertical-align: top;

  235.   margin: 16px;

  236.   min-height: 100px;

  237. }

  238. .dropzone .dz-preview:hover {

  239.   z-index: 1000;

  240. }

  241. .dropzone .dz-preview:hover .dz-details {

  242.   opacity: 1;

  243. }

  244. .dropzone .dz-preview.dz-file-preview .dz-image {

  245.   border-radius: 20px;

  246.   background: #999;

  247.   background: linear-gradient(to bottom, #eee, #ddd);

  248. }

  249. .dropzone .dz-preview.dz-file-preview .dz-details {

  250.   opacity: 1;

  251. }

  252. .dropzone .dz-preview.dz-image-preview {

  253.   background: white;

  254. }

  255. .dropzone .dz-preview.dz-image-preview .dz-details {

  256.   -webkit-transition: opacity 0.2s linear;

  257.   -moz-transition: opacity 0.2s linear;

  258.   -ms-transition: opacity 0.2s linear;

  259.   -o-transition: opacity 0.2s linear;

  260.   transition: opacity 0.2s linear;

  261. }

  262. .dropzone .dz-preview .dz-remove {

  263.   font-size: 14px;

  264.   text-align: center;

  265.   display: block;

  266.   cursor: pointer;

  267.   border: none;

  268. }

  269. .dropzone .dz-preview .dz-remove:hover {

  270.   text-decoration: underline;

  271. }

  272. .dropzone .dz-preview:hover .dz-details {

  273.   opacity: 1;

  274. }

  275. .dropzone .dz-preview .dz-details {

  276.   z-index: 20;

  277.   position: absolute;

  278.   top: 0;

  279.   left: 0;

  280.   opacity: 0;

  281.   font-size: 13px;

  282.   min-width: 100%;

  283.   max-width: 100%;

  284.   padding: 2em 1em;

  285.   text-align: center;

  286.   color: rgba(0, 0, 0, 0.9);

  287.   line-height: 150%;

  288. }

  289. .dropzone .dz-preview .dz-details .dz-size {

  290.   margin-bottom: 1em;

  291.   font-size: 16px;

  292. }

  293. .dropzone .dz-preview .dz-details .dz-filename {

  294.   white-space: nowrap;

  295. }

  296. .dropzone .dz-preview .dz-details .dz-filename:hover span {

  297.   border: 1px solid rgba(200, 200, 200, 0.8);

  298.   background-color: rgba(255, 255, 255, 0.8);

  299. }

  300. .dropzone .dz-preview .dz-details .dz-filename:not(:hover) {

  301.   overflow: hidden;

  302.   text-overflow: ellipsis;

  303. }

  304. .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {

  305.   border: 1px solid transparent;

  306. }

  307. .dropzone .dz-preview .dz-details .dz-filename span,

  308. .dropzone .dz-preview .dz-details .dz-size span {

  309.   background-color: rgba(255, 255, 255, 0.4);

  310.   padding: 0 0.4em;

  311.   border-radius: 3px;

  312. }

  313. .dropzone .dz-preview:hover .dz-image img {

  314.   -webkit-transform: scale(1.05, 1.05);

  315.   -moz-transform: scale(1.05, 1.05);

  316.   -ms-transform: scale(1.05, 1.05);

  317.   -o-transform: scale(1.05, 1.05);

  318.   transform: scale(1.05, 1.05);

  319.   -webkit-filter: blur(8px);

  320.   filter: blur(8px);

  321. }

  322. .dropzone .dz-preview .dz-image {

  323.   border-radius: 20px;

  324.   overflow: hidden;

  325.   width: 120px;

  326.   height: 120px;

  327.   position: relative;

  328.   display: block;

  329.   z-index: 10;

  330. }

  331. .dropzone .dz-preview .dz-image img {

  332.   display: block;

  333. }

  334. .dropzone .dz-preview.dz-success .dz-success-mark {

  335.   -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);

  336.   -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);

  337.   -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);

  338.   -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);

  339.   animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);

  340. }

  341. .dropzone .dz-preview.dz-error .dz-error-mark {

  342.   opacity: 1;

  343.   -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);

  344.   -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);

  345.   -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);

  346.   -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);

  347.   animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);

  348. }

  349. .dropzone .dz-preview .dz-success-mark,

  350. .dropzone .dz-preview .dz-error-mark {

  351.   pointer-events: none;

  352.   opacity: 0;

  353.   z-index: 500;

  354.   position: absolute;

  355.   display: block;

  356.   top: 50%;

  357.   left: 50%;

  358.   margin-left: -27px;

  359.   margin-top: -27px;

  360. }

  361. .dropzone .dz-preview .dz-success-mark svg,

  362. .dropzone .dz-preview .dz-error-mark svg {

  363.   display: block;

  364.   width: 54px;

  365.   height: 54px;

  366. }

  367. .dropzone .dz-preview.dz-processing .dz-progress {

  368.   opacity: 1;

  369.   -webkit-transition: all 0.2s linear;

  370.   -moz-transition: all 0.2s linear;

  371.   -ms-transition: all 0.2s linear;

  372.   -o-transition: all 0.2s linear;

  373.   transition: all 0.2s linear;

  374. }

  375. .dropzone .dz-preview.dz-complete .dz-progress {

  376.   opacity: 0;

  377.   -webkit-transition: opacity 0.4s ease-in;

  378.   -moz-transition: opacity 0.4s ease-in;

  379.   -ms-transition: opacity 0.4s ease-in;

  380.   -o-transition: opacity 0.4s ease-in;

  381.   transition: opacity 0.4s ease-in;

  382. }

  383. .dropzone .dz-preview:not(.dz-processing) .dz-progress {

  384.   -webkit-animation: pulse 6s ease infinite;

  385.   -moz-animation: pulse 6s ease infinite;

  386.   -ms-animation: pulse 6s ease infinite;

  387.   -o-animation: pulse 6s ease infinite;

  388.   animation: pulse 6s ease infinite;

  389. }

  390. .dropzone .dz-preview .dz-progress {

  391.   opacity: 1;

  392.   z-index: 1000;

  393.   pointer-events: none;

  394.   position: absolute;

  395.   height: 16px;

  396.   left: 50%;

  397.   top: 50%;

  398.   margin-top: -8px;

  399.   width: 80px;

  400.   margin-left: -40px;

  401.   background: rgba(255, 255, 255, 0.9);

  402.   -webkit-transform: scale(1);

  403.   border-radius: 8px;

  404.   overflow: hidden;

  405. }

  406. .dropzone .dz-preview .dz-progress .dz-upload {

  407.   background: #333;

  408.   background: linear-gradient(to bottom, #666, #444);

  409.   position: absolute;

  410.   top: 0;

  411.   left: 0;

  412.   bottom: 0;

  413.   width: 0;

  414.   -webkit-transition: width 300ms ease-in-out;

  415.   -moz-transition: width 300ms ease-in-out;

  416.   -ms-transition: width 300ms ease-in-out;

  417.   -o-transition: width 300ms ease-in-out;

  418.   transition: width 300ms ease-in-out;

  419. }

  420. .dropzone .dz-preview.dz-error .dz-error-message {

  421.   display: block;

  422. }

  423. .dropzone .dz-preview.dz-error:hover .dz-error-message {

  424.   opacity: 1;

  425.   pointer-events: auto;

  426. }

  427. .dropzone .dz-preview .dz-error-message {

  428.   pointer-events: none;

  429.   z-index: 1000;

  430.   position: absolute;

  431.   display: block;

  432.   display: none;

  433.   opacity: 0;

  434.   -webkit-transition: opacity 0.3s ease;

  435.   -moz-transition: opacity 0.3s ease;

  436.   -ms-transition: opacity 0.3s ease;

  437.   -o-transition: opacity 0.3s ease;

  438.   transition: opacity 0.3s ease;

  439.   border-radius: 8px;

  440.   font-size: 13px;

  441.   top: 130px;

  442.   left: -10px;

  443.   width: 140px;

  444.   background: #be2626;

  445.   background: linear-gradient(to bottom, #be2626, #a92222);

  446.   padding: 0.5em 1.2em;

  447.   color: white;

  448. }

  449. .dropzone .dz-preview .dz-error-message:after {

  450.   content: '';

  451.   position: absolute;

  452.   top: -6px;

  453.   left: 64px;

  454.   width: 0;

  455.   height: 0;

  456.   border-left: 6px solid transparent;

  457.   border-right: 6px solid transparent;

  458.   border-bottom: 6px solid #be2626;

  459. }

  460. 

  461. .dropzone {

  462.   margin: 1.5em 0 3em;

  463.   border: 2px dashed #00a7dc;

  464.   border-radius: 5px;

  465.   background: white;

  466.   color: #555;

  467. }

  468. 

  469. .dropzone .dz-message {

  470.   font-weight: 400;

  471.   font-size: 20px;

  472. }