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;

  .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
  }

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

  // restrict height of subnav
  .grw-subnav {
    height: $grw-subnav-height-on-edit;
    min-height: unset;
    padding-top: 0;

    @include media-breakpoint-up(lg) {
      height: $grw-subnav-height-lg-on-edit;
    }
  }

  .page-wrapper {
    position: relative;
    top: $grw-navbar-border-width;
    height: calc(100vh - #{$grw-navbar-border-width});
  }

  // calculate margin
  $editor-margin-top: $grw-navbar-border-width + $grw-subnav-height-on-edit;
  @include expand-editor($editor-margin-top);

  @include media-breakpoint-up(lg) {
    // calculate margin
    $editor-margin-top: $grw-navbar-border-width + $grw-subnav-height-lg-on-edit;
    @include expand-editor($editor-margin-top);
  }

  // show
  .d-edit-block {
    display: block !important;
  }

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

  // hide when HackMD view
  &.hackmd .d-hackmd-none {
    display: none;
  }

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

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

  &:not(.hackmd) .nav-tab-hackmd {
    display: none;
  }

  /*****************
   * Expand Editor
   *****************/
  .grw-editor-navbar-bottom {
    height: $grw-editor-navbar-bottom-height;

    .grw-grant-selector {
      @include media-breakpoint-down(sm) {
        .btn .label {
          display: none;
        }
      }
      @include media-breakpoint-up(md) {
        .dropdown-toggle {
          min-width: 100px;

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

    .btn-submit {
      width: 100px;
    }

    .btn-expand {
      // rotate icon
      i {
        display: inline-block;
        transition: transform 200ms;
      }
      &.expand i {
        transform: rotate(-180deg);
      }
    }
  }

  /*********************
   * Navigation styles
   */
  .grw-subnav {
    padding-bottom: 0;

    h1 {
      font-size: 16px;
    }

    .grw-drawer-toggler {
      width: 38px;
      height: 38px;
      font-size: 18px;
    }

    .grw-taglabels-container {
      margin-bottom: 0;

      // To scroll tags horizontally
      .grw-tag-labels.form-inline {
        flex-flow: row nowrap;
        width: 100%;
        overflow-x: scroll;
      }
    }
  }

  // ellipsis .grw-page-path-hierarchical-link
  .grw-subnav-left-side {
    overflow: hidden;
    .grw-path-nav-container {
      margin-right: 1rem;
      overflow: hidden;
      .grw-page-path-nav {
        white-space: nowrap;

        .grw-page-path-hierarchical-link {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        h1 {
          overflow: hidden;
        }
      }
    }
  }

  .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,
      .markdown-link-activated {
        .CodeMirror-cursor {
          &:after {
            position: relative;
            top: -1.1em;
            left: 0.3em;
            display: block;
            width: 1em;
            height: 1em;
            content: ' ';

            background-repeat: no-repeat;
            background-size: 1em;
          }
        }
      }

      .markdown-table-activated .CodeMirror-cursor {
        &:after {
          background-image: url(/images/icons/editor/table.svg);
        }
      }

      .markdown-link-activated .CodeMirror-cursor {
        &:after {
          background-image: url(/images/icons/editor/link.svg);
        }
      }

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

    .grw-editor-configuration-dropdown {
      .icon-container {
        width: 20px;
      }
      .menuitem-label {
        min-width: 130px;
      }
    }
  }

  // .builtin-editor .tab-pane#edit

  &.hackmd {
    .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: black;
    background-color: white;
    border: 1px solid $gray-300;
  }

  .tooltip-arrow {
    border-bottom: 5px solid $gray-300;
  }
}