90 lines
2.1 KiB
Svelte
90 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import TopRightCrinkle from "./widgets/TopRightCrinkle.svelte"
|
|
|
|
let {
|
|
brightBackground = true,
|
|
border = true,
|
|
activated = true,
|
|
icon,
|
|
bigVersion,
|
|
contentSnippet,
|
|
}: {
|
|
brightBackground?: boolean
|
|
border?: boolean
|
|
activated?: boolean
|
|
icon?: string
|
|
bigVersion?: boolean
|
|
contentSnippet: () => any
|
|
} = $props()
|
|
</script>
|
|
|
|
{#if activated}
|
|
<section
|
|
id="crinkled-section"
|
|
class={brightBackground ? "bright" : "dark"}
|
|
>
|
|
<div class="upper-row">
|
|
<div
|
|
class="bar"
|
|
class:border
|
|
></div>
|
|
<TopRightCrinkle
|
|
edges={border}
|
|
brightColor={!brightBackground}
|
|
{icon}
|
|
{bigVersion}
|
|
/>
|
|
</div>
|
|
{@render contentSnippet()}
|
|
</section>
|
|
{:else}
|
|
{@render contentSnippet()}
|
|
{/if}
|
|
|
|
<style lang="less">
|
|
#crinkled-section {
|
|
width: 100%;
|
|
display: flex;
|
|
z-index: 2000;
|
|
margin-top: -3rem;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
|
|
.upper-row {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
justify-content: flex-start;
|
|
height: 3rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
.bar {
|
|
flex: 1;
|
|
height: 100%;
|
|
background: var(--neutral-white);
|
|
&.border {
|
|
border-top: 2px solid black;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.bright {
|
|
.bar {
|
|
background: var(--neutral-white);
|
|
&.border {
|
|
border-top: 2px solid var(--bg-100);
|
|
}
|
|
}
|
|
}
|
|
&.dark {
|
|
.bar {
|
|
background: var(--bg-100);
|
|
&.border {
|
|
border-top: 2px solid var(--neutral-white);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|