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

@versionsListWidth:200px;
@versionsListPadding:10px;

#diffViewArea{
	position: absolute;
	left: @versionsListWidth + 1px;
	right: 0;
	padding: 0px 12px;
	overflow: scroll;
	height: 100%;
}

#historySideBar {
	border-right: 1px solid #999;
	height: 100%;
	width: @versionsListWidth;
	position: absolute;

	.take-snapshot-wrapper {
		height: 30px;
		text-align: center;
		padding: 10px;
		border-bottom: 1px solid #999;
	}

	#versionListArea {
		overflow: scroll;
		position: absolute;
		left: 0px;
		right: 0px;
		top: 51px;
		bottom: 0px;
		#version-list {
			margin: 0;
			li {
				a {
					.border-radius(0);
					.version-date {
						text-align: right;
						font-size: 10px;
						text-decoration: none;
						color: #666;
					}
					&:hover {
						background-color: #DDD;
					}
				}
			}
			li.active {
				a {
					color: white;
					.version-date {
						color: white;
					}
					&:hover {
						background-color: @linkColor;
					}
				}
			}
			.loading, .empty-message {
				margin-bottom: 100px;
				padding-left: 12px;
			}
		}
	}
}

#enableVersioningMessage {
	text-align: center;
	.message {
		font-size: 18px;
		margin: 12px;
		margin-top: 36px;
	}
}

#snapshotComment {
	width: 520px;
}

@fileDiffBorder: #D0D0D0;

.diffView {
	h2 {
		margin: 6px 0 2px;
	}
}

.fileDiffView {
	margin-top: 12px;

	.fileHeader {
		h3 {
			font-weight: normal;
			padding-left: 6px;
			&.created, &.deleted {
				padding-left: 6px + 22px;
				background-repeat: no-repeat;
				background-position: 6px center;
			}
			&.created {
				background-image: url(/img/silk/created.png);
			}
			&.deleted {
				background-image: url(/img/silk/deleted.png);
			}
		}
		.nav {
			margin-bottom: 0
		}
		padding: 4px;
		border: 1px solid @fileDiffBorder;
		background-color: #f9f9f9;
		.clearfix();
	}

	.rawFileContent {
		.border-radius(0);
		border-top: none;
		white-space: pre-wrap;
		word-break: normal;
		background-color: white;
	}

	.binaryFileDiff {
		border: 1px solid @fileDiffBorder;
		border-top: none;
		background-color: #F9F9F9;
		text-align: center;
		padding: 12px 6px;
	}
	
	.fileMoved {
		line-height: @baseLineHeight * 1.5;
		font-size: 18px;
		padding-left: 6px + 20px;
		background-image: url(/img/silk/moved.png);
		background-repeat: no-repeat;
		background-position: 6px 4px;
	}

	table.sectionDiff {
		margin: 0;
		border: 1px solid @fileDiffBorder;
		border-top: none;
		width: 100%;
		background-color: white;

		td {
			vertical-align: top;
			line-height: @baseLineHeight;
		}

		.old_line_number, .new_line_number {
			border-right: 1px solid @fileDiffBorder;
			width: 30px;
			color: #999;
			text-align: center;
		}
		
		.symbol {
			width: 8px;
		}

		.content {
			white-space: pre-wrap;
		}

		tr.added {
			.symbol, .content {
				background-color: #ddffdd;
				color: green;
			}
		}

		tr.removed {
			.symbol, .content {
				background-color: #ffdddd;
				color: red;
			}
		}
	}

	.sectionSeparator {
		height: 6px;
		background-color: #f9f9f9;
		border: 1px solid @fileDiffBorder;
		border-top: none;
	}
}