48 lines
955 B
Svelte
48 lines
955 B
Svelte
<script lang="ts">
|
|
import FooterComponent from '$lib/components/FooterComponent.svelte';
|
|
import { SvelteToast } from '@zerodevx/svelte-toast';
|
|
interface Props {
|
|
children?: import('svelte').Snippet;
|
|
}
|
|
|
|
let { children }: Props = $props();
|
|
|
|
const options = {
|
|
pausable: true,
|
|
classes: ['toast']
|
|
};
|
|
</script>
|
|
|
|
{@render children?.()}
|
|
<SvelteToast {options} />
|
|
<div class="footer">
|
|
<FooterComponent />
|
|
</div>
|
|
|
|
<style>
|
|
.footer {
|
|
position: sticky;
|
|
bottom: 0px;
|
|
display: inline-block;
|
|
}
|
|
:global(.toast.error) {
|
|
--toastColor: var(--color-button-text);
|
|
--toastBackground: var(--color-red-dark);
|
|
--toastBarBackground: var(--color-red-lighter);
|
|
}
|
|
:global(._toastMsg > img) {
|
|
position: relative;
|
|
height: 1.5em;
|
|
}
|
|
:global(._toastMsg) {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
@media only screen and (max-width: 620px) {
|
|
.footer {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|