ajust border size and margin

resource/styles/scss/_comment_growi.scss

@@ -1,77 +1,5 @@
 .growi.main-container  {
 
- // 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 {
-
-  }
-
-  // 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
-
-
   %comment-section {
     position: relative;
     padding: 1em;
@@ -175,8 +103,119 @@
         transition: height 0.2s ease-out;
         height: 180px;
       }
+    }
+  }
 
+  // for Dropzone
 
+  .CodeMirror {
+    .cm-matchhighlight {
+      background-color: cyan;
     }
+    .CodeMirror-selection-highlight-scrollbar {
+      background-color: darkcyan;
+    }
+  }
+  .overlay {
+    // layout
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    // style
+    margin: 0 15px;
+    margin-top: 55px;
+    margin-bottom: 55px;
   }
+  .overlay-content {
+    font-size: 1.8em;
+    padding: 0.5em;
+  }
+
+  @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';
+    }
+  }
+
+  .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
 }