OSJ/plugins/themes/default/styles/pages/viewPdf.less

/**
 * @file plugins/themes/default/styles/pages/viewPdf.less
 *
 * Copyright (c) 2014-2021 Simon Fraser University
 * Copyright (c) 2003-2021 John Willinsky
 * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
 *
 * @brief Styles applying to the lightweight page for viewing PDFs
 * @link templates/frontend/pages/viewPdf.tpl
 */

.header_view {
	z-index: 2;
	position: relative;
	background: @primary;

	a {
		line-height: @line-header;
		text-decoration: none;
	}

	.return {
		position: absolute;
		top: 0;
		left: 0;
		width: @line-header;
		height: @line-header;
		line-height: @line-header;
		background: @bg;
		color: @primary;
		text-align: center;

		&:before {
			.fa();
			content: @fa-var-arrow-left;
		}

		&:hover,
		&:focus {
			background: @primary-lift;
			color: #fff;
		}
	}

	.title {
		display: block;
		padding-left: @line-header + @base;
		max-width: 100%;
		overflow-x: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: @font-sml;
		color: #fff;

		&:hover,
		&:focus {
			background: @primary-lift;
		}
	}

	.download {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: @line-header;
		background: @bg;
		text-align: center;

		&:hover,
		&:focus {
			background: @primary-lift;
			color: #fff;
		}

		&:before {
			.fa();
			content: @fa-var-download;
		}

		.label {
			display: none;
		}
	}

	@media(min-width: @screen-tablet) {

		.title {
			font-size: @font-base;
		}

		.download {
			width: auto;
			padding: 0 @double;

			.label {
				display: inline-block;
			}

			// Prevent duplicate download labels once the regular label is visible
			.pkp_screen_reader {
				display: none;
			}
		}
	}
}

.galley_view {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow-y: hidden;

	iframe {
		width: 100%;
		height: 100%;
		padding-top: @line-header;
		border: none;
	}

	&.galley_view_with_notice {

		iframe {
			padding-top: @line-header * 3;
		}
	}

	.galley_view_notice {
		position: absolute;
		top: @line-header;
		width: 100%;
		height: @line-header * 2;
		background: @no;
	}

	.galley_view_notice_message {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		transform: translate(-50%, -50%);
		color: @text-bg-base;
		font-weight: @bold;
		text-align: center;

		a {
			color: @text-bg-base;
			text-decoration: underline;
		}
	}
}