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;
    height: calc(100vh - #{$grw-navbar-border-width});
  }

  // calculate margin
  $editor-header-plus-footer: 42px //               .nav-tabs height
    + 1px //                                        .page-editor-footer border-top
    + $grw-editor-navbar-bottom-height !default; // .EditorNavbarBottom min-height

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

  // for growi layout
  .main {
    .col.grw-page-content-container {
      padding: 0;
    }
  }

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

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

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

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

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

  &:not(.hackmd) .nav-tab-hackmd {
    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 {
    position: absolute;

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

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

  .grw-editor-navbar-bottom {
    height: $grw-editor-navbar-bottom-height;

    .grw-slack-notification {
      border-style: solid;
      border-width: 1px;
      border-radius: 16px;

      .input-group-addon {
        padding: 0px !important;
        border-radius: 16px 0px 0px 16px;
      }

      .custom-control-label {
        &::after {
          background-image: url(/images/icons/slack/slack-logo-on.svg);
        }
      }
      .custom-control-input:checked ~ .custom-control-label {
        &::after {
          background-image: url(/images/icons/slack/slack-logo-off.svg);
        }
      }

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

      .form-control {
        width: 80px;
        border: transparent;
        @include media-breakpoint-up(sm) {
          width: 130px;
        }
        @include media-breakpoint-up(md) {
          width: 180px;
        }
      }
    }

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