diff options
| author | Fuwn <[email protected]> | 2024-02-02 23:14:35 -0800 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-02-02 23:14:35 -0800 |
| commit | c759f72fe1d6562d41f9db16da0ea4be3ab2733a (patch) | |
| tree | da2d01ba2248d884465576069404431a93a47e77 /src/lib | |
| parent | fix(anime): filter for live countdown (diff) | |
| download | due.moe-c759f72fe1d6562d41f9db16da0ea4be3ab2733a.tar.xz due.moe-c759f72fe1d6562d41f9db16da0ea4be3ab2733a.zip | |
feat(cover-card): expand on hover
Diffstat (limited to 'src/lib')
| -rw-r--r-- | src/lib/List/Anime/CleanAnimeList.svelte | 18 | ||||
| -rw-r--r-- | src/lib/Schedule/Days.svelte | 9 |
2 files changed, 20 insertions, 7 deletions
diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte index f73c7b23..0ca113f5 100644 --- a/src/lib/List/Anime/CleanAnimeList.svelte +++ b/src/lib/List/Anime/CleanAnimeList.svelte @@ -89,13 +89,8 @@ {@const progress = (anime.mediaListEntry || { progress: 0 }).progress} {#if upcoming || notYetReleased || progress !== (anime.nextAiringEpisode?.episode || 9999) - 1} - <div class="cover-card"> - <a - href={outboundLink(anime, 'anime', $settings.displayOutboundLinksTo)} - target="_blank" - title={anime ? mediaTitle(anime) : undefined} - use:tooltip - > + <div class="cover-card" title={anime ? mediaTitle(anime) : undefined} use:tooltip> + <a href={outboundLink(anime, 'anime', $settings.displayOutboundLinksTo)} target="_blank"> <img class="cover" src={anime.coverImage.extraLarge} alt="Cover" /> </a> @@ -259,6 +254,15 @@ flex-direction: column; justify-content: center; align-items: center; + transition: transform 0.3s ease; + box-sizing: border-box; + } + + .cover-card:hover { + transform: scale(1.1); + position: relative; + z-index: 2; + transition: transform 0.3s ease; } .entry::after { diff --git a/src/lib/Schedule/Days.svelte b/src/lib/Schedule/Days.svelte index d4dd068d..553a753e 100644 --- a/src/lib/Schedule/Days.svelte +++ b/src/lib/Schedule/Days.svelte @@ -160,6 +160,15 @@ flex-direction: column; justify-content: center; align-items: center; + transition: transform 0.3s ease; + box-sizing: border-box; + } + + .cover-card:hover { + transform: scale(1.1); + position: relative; + z-index: 2; + transition: transform 0.3s ease; } .cover-title { |