Overleaf/services/web/public/stylesheets/app/editor/pdf.less

.pdf-viewer, .pdf-logs, .pdf-errors, .pdf-uncompiled {
	.full-size;
	top: 58px;
}

.pdf-logs, .pdf-errors, .pdf-uncompiled, .pdf-validation-problems{
	padding: @line-height-computed / 2;
}

.pdf-uncompiled {
	.fa {
		color: @blue;
	}
}

.pdf-viewer {
	iframe {
		width: 100%;
		height: 100%;
		border: none;
	}
	.pdfjs-viewer {
		.full-size;
		background-color: @gray-lighter;
		overflow: scroll;
		canvas, div.pdf-canvas {
			background: white;
			box-shadow: black 0px 0px 10px;
		}
		div.pdf-canvas.pdfng-empty {
			background-color: white;
		}
		div.pdf-canvas.pdfng-loading {
			background-color: white;
		}
		.page-container {
			margin: 10px auto;
			padding: 0 10px;
			box-sizing: content-box;
		}
	}
	.progress-thin {
		position: absolute;
		top: -2px;
		height: 3px;
		left: 0;
		right: 0;
		.progress-bar {
			height: 100%;
			background-color: @link-color;
		}
	}
	.pdfjs-controls {
		position: absolute;
		padding: @line-height-computed / 2;
		top: 0;
		left: 0;
		display: inline-block;
		.btn-group {
			transition: opacity 0.5s ease, visibility 0 linear 0.5s;
			visibility: hidden;
			opacity: 0;
		}
		&:hover, &.flash {
			.btn-group {
				transition: none;
				visibility: visible;
				opacity: 1;
			}
		}
		i.fa-arrows-h {
			border-right: 2px solid white;
			border-left: 2px solid white;
		}
		i.fa-arrows-v {
			border-top: 2px solid white;
			border-bottom: 2px solid white;
		}
	}
}

.pdf .toolbar {
	.toolbar-right {
		margin-right: @line-height-computed / 2;
		a {
			&:hover {
				i {
					box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
					border-color: @gray-dark;
				}
			}
			i {
				display: inline-block;
				width: 16px;
				height: 16px;
				border: 1px solid @gray-light;
				margin-top: 5px;
			}
			i.full-screen {
				border-top-width: 3px;
				border-radius: 2px;
			}
			i.split-screen {
				width: 7px;
				border-top-width: 3px;
				border-radius: 2px;
				margin-left: 2px;
			}
		}
	}
}

.pdf-logs {
	overflow: auto;
	.alert {
		font-size: 0.9rem;
		margin-bottom: @line-height-computed / 2;
		cursor: pointer;
		.line-no {
			float: right;
			color: @gray;
			font-weight: 700;

			.fa {
				display: none;
			}
		}
		.entry-message {
			font-weight: 700;
			//font-family: @font-family-monospace;
		}
		.entry-content {
			white-space: pre-wrap;
			font-size: 0.8rem;
			//font-family: @font-family-monospace;
		}

		&:hover .line-no {
			color: inherit;
			.fa {
				display: inline-block;
			}
		}

		&.alert-danger:hover {
			background-color: darken(@alert-danger-bg, 5%);
		}

		&.alert-warning:hover {
			background-color: darken(@alert-warning-bg, 5%);
		}

		&.alert-info:hover {
			background-color: darken(@alert-info-bg, 5%);
		}

	}
	pre {
		font-size: 12px;
	}
	.dropdown {
		position: relative;
	}
}

.synctex-controls {
	top: 68px;
	padding: 0px 2px;
	.btn-xs {
		line-height: 1.3;
		padding: 0 2px 0;
	}
}

.editor-dark {
	.pdf-logs {
		background-color: lighten(@editor-dark-background-color, 10%);
	}
	.pdfjs-viewer {
		background-color: lighten(@editor-dark-background-color, 10%);
	}
	.pdf .toolbar {
		.toolbar-right a {
			i {
				border-color: @gray;
			}
			&:hover {
				i {
					border-color: @gray-light;
				}
			}
		}
	}
}

.keyboard-tooltip {
	.tooltip-inner {
		max-width: none;
	}
}

.keyboard-shortcut {
	white-space: nowrap;
}

.card-hint:extend(.card-thin) {
	margin-top: 10px;
	padding-bottom: 7px;
	cursor: default;

	&-icon-container {
		background: currentColor;
		width: 2.5rem;
		height: 2.5rem;
		font-size: 1.5rem;
		text-align: center;
		border-radius: 50%;
		float: left;
		margin-right: 10px;

		.fa {
			color: #FFF;
		}

		.alert-danger & {
			color: @alert-danger-border;
		}

		.alert-warning & {
			color: @alert-warning-border;
		}

		.alert-info & {
			color: @alert-info-border;
		}

	}

	&-text, 
	&-feedback-label {
		color: @gray-dark;
		font-size: 0.9rem;
		margin-bottom: 20px;
	}

	&-text {
		min-height: 35px;
	}

	&-feedback-label {
		font-size: inherit;
		margin-right: 0.5em;
		margin-bottom: 0;
		font-weight: normal;
	}

	&-ext-link,
	&-feedback {
		display: inline-block;
		font-size: 0.8rem;
	}
	
	&-actions a,
	&-text a {
		.alert-danger & {
			color: @alert-danger-text;
		}

		.alert-warning & {
			color: @alert-warning-text;
		}

		.alert-info & {
			color: @alert-info-text;
		}
	}

	&-feedback {
		color: @gray-dark;
		float: right;
	}

	& + p {
		margin-top: 20px;
	}
}