diff options
| -rw-r--r-- | src/lib/Loading/Message.svelte | 35 | ||||
| -rw-r--r-- | src/routes/+layout.svelte | 2 | ||||
| -rw-r--r-- | src/styles/popup.scss | 4 |
3 files changed, 25 insertions, 16 deletions
diff --git a/src/lib/Loading/Message.svelte b/src/lib/Loading/Message.svelte index 82e6d312..8715b922 100644 --- a/src/lib/Loading/Message.svelte +++ b/src/lib/Loading/Message.svelte @@ -2,24 +2,33 @@ import Ellipsis from './Ellipsis.svelte'; import Ripple from './Ripple.svelte'; import Grid from './Grid.svelte'; + import Popup from '$lib/Popup.svelte'; export let message: string | undefined = undefined; export let loader: 'ellipsis' | 'ripple' | 'grid' = 'ellipsis'; export let colour = 'var(--fg)'; </script> -<div class="card popup"> - {#if loader === 'ellipsis'} - <Ellipsis {colour} /> - {:else if loader === 'ripple'} - <Ripple {colour} /> - {:else if loader === 'grid'} - <Grid {colour} /> - {/if} +<Popup fullscreen> + <div class="message"> + {#if loader === 'ellipsis'} + <Ellipsis {colour} /> + {:else if loader === 'ripple'} + <Ripple {colour} /> + {:else if loader === 'grid'} + <Grid {colour} /> + {/if} - {#if message} - <p /> + {#if message} + <p /> - {message} - {/if} -</div> + {message} + {/if} + </div> +</Popup> + +<style> + .message { + text-align: center; + } +</style> diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 087e58d6..43cdf0ee 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -173,7 +173,7 @@ font-size: 1.05em; font-weight: 600; padding: 0.8rem 0.4rem; - z-index: 2; + z-index: 4; } #header a { diff --git a/src/styles/popup.scss b/src/styles/popup.scss index cbf8f225..441a68a1 100644 --- a/src/styles/popup.scss +++ b/src/styles/popup.scss @@ -3,7 +3,7 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - z-index: 9999; + z-index: 3; display: flex; flex-direction: column; justify-content: center; @@ -14,6 +14,6 @@ width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); - z-index: 9999; + z-index: 3; backdrop-filter: blur(8px); } |