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

@import 'editor-overlay';

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

body.on-edit {
  overflow-y: hidden !important;

  .grw-navbar {
    position: fixed !important;
    width: 100vw;
  }

  .page-wrapper {
    position: relative;
    top: $grw-navbar-border-width;
  }

  // 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 {
    .col.grw-page-content-container {
      padding: 0;
    }
  }

  // show
  .d-edit-sm-block {
    @include media-breakpoint-up(sm) {
      display: block !important;
    }
  }

  // hide unnecessary elements
  header,
  footer,
  .d-edit-none {
    display: none !important;
  }

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

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

  &.hackmd .grw-nav-item-edit {
    display: none;
  }

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

  &: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.grw-subnav {
    $left-margin: $grw-nav-main-left-tab-width * 2 + 25px; // width of .grw-nav-main-left-tab x 2 + some margin
    $right-margin: 128px + 94px + 46px; //                    width of all of grw-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;

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

  .grw-page-path-nav-for-edit {
    .grw-page-path-link {
      font-size: 20px;
      line-height: 1em;
    }
    .separator {
      margin-right: 0.1em;
      margin-left: 0.1em;
    }
  }

  .tag-labels {
    line-height: 1em;
  }

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

    .grw-grant-selector {
      .dropdown-toggle {
        min-width: 100px;

        // caret
        &::after {
          margin-left: 1em;
        }
      }
    }

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

  /*********************
   * Navigation styles
   */
  .nav:hover {
    .btn-copy,
    .btn-edit,
    .btn-edit-tags {
      // change button opacity
      opacity: unset;
    }
  }

  &.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
      .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;
      padding-left: 15px;
      overflow-y: scroll;
    }

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

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

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

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

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

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