overleaf/services/web/frontend/stylesheets/app/templates-v2.less

.template-title {
	margin-bottom: @margin-xl;
}

.field-title {
	font-weight: bold;
}

.filters {
	float: right;
	margin-bottom: @margin-lg;

	@media (max-width: @screen-md-min) {
		float: none;
	}
}

.cta-links {
	.cta-link.btn {
		margin: 0 @margin-sm @margin-sm 0;
	}
}

.popular-tags {
	.template-thumbnail {
		margin: 0 0 1em 0!important;
	}
}

.tag-link {
	margin: 0 @margin-xs @margin-sm 0;
	max-width: 100%;
	white-space: inherit;
}

.template-abstract {
	word-break: break-word;
	hyphens: auto;
	a {
		hyphens: none;
	}
}

.template-thumbnail {
	display: inline-block;
	margin: 0 0 2em;
	width: 100%;

	.thumbnail {
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		margin: 0 0 @margin-sm 0;
		padding:0px;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		width: 100%;

		h3 {
			color:@link-color;
			margin: 10px 0px 10px 20px;
		}

		&.thumbnail-tag {
			height: 100px;
		}
	}

	.caption {
		// Override ShareLatex template styles
		background: none;
		border: none;
		text-align: center;
	}

	.caption__description {
		font-style: italic;
		padding: 0 0 5px 0;
		.text-overflow();
	}

	.caption__title {
		display: inline-block;
		width: 100%;
		text-align: center;
		.text-overflow();
	}
}

.template-large-pdf-preview {
	border: solid 1px @gray-lightest;
	margin-top: @margin-lg;
}

/* Media Queries */
@media (max-width: @screen-xs-max) {
	.templates-container {
		column-count: 2;
		column-gap: 2em;
	}
}
@media (min-width: @screen-sm-min) {
	.templates-container {
		&.use-column {
			column-count: 3;
			column-gap: 3em;	
		}
		&.use-percent {
			margin: 0 -1.5em;
			.template-thumbnail {
				width: 33.3333333%;
				padding: 0 1.5em;
			}
		}
	}
}
@media (min-width: @screen-md-min) {
	.template-large-pdf-preview {
		margin-top: 0;
	}
}

.section-tags {
	margin-bottom: @margin-xl;
	margin-top: @margin-md;
}

.search__container--addsearch {
	.search__input-bar {
		display: flex;
	}

	.search__input {
		flex: 1;
		margin-right: 10px;
		padding: 0 10px;
	}

	// AddSearch overrides
	#addsearch-results {
		min-height: 0 !important;

		.addsearch-result-item-container {
			background-size: auto 80px !important; // Resize image to be smaller
			padding: 10px;
			margin-left: 10px;
			margin-right: 10px;
			border-bottom: 2px solid rgb(236, 236, 236);
		}

		.addsearch-result-item-sub {
			min-height: 0 !important;
			background: none !important;
			border-bottom: none !important;

			h2 {
				font-family: @font-family-sans-serif;
			}

			// Unfortunately AddSearch doesn't add very useful classes, so have to use
			// some horrible nesting :/
			& > div {
				min-height: 0 !important;
				padding-left: 90px !important;

				// Hide some unnecessary metadata
				span {
					display: none !important;
				}
			}

			a {
				color: @ol-green !important;
			}

			&:hover a {
				color: @ol-dark-green !important;
			}
		}
	}

	#addsearch-results-bottom {
		height: auto !important;
		background: none !important;
		padding-top: 0 !important;

		#addsearch-rp-paging {
			margin-bottom: 10px;

			a {
				color: @ol-green !important;

				&.currentResultPage {
					color: @ol-blue-gray-5 !important;
				}
			}
		}
	}

	#addsearch-logo {
		display: none !important;
	}
}