generated from tpl/obsidian-sample-plugin
72 lines
1.7 KiB
Svelte
72 lines
1.7 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;
|
|
width?: number;
|
|
}
|
|
|
|
let { children, color = "green", width = 40 }: 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:--book-width={width + "px"}
|
|
style:width={width + "px"}
|
|
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: 20px;
|
|
width: calc(100% + 4px);
|
|
|
|
position: absolute;
|
|
top: 10px;
|
|
left: -2px;
|
|
}
|
|
|
|
&:before {
|
|
content: "";
|
|
display: block;
|
|
background: var(--book-band-color);
|
|
height: 20px;
|
|
width: calc(100% + 4px);
|
|
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: -2px;
|
|
z-index: 2;
|
|
}
|
|
|
|
:global(.bookshelf__book-content) {
|
|
height: calc(var(--book-width));
|
|
width: calc(200px - 60px) !important;
|
|
margin: 30px var(--book-width);
|
|
}
|
|
}
|
|
</style>
|