<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 v-if="scene.entity.parent" :src="`/img/logos/${scene.entity.parent.slug}/favicon_light.png`" class="scene-favicon" > <img v-else :src="`/img/logos/${scene.entity.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>