traxxx/assets/components/users/scene-preview.vue

<template>
	<a
		:href="`/scene/${scene.id}/${scene.slug || ''}`"
		target="_blank"
		rel="noopener noreferrer"
		class="scene nolink"
	>
		<img
			:src="getPath(scene.poster, 'thumbnail')"
			class="scene-poster"
		>

		<div class="scene-header">
			<span class="scene-actors nolist">{{ scene.actors.map(actor => actor.name).join(', ') }}</span>
		</div>

		<div class="scene-footer">
			<img
				:src="`/img/logos/${scene.entity.parent.slug}/favicon_light.png`"
				class="scene-favicon"
			>

			<span class="scene-title">{{ scene.title }}</span>
		</div>
	</a>
</template>

<script>
export default {
	props: {
		scene: {
			type: Object,
			default: null,
		},
		stash: {
			type: Object,
			default: null,
		},
	},
};
</script>

<style lang="scss" scoped>
.scene {
	width: 14rem;
	height: 100%;
	position: relative;
	font-size: 0;
}

.scene-poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0;
}

.scene-header,
.scene-footer {
	width: 100%;
	height: 1.25rem;
	display: flex;
	align-items: center;
	position: absolute;
	left: 0;
	background: var(--darken-weak);
	color: var(--text-light);
	font-size: .7rem;
	font-weight: bold;
	overflow: hidden;
	text-shadow: 0 0 2px var(--text-dark);
}

.scene-header {
	top: 0;
}

.scene-footer {
	bottom: 0;
}

.scene-title {
	padding: .25rem .5rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.scene-actors {
	padding: 0 .5rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.scene-unstash {
	fill: var(--lighten-strong);
	padding: .25rem;
	filter: drop-shadow(0 0 1px var(--shadow));

	&:hover {
		fill: var(--text-light);
	}
}

.scene-favicon {
	width: 1rem;
	height: 1rem;
	padding: .1rem 0 0 .25rem;
}
</style>