mirror of
https://github.com/ThaUnknown/miru.git
synced 2026-05-06 09:39:42 +00:00
60 lines
2 KiB
Svelte
60 lines
2 KiB
Svelte
<script>
|
|
import { getContext } from 'svelte'
|
|
|
|
const show = getContext('video-modal')
|
|
|
|
/** @type {HTMLDivElement} */
|
|
let container
|
|
let top = 0
|
|
let left = 0
|
|
/** @param {MouseEvent} param0 */
|
|
function followMouse ({ clientX, clientY }) {
|
|
if (!clientX || !clientY) return
|
|
const containerRect = container.getBoundingClientRect()
|
|
left = clientX - containerRect.left
|
|
top = clientY - containerRect.top
|
|
}
|
|
</script>
|
|
|
|
<div class='position-relative play-container' on:mousemove={followMouse} on:wheel={followMouse} bind:this={container} role='none' on:click={() => { show.value = true }}>
|
|
<button class='btn rounded-circle btn-square btn-lg d-flex align-items-center justify-content-center position-absolute z-100 w-50 h-50' style:--left={left + 'px'} style:--top={top + 'px'}>
|
|
<span class='material-symbols-outlined filled text-white'>play_arrow</span>
|
|
</button>
|
|
<img src='app.webp' alt='app' class='mw-full px-20 w-full app-image' />
|
|
<div class='overlay-gradient position-absolute px-20 top-0 left-0 w-full h-full' />
|
|
</div>
|
|
|
|
<style>
|
|
.app-image {
|
|
aspect-ratio: 2/1;
|
|
object-fit: contain;
|
|
}
|
|
.overlay-gradient {
|
|
background: linear-gradient(0deg, #101113 15.27%, rgba(16, 17, 19, 0.92) 41.28%, rgba(16, 17, 19, 0.25) 74.32%);
|
|
pointer-events: none;
|
|
}
|
|
.play-container:hover > .btn {
|
|
transition: opacity .2s ease-in-out, width .2s ease-in-out, height .2s ease-in-out, font-size .2s ease-in-out;
|
|
font-size: 30px !important;
|
|
left: clamp(0px, var(--left), 100%);
|
|
top: clamp(0px, var(--top), 100%);
|
|
width: 6rem !important;
|
|
height: 6rem !important;
|
|
}
|
|
.material-symbols-outlined {
|
|
transition: font-size .2s ease-in-out;
|
|
}
|
|
.play-container:hover .material-symbols-outlined {
|
|
font-size: 30px !important;
|
|
}
|
|
.btn {
|
|
transition: all .2s ease-in-out, width .2s ease-in-out, height .2s ease-in-out;
|
|
box-shadow: 0 0 1rem #ffffff83;
|
|
backdrop-filter: blur(8px);
|
|
top: 50%;
|
|
left: 50%;
|
|
background: none;
|
|
offset-position: center;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
</style>
|