You've already forked AstralRinth
forked from didirus/AstralRinth
2aabcf36ee
* refactor: migrate to common eslint+prettier configs * fix: prettier frontend * feat: config changes * fix: lint issues * fix: lint * fix: type imports * fix: cyclical import issue * fix: lockfile * fix: missing dep * fix: switch to tabs * fix: continue switch to tabs * fix: rustfmt parity * fix: moderation lint issue * fix: lint issues * fix: ui intl * fix: lint issues * Revert "fix: rustfmt parity" This reverts commit cb99d2376c321d813d4b7fc7e2a213bb30a54711. * feat: revert last rs
58 lines
1.1 KiB
Vue
58 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
withDefaults(
|
|
defineProps<{
|
|
fadeOutStart?: boolean
|
|
fadeOutEnd?: boolean
|
|
}>(),
|
|
{
|
|
fadeOutStart: false,
|
|
fadeOutEnd: false,
|
|
},
|
|
)
|
|
</script>
|
|
<template>
|
|
<div class="relative flex flex-col gap-4 pb-6 isolate">
|
|
<div class="absolute flex h-full w-4 justify-center">
|
|
<div
|
|
class="timeline-indicator"
|
|
:class="{ 'fade-out-start': fadeOutStart, 'fade-out-end': fadeOutEnd }"
|
|
/>
|
|
</div>
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.timeline-indicator {
|
|
background-image: linear-gradient(
|
|
to bottom,
|
|
var(--timeline-line-color, var(--color-raised-bg)) 66%,
|
|
rgba(255, 255, 255, 0) 0%
|
|
);
|
|
background-size: 100% 30px;
|
|
background-repeat: repeat-y;
|
|
margin-top: 1rem;
|
|
|
|
height: calc(100% - 1rem);
|
|
width: 4px;
|
|
z-index: -1;
|
|
|
|
&.fade-out-start {
|
|
mask-image: linear-gradient(to top, black calc(100% - 15rem), transparent 100%);
|
|
}
|
|
|
|
&.fade-out-end {
|
|
mask-image: linear-gradient(to bottom, black calc(100% - 15rem), transparent 100%);
|
|
}
|
|
|
|
&.fade-out-start.fade-out-end {
|
|
mask-image: linear-gradient(
|
|
to bottom,
|
|
transparent 0%,
|
|
black,
|
|
black calc(100% - 8rem),
|
|
transparent 100%
|
|
);
|
|
}
|
|
}
|
|
</style>
|