56 lines
1.3 KiB
Svelte
56 lines
1.3 KiB
Svelte
<!--
|
|
announcement.svelte
|
|
|
|
used to display a short announcement at the top of the site
|
|
-->
|
|
|
|
<script>
|
|
import { slide } from 'svelte/transition';
|
|
export let message;
|
|
export let color = 'red';
|
|
export let link;
|
|
let noderef;
|
|
|
|
let visible = true;
|
|
</script>
|
|
|
|
{#if visible}
|
|
<div transition:slide bind:this={noderef} class="announcement prevent-select" style="background-color: {color};">
|
|
{#if link}
|
|
<a href={link}>{message}</a>
|
|
{:else}
|
|
{message}
|
|
{/if}
|
|
|
|
<input class="close-button" type="button" value="" on:click={() => visible = false}>
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.announcement {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 5px;
|
|
height: 36px;
|
|
font-size: 18px;
|
|
color: white;
|
|
}
|
|
|
|
.close-button {
|
|
cursor: pointer;
|
|
background-color: white;
|
|
object-fit: contain;
|
|
-webkit-mask-image: url('$lib/images/icons/ui/cross.svg');
|
|
mask-image: url('$lib/images/icons/ui/cross.svg');
|
|
mask-repeat: no-repeat;
|
|
mask-size: contain;
|
|
height: 25px;
|
|
width: 25px;
|
|
}
|
|
|
|
a, a:visited, a:hover, a:active {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
</style> |