weseek__growi/src/client/styles/scss/_on-edit.scss

@import 'editor-overlay';
@import 'layout_variable';

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

body.on-edit {
  // calculate margin
  $editor-header-plus-footer: 42px // .nav-tabs height
    + 1px //                          .page-editor-footer border-top
    + 40px !default; //               .page-editor-footer min-height

  @include expand-editor($editor-header-plus-footer);

  // for growi layout
  .main {
    > .row {
      margin: 0;

      > .col-lg-10,
      > .col-md-9 {
        width: 100%;
        padding: 0;
      }
    }
  }

  // hide unnecessary elements
  .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,
  .btn-like,
  .btn-bookmark,
  .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;
  }

  .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;
    left: $left-margin;
    z-index: 7; // forward than .CodeMirror-vscrollbar
    width: calc(100% - #{$left-margin} - #{$right-margin});
    padding-top: 3px;
    pointer-events: none; // disable pointer-events because it becomes an obstacle

    background: none;

    > .header-container {
      width: 100%; //   for crowi layout
      padding: 0; //    for crowi layout
      pointer-events: initial; // enable pointer-events
    }

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

    .tag-viewer.new-page {
      display: block;
    }
  }

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

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

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

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

    &: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 {
          position: relative;
          top: -1.1em;
          left: 0.3em;
          display: block;
          width: 1em;
          height: 1em;
          content: ' ';

          background-image: url(/images/icons/editor/table.svg);
          background-repeat: no-repeat;
          background-size: 1em;
        }
      }

      .textarea-editor {
        font-family: monospace;
        border: 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;
      }

      .grw-editor-configuration-dropdown {
        .icon-container {
          display: inline-block;
          width: 20px;
        }

        .dropdown-menu > li > a {
          display: flex;
          align-items: center;
          justify-content: space-between;

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

    #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-error {
      top: 0;
      background-color: rgba($gray-dark, 0.8);
    }

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

    .hackmd-resume-button-container,
    .hackmd-discard-button-container {
      .btn-text {
        display: inline-block;
        min-width: 230px;
      }
    }

    .btn-view-outdated-draft {
      text-decoration: underline;
      vertical-align: unset;
    }
  }
}

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

.on-edit .nav-tabs-create-portal {
  display: block;
}

// overwrite .CodeMirror pre
.CodeMirror pre.CodeMirror-line {
  font-family: $font-family-monospace;
}

// overwrite .CodeMirror-hints
.CodeMirror-hints {
  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 {
      padding-top: 0.3em;
      padding-bottom: 0.3em;
      font-size: 15px; // adjust to .wiki
    }
  }
}

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

#tag-edit-button-tooltip {
  .tooltip-inner {
    color: #000;
    background-color: #fff;
    border: 1px solid #ccc;
  }

  .tooltip-arrow {
    border-bottom: 5px solid #ccc;
  }
}