weseek__growi/resource/styles/scss/dropzone.scss

.overlay {
  // layout
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 15px;
}

.overlay-content {
  padding: 0.5em;
}

.page-editor-editor-container {
  .overlay-content {
    font-size: 2.5em;
  }
}

.comment-form {
  .overlay {
    // style
    margin-right: 15px;
    margin-top: 55px;
    margin-bottom: 55px;
  }
  .overlay-content {
    font-size: 1.8em;
  }
}


@mixin overlay-processing-style() {
  .overlay {
    background: rgba(255,255,255,0.5);
  }
  .overlay-content {
    padding: 0.3em;
    background: rgba(200,200,200,0.5);
    color: #444;
  }
}
// add icon on cursor
.autoformat-markdown-table-activated .CodeMirror-cursor {
  &:after {
    font-family: 'FontAwesome';
    content: '\f0ce';
  }
}

// for Dropzone
.dropzone {
  @mixin insertSimpleLineIcons($code) {
    &:before {
      margin-right: 0.2em;
      font-family: 'simple-line-icons';
      content: $code;
    }
  }

  // unuploadable or rejected
  &.dropzone-unuploadable, &.dropzone-rejected {
    .overlay {
      background: rgba(200,200,200,0.8);
    }
    .overlay-content {
      color: #444;
    }
  }
  // uploading
  &.dropzone-uploading {
    @include overlay-processing-style();
  }

  // unuploadable
  &.dropzone-unuploadable {
    .overlay-content {
      // insert content
      @include insertSimpleLineIcons("\e617");  // icon-exclamation
      &:after {
        content: "File uploading is disabled";
      }
    }
  }
  // uploadable
  &.dropzone-uploadable {
    // accepted
    &.dropzone-accepted:not(.dropzone-rejected) {
      .overlay {
        border: 4px dashed #ccc;
      }
      .overlay-content {
        // insert content
        @include insertSimpleLineIcons("\e084");  // icon-cloud-upload
        &:after {
          content: "Drop here to upload";
        }
        // style
        color: #666;
        background: rgba(200,200,200,0.8);
      }
    }
    // file type mismatch
    &.dropzone-rejected:not(.dropzone-uploadablefile) .overlay-content {
      // insert content
      @include insertSimpleLineIcons("\e032");  // icon-picture
      &:after {
        content: "Only an image file is allowed";
      }
    }
    // multiple files
    &.dropzone-accepted.dropzone-rejected .overlay-content {
      // insert content
      @include insertSimpleLineIcons("\e617");  // icon-exclamation
      &:after {
        content: "Only 1 file is allowed";
      }
    }
  }
} // end of.dropzone

.textarea-editor {
  border: none;
  font-family: monospace;
}

.loading-keymap {
  @include overlay-processing-style();
}