Overleaf/services/web/frontend/stylesheets/pages/editor/file-tree.scss

:root {
  --file-tree-item-hover-bg: var(--bg-dark-secondary);
  --file-tree-item-selected-bg: var(--bg-accent-01);
  --file-tree-item-color: var(--content-primary-dark);
  --file-tree-bg: var(--bg-dark-tertiary);
  --file-tree-item-selected-color: var(--content-primary-dark);
  --file-tree-item-dragging-bg: #{rgb($bg-dark-secondary, 0.9)};
  --file-tree-item-dragging-color: var(--content-primary-dark);
  --file-tree-item-icon-dragging-color: var(--content-disabled);
  --file-tree-item-dragging-preview-bg: #{rgb($bg-accent-01, 0.6)};
  --file-tree-item-dragging-preview-colour: var(--content-primary-dark);
  --file-tree-line-height: 2.05;
  --file-tree-icon-colour: var(--content-disabled);
}

@include theme('light') {
  --file-tree-item-hover-bg: var(--bg-light-tertiary);
  --file-tree-item-color: var(--content-secondary);
  --file-tree-bg: var(--bg-light-primary);
  --file-tree-item-selected-color: var(--bg-light-primary);
  --file-tree-item-dragging-bg: #{rgb($bg-light-tertiary, 0.9)};
  --file-tree-item-dragging-color: var(--content-secondary);
  --file-tree-item-dragging-preview-colour: var(--bg-light-primary);

  .ide-redesign-main {
    --file-tree-item-hover-bg: var(--bg-light-secondary);
    --file-tree-item-selected-bg: var(--bg-accent-03);
    --file-tree-item-selected-color: var(--green-70);
    --file-tree-item-color: var(--content-primary);
    --file-tree-bg: var(--white);
    --file-tree-icon-colour: var(--content-primary);
    --file-tree-item-dragging-bg: var(--green-60);
    --file-tree-item-dragging-color: var(--white);
    --file-tree-item-icon-dragging-color: var(--file-tree-item-dragging-color);
    --file-tree-item-dragging-preview-bg: #{rgb($bg-light-secondary, 0.6)};
    --file-tree-item-dragging-preview-colour: #{rgb($content-primary, 0.6)};
    --file-tree-expand-button-color: var(--content-primary);
  }
}

