refac: styling

This commit is contained in:
Timothy J. Baek 2024-06-07 15:55:02 -07:00
parent e3efe2c565
commit 5743df2280

View File

@ -420,13 +420,13 @@
{#if $showCallOverlay} {#if $showCallOverlay}
<audio id="audioElement" src="" style="display: none;" /> <audio id="audioElement" src="" style="display: none;" />
<div class=" absolute w-full h-full flex z-[999]"> <div class=" absolute w-full h-screen max-h-[100dvh] flex z-[999] overflow-hidden">
<div <div
class="absolute w-full h-full bg-white text-gray-700 dark:bg-black dark:text-gray-300 flex justify-center" class="absolute w-full h-screen max-h-[100dvh] bg-white text-gray-700 dark:bg-black dark:text-gray-300 flex justify-center"
> >
<div class="max-w-lg w-full h-screen max-h-[100dvh] flex flex-col justify-between p-6"> <div class="max-w-lg w-full h-screen max-h-[100dvh] flex flex-col justify-between p-3 md:p-6">
{#if camera} {#if camera}
<div class="flex justify-center items-center pt-2 w-full h-20"> <div class="flex justify-center items-center w-full min-h-20">
{#if loading} {#if loading}
<svg <svg
class="size-12 text-gray-900 dark:text-gray-400" class="size-12 text-gray-900 dark:text-gray-400"
@ -479,7 +479,7 @@
</div> </div>
{/if} {/if}
<div class="flex justify-center items-center w-full flex-1"> <div class="flex justify-center items-center flex-1 h-full w-full max-h-full">
{#if !camera} {#if !camera}
{#if loading} {#if loading}
<svg <svg
@ -530,17 +530,19 @@
/> />
{/if} {/if}
{:else} {:else}
<div class="relative video-container w-full h-full py-6 px-2"> <div
class="relative flex video-container w-full max-h-full pt-2 pb-4 md:py-6 px-2 h-full"
>
<video <video
id="camera-feed" id="camera-feed"
autoplay autoplay
class="w-full h-full object-cover object-center rounded-2xl" class="rounded-2xl h-full min-w-full object-cover object-center"
playsinline playsinline
/> />
<canvas id="camera-canvas" style="display:none;" /> <canvas id="camera-canvas" style="display:none;" />
<div class=" absolute top-8 left-4"> <div class=" absolute top-4 md:top-8 left-4">
<button <button
type="button" type="button"
class="p-1.5 text-white cursor-pointer backdrop-blur-xl bg-black/10 rounded-full" class="p-1.5 text-white cursor-pointer backdrop-blur-xl bg-black/10 rounded-full"