mirror of
https://github.com/smartyellow/status.git
synced 2025-01-18 21:47:58 +00:00
78 lines
1.2 KiB
Svelte
78 lines
1.2 KiB
Svelte
<script>
|
|
export let title;
|
|
export let subtitle;
|
|
export let color;
|
|
export let date;
|
|
</script>
|
|
|
|
<div class="tile {color}">
|
|
{#if title || subtitle || date}
|
|
<div class="desc">
|
|
<div>
|
|
{#if title}
|
|
<div class="title">{title}</div>
|
|
{/if}
|
|
|
|
{#if subtitle}
|
|
<div class="subtitle">{subtitle}</div>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if date}
|
|
<div class="time">{date.toLocaleTimeString('en-GB', {
|
|
timeStyle: 'short',
|
|
})}</div>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="content"><slot /></div>
|
|
</div>
|
|
|
|
<style>
|
|
.tile {
|
|
padding: 1rem;
|
|
background-color: var(--tile-bg);
|
|
border-radius: var(--radius);
|
|
border: 2px solid var(--tile-bg);
|
|
}
|
|
|
|
.tile.red {
|
|
background-color: var(--red);
|
|
border-color: var(--red);
|
|
color: #fff;
|
|
}
|
|
|
|
.tile.green {
|
|
border-color: var(--green);
|
|
}
|
|
|
|
.tile.grey {
|
|
opacity: 0.5;
|
|
border-color: var(--grey);
|
|
}
|
|
|
|
.tile.grey .content {
|
|
color: var(--grey);
|
|
}
|
|
|
|
.desc {
|
|
font-size: 1.3rem;
|
|
margin-bottom: 1rem;
|
|
display: flex;
|
|
}
|
|
|
|
.desc .title {
|
|
font-weight: 200;
|
|
}
|
|
|
|
.desc .subtitle {
|
|
font-weight: 100;
|
|
}
|
|
|
|
.desc .time {
|
|
opacity: 0.6;
|
|
margin-left: auto;
|
|
}
|
|
</style>
|