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

body:not(.on-edit) {
  // hide #page-form
  #page-form {
    display: none;
  }
}

body.on-edit {

  %expand-by-flex {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  // 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;

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

  // show only either Edit button or HackMD button
  &.hackmd .nav-tab-edit {
    display: none;
  }
  &:not(.hackmd) .nav-tab-hackmd {
    display: none;
  }

  /*****************
   * Expand Editor
   *****************/
  .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 {
      @extend %expand-by-flex;
    }
  }

  .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;
    }
  }

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

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

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


  &.builtin-editor #edit-form {
    @extend %expand-by-flex;

    #page-editor {
      // right(preview)
      &,
      .row,
      .page-editor-preview-container,
      .page-editor-preview-body {
        min-height: calc(100vh - #{$header-plus-footer});   // for IE11
        height: calc(100vh - #{$header-plus-footer});
      }
      // left(editor)
      .page-editor-editor-container {
        min-height: calc(100vh - #{$header-plus-footer});   // for IE11
        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});
          }
        }
      }
    }

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

      .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;
      }
    }

    #page-grant-selector {
      .btn-group {
        min-width: 150px;
      }
    }

  } // .builtin-editor #edit-form


  &.hackmd #hackmd {
    @extend %expand-by-flex;

    #hackmd-editor,
    iframe {
      width: 100vw;
      min-height: calc(100vh - #{$header-plus-footer});   // for IE11
      height: calc(100vh - #{$header-plus-footer});

      border: 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;
    }
  }

}