Overleaf/services/web/frontend/stylesheets/app/editor.less

@import './editor/file-tree.less';
@import './editor/history.less';
@import './editor/toolbar.less';
@import './editor/left-menu.less';
@import './editor/pdf.less';
@import './editor/share.less';
@import './editor/chat.less';
@import './editor/file-view.less';
@import './editor/search.less';
@import './editor/publish-template.less';
@import './editor/online-users.less';
@import './editor/hotkeys.less';
@import './editor/review-panel.less';
@import './editor/rich-text.less';
@import './editor/publish-modal.less';
@import './editor/outline.less';
@import './editor/logs.less';

@ui-layout-toggler-def-height: 50px;
@ui-resizer-size: 7px;

@keyframes blink {
  0% {
    opacity: 0.2;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}

.editor-menu-icon {
  &.fa {
    width: 1em;
    background: @editor-header-logo-background;

    &::before {
      // Disable the font-awesome icon when in Overleaf by replacing it with a
      // non-breakable space instead (otherwise the browser would render a
      // zero-width element).
      content: '\00a0';
    }
  }
}

.full-size {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.global-alerts {
  height: 0;
  margin-top: 2px;
  text-align: center;

  .alert {
    display: inline-block;
    text-align: left;
    min-width: 400px;
    padding: @global-alerts-padding;
    font-size: 14px;
    margin-bottom: (@line-height-computed / 4);
    position: relative;
    z-index: 20;
  }
}

#try-reconnect-now-button {
  margin-left: 20px;
}

#synctex-more-info-button {
  margin-left: 20px;
}

#ide-body {
  background-color: @pdf-bg;
  .full-size;
  top: @ide-body-top-offset;
  &.ide-history-open {
    top: @ide-body-top-offset + @editor-toolbar-height;
  }
}

#editor,
#editor-rich-text {
  .full-size;
  top: @editor-toolbar-height;
}

.no-history-available,
.no-file-selection,
.multi-selection-ongoing {
  &::before {
    .full-size;
    left: 20px;
    content: '';
    background: url(/img/ol-brand/overleaf-o-grey.svg) center / 200px no-repeat;
    opacity: 0.2;
    pointer-events: none;
  }
}

.no-history-available,
.no-file-selection-message,
.multi-selection-message {
  width: 50%;
  margin: 0 auto;
  text-align: center;
  padding: @line-height-computed 0;
}

.toolbar-editor {
  height: @editor-toolbar-height;
  background-color: @editor-toolbar-bg;
  padding: 0 5px;
  overflow: hidden;
  position: relative;
  z-index: 10; // Prevent track changes showing over toolbar

  .btn-recompile-group {
    margin-right: -5px;
    border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base;
    margin-left: 6px;
    &.btn-recompile-group-has-changes {
      // prettier-ignore
      #gradient > .striped(@color: rgba(255, 255, 255, 0.2), @angle: -45deg);
      background-size: @stripe-width @stripe-width;
      .animation(pdf-toolbar-stripes 2s linear infinite);
    }
    .btn-recompile {
      border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base;
    }
  }
}

.loading-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.loading-screen-brand-container {
  width: 15%;
  min-width: 200px;
  text-align: center;
}
.loading-screen-brand {
  position: relative;
  width: 100%;
  padding-top: @editor-loading-logo-padding-top;
  height: 0;
  background: @editor-loading-logo-background-url no-repeat bottom / 100%;

  &::after {
    content: '';
    position: absolute;
    height: inherit;
    right: 0;
    bottom: 0;
    left: 0;
    background: @editor-loading-logo-foreground-url no-repeat bottom / 100%;
    transition: height 0.5s;
  }
}
.loading-screen-label {
  margin: 0;
  padding-top: 1em;
  font-size: 2em;
  color: @gray-dark;
}
.loading-screen-ellip {
  animation: blink 1.4s both infinite;
  &:nth-child(2) {
    animation-delay: 0.2s;
  }
  &:nth-child(3) {
    animation-delay: 0.4s;
  }
}

.loading-screen-error {
  margin: 0;
  padding-top: 1em;
  color: @state-danger-text;
}

.loading-panel {
  .full-size;
  padding-top: 10rem;
  font-family: @font-family-serif;
  text-align: center;
  background-color: #fafafa;
}

.loading-panel-file-view {
  background-color: @gray-lightest;
}

.error-panel {
  .full-size;
  padding: @line-height-computed;
  background-color: #fafafa;
  .alert {
    max-width: 400px;
    margin: auto;
  }
}

