aboutsummaryrefslogtreecommitdiff
path: root/src/lib/Media/Cover/HoverCover.svelte
diff options
context:
space:
mode:
authorFuwn <[email protected]>2024-10-09 00:41:20 -0700
committerFuwn <[email protected]>2024-10-09 00:41:43 -0700
commit998b63a35256ac985a5a2714dd1ca451af4dfd8a (patch)
tree50796121a9d5ab0330fdc5d7e098bda2860d9726 /src/lib/Media/Cover/HoverCover.svelte
parentfeat(graphql): add badgeCount field (diff)
downloaddue.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.svelte88
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>