34 lines
693 B
Svelte
34 lines
693 B
Svelte
<script lang="ts">
|
|
import { asset } from '$app/paths';
|
|
|
|
let {
|
|
pattern = 'none',
|
|
color = '#000000',
|
|
opacity = 0.1
|
|
}: {
|
|
pattern?: string;
|
|
color?: string;
|
|
opacity?: number;
|
|
} = $props();
|
|
|
|
const patternPath = $derived(asset(`/themes/${pattern}/item.svg`));
|
|
</script>
|
|
|
|
{#if pattern !== 'none'}
|
|
<div
|
|
class="absolute bottom-0 right-0 pointer-events-none overflow-hidden rounded-b-lg"
|
|
style="
|
|
mask-image: url({patternPath});
|
|
-webkit-mask-image: url({patternPath});
|
|
mask-size: cover;
|
|
-webkit-mask-size: cover;
|
|
mask-repeat: repeat;
|
|
-webkit-mask-repeat: repeat;
|
|
background-color: {color};
|
|
opacity: {opacity};
|
|
width: 200px;
|
|
height: 200px;
|
|
"
|
|
/>
|
|
{/if}
|