OSJ/plugins/themes/default/styles/objects/article_details.less

/**
 * @file styles/objects/article_details.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 a view of an article with all details
 * @link templates/frontend/objects/article_details.tpl
 */
.obj_article_details {

	> .page_title {
		margin: 0;
	}

	> .subtitle {
		margin: 0;
		font-size: @font-base;
		line-height: @line-lead;
		font-weight: @normal;
	}

	.row {
		margin-top: @triple;
	}

	.item {
		padding-top: @double;
		padding-bottom: @double;

		> *:first-child {
			margin-top: 0;
		}

		> *:last-child {
			margin-bottom: 0;
		}

		> h2 + p {
			margin-top: 0;
		}
	}

	.sub_item {
		margin-bottom: @double;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.main_entry {

		.item {

			.label {
				margin: 0 0 @double;
				font-family: @font-heading;
				font-size: @font-bump;
				font-weight: @bold;
			}

			&.doi .label,
			&.keywords .label {
				display: inline;
				font-size: @font-base;
			}
		}

		.sub_item {

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


	.authors {
		&:extend(.pkp_unstyled_list);

		li {
			margin-bottom: @base;
		}

		.name {
			font-weight: bold;
			display: block;
		}

		.userGroup {
			display: block;
		}
		.orcid {
			display: block;
			font-size: @font-sml;
			line-height: @double;

			a {
				vertical-align: middle;
			}
		}

		.orcid_icon {
			width: @double;
			height: @double;
		}

		.affiliation {
			font-size: @font-sml;
			color: @text-light;
		}
	}

	.author_bios {

		.sub_item {

			.label {
				margin-bottom: 0;
			}

			.value > p:first-child {
				margin-top: 0;
			}
		}
	}

	.item.doi,
	.item.keywords {
		padding-top: 0;
	}

	.galleys_links {
		&:extend(.pkp_unstyled_list);
		display: flex;
		flex-flow: row nowrap;
		justify-content: start;

		li {
			margin-inline-end: 1rem;
		}
	}

	.supplementary_galleys_links {
		&:extend(.pkp_unstyled_list);
		margin-top: @base;
	}

	.copyright {
		font-size: @font-sml;
		line-height: @line-sml;

		a[rel="license"] + p {
			margin-top: 0;
		}
	}

	.entry_details {
		margin-left: -@double;
		margin-right: -@double;
		border-top: @bg-border;

		.item {
			padding: @double;
			border-bottom: @bg-border;
			word-wrap: break-word;

			&:last-child {
				border-bottom: none;
			}

			.label {
				margin: 0;
				font-family: @font-heading;
				font-size: @font-sml;
				font-weight: @normal;
				color: @text-light;
			}
		}
	}

	.categories {
		.pkp_unstyled_list;
	}

	.versions ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.citation_display {

		.value {
			font-size: @font-sml;
		}

		// Hide the bibliography number produced by some CSL styles
		.csl-left-margin {
			display: none;
		}

		[aria-hidden="true"] {
			display: none;
		}

		.citation_formats {
			margin-top: 1em;
			border: @form-border;
			border-radius: @radius;
		}

		.citation_formats_button {
			position: relative;
			background: transparent;
			border: none;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
			box-shadow: none;
			padding: 0 1em;
			width: 100%;
			font-family: @font-heading;
			font-weight: @normal;
			color: @text-light;
			text-align: left;

			&:after {
				.fa();
				content: @fa-var-caret-down;
				position: absolute;
				top: 50%;
				right: 1em;
				transform: translateY(-50%);
			}

			&[aria-expanded="true"] {

				&:after {
					content: @fa-var-caret-up;
				}
			}

			&:focus {
				background: @bg-shade;
				outline: 0;
			}
		}

		.citation_formats_styles {
			.pkp_unstyled_list;

			a {
				display: block;
				padding: 0.5em 1em;
				border-bottom: @bg-border;
				text-decoration: none;

				&:focus {
					background: @bg-shade;
					outline: 0;
				}
			}

			li:last-child a {
				border-bottom: none;
			}
		}

		.citation_formats_list .label {
			padding: 1em 1em 0.25em 1em;
		}

		.citation_formats_styles + .label {
			border-top: @bg-border;
		}

		span {
			margin-right: 0.5em;
		}
	}

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

		.entry_details {
			margin-left: -@triple;
			margin-right: -@triple;
		}

	}

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

		.row {
			margin-left: -@double;
			margin-right: -@double;
			border-top: @bg-border;
			border-bottom: @bg-border;
		}

		.main_entry {
			float: left;
			width: @screen-tablet-container - @sidebar-width;
			border-right: @bg-border;
		}

		.item {
			padding: @double;

			.label {
				margin: 0 0 @double;
				font-family: @font-heading;
				font-size: @font-bump;
				font-weight: @bold;
			}

			&.doi .label,
			&.keywords .label {
				display: inline;
				font-size: @font-base;
			}
		}

		.entry_details {
			float: left;
			width: @sidebar-width;
			margin: 0 0 0 -1px; // border overlap with main content
			border-top: none;
			border-left: @bg-border;

			.item {
				margin-right: -1px; // border reach out to edge
				border-bottom: @bg-border;

				&:last-child {
					border-bottom: none;
				}
			}
		}
	}

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

		.row {
			margin-left: -@triple;
			margin-right: -@triple;
		}

		.main_entry {
			width: @screen-desktop-container - (@sidebar-width * 2);
		}

		.item {
			padding: @triple;
		}
	}


	@media(min-width: @screen-lg-desktop) {

		.main_entry {
			width: @screen-lg-desktop-container - (@sidebar-width * 2);
		}
	}
}