diff options
| author | Fuwn <[email protected]> | 2024-10-09 00:41:20 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-10-09 00:41:43 -0700 |
| commit | 998b63a35256ac985a5a2714dd1ca451af4dfd8a (patch) | |
| tree | 50796121a9d5ab0330fdc5d7e098bda2860d9726 /src/lib/Media/Cover/HoverCover.svelte | |
| parent | feat(graphql): add badgeCount field (diff) | |
| download | due.moe-998b63a35256ac985a5a2714dd1ca451af4dfd8a.tar.xz due.moe-998b63a35256ac985a5a2714dd1ca451af4dfd8a.zip | |
chore(prettier): use spaces instead of tabs
Diffstat (limited to 'src/lib/Media/Cover/HoverCover.svelte')
| -rw-r--r-- | src/lib/Media/Cover/HoverCover.svelte | 88 |
1 files changed, 44 insertions, 44 deletions
diff --git a/src/lib/Media/Cover/HoverCover.svelte b/src/lib/Media/Cover/HoverCover.svelte index eecbabe5..51cbf5d2 100644 --- a/src/lib/Media/Cover/HoverCover.svelte +++ b/src/lib/Media/Cover/HoverCover.svelte @@ -1,53 +1,53 @@ <script lang="ts"> - import settings from '$stores/settings'; - import type { HoverCoverResponse } from './hoverCover'; + import settings from '$stores/settings'; + import type { HoverCoverResponse } from './hoverCover'; - export let options: HoverCoverResponse; - export let width = 250; + export let options: HoverCoverResponse; + export let width = 250; </script> {#if options.hovering} - <img - class="hover-image show card card-small" - src={options.media - ? $settings.displayDataSaver - ? options.media.coverImage.medium - : options.media.coverImage.extraLarge - : `https://subsplease.org${options.item?.image_url}`} - alt="Media Cover" - loading="lazy" - style={`width: ${width}px; ${options.style}`} - /> + <img + class="hover-image show card card-small" + src={options.media + ? $settings.displayDataSaver + ? options.media.coverImage.medium + : options.media.coverImage.extraLarge + : `https://subsplease.org${options.item?.image_url}`} + alt="Media Cover" + loading="lazy" + style={`width: ${width}px; ${options.style}`} + /> {/if} <style lang="scss"> - $coverTransitionTime: 200ms; - - .hover-image { - position: fixed; - height: auto; - display: none; - border-radius: 8px; - transition: opacity $coverTransitionTime ease-in-out, top 0.3s ease, left 0.3s ease; - } - - .show { - display: block; - } - - .hover-image { - animation: dropIn $coverTransitionTime ease-in-out; - } - - @keyframes dropIn { - 0% { - opacity: 0; - transform: translateY(-1rem); - } - - 100% { - opacity: 1; - transform: translateY(0); - } - } + $coverTransitionTime: 200ms; + + .hover-image { + position: fixed; + height: auto; + display: none; + border-radius: 8px; + transition: opacity $coverTransitionTime ease-in-out, top 0.3s ease, left 0.3s ease; + } + + .show { + display: block; + } + + .hover-image { + animation: dropIn $coverTransitionTime ease-in-out; + } + + @keyframes dropIn { + 0% { + opacity: 0; + transform: translateY(-1rem); + } + + 100% { + opacity: 1; + transform: translateY(0); + } + } </style> |