another small ui fix
This commit is contained in:
parent
07da5e72cc
commit
00ab7c80b5
@ -4,6 +4,7 @@ html,
|
||||
body {
|
||||
height: 100%;
|
||||
scroll-behavior: smooth;
|
||||
background-color: #e7f7df;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
|
@ -1,3 +0,0 @@
|
||||
<div class="min-h-full bg-[#e7f7df]">
|
||||
<slot />
|
||||
</div>
|
@ -75,6 +75,18 @@
|
||||
})
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
if (typeof window !== 'object') return;
|
||||
|
||||
const listener = () => {
|
||||
const container = document.getElementById('container') as HTMLDivElement;
|
||||
container.style.height = document.body.offsetHeight + 'px';
|
||||
};
|
||||
|
||||
listener();
|
||||
window.addEventListener('resize', listener);
|
||||
})
|
||||
|
||||
const start = () => {
|
||||
recordingStart = new Date();
|
||||
recorder?.start();
|
||||
@ -109,21 +121,21 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="min-rh-screen">
|
||||
<div class="rh-screen p-4 min-h-0 grid place-items-center">
|
||||
<div id="container" class="relative w-full">
|
||||
<div class="absolute left-0 right-0 m-auto h-full w-full max-w-[70vh] p-4">
|
||||
<video
|
||||
autoplay muted bind:this={video}
|
||||
class="opacity-0 h-full w-full min-h-0 max-w-[70vh] object-cover rounded-[40px] bg-[#303030] fade-in"
|
||||
class="opacity-0 h-full w-full object-cover rounded-[40px] bg-[#303030] fade-in"
|
||||
style="animation-delay: 500ms;"
|
||||
>
|
||||
<track kind="captions" />
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="absolute top-0 left-0 right-0 p-6 m-auto w-fit scale-in"
|
||||
style="animation-delay: 50ms;"
|
||||
class="absolute top-0 left-0 right-0 p-6 m-auto w-fit"
|
||||
>
|
||||
<div class="rounded-3xl bg-white px-3 py-1 font-serif text-center w-fit">
|
||||
<div class="rounded-3xl bg-white px-3 py-1 font-serif text-center w-fit scale-in" style="animation-delay: 150ms;">
|
||||
<h1 class="font-bold text-xl">{now.toLocaleDateString(lang(), { dateStyle: 'long' })}</h1>
|
||||
<h2 class="text-sm">{now.toLocaleTimeString(lang())}</h2>
|
||||
</div>
|
||||
@ -179,13 +191,6 @@
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- <canvas class="hidden" bind:this={renderCanvas}></canvas>
|
||||
<canvas class="hidden" bind:this={captureCanvas}></canvas>
|
||||
<video class="hidden" bind:this={sourceVideo}>
|
||||
<track kind="captions" />
|
||||
</video> -->
|
||||
|
||||
<style>
|
||||
</style>
|
Loading…
x
Reference in New Issue
Block a user