Overleaf/services/web/frontend/stylesheets/app/editor/history-v2.less

.history-toolbar {
  display: flex;
  align-items: center;
  position: absolute;
  width: 100%;
  top: @ide-body-top-offset;
  height: @editor-toolbar-height;
  line-height: 1;
  font-size: @font-size-small;
  background-color: @history-toolbar-bg-color;
  color: @history-toolbar-color;
  padding-left: (@line-height-computed / 2);
}

.history-compare-mode-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  line-height: 1;
  font-size: @font-size-small;
  background-color: @history-toolbar-bg-color;
  height: @editor-toolbar-height;
  color: @history-toolbar-color;
  padding: 0 10px;
}

.history-toolbar when (@is-overleaf-light) {
  border-bottom: @toolbar-border-bottom;
}

.history-toolbar-selected-version {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: (@line-height-computed / 2);
}
.history-toolbar-time,
.history-toolbar-selected-label {
  font-weight: bold;
}
.history-toolbar-actions {
  flex-grow: 1;
  flex-shrink: 0;
}
.history-toolbar-btn,
.history-toolbar-btn-danger {
  .btn;
  .btn-xs;
  padding-left: @padding-small-horizontal;
  padding-right: @padding-small-horizontal;
  margin-right: (@line-height-computed / 2);
}
.history-toolbar-btn {
  .btn-info;
}
.history-toolbar-btn-danger {
  .btn-danger;
}
.history-toolbar-entries-list {
  flex: 0 0 @changesListWidth;
  padding: 0 10px;
  border-left: 1px solid @editor-border-color;
  display: flex;
  justify-content: center;
}

.history-entries {
  font-size: @history-base-font-size;
  color: @history-base-color;
  height: 100%;
  background-color: @history-base-bg;
  position: relative;
  &.history-entries-dragging {
    cursor: row-resize;
  }
}

.history-entry-day {
  display: block;
  background-color: @history-entry-day-bg;
  color: @history-entry-day-color;
  padding: 5px 10px;
  line-height: 1;
  position: sticky;
  top: 0;
}

.history-entry-toV-handle,
.history-entry-fromV-handle {
  position: absolute;
  background-color: @history-entry-handle-bg;
  height: @history-entry-handle-height;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  cursor: row-resize;

  &.ui-draggable-dragging {
    opacity: 0;
  }

  &::after {
    content: '\00b7\00b7\00b7\00b7';
    position: absolute;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    width: 100%;
    font-size: 20px;
    color: #fff;
    height: @history-entry-handle-height;
    line-height: @history-entry-handle-height / 2;
  }
}

.history-entry-fromV-handle {
  top: auto;
  bottom: 0;
}

.history-entry-details {
  position: relative;
  background-color: #fff;
  border-bottom: solid 2px @history-base-bg;
  padding: 5px 10px;
  cursor: pointer;
}

.history-version-with-label {
  .history-entry-details;
  padding: 7px 10px;
}

.history-entry-selected .history-entry-details,
.history-version-with-label-selected & {
  background-color: @history-entry-selected-bg;
  color: #fff;
}

.history-entry-hover-selected .history-entry-details,
.history-entry-hover-selected.history-entry-selected .history-entry-details,
.history-version-with-label-hover-selected &,
.history-version-with-label-hover-selected.history-entry-selected & {
  background-color: tint(@history-entry-selected-bg, 20%);
  color: #fff;
}

.history-entry-selected-to .history-entry-details,
.history-entry-hover-selected-to .history-entry-details,
.history-version-with-label-selected-to &,
.history-version-with-label-hover-selected-to & {
  padding-top: @history-entry-handle-height + 5px;
}

.history-entry-selected-from .history-entry-details,
.history-entry-hover-selected-from .history-entry-details,
.history-version-with-label-selected-from &,
.history-version-with-label-hover-selected-from & {
  padding-bottom: @history-entry-handle-height + 5px;
}

.history-label {
  display: inline-block;
  color: @history-entry-label-color;
  font-size: @font-size-small;
  margin-bottom: 3px;
  margin-right: 10px;
  white-space: nowrap;
  .history-entry-selected &,
  .history-entry-hover-selected &,
  .history-version-with-label-selected &,
  .history-version-with-label-hover-selected & {
    color: @history-entry-selected-label-color;
  }
  &.history-label-pseudo-current-state {
    .history-entry-selected &,
    .history-entry-hover-selected &,
    .history-version-with-label-selected &,
    .history-version-with-label-hover-selected & {
      color: @history-entry-selected-pseudo-label-color;
    }
  }
}
.history-label-comment,
.history-label-delete-btn {
  padding: 0 @padding-xs-horizontal 1px @padding-xs-horizontal;
  border: 0;
  background-color: @history-entry-label-bg-color;
  .history-label-pseudo-current-state & {
    background-color: @history-entry-pseudo-label-bg-color;
  }
  .history-entry-selected &,
  .history-entry-hover-selected &,
  .history-version-with-label-selected &,
  .history-version-with-label-hover-selected & {
    background-color: @history-entry-selected-label-bg-color;
  }
}
.history-label-comment {
  display: block;
  float: left;
  border-radius: 9999px;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  .history-label-own & {
    padding-right: (@padding-xs-horizontal / 2);
    border-radius: 9999px 0 0 9999px;
  }
}
.history-label-delete-btn {
  padding-left: (@padding-xs-horizontal / 2);
  padding-right: @padding-xs-horizontal;
  border-radius: 0 9999px 9999px 0;
  &:hover {
    background-color: darken(@history-entry-label-bg-color, 8%);
    .history-entry-selected &,
    .history-entry-hover-selected &,
    .history-version-with-label-selected &,
    .history-version-with-label-hover-selected & {
      background-color: darken(@history-entry-selected-label-bg-color, 8%);
    }
  }
}

