weseek__growi/resource/styles/scss/_editor-overlay.scss

@mixin overlay-processing-style($additionalSelector, $contentFontSize: inherit, $contentPadding: inherit) {
  .overlay.#{$additionalSelector} {
    background: rgba(255,255,255,0.5);

    .overlay-content {
      background: rgba(200,200,200,0.5);
      color: #444;
      font-size: $contentFontSize;
      padding: $contentPadding;
    }
  }
}

// overlay in .editor-container
.editor-container {
  .overlay {
    // layout
    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    z-index: 7;  // forward than .CodeMirror-vscrollbar
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    .overlay-content {
      padding: 0.5em;
      right: 0;
      bottom: 0;
    }
  }

  // loading keymap
  @include overlay-processing-style(overlay-loading-keymap, 2.5em, 0.3em);

  // cheat sheat
  .overlay.overlay-gfm-cheatsheat {


    justify-content: end;
    align-items: end;

    pointer-events: none;

    float: right;
    height: 400px;
    width: 320px;
    border: solid 1.5px lightgray;
    margin: auto;
        .overlay-content {
      color: $text-muted;
    }
    ul{
      list-style: none;
    }
    .markdown-help{
      text-align: center;
      padding: 0.3em;
      font-size: 1.2em;
      font-family: 'Verdana';
    }
  }
  @media screen and (max-width: 400px) {
    .overlay-gfm-cheatsheat {
     visibility: hidden;
    }
  }
}