75 lines
1.6 KiB
Svelte
75 lines
1.6 KiB
Svelte
<script>
|
|
import {
|
|
ButtonGroup,
|
|
Icon,
|
|
} from 'sveltestrap';
|
|
|
|
import { time } from '$lib/stores/settings.js';
|
|
|
|
export { className as class };
|
|
let className = '';
|
|
</script>
|
|
|
|
<div
|
|
class="clock {className}"
|
|
class:expired={$time.expired}
|
|
class:end={$time.end}
|
|
class:wait={$time.startIn}
|
|
>
|
|
{#if $time.seconds}
|
|
<span id="hours">
|
|
{$time.hours}
|
|
</span>
|
|
<span class="point">
|
|
:
|
|
</span>
|
|
<span id="minutes">
|
|
{$time.minutes}
|
|
</span>
|
|
<span class="point">
|
|
:
|
|
</span>
|
|
<span id="seconds">
|
|
{$time.seconds}
|
|
</span>
|
|
{:else}
|
|
Chargement
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.clock:not(.expired):not(.wait) .point, .clock.expired {
|
|
transition: color text-shadow 1s;
|
|
position: relative;
|
|
animation: clockanim 1s ease infinite;
|
|
-moz-animation: clockanim 1s ease infinite;
|
|
-webkit-animation: clockanim 1s ease infinite;
|
|
}
|
|
.clock.wait .point {
|
|
transition: color text-shadow 1s;
|
|
position: relative;
|
|
animation: clockwait 1s ease infinite;
|
|
-moz-animation: clockwait 1s ease infinite;
|
|
-webkit-animation: clockwait 1s ease infinite;
|
|
}
|
|
.end {
|
|
color: #e64143;
|
|
}
|
|
.point {
|
|
text-shadow: 0 0 20px #4eaee6;
|
|
}
|
|
.end .point {
|
|
text-shadow: 0 0 20px #e64143;
|
|
}
|
|
@keyframes clockanim {
|
|
0% { opacity: 1.0; }
|
|
50% { opacity: 0; }
|
|
100% { opacity: 1.0; }
|
|
}
|
|
@keyframes clockwait {
|
|
0% { text-shadow: 0 0 20px #A6D6F2; }
|
|
50% { text-shadow: 0 0 2px #A6D6F2; }
|
|
100% { text-shadow: 0 0 20px #A6D6F2; }
|
|
}
|
|
</style>
|