generated from tpl/obsidian-sample-plugin
66 lines
1.4 KiB
Svelte
66 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from "svelte";
|
|
import chroma from "chroma-js";
|
|
|
|
interface Props {
|
|
children?: Snippet;
|
|
color?: string;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
let { children, color = "green", onClick }: Props = $props();
|
|
|
|
let backgroundColor = $derived(chroma(color));
|
|
let bandColor = $derived(chroma(color).mix("black", 0.14));
|
|
</script>
|
|
|
|
<div
|
|
class="bookshelf__book-wrapper bookshelf__book-onDisplay"
|
|
style:--book-color={backgroundColor.css()}
|
|
style:--book-band-color={bandColor.css()}
|
|
onclick={onClick}
|
|
onkeydown={(ev) => ev.key === "Enter" && onClick?.()}
|
|
role="link"
|
|
tabindex="0"
|
|
>
|
|
<div class="book-display-crease"></div>
|
|
{@render children?.()}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
$band-width: 5px;
|
|
$band-offset: 8px;
|
|
|
|
div.bookshelf__book-onDisplay {
|
|
width: 150px;
|
|
height: 200px;
|
|
background: var(--book-color);
|
|
display: flex;
|
|
flex-flow: column wrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
text-align: center;
|
|
margin: 20px 2px 10px 2px;
|
|
position: relative;
|
|
|
|
padding-left: calc($band-offset + $band-width);
|
|
padding-right: 8px;
|
|
|
|
&:before {
|
|
content: " ";
|
|
display: block;
|
|
background: var(--book-band-color);
|
|
width: $band-width;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: $band-offset;
|
|
}
|
|
|
|
&:global(.bookshelf__book-author) {
|
|
font-size: 0.8em;
|
|
margin-left: 13px;
|
|
}
|
|
}
|
|
</style>
|