.project-name {
  .name {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    padding: 6px;
    color: @project-name-color;
    font-weight: 700;
    white-space: nowrap;
  }
  input {
    height: 30px;
    margin-top: 4px;
    text-align: center;
    padding: 6px;
    font-weight: 700;
    max-width: 500px;
  }
  a.rename {
    visibility: hidden;
    display: inline-block;
    color: @project-rename-link-color;
    padding: 5px;
    border-radius: @border-radius-small;
    cursor: pointer;
    &:hover {
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
      color: @project-rename-link-color-hover;
      text-decoration: none;
    }
  }
  &:hover {
    a.rename {
      visibility: visible;
    }
  }
}

/**************************************
Ace
***************************************/

// The internal components of the aceEditor directive
.ace-editor-wrapper {
  .full-size;
  .undo-conflict-warning {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
  }
  .ace-editor-body {
    width: 100%;
    height: 100%;
  }
  .spelling-highlight {
    z-index: 3;
    position: absolute;
    background-image: url(/img/spellcheck-underline.png);
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      background-image: url(/img/spellcheck-underline@2x.png);
      background-size: 5px 4px;
    }
    background-repeat: repeat-x;
    background-position: bottom left;
  }
  .remote-cursor {
    position: absolute;
    border-left: 2px solid transparent;
    // Adds "nubbin" top right of cursor, which inherits the injected color
    &::before {
      content: '';
      position: absolute;
      left: -2px;
      top: -5px;
      height: 5px;
      width: 5px;
      border-top-width: 3px;
      border-right-width: 3px;
      border-bottom-width: 2px;
      border-left-width: 2px;
      border-style: solid;
      border-color: inherit;
    }
  }
  .annotation-label {
    padding: (@line-height-computed / 4) (@line-height-computed / 2);
    font-size: 0.8rem;
    z-index: 100;
    font-family: @font-family-sans-serif;
    color: white;
    font-weight: 700;
    white-space: nowrap;
  }
  .annotation {
    position: absolute;
    z-index: 2;
  }
  .highlights-before-label,
  .highlights-after-label {
    position: absolute;
    right: @line-height-computed;
    z-index: 1;
  }
  .highlights-before-label {
    top: @line-height-computed / 2;
  }
  .highlights-after-label {
    bottom: @line-height-computed / 2;
  }
}

.strike-through-foreground::after {
  content: '';
  position: absolute;
  width: 100%;
  top: 50%;
  margin-top: -1px;
  height: 2px;
  background: currentColor;
}

// Hack to solve an issue where scrollbars aren't visible in Safari.
// Safari seems to clip part of the scrollbar element. By giving the
// element a background, we're telling Safari that it *really* needs to
// paint the whole area. See https://github.com/ajaxorg/ace/issues/2872
.ace_scrollbar-inner {
  background-color: #fff;
  opacity: 0.01;

  .ace_dark & {
    background-color: #000;
  }
}

/**************************************
CodeMirror
***************************************/
.cm-editor-wrapper {
  position: relative;
  height: 100%;
}

.cm-editor-body {
  height: 100%;
}

// CM (for some reason) has height set to 300px in it's stylesheet
.CodeMirror {
  height: 100%;
}

.ui-layout-resizer {
  width: @ui-resizer-size !important;
  background-color: @editor-resizer-bg-color;
  /* Over-ride z-index set on element by JQuery Layout */
  z-index: 0 !important;
  &.ui-layout-resizer-closed {
    &::before,
    &::after {
      content: none;
    }
  }

  &::before,
  &::after {
    content: '\2847';
    display: block;
    position: absolute;
    text-align: center;
    left: -2px;
    -webkit-font-smoothing: antialiased;
    width: 100%;
    font-size: 24px;
    top: 25%;
    color: @ol-blue-gray-2;
  }
  &::after {
    top: 75%;
  }
}

.ui-layout-toggler {
  display: none !important;
}

.custom-toggler {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: @ui-resizer-size !important;
  height: 50px;
  margin-top: -25px;
  top: 50%;
  background-color: @editor-toggler-bg-color;

  &:hover,
  &:focus {
    outline: none;
    text-decoration: none;
  }
  // Increase hit area
  &::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: -3px;
    bottom: 0;
    left: -3px;
  }

  &::after {
    font-family: FontAwesome;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 65%;
    font-weight: bold;
    color: #fff;
    user-select: none;
    pointer-events: none;
  }

  &:hover {
    background-color: @editor-toggler-hover-bg-color;
  }
}
.custom-toggler-east::after {
  content: '\f105';
}
.custom-toggler-west::after {
  content: '\f104';
}

.custom-toggler-closed.custom-toggler-east::after {
  content: '\f104';
}
.custom-toggler-closed.custom-toggler-west::after {
  content: '\f105';
}

.ui-layout-resizer-dragging {
  background-color: @editor-resizer-bg-color-dragging;
  z-index: 1000 !important;
}

.context-menu {
  position: fixed;
  z-index: 100;
}

