kupshop/admin/static/scss/components/_file-uploader.scss

.qq-uploader {
   position: relative;
   text-align: center;
   width: 100%;
}

.qq-upload-button {
   display: block;
   width: 105px;
   padding: 7px 0;
   text-align: center;
   border-bottom: 1px solid #ddd;
   color: $white;
}

.qq-upload-button-focus {
   outline: 1px dotted $black;
}

.qq-upload-drop-area,
.qq-upload-extra-drop-area {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 115px;
   z-index: 2;
   font-weight: 700;
   font-size: 16px;
   text-transform: uppercase;
   line-height: 2;
   color: $darkgray-dark;
   background-color: $gray-background;
   border: 1px dashed #aab2bd;

   div {
      justify-content: center;
      align-items: center;
      display: flex;
      height: 100%;
   }

   span {
      font-size: 32px;
      margin-right: 10px;
      height: 56px;
      width: 56px;
      text-align: center;

      &::before {
         position: relative;
         top: 1px;
         display: inline-block;
         font-family: 'Glyphicons Halflings';
         font-style: normal;
         font-weight: 400;
         line-height: 1;
         -webkit-font-smoothing: antialiased;
         content: "\e087";
      }
   }
}

.qq-upload-extra-drop-area {
   position: relative;
}

.qq-upload-drop-area-active {
   background: darken(#f7f7f8, 3%);
   color: $success;

   span::before {
      position: relative;
      top: 1px;
      display: inline-block;
      font-family: 'Glyphicons Halflings';
      font-style: normal;
      font-weight: 400;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      content: "\e013";
      color: $success;
   }
}

.qq-upload-list {
   margin: 0;
   padding: 0;
   list-style: none;
   text-align: left;
}

.qq-upload-list li {
   padding: 9px 0;
}

.qq-upload-file,
.qq-upload-spinner,
.qq-upload-size,
.qq-upload-cancel,
.qq-upload-retry,
.qq-upload-failed-text,
.qq-upload-delete,
.qq-upload-pause,
.qq-upload-continue {
   margin-right: 12px;
   display: inline;
}

.qq-upload-delete {
   cursor: pointer;
}

.qq-upload-spinner {
   display: inline-block;
   background: url("/admin/static/fineuploader/loading.gif");
   width: 15px;
   height: 15px;
   vertical-align: text-bottom;
}

.qq-drop-processing {
   display: block;
}

.qq-drop-processing-spinner {
   display: inline-block;
   background: url("/admin/static/fineuploader/processing.gif");
   width: 24px;
   height: 24px;
   vertical-align: text-bottom;
}

.qq-upload-delete, .qq-upload-pause, .qq-upload-continue {
   display: inline;
}

.qq-upload-retry,
.qq-upload-delete,
.qq-upload-cancel,
.qq-upload-pause,
.qq-upload-continue {
   color: $black;
}

.qq-upload-size,
.qq-upload-cancel,
.qq-upload-retry,
.qq-upload-delete,
.qq-upload-pause,
.qq-upload-continue {
   font-size: 12px;
   font-weight: normal;
}

.qq-upload-failed-text {
   display: none;
   font-style: italic;
   font-weight: bold;
}

.qq-upload-failed-icon {
   display: none;
   width: 15px;
   height: 15px;
   vertical-align: text-bottom;
}

.qq-upload-fail .qq-upload-failed-text {
   display: inline;
}

.qq-upload-retrying .qq-upload-failed-text {
   display: inline;
   color: #d60000;
}

.qq-upload-list li.qq-upload-success .qq-upload-status-text {
   color: $success;
}

.qq-upload-list li.qq-upload-fail .qq-upload-status-text {
   color: $danger;
}

.qq-progress-bar {
   display: block;
   background: linear-gradient(to bottom, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%); /* W3C */
   width: 0%;
   height: 15px;
   border-radius: 6px;
   margin-bottom: 3px;
}

.qq-total-progress-bar {
   height: 25px;
   border-radius: 9px;
}

.qq-total-progress-bar-container {
   margin: 9px;
}

input.qq-edit-filename {
   position: absolute;
   opacity: 0;
   z-index: -1;
}

.qq-upload-file.qq-editable {
   cursor: pointer;
}

.qq-edit-filename-icon.qq-editable {
   display: inline-block;
   cursor: pointer;
}

input.qq-edit-filename.qq-editing {
   position: static;
   margin-top: -5px;
   margin-right: 10px;
   margin-bottom: -5px;
   opacity: 1;
}

.qq-edit-filename-icon {
   display: none;
   background: url("/admin/static/fineuploader/edit.gif");
   width: 15px;
   height: 15px;
   vertical-align: text-bottom;
   margin-right: 5px;
}

.qq-hide {
   display: none;
}

/* <dialog> element styles */
.qq-uploader dialog {
   display: none;
}

.qq-uploader dialog[open] {
   display: block;
}

.qq-uploader dialog .qq-dialog-buttons {
   text-align: center;
   padding-top: 10px;
}

.qq-uploader dialog .qq-dialog-buttons button {
   margin-left: 5px;
   margin-right: 5px;
}

.qq-uploader dialog .qq-dialog-message-selector {
   padding-bottom: 10px;
}

.qq-uploader dialog::backdrop {
   background-color: rgba(0, 0, 0, .7);
}

.qq-upload-button-selector {
   line-height: 2;
   color: $darkgray-dark;
   background-color: $gray-background;
   border: 1px dashed #aab2bd;
   height: 115px;
   display: flex;
   justify-content: center;
   align-items: center;

   strong {
      display: block;
      text-transform: uppercase;
      font-size: 16px;
   }

   p {
      margin-bottom: 0;
   }

   input {
      line-height: 1;
      width: 100%;
   }
}

.qq-upload-button-hover {
   strong {
      text-decoration: underline;
   }
}

.qq-thumb-img {
   display: none;
}

.admin-photos {

   .qq-upload-button-selector {
      border: 0;
      background: transparent;
      height: auto;
   }

   .qq-upload-drop-area,
   .qq-upload-extra-drop-area {
      height: auto;

      span {
         line-height: inherit;
         font-size: 15px;

         &::before {
            margin-right: 7px;
         }
      }
   }

   .btn-block {
      margin-bottom: 0;
   }
}