// TODO ide-redesign-cleanup: Replace the existing styling with these overrides.
.ide-redesign-main {
  --file-tree-item-hover-bg: var(--bg-dark-secondary);
  --file-tree-item-selected-bg: var(--green-70);
  --file-tree-item-selected-color: var(--green-10);
  --file-tree-item-color: var(--content-primary-dark);
  --file-tree-bg: var(--bg-dark-primary);
  --file-tree-icon-colour: var(--content-primary-dark);
  --file-tree-item-dragging-bg: var(--green-40);
  --file-tree-item-dragging-color: var(--content-primary-dark);
  --file-tree-item-icon-dragging-color: var(--file-tree-item-dragging-color);
  --file-tree-item-dragging-preview-bg: #{rgb($bg-dark-secondary, 0.6)};
  --file-tree-item-dragging-preview-colour: #{rgb($content-primary-dark, 0.6)};
  --file-tree-expand-button-color: var(--content-primary-dark);

  .file-tree-outline-panel-group {
    background-color: var(--file-tree-bg);
  }

  .file-tree-toolbar {
    display: flex;
    justify-content: space-between;
    height: 28px;
    margin: var(--spacing-02);
  }

  .file-tree-panel {
    min-height: 36px;
  }

  .file-tree-panel-collapsed {
    max-height: 36px;
  }

  .file-tree-expand-collapse-button {
    border-radius: var(--border-radius-base);
    color: var(--file-tree-expand-button-color);
    display: flex;
    align-items: center;
    background-color: transparent;
    border: 0;
    padding: 0 var(--spacing-02);
    flex-grow: 1;
    overflow: hidden;

    &:hover {
      background-color: var(--file-tree-item-hover-bg);
    }

    h4 {
      color: var(--file-tree-expand-button-color);
      font-size: var(--font-size-02);
      line-height: var(--line-height-02);
      margin: 0;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .file-tree-toolbar-action-buttons {
    display: flex;
  }

  .file-tree-toolbar-action-button {
    color: var(--file-tree-expand-button-color);
    padding: var(--spacing-02);
    border-radius: var(--border-radius-full);

    &:hover {
      background-color: var(--file-tree-item-hover-bg);
    }

    &:active {
      color: var(--file-tree-expand-button-color);
    }
  }

  .file-tree {
    background-color: var(--file-tree-bg);
  }

  .file-tree ul.file-tree-list {
    margin: var(--spacing-02);
  }

  .file-tree-folder-list {
    border-left: 1px solid
      color-mix(in srgb, var(--border-primary) 24%, transparent);
    margin-left: 14px !important;
    margin-top: 0;

    &.file-tree-list {
      border-left: none;
      margin-left: var(--spacing-02) !important;

      > .file-tree-folder-list-inner {
        margin-left: 0;
      }
    }
  }

  .file-tree-folder-list-inner {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-02);
  }

  .item-name-button,
  .folder-expand-collapse-button {
    display: flex;
    align-items: center;
    height: 20px !important;
  }

  .file-tree ul.file-tree-list li .material-symbols.file-tree-expand-icon {
    margin-left: 0;
  }

  .file-tree ul.file-tree-list li .material-symbols.file-tree-icon {
    margin-left: 0;
    margin-right: 0;
  }

  // TODO ide-redesign-cleanup: Remove the !important overrides once
  // we have replaced the default styling
  .linked-file-highlight {
    background-color: var(--file-tree-bg) !important;
    color: var(--file-tree-icon-colour) !important;
    left: 14px !important;
  }

  .entity-name {
    color: var(--file-tree-item-color);
    border-radius: var(--border-radius-base);

    // TODO ide-redesign-cleanup: This is here to override the fake-full-width-bg
    // mixin. We can just remove that mixin when we clean this up.
    &::before {
      content: none !important;
    }
  }

  .item-name-button {
    margin-left: var(--spacing-02);
    overflow: hidden;

    span {
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .dnd-draggable-preview-item {
    border-radius: var(--border-radius-base);
  }
}

.ide-react-file-tree-panel {
  display: flex;
  flex-direction: column;

  // Prevent the file tree expanding beyond the boundary of the panel
  .file-tree {
    width: 100%;
  }
}

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

.context-menu-upwards {
  top: auto;
  bottom: 100%;
}

.editor-sidebar {
  background-color: var(--file-tree-bg);
  display: flex;
  flex-direction: column;
}

@mixin fake-full-width-bg($bg-color) {
  &::before {
    content: '\00a0';
    position: absolute;
    width: 9999px;
    left: -9999px;
    background-color: $bg-color;
  }
}

@include theme('default') {
  .file-tree {
    .toolbar {
      .toolbar-right,
      .toolbar-left {
        button {
          opacity: 0.8;

          &:hover,
          &:focus,
          &:active,
          &.active {
            background-color: rgba(125 125 125 / 20%);
          }

          &.active,
          &:active {
            background-color: rgba(125 125 125 / 40%);
          }
        }
      }
    }
  }
}

.file-tree {
  display: flex !important; // To work around jQuery layout's inline styles
  flex-direction: column;
  height: 100%;

  .file-tree-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
    width: inherit;
    height: inherit;
    font-size: var(--font-size-02);

    &.no-toolbar {
      top: 0;
    }
  }

  // TODO; Consolidate with "Project files" in Overleaf
  h3 {
    font-size: var(--font-size-03);
    border-bottom: 1px solid var(--border-primary);
    padding-bottom: var(--spacing-02);
    margin: var(--spacing-05);
  }

  .toolbar {
    .toolbar-right,
    .toolbar-left {
      button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        padding: 0;
        box-shadow: none;
        border-radius: var(--border-radius-base);
        border: none;

        &:hover,
        &:focus,
        &:active,
        &.active {
          background-color: rgb(125 125 125 / 10%);
          color: var(--toolbar-btn-color) !important;
        }

        &.active,
        &:active {
          background-color: rgb(125 125 125 / 20%);
        }
      }
    }
  }

  ul.file-tree-list {
    margin: 0;
    overflow: hidden auto;
    height: 100%;
    flex-grow: 1;
    position: relative;

    .entity > ul,
    ul[role='tree'] {
      margin-left: var(--spacing-08);
    }

    &::after {
      content: '';
      display: block;
      min-height: var(--spacing-08);
    }

    li {
      line-height: var(--file-tree-line-height);
      position: relative;

      .entity {
        user-select: none;
      }

      .entity > .entity-name {
        display: flex;
        align-items: center;

        & > button {
          background-color: transparent;
          border: 0;
          padding: 0;

          &.item-name-button {
            color: inherit;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: left;
            padding-right: var(--spacing-09);
            white-space: pre;
          }
        }
      }

      .entity-name {
        color: var(--file-tree-item-color);
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &.entity-name-react {
          text-overflow: clip;
        }

        background-color: transparent;

        @include fake-full-width-bg(transparent);

        &:hover {
          background-color: var(--file-tree-item-hover-bg);

          // When the entity is a subfolder, the DOM element is "indented" via margin-left. This makes the
          // element not fill the entire file-tree width (as it's spaced from the left-hand side via margin)
          // and, in consequence, the background gets clipped. The ::before pseudo-selector is used to fill
          // the empty space.
          @include fake-full-width-bg(var(--file-tree-item-hover-bg));
        }

        input {
          line-height: 1.6;
        }

        .entity-menu-toggle > .material-symbols {
          color: var(--content-primary-dark);
          vertical-align: middle;
        }
      }

      .material-symbols {
        color: var(--file-tree-icon-colour);

        &.file-tree-icon {
          margin-right: var(--spacing-02);
          margin-left: var(--spacing-04);
          vertical-align: sub;

          &.linked-file-icon {
            position: relative;
            left: -2px;

            + .linked-file-highlight {
              color: var(--file-tree-bg);
              background-color: var(--content-disabled);
              position: absolute;
              top: 14px;
              left: 20px;
              font-size: var(--font-size-01);
              border-radius: var(--spacing-01);
            }
          }
        }

        &.file-tree-folder-icon {
          margin-right: var(--spacing-02);
          vertical-align: sub;
        }

        &.file-tree-expand-icon {
          margin-left: var(--spacing-04);
          vertical-align: sub;
        }
      }

      .material-symbols.toggle {
        width: 24px;
        padding: var(--spacing-03);
        font-size: var(--font-size-03);
        color: var(--file-tree-icon-colour);
      }

      .file-tree-dropdown-toggle {
        display: flex;
        align-items: center;
        color: var(--content-primary-dark);
        line-height: 1.6;
        font-size: var(--font-size-05);
        padding: 0 var(--font-size-02) 0 var(--font-size-04);

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

        &::before {
          content: '\00B7\00B7\00B7';
          transform: rotate(90deg);
          letter-spacing: 0.5px;
        }
      }

      &.multi-selected {
        > .entity {
          > .entity-name {
            > div > .material-symbols,
            > button > .material-symbols,
            > .material-symbols,
            .entity-menu-toggle .material-symbols {
              color: var(--content-primary-dark);
            }

            > .material-symbols.linked-file-highlight {
              background-color: var(--bg-info-01);
            }

            @include fake-full-width-bg(var(--bg-info-01));

            color: var(--content-primary-dark);
            font-weight: bold;
            background-color: var(--bg-info-01);

            &:hover {
              background-color: var(--bg-info-02);

              @include fake-full-width-bg(var(--bg-info-02));
            }
          }
        }
      }

      .menu-button {
        position: absolute;
        right: 0;
      }

      .rename-input {
        display: block;
        position: absolute;
        top: 1px;
        left: 32px;
        right: 32px;
        color: var(--content-primary);

        input {
          width: 100%;
        }
      }

      > .entity > .entity-name {
        .entity-menu-toggle {
          display: none;
        }
      }

      .entity-limit-hit {
        line-height: var(--file-tree-line-height);
        color: var(--file-tree-item-color);
        margin-left: var(--spacing-05);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .entity-limit-hit-message {
        font-style: italic;
      }

      .material-symbols .entity-limit-hit-tooltip-trigger {
        margin-left: var(spacing-03);
        cursor: pointer;
      }
    }
  }

  &:not(.multi-selected) {
    ul.file-tree-list li.selected {
      > .entity {
        > .entity-name {
          background-color: var(--file-tree-item-selected-bg);
          color: var(--file-tree-item-selected-color);

          > div > .material-symbols,
          > button > .material-symbols,
          > .material-symbols,
          .entity-menu-toggle .material-symbols {
            color: var(--file-tree-item-selected-color);
          }

          > .material-symbols.linked-file-highlight {
            background-color: var(--bg-info-01);
          }

          @include fake-full-width-bg(var(--file-tree-item-selected-bg));

          font-weight: bold;
          padding-right: var(--spacing-09);

          button {
            font-weight: inherit;
          }

          .entity-menu-toggle {
            display: inline-block;
            background-color: transparent;
            border: 0;
            padding-right: var(--spacing-02);
            padding-left: var(--spacing-02);
          }
        }
      }
    }
  }

  // while dragging, the previously selected item gets no highlight
  ul.file-tree-list.file-tree-dragging li.selected .entity .entity-name {
    @include fake-full-width-bg(transparent);

    font-weight: normal;
    background-color: transparent;
    color: var(--file-tree-item-color);

    .material-symbols {
      color: var(--content-disabled) !important;
    }
  }

  // the items being dragged get the full "hover" colour
  ul.file-tree-list.file-tree-dragging
    li
    .entity.file-tree-entity-dragging
    .entity-name {
    background-color: var(--file-tree-item-dragging-bg);

    @include fake-full-width-bg(var(--file-tree-item-dragging-bg));

    color: var(--file-tree-item-dragging-color);

    .material-symbols {
      color: var(--file-tree-item-icon-dragging-color) !important;
    }
  }

  // the drop target gets the "selected" colour
  ul.file-tree-list.file-tree-dragging
    li.dnd-droppable-hover
    .entity
    .entity-name {
    background-color: var(--file-tree-item-selected-bg);

    @include fake-full-width-bg(var(--file-tree-item-selected-bg));

    color: var(--file-tree-item-selected-color);

    .material-symbols {
      color: var(--file-tree-item-selected-color) !important;
    }
  }

  .dnd-draggable-preview-layer {
    position: absolute;
    pointer-events: none;
    z-index: 100;
    width: 100%;
    height: 100%;
    overflow: hidden;

    &.dnd-droppable-hover {
      border: 3px solid var(--file-tree-item-selected-bg);
    }
  }

  .dnd-draggable-preview-item {
    color: var(--file-tree-item-dragging-preview-colour);
    background-color: var(--file-tree-item-dragging-preview-bg);
    width: 75%;
    padding-left: var(--spacing-08);
    line-height: 2.05;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .disconnected-overlay {
    background-color: var(--file-tree-bg);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: 0.5;
    cursor: wait;
  }
}

.modal-new-file {
  padding: 0;

  table {
    width: 100%;
    table-layout: fixed;

    td {
      vertical-align: top;
    }
  }

  .toggle-file-type-button {
    font-size: var(--font-size-02);
    margin-top: calc(var(--spacing-05) * -1);

    .btn {
      display: inline-block;
      padding: 0;
      vertical-align: baseline;
      font-size: inherit;
    }

    .btn:focus-within {
      outline: none;
      text-decoration: none;
    }
  }
}

.modal-new-file-list {
  background-color: var(--bg-light-secondary);
  width: 220px;

  ul {
    li {
      /* old modal (a) */
      a {
        color: var(--content-secondary);
        padding: var(--spacing-03);
        display: block;
        text-decoration: none;
      }

      /* new modal (button) */
      .btn {
        color: var(--content-secondary);
        padding: var(--spacing-03);
      }

      .btn:hover {
        text-decoration: none;
      }

      .btn:focus {
        outline: none;
        text-decoration: none;
        background-color: white;
      }
    }

    li.active {
      background-color: white;

      /* old modal (a) */
      a {
        color: var(--link-ui);
      }

      /* new modal (button) */
      .btn {
        color: var(--link-ui);
        text-decoration: none;
      }
    }

    li:hover {
      background-color: white;
    }
  }
}

.file-tree-error {
  text-align: center;
  color: var(--content-secondary-dark);
  padding: 20px;
}

.file-tree-modal-alert {
  margin-top: var(--spacing-06);
}

.file-tree-entity-button,
.file-tree-entity-details {
  display: flex;
  width: 100%;
  color: inherit;

  // TODO ide-redesign-cleanup: Remove !important when we clean up the old file tree
  padding: var(--spacing-02) !important;
  text-overflow: ellipsis;
  overflow: hidden;
}

.btn.modal-new-file-mode {
  justify-content: left;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.modal-new-file-body {
  padding: 20px;
  padding-top: var(--spacing-03);
}

.modal-new-file-body-upload {
  padding-top: 20px;
}

.modal-new-file-body-conflict {
  background-color: var(--bg-danger-03);
  border: 1px dashed var(--border-danger);
  min-height: 400px;
  border-radius: 3px;
  color: var(--content-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--spacing-05);
}

/* stylelint-disable selector-class-pattern */
.modal-new-file-body-upload .uppy-Root {
  font-family: inherit;
}

.modal-new-file-body-upload .uppy-Dashboard {
  .uppy-Dashboard-inner {
    border: none;
  }

  .uppy-Dashboard-dropFilesHereHint {
    inset: 0;
  }

  .uppy-Dashboard-AddFiles {
    margin: 0;
    border: 1px dashed var(--border-primary);
    height: 100%;

    .uppy-Dashboard-AddFiles-title {
      font-size: inherit;
    }
  }

  .uppy-Dashboard-AddFiles-title {
    width: 26em; // sized to create a wrap between the sentences
    max-width: 100%;
  }

  .uppy-Informer p {
    background-color: var(--bg-info-03);
    border: 1px solid var(--blue-20);
    border-radius: var(--border-radius-base);
    color: var(--content-primary);
    font-size: var(--font-size-03);
  }
}