kupshop/web/common/static/scss/_file-uploader.scss

$state-success: #2a882a !default;
$state-error: #cc0f0f !default;

$body-bg-alt: #f4f4f4 !default;
$input-padding-y: .75rem !default;
$input-padding-x: 1rem !default;
$font-size-base: inherit !default;
$input-bg: #fff !default;
$input-border-width: 1px !default;
$input-border-color: #cecece !default;
$input-border-color: $border-color !default;


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

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

.qq-upload-button-focus {
   outline: 1px dotted #000;
}

.qq-upload-drop-area,
.qq-upload-extra-drop-area {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 115px;
   z-index: 2;
   background: #f7f7f8;
   font-weight: 700;
   font-size: 16px;
   text-transform: uppercase;

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

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

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

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

.qq-upload-list li {
   display: flex;
   align-items: center;
   padding: 15px 17px;
   margin-top: 10px;
   border: 1px solid $border-color;
}

.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-cancel,
.qq-upload-delete {
   margin-left: auto;
}

.qq-upload-delete {
   @include underline-default;

   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: #000;
}

.qq-upload-size {
   font-size: 12px;
}

.qq-upload-cancel,
.qq-upload-retry,
.qq-upload-delete,
.qq-upload-pause,
.qq-upload-continue {
   font-size: $font-size-base;
   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: $state-error;
}

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

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

.qq-progress-bar {
   display: block;
   background: -moz-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(30, 87, 153, 1)), color-stop(50%, rgba(41, 137, 216, 1)), color-stop(51%, rgba(32, 124, 202, 1)), color-stop(100%, rgba(125, 185, 232, 1))); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%); /* IE10+ */
   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;
   filter: alpha(opacity=0);
   z-index: -1;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.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;
   filter: alpha(opacity=100);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.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 {
   padding: $input-padding-y $input-padding-x;
   font-size: $font-size-base;
   line-height: 2;
   background-color: $body-bg-alt;
   border: 0;//$input-border-width solid $input-border-color;
   height: 115px;
   display: flex;
   justify-content: center;
   align-items: center;

   strong {
      display: flex;
      align-items: center;
      justify-content: center;
      text-transform: uppercase;
      font-size: 16px;

      .fc {
         margin-right: 5px;
      }
   }

   p {
      margin-bottom: 0;
   }

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

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

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