23 lines
871 B
Svelte
23 lines
871 B
Svelte
<span class="absolute bottom-full left-1/2 -translate-x-1/2 pointer-events-none select-none">
|
|
<div class="relative z-[999] bg-item rounded-full">
|
|
<div class="relative text-white p-[10px] whitespace-nowrap text-base font-normal leading-[.8] rounded-full">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</span>
|
|
|
|
<style lang="postcss">
|
|
span::after {
|
|
@apply content-[''] absolute top-full left-1/2 -ml-[5px] border-[5px] border-solid border-transparent border-t-item;
|
|
}
|
|
|
|
div {
|
|
@apply before:rounded-[32px] before:w-full before:h-full before:top-0 before:left-0 before:z-[-1] before:content-[''] before:absolute before:border before:border-transparent;
|
|
}
|
|
|
|
div::before {
|
|
background: linear-gradient(#25292c, theme('colors.item')) border-box;
|
|
mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
|
|
mask-composite: exclude;
|
|
}
|
|
</style>
|