JimV-C/static/widgets/dropzone/dropzone.css

  /* Dropzone */
  /* The MIT License */
  
  .dropzone,
  .dropzone *,
  .dropzone-previews,
  .dropzone-previews * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  }
  .dropzone {
      position: relative;
      padding: 1em;
      border: 1px solid rgba(0, 0, 0, .08);
      background: rgba(0, 0, 0, .02);
  }
  .dropzone.dz-clickable {
      cursor: pointer;
  }
  .dropzone.dz-clickable .dz-message,
  .dropzone.dz-clickable .dz-message span {
      cursor: pointer;
  }
  .dropzone.dz-clickable * {
      cursor: default;
  }
  .dropzone .dz-message {
      opacity: 1;
      -ms-filter: none;
      filter: none;
  }
  .dropzone.dz-drag-hover {
      border-color: rgba(0, 0, 0, .15);
      background: rgba(0, 0, 0, .04);
  }
  .dropzone.dz-started .dz-message {
      display: none;
  }
  .dropzone .dz-preview,
  .dropzone-previews .dz-preview {
      position: relative;
      display: inline-block;
      margin: 17px;
      padding: 6px 6px 6px 6px;
      vertical-align: top;
      border: 1px solid #acacac;
      background: rgba(255, 255, 255, .8);
  }
  .dropzone .dz-preview.dz-file-preview [data-dz-thumbnail],
  .dropzone-previews .dz-preview.dz-file-preview [data-dz-thumbnail] {
      display: none;
  }
  .dropzone .dz-preview .dz-details,
  .dropzone-previews .dz-preview .dz-details {
      position: relative;
      width: 100px;
      height: 100px;
      margin-bottom: 22px;
      padding: 5px;
      background: #ebebeb;
  }
  .dropzone .dz-preview .dz-details .dz-filename,
  .dropzone-previews .dz-preview .dz-details .dz-filename {
      overflow: hidden;
      height: 100%;
  }
  .dropzone .dz-preview .dz-details img,
  .dropzone-previews .dz-preview .dz-details img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
  }
  .dropzone .dz-preview .dz-details .dz-size,
  .dropzone-previews .dz-preview .dz-details .dz-size {
      line-height: 28px;
      position: absolute;
      bottom: -28px;
      left: 3px;
      height: 28px;
  }
  .dropzone .dz-preview.dz-error .dz-error-mark,
  .dropzone-previews .dz-preview.dz-error .dz-error-mark {
      display: block;
  }
  .dropzone .dz-preview.dz-success .dz-success-mark,
  .dropzone-previews .dz-preview.dz-success .dz-success-mark {
      display: block;
  }
  .dropzone .dz-preview:hover .dz-details img,
  .dropzone-previews .dz-preview:hover .dz-details img {
      display: none;
  }
  .dropzone .dz-preview .dz-success-mark,
  .dropzone-previews .dz-preview .dz-success-mark,
  .dropzone .dz-preview .dz-error-mark,
  .dropzone-previews .dz-preview .dz-error-mark {
      font-size: 30px;
      position: absolute;
      top: -10px;
      right: -10px;
      display: none;
      width: 40px;
      height: 40px;
      text-align: center;
  }
  .dropzone .dz-preview .dz-success-mark,
  .dropzone-previews .dz-preview .dz-success-mark {
      color: #8cc657;
  }
  .dropzone .dz-preview .dz-error-mark,
  .dropzone-previews .dz-preview .dz-error-mark {
      color: #ee162d;
  }
  .dropzone .dz-preview .dz-progress,
  .dropzone-previews .dz-preview .dz-progress {
      position: absolute;
      top: 100px;
      right: 6px;
      left: 6px;
      display: none;
      height: 6px;
      background: #d7d7d7;
  }
  .dropzone .dz-preview .dz-progress .dz-upload,
  .dropzone-previews .dz-preview .dz-progress .dz-upload {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 0;
      background-color: #8cc657;
  }
  .dropzone .dz-preview.dz-processing .dz-progress,
  .dropzone-previews .dz-preview.dz-processing .dz-progress {
      display: block;
  }
  .dropzone .dz-preview .dz-error-message,
  .dropzone-previews .dz-preview .dz-error-message {
      position: absolute;
      z-index: 500;
      top: -5px;
      left: -20px;
      display: none;
      min-width: 140px;
      max-width: 500px;
      padding: 8px 10px;
      color: #800;
      background: rgba(245, 245, 245, .8);
  }
  .dropzone .dz-preview:hover.dz-error .dz-error-message,
  .dropzone-previews .dz-preview:hover.dz-error .dz-error-message {
      display: block;
  }
  .dropzone {
      position: relative;
      min-height: 350px;
      cursor: pointer;
  }
  .dz-message {
      font-size: 35px;
      line-height: 50px;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 50%;
      height: 50px;
      margin-top: -50px;
      margin-left: -25%;
      padding: 25px;
      text-align: center;
  }