forked from nikita/muzika-gromche
37 lines
780 B
Vue
37 lines
780 B
Vue
<script setup lang="ts">
|
|
import type { TimelineClipData, TimelineTrackData } from '@/lib/Timeline';
|
|
import Default from './Default.vue';
|
|
|
|
const {
|
|
width,
|
|
} = defineProps<{
|
|
track: TimelineTrackData,
|
|
clip: TimelineClipData,
|
|
width: number,
|
|
}>();
|
|
</script>
|
|
<template>
|
|
<div class="tw:absolute tw:w-full fade-out-gradient" />
|
|
|
|
<Default :track :clip :width />
|
|
</template>
|
|
<style scoped>
|
|
.fade-out {
|
|
border-style: solid;
|
|
border-color: transparent;
|
|
border-top-color: black;
|
|
border-right-color: black;
|
|
}
|
|
|
|
.fade-out-gradient {
|
|
left: 0;
|
|
top: 0;
|
|
/* TODO: hardcoded bottom line offset */
|
|
height: calc(100% - calc(var(--tw-spacing) * 5.5) - 1px);
|
|
background-image:
|
|
linear-gradient(to top right,
|
|
transparent 49.9%,
|
|
rgba(0, 0, 0, 0.5) 50%);
|
|
}
|
|
</style>
|