generated from tpl/obsidian-sample-plugin
68 lines
1.5 KiB
Svelte
68 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from "svelte";
|
|
import chroma from "chroma-js";
|
|
import { Color } from "@utils/color";
|
|
|
|
interface Props {
|
|
children?: Snippet;
|
|
color?: string;
|
|
}
|
|
|
|
let { children, color = "green" }: Props = $props();
|
|
|
|
const backgroundColor = $derived(chroma(color));
|
|
const borderLeftColor = $derived(chroma(color).mix("white", 0.04));
|
|
const borderRightColor = $derived(chroma(color).mix("black", 0.04));
|
|
const bandColor = $derived(chroma(color).mix("black", 0.14));
|
|
const textColor = $derived(new Color(backgroundColor).contrastColor.hex);
|
|
</script>
|
|
|
|
<div
|
|
class="bookshelf__book-wrapper"
|
|
style:--book-color={backgroundColor.css()}
|
|
style:--book-border-left-color={borderLeftColor.css()}
|
|
style:--book-border-right-color={borderRightColor.css()}
|
|
style:--book-band-color={bandColor.css()}
|
|
style:color={textColor}
|
|
>
|
|
{@render children?.()}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
div {
|
|
background: var(--book-color);
|
|
border-left: 2px solid var(--book-border-left-color);
|
|
border-right: 2px solid var(--book-border-right-color);
|
|
|
|
&:after {
|
|
content: " ";
|
|
display: block;
|
|
background: var(--book-band-color);
|
|
height: 40px;
|
|
width: 20px;
|
|
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 10px;
|
|
}
|
|
|
|
&:before {
|
|
content: " ";
|
|
display: block;
|
|
background: var(--book-band-color);
|
|
height: 40px;
|
|
width: 20px;
|
|
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 10px;
|
|
z-index: 2;
|
|
}
|
|
|
|
:global(.bookshelf__book-content) {
|
|
width: calc(200px - 60px) !important;
|
|
margin: 0 30px;
|
|
}
|
|
}
|
|
</style>
|