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

@import 'editor-overlay';

body:not(.on-edit) {
  // hide .page-editor-footer
  .page-editor-footer {
    display: none !important;
  }
}

body.on-edit {

  // 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 + 26px;   // .btn-open-dropzone height

  // 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-info,
  .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;
  }

  // hide hackmd related alert
  &.hackmd #page-status-alert {
    .alert-hackmd-someone-editing, .alert-hackmd-draft-exists {
      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 {
      display: flex;
      flex-direction: column;
      flex: 1;

      .tab-pane#edit, .tab-pane#hackmd {
        min-height: calc(100vh - #{$header-plus-footer});   // for IE11
        height: calc(100vh - #{$header-plus-footer});
      }

      #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});
          }

          @media (min-width: $screen-md) {
            padding-right: 0;
          }
        }
      }

      #page-editor-with-hackmd {
        &,
        .hackmd-preinit, #iframe-hackmd-container > iframe {
          width: 100vw;
          min-height: calc(100vh - #{$header-plus-footer});   // for IE11
          height: calc(100vh - #{$header-plus-footer});
        }
      }

    }
  }

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

    .grant-selector {
      .btn-group {
        min-width: 150px;
      }
    }
    .btn-submit {
      width: 100px;
    }
  }

  #page-status-alert .myadmin-alert {
    position: absolute;
    opacity: 0.8;
    bottom: 42px;
    right: 3px;
    left: 3px;
    box-shadow: 2px 2px 5px #666;

    &:hover {
      opacity: 1;
    }
  }

  &.builtin-editor {

    /*****************
    * Editor styles
    *****************/
    .page-editor-editor-container {
      border-right: 1px solid transparent;
      // override CodeMirror styles
      .CodeMirror {
        .cm-matchhighlight {
          background-color: cyan;
        }
        .CodeMirror-selection-highlight-scrollbar {
          background-color: darkcyan;
        }
      }

      // add icon on cursor
      .autoformat-markdown-table-activated .CodeMirror-cursor {
        &:after {
          font-family: 'FontAwesome';
          content: '\f0ce';
        }
      }

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

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

    #page-grant-selector {
      .btn-group {
        min-width: 150px;
      }
    }
  } // .builtin-editor .tab-pane#edit


  &.hackmd {
    #page-editor-options-selector {
      display: none;
    }

    .hackmd-preinit, #iframe-hackmd-container > iframe {
      border: none;
    }

    .hackmd-status-label {
      font-size: 3em;
      color: $muted;
    }

    .hackmd-start-button-container, .hackmd-resume-button-container {
      .btn-lg .btn-label {
        padding-top: 6px;     // for SplitButton
        padding-bottom: 6px;  // for SplitButton
      }
    }
    .hackmd-resume-button-container {
      .dropdown-menu {
        left: unset;
        right: 0;
      }
    }
    .hackmd-discard-button {
      vertical-align: unset;
      text-decoration: underline;
    }

  }

}


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

}

// overwrite .CodeMirror-placeholder
.CodeMirror pre.CodeMirror-placeholder {
  color: $text-muted;
}