weseek__growi/resource/styles/scss/_on-edit.scss

body.on-edit {

  // hide unnecessary elements
  .navbar.navbar-static-top,
  .row.row-alerts,
  .row.page-list,
  .row.page-comments-row,
  .row.page-attachments-row,
  .row.not-found-message-row,
  .users-meta,
  .user-page-content-container,
  .portal-form-button,
  .alert-info.alert-moved,
  .alert-info.alert-unlinked,
  .like-button, .bookmark-link, .btn-edit,
  .authors,
  footer {
    display: none !important;
  }

  // hide unnecessary elements for growi layout
  .revision-toc-container {
    display: none;
  }

  // hide unnecessary elements for crowi layout
  #toggle-sidebar,
  .crowi-sidebar {
    display: none;
  }


  /*****************
   * Expand Editor
   *****************/
  .expand-by-flex {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .container-fluid {
    padding-bottom: 0;
  }
  .main {
    width: 100%;
    height: 100vh;
    margin-top: 0px !important;
    padding-top: 2px;
    padding-left: 0;
    padding-right: 0;

    // for growi layout
    > .row {
      margin: 0;
      > .col-lg-10, > .col-md-9 {
        width: 100%;
        padding: 0;
      }
    }

    &,
    .content-main,
    .tab-content,
    .edit-form,
    .page-form {
      @extend .expand-by-flex;
    }

    .page-form {

      // calculate margin
      $header-plus-footer: 2px                      // .main padding-top
                         + 42px                     // .nav height
                         + 1px                      // .page-editor-footer border-top
                         + 40px;                    // .page-editor-footer min-height
      $editor-margin: $header-plus-footer + 22px;   // .btn-open-dropzone height
      $editor-margin-sm: $header-plus-footer;

      #page-editor {
        // right(preview)
        &,
        .row,
        .page-editor-preview-container,
        .page-editor-preview-body {
          height: calc(100vh - #{$header-plus-footer});
        }
        // left(editor)
        .page-editor-editor-container {
          height: calc(100vh - #{$header-plus-footer});

          .react-codemirror2, .CodeMirror, .CodeMirror-scroll,
          .textarea-editor {
            height: calc(100vh - #{$editor-margin});
            // less than smartphone
            @media (max-width: $screen-xs) {
              height: calc(100vh - #{$editor-margin-sm});
            }
          }
        }
      }

      .page-editor-footer {
        width: 100%;
        margin: 0;
        padding: 3px;
        min-height: 40px;
        border-top: solid 1px transparent;

        .btn-submit {
          width: 100px;
        }
      }

      // slack
      .input-group-slack {
        .input-group-addon {
          padding: 2px 8px;
          line-height: 1em;
          img, input {
            vertical-align: middle;
          }
        }
      }

    }
  }

  .row.bg-title {
    $left-margin: $nav-main-left-tab-width * 2 + 25px;  // width of .nav-main-left-tab x 2 + some margin
    $right-margin: 128px + 94px + 46px;                 // width of all of nav-main-right-tab

    position: absolute;
    z-index: 1;
    left: $left-margin;
    width: calc(100% - #{$left-margin} - #{$right-margin});

    // for crowi layout
    > .col-md-9, .col-xs-12 {
      padding: 0;
      width: 100%;
    }

    background: none;

    .header-wrap {
      overflow-x: hidden;
    }
    h1#revision-path {
      @include variable-font-size(20px);
      line-height: 1em;

      // nowrap even if the path is too long
      .d-flex {
        flex-wrap: nowrap;
      }
      .path-segment {
        white-space: nowrap;
      }
    }

    // hide if screen size is less than tablet
    @media (max-width: $screen-sm) {
      display: none;
    }
  }

  /*****************
   * Editor styles
   *****************/
  .page-editor-editor-container {
    border-right: 1px solid transparent;
    padding-right: 0;
    // override CodeMirror styles
    .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;
    }
    .overlay-content {
      font-size: 2.5em;
      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;
      }
    }

    // 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();
    }

    .btn-open-dropzone {
      z-index: 2;
      font-size: small;
      text-align: right;
      padding-top: 3px;
      padding-bottom: 0;
      border: none;
      border-radius: 0;
      border-top: 1px dotted #ccc;

      &:active {
        box-shadow: none;
      }

      // hide if screen size is less than smartphone
      @media (max-width: $screen-xs) {
        display: none;
      }
    }
  }
  .page-editor-preview-container {
  }

  .page-editor-preview-body {
    padding-top: 18px;
    padding-right: 15px;
    overflow-y: scroll;
  }

  #page-editor-options-selector {
    label {
      margin-right: 0.5em;
    }

    // configuration dropdown
    .configuration-dropdown {
      .icon-container {
        display: inline-block;
        width: 20px;
      }
      .dropdown-menu > li > a {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .menuitem-label {
          flex: 1;
          margin-right: 10px;
        }
      }
    }

    @media (max-width: $screen-xs-max) { // {{{ less than smartphone size
      display: none;
    }
  }

} // }}}

/*
 * for creating portal
 */
.nav-tabs-create-portal {
  display: none;
}
.on-edit .nav-tabs-create-portal {
  display: block;
}

// overwrite .CodeMirror-hints
.CodeMirror-hints {
  // FIXME: required because .content-main.on-edit has 'z-index:1050'
  // z-index: 1060 !important;

  max-height: 30em !important;

  .CodeMirror-hint.crowi-emoji-autocomplete {
    font-family: $font-family-monospace-not-strictly;
    line-height: 1.6em;

    .img-container {
      display: inline-block;
      width: 30px;
    }
  }
  // active line
  .CodeMirror-hint-active.crowi-emoji-autocomplete {
    .img-container {
      font-size: 15px;  // adjust to .wiki
      padding-top: 0.3em;
      padding-bottom: 0.3em;
    }
  }

}