Overleaf/services/web/public/stylesheets/less/trackchanges.less

@changesListWidth:   250px;
@changesListPadding: 10px;

#trackChangesPanel {
	.track-changes-diff {
		position: absolute;
		right: @changesListWidth + 1px;
		left: 0;
		top: 0;
		bottom: 0;
		padding: 0px 12px;
		height: 100%;
		.ace_editor {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			.ace_active-line, .ace_cursor-layer, .ace_gutter-active-line {
				display: none;
			}
		}
	}

	.track-changes-side-bar {
		border-left: 1px solid #999;
		height: 100%;
		width: @changesListWidth;
		position: absolute;
		right: 0;
		background-color: white;

		.track-changes-header {
			background-color: #282828;
			h3 {
				color: white;
				padding-left: 8px;
				font-size: 1.2em;
			}
			a {
				color: white;
				position: absolute;
				top: 6px;
				right: 8px;
			}
			height: 30px;
		}

		.change-list-area {
			overflow: scroll;
			position: absolute;
			left: 0px;
			right: 0px;
			top: 30px;
			bottom: 0px;
		}
	}

	.deleted-change-background,
	.deleted-change-foreground,
	.inserted-change-background,
	.change-name-marker,
	.changes-before,
	.changes-after {
		position: absolute;
		z-index: 2;
	}

	.change-name-marker {
		font-size: 0.8em;
		padding: 2px 6px;
		.border-radius(3px 3px 3px 3px);
		position: absolute;
		border: 1px solid #999;
		left: 0;
		white-space: pre;
	}

	.changes-before {
		top: 6px;
		right: 6px;
	}
	.changes-after {
		bottom: 6px;
		right: 6px;
	}
	.changes-before, .changes-after {
		padding: 4px 8px;
		background-color: #eee;
		border: 1px solid #999;
		.border-radius(3px);
	}

	ul.change-list {
		li {
			position: relative;
			border-bottom: 1px solid #ccc;
			cursor: pointer;
			.change-selectors {
				.change-selector-from {
					position: absolute;
					bottom: 5px;
					left: 8px;
					opacity: 0.8;
				}
				.change-selector-to {
					position: absolute;
					top: 5px;
					left: 8px;
					opacity: 0.8;
				}
				.range {
					position: absolute;
					left: 12px;
					width: 4px;
					top: 0;
					bottom: 0;
				}
			}
			.change-description {
				padding: 6px 4px 6px 30px;
				min-height: 38px;
			}
			.change-name {
				font-size: 0.9em;
				color: #666;
				text-transform: capitalize;
			}
			.color-square {
				display: inline-block;
				height: 10px;
				width: 10px;
				margin-right: 4px;
				margin-bottom: -1px;
			}
			.restore {
				a {
					display: block;
					padding: 4px;
					text-align: center;
					border-top: 1px solid #ccc;
				}
				display: none;
			}
			&:hover {
				background-color: #eaeaea;
			}
		}
		li.loading-changes, li.empty-message {
			padding: 6px;
		}
		li.selected {
			background-color: #eaeaea;
			.change-selectors {
				.range {
					background-color: rgb(0, 143, 255);
				}
			}
		}
		li.selected-to {
			.change-selectors {
				.range {
					top: 10px;
				}
				.change-selector-to {
					opacity: 1;
				}
			}
		}
		li.selected-from {
			.change-selectors {
				.range {
					bottom: 37px;
				}
				.change-selector-from {
					opacity: 1;
					bottom: 32px;
				}
			}
			.restore {
				display: block;
			}
		}
	}
	ul.change-list.hover-state {
		li {
			.change-selectors {
				.range {
					background-color: transparent;
					top: 0;
					bottom: 0;
				}
			}
		}
		li.hover-selected {
			.change-selectors {
				.range {
					background-color: #999;
				}
			}
		}
		li.hover-selected-to {
			.change-selectors {
				.range {
					top: 10px;
				}
				.change-selector-to {
					opacity: 1;
				}
			}
		}
		li.hover-selected-from {
			.change-selectors {
				.range {
					bottom: 10px;
				}
				.change-selector-from {
					opacity: 1;
				}
			}
		}
		li.selected-from.hover-selected-from {
			.change-selectors {
				.range {
					bottom: 37px;
				}
			}
		}
	}
}