overleaf/services/web/public/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;
	z-index: 1;
	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 = false) or (@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;
	}

.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: #FFF;
	padding: 5px 10px;
	line-height: 1;
}

.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 {

		}
			.history-entry-change-action {
				margin-right: 0.5em;
			}

			.history-entry-change-doc {
				color: @history-highlight-color;
				font-weight: bold;
				word-break: break-all;
				.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;
		}
			.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-tree-inner when (@is-overleaf = false) {
	font-size: 0.8rem;
}

	.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 {
				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;
			}
			&:hover when (@is-overleaf = true) {
				.fake-full-width-bg(@file-tree-item-hover-bg);
			}
		}
		.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 {
				background-color: @file-tree-item-hover-bg;
			}
			&:focus {
				color: @file-tree-item-focus-selected-color;
			}
		}
			.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: .5em;
					font-size: .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: .5em;
					.history-file-entity-link-selected & {
						color: #FFF;
					}
				}

				.history-file-operation-icon {
					margin-left: .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;
					}


		.history-file-entity-link-selected when (@is-overleaf = false) {
			color: @brand-primary;
			&:hover,
			&:focus {
				color: @brand-primary;
			}
			.history-file-entity-icon {
				color: @brand-primary;
			}
		}