overleaf/services/web/frontend/stylesheets/pages/editor/ide.scss

@use 'sass:color';

$editor-toggler-bg-dark-color: color.adjust(
  $content-disabled,
  $lightness: -15%
);

:root {
  --editor-toggler-bg-color: #{$editor-toggler-bg-dark-color};
  --editor-resizer-bg-color: var(--bg-dark-secondary);
}

@include theme('light') {
  --editor-toggler-bg-color: var(--content-disabled);
  --editor-resizer-bg-color: var(--bg-light-tertiary);

  .ide-redesign-main {
    --editor-resizer-bg-color: var(--bg-light-tertiary);
  }
}

#ide-root {
  @include full-height-stacked-page;

  .global-alerts {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .chat {
    position: relative;
    height: 100%;
  }

  .review-panel-wrapper {
    &.rp-state-overview {
      position: sticky;
      top: 0;
      height: 100%;
    }
  }
}

.ide-redesign-main {
  --editor-resizer-bg-color: var(--bg-dark-tertiary);

  .ide-panel-group-resizing {
    background-color: var(--white);

    // Hide panel contents while resizing
    .ide-redesign-editor-content,
    .pdf {
      display: none !important;
    }
  }

  .synctex-controls {
    background-color: var(--bg-primary-themed);
    border-radius: var(--border-radius-full);
    border: 1px solid var(--border-divider-themed);
    top: 130px;
  }

  .synctex-control:not(.detach-synctex-control) {
    margin-bottom: 0;
    background-color: transparent;
    color: var(--content-primary-themed);

    &:hover,
    &:active,
    &:focus {
      background-color: var(--bg-tertiary-themed);
    }
  }

  .loading-panel {
    background-color: var(--bg-light-primary);
    color: var(--content-primary);

    // Based on editor theme rather than overall theme
    &.loading-panel-dark {
      background-color: var(--bg-dark-primary);
      color: var(--content-primary-dark);
    }
  }
}

.global-alerts {
  height: 0;
  margin-top: var(--spacing-01);
  text-align: center;

  [role='alert'] {
    text-align: left;
    min-width: 400px;
    position: relative;
    z-index: 20;
  }
}

.ide-react-editor-sidebar {
  background-color: var(--file-tree-bg);
  height: 100%;
  color: var(--content-secondary-dark);
  position: relative;
}

.ide-react-body {
  flex-grow: 1;
  background-color: var(--bg-light-secondary);
  overflow-y: hidden;
  z-index: 0;
}

.ide-react-main {
  flex: 1;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;

  .toolbar.toolbar-header {
    position: static;
    flex-grow: 0;
    color: var(--neutral-20);
  }
}

.ide-react-symbol-palette {
  height: 100%;
  background-color: var(--bg-dark-tertiary);
  color: var(--neutral-20);
}

.ide-react-editor-panel {
  display: flex;
  flex-direction: column;
}

.ide-panel-group-resizing {
  background-color: var(--white);

  // Hide panel contents while resizing
  .ide-react-editor-content,
  .pdf {
    display: none !important;
  }
}

.modal.lock-editor-modal {
  display: flex !important;
  background-color: rgba($bg-dark-primary, 0.3);
  overflow-y: hidden;
  pointer-events: none;

  .modal-dialog {
    top: 25px;
  }
}

.out-of-sync-modal {
  .text-preview {
    margin-top: var(--spacing-05);

    .scroll-container {
      @include body-sm;

      max-height: 360px;
      width: 100%;
      background-color: var(--bg-light-primary);
      overflow: auto;
      border: 1px solid var(--border-primary-dark);
      padding: var(--spacing-04) var(--spacing-05);
      text-align: left;
      white-space: pre;
      font-family: monospace;
    }
  }
}

.horizontal-resize-handle {
  width: 7px !important;
  height: 100%;

  // Enable ::before and ::after pseudo-elements to position themselves correctly
  position: relative;
  background-color: var(--editor-resizer-bg-color);

  .custom-toggler {
    padding: 0;
    border-width: 0;

    // Override react-resizable-panels which sets a global * { cursor: ew-resize }
    cursor: pointer !important;
  }

  &.horizontal-resize-handle-enabled {
    &::before,
    &::after {
      // This SVG has the colour hard-coded to the current value of @ol-blue-gray-2, so if we changed @ol-blue-gray-2,
      // we'd have to change this SVG too
      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='18' viewBox='0 0 7 18'%3E%3Cpath d='M2 0h3v3H2zM2 5h3v3H2zM2 10h3v3H2zM2 15h3v3H2z' style='fill:%239da7b7'/%3E%3C/svg%3E");
      display: block;
      position: absolute;
      text-align: center;
      left: 0;
      width: 7px;
      height: 18px;
    }

    &::before {
      top: 25%;
    }

    &::after {
      top: 75%;
    }
  }

  &:not(.horizontal-resize-handle-enabled) {
    cursor: default;
  }

  .synctex-controls {
    left: -8px;
    margin: 0;

    // Ensure that SyncTex controls appear in front of PDF viewer controls and logs pane
    z-index: 12;

    .synctex-control .synctex-control-icon {
      // Override react-resizable-panels which sets a global * { cursor: ew-resize }
      cursor: pointer !important;
    }
  }
}

.custom-toggler {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7px !important;
  height: 50px;
  margin-top: calc(var(--spacing-08) * -1);
  top: 50%;
  background-color: var(--editor-toggler-bg-color);

  .material-symbols {
    font-size: var(--font-size-02);
    -moz-osx-font-smoothing: grayscale;
    font-weight: bold;
    color: var(--white);
    user-select: none;
    pointer-events: none;
  }

  &:hover,
  &:focus {
    outline: none;
    text-decoration: none;
  }

  // Increase hit area
  &::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0 -3px;
  }

  &:hover {
    background-color: var(--bg-accent-01);
  }
}

.vertical-resize-handle {
  height: 6px;
  background-color: var(--editor-resizer-bg-color);

  &.vertical-resize-handle-enabled {
    &:hover {
      background-color: var(--editor-resizer-bg-color);
    }
  }

  &:not(.vertical-resize-handle-enabled) {
    opacity: 0.5;
    cursor: default;
  }

  &::after {
    // This SVG has the colour hard-coded to the current value of @ol-blue-gray-2, so if we changed @ol-blue-gray-2,
    // we'd have to change this SVG too
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='6' viewBox='0 0 18 6'%3E%3Cpath d='M0 1.5h3v3H0zM5 1.5h3v3H5zM10 1.5h3v3h-3zM15 1.5h3v3h-3z' style='fill:%239da7b7'/%3E%3C/svg%3E");
    display: block;
    text-align: center;
    line-height: 0;
  }
}

.full-size {
  position: absolute;
  inset: 0;
}

.teaser-feature-icon {
  vertical-align: sub;
}

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

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

.teaser-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: var(--spacing-03);
}

.teaser-video-container {
  margin: calc(var(--bs-modal-padding) * -1) calc(var(--bs-modal-padding) * -1)
    var(--spacing-02) calc(var(--bs-modal-padding) * -1);
  overflow: hidden;
}

.teaser-video {
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--border-divider);
}

.loading-panel {
  inset: 0;
  text-align: center;
  padding-top: var(--spacing-16);
  background-color: var(--bg-light-secondary);
}