.editor-dark {
  color: @gray-lighter;
  background-color: @editor-dark-background-color;

  .ui-layout-resizer {
    background-color: darken(@editor-dark-background-color, 10%);
    border: none;
  }

  .btn-default {
    color: white;
    background-color: @gray;
    border-color: darken(@gray-dark, 10%);
    &:hover {
      background-color: darken(@gray, 5%);
      border-color: darken(@gray-dark, 20%);
    }
  }
}

.modal-alert {
  margin-top: 10px;
  margin-bottom: 0px;
}

// vertically centre the "connection down" modal so it does not hide
// the reconnecting indicator

.modal.lock-editor-modal {
  display: flex !important;
  background-color: rgba(0, 0, 0, 0.3);
  overflow-y: hidden;
  pointer-events: none;
  .modal-dialog {
    top: @line-height-computed;
  }
}

.out-of-sync-modal {
  .text-preview {
    margin-top: @line-height-computed / 2;
    .scroll-container {
      max-height: 360px;
      width: 100%;
      background-color: white;
      font-size: 0.8em;
      line-height: 1.1em;
      overflow: auto;
      border: 1px solid @gray-lighter;
      padding-left: 12px;
      padding-right: 12px;
      padding-top: 8px;
      padding-bottom: 8px;
      text-align: left;
      white-space: pre;
      font-family: monospace;
    }
  }
}

.sl_references_search_hint {
  position: relative;
  top: 100%;
}

.sl_references_search_hint {
  position: relative;
  left: -1px;
  text-align: center;
  padding: 2px;
  background: rgb(202, 214, 250);
  border: 1px solid lightgray;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);

  span {
    color: black;
  }
}

// -- References Search Modal --
.references-search-modal-backdrop {
  // don't grey out the editor when the
  // modal is active
  background-color: transparent;
}
.references-search-modal {
  // upgrade prompt
  .references-search-upgrade-prompt {
    padding: 24px;
    padding-bottom: 48px;
    .upgrade-prompt {
      text-align: center;
      width: 400px;
      padding-top: 14px;
      padding-bottom: 14px;
      padding-left: 38px;
      padding-right: 38px;
      margin: auto;
      background: white;
      opacity: 0.95;
      border-radius: 8px;
      .message {
        margin-top: 15px;
        &.call-to-action {
          font-weight: bold;
        }
        ul.list-unstyled {
          text-align: left;
        }
      }
      a.btn {
        opacity: 1;
      }
    }
  }
  .search-form {
    // position the spinner inside the input element
    i.fa-spinner {
      margin-top: -30px;
    }
  }
  .alert-danger {
    margin-top: 12px;
    margin-bottom: 0px;
  }
  // search result items list
  .search-results {
    font-size: 12px;
    .no-results-message {
      font-size: 16px;
    }
    .search-result-hit {
      &:hover {
        cursor: pointer;
      }
      border-bottom: 1px solid #ddd;
      padding: 8px;
      &:last-child {
        border-bottom: 1px solid transparent;
      }
      border-left: 4px solid transparent;
      &.selected-search-result-hit {
        color: @brand-success;
      }
      .hit-title {
        font-size: 1.3em;
        font-style: italic;
      }
    }
  }
}

.referencesImportModal {
  .referencesImportPreviewScroller {
    font-family: monospace;
    font-size: 0.8em;
    max-height: 360px;
    overflow: scroll;
    white-space: pre;
    padding: 8px 12px;
    margin-bottom: 15px;
    border: 1px solid @gray-lighter;
    background-color: @gray-lightest;
  }
}

.teaser-title,
.dropbox-teaser-title {
  margin-top: 0;
  text-align: center;
}

.teaser-refresh-label {
  text-align: center;
}

.teaser-img,
.dropbox-teaser-img {
  .img-responsive;
  margin-bottom: 5px;
}

.teaser-video-container,
.dropbox-teaser-video-container {
  margin-top: -@modal-inner-padding;
  margin-left: -@modal-inner-padding;
  margin-right: -@modal-inner-padding;
  margin-bottom: 5px;
  overflow: hidden;
}

.teaser-video,
.dropbox-teaser-video {
  width: 100%;
  height: auto;
  border-bottom: 1px solid @modal-header-border-color;
}

.spell-check-menu {
  > .dropdown-menu > li > a {
    padding: 2px 15px;
  }
}

.spell-check-menu-from-bottom {
  > .dropdown-menu {
    top: auto;
    bottom: 100%;
  }
}

// The source editor container is managed by jQuery's UI layout library, which adds an `overflow: hidden`
// rule to it. This is problematic because we need overflowing content to be visible (the review panel
// previews are shown on hover, visually outside the source editor container). As the `overflow: hidden`
// rule is added automatically (inline and not configurable), the only workaround is to use `!important`.
.editor-container {
  overflow: visible !important;
}