.history-label-tooltip {
  white-space: normal;
  padding: (@line-height-computed / 4);
  text-align: left;
}
.history-label-tooltip-title,
.history-label-tooltip-owner,
.history-label-tooltip-datetime {
  margin: 0 0 (@line-height-computed / 4) 0;
}
.history-label-tooltip-title {
  font-weight: bold;
}
.history-label-tooltip-datetime {
  margin-bottom: 0;
}

.history-entry-changes {
  .list-unstyled;
  margin-bottom: 3px;
}
.history-entry-change {
  word-break: break-all;
}
.history-entry-change-action {
  margin-right: 0.5em;
}

.history-entry-change-doc {
  color: @history-highlight-color;
  font-weight: bold;

  .history-entry-selected &,
  .history-entry-hover-selected &,
  .history-version-with-label-selected & {
    color: #fff;
  }
}
.history-entry-metadata {
}
.history-entry-metadata-time {
  white-space: nowrap;
}

.history-entry-metadata-users {
  display: inline;
  padding: 0;
  margin-right: 0.5em;
}
.history-entry-metadata-user {
  display: inline;
  &::after {
    content: ', ';
  }
  &:last-of-type::after {
    content: none;
  }
}

.history-entries-list-upgrade-prompt {
  background-color: #fff;
  margin-bottom: 2px;
  padding: 5px 10px;
  .change-list-compare & {
    font-size: @font-size-small;
  }
}

.history-labels-list,
.history-labels-list-compare {
  .history-entries;
  overflow-y: auto;
}
.history-labels-list-compare {
  background-color: transparent;
}

.history-file-tree-inner {
  .full-size;
  overflow-y: auto;
  background-color: @file-tree-bg;

  .loading {
    color: #fff;
    font-size: @history-base-font-size;
    text-align: center;
    font-family: @font-family-serif;
  }
}

.tooltip-history-file-tree {
  font-size: 12px;
  .tooltip-inner {
    max-width: 400px;
    text-align: left;
  }
}

.history-file-entity-wrapper {
  color: #fff;
  margin-left: (@line-height-computed / 2);
}
.history-file-entity-link {
  display: block;
  position: relative;
  color: @file-tree-item-color;
  line-height: @file-tree-line-height;
  &:hover {
    .fake-full-width-bg(@file-tree-item-hover-bg);
    background-color: @file-tree-item-hover-bg;
    color: @file-tree-item-color;
    text-decoration: none;
  }
  &:focus {
    color: @file-tree-item-focus-color;
    outline: none;
    text-decoration: none;
  }
}
.history-file-entity-link-selected {
  background-color: @file-tree-item-selected-bg;
  font-weight: bold;
  color: #fff;
  .fake-full-width-bg(@file-tree-item-selected-bg);
  &:hover,
  &:focus {
    background-color: @file-tree-item-selected-bg;
    .fake-full-width-bg(@file-tree-item-selected-bg);
    color: #fff;
    pointer-events: none;
  }
}
.history-file-entity-name-container {
  display: flex;
  align-items: center;
}
.history-file-entity-name {
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-file-entity-operation-badge {
  flex: 0 0 auto;
  text-transform: lowercase;
  margin-left: 0.5em;
  font-size: 0.7em;
  background: @history-file-badge-bg;
  color: @history-file-badge-color;
  border-radius: 8px;
  line-height: 1;
  padding: 2px 4px 3px;
  margin-top: 2px;
}

.history-file-entity-icon,
.history-file-operation-icon {
  flex: 0 0 auto;
  color: @file-tree-item-icon-color;
  font-size: 14px;
  margin-right: 0.5em;
  .history-file-entity-link-selected & {
    color: #fff;
  }
}

.history-file-operation-icon {
  margin-left: 0.5em;
  margin-right: 0;
}
.history-file-entity-name-edited,
.history-file-entity-name-added,
.history-file-entity-name-removed,
.history-file-entity-name-renamed {
}
.history-file-entity-name-removed {
  text-decoration: line-through;
}