Creepso/migu
1
0
Fork 0
mirror of https://github.com/NoCrypt/migu.git synced 2026-03-11 17:45:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: icons

Browse source
This commit is contained in:
RockinChaos 2024-08-27 17:26:34 -07:00
parent f34f97bad9
commit 65b7e614f0
3 changed files with 48 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
common/components/cards/PreviewCard.svelte
View file

@ -49,7 +49,7 @@
<div class='banner position-relative bg-black overflow-hidden'>
<img src={media.bannerImage || (media.trailer?.id ? `https://i.ytimg.com/vi/${media.trailer?.id}/hqdefault.jpg` : media.coverImage?.extraLarge || ' ')} alt='banner' class='img-cover w-full h-full' />
{#if media.trailer?.id}
<div class='position-absolute z-10 top-0 right-0 p-15' use:click={toggleMute}>
<div class='position-absolute z-10 top-0 right-0 p-15 sound' use:click={toggleMute}>
{#if muted}
<VolumeX size='2.2rem' fill='currentColor' />
{:else}
@ -170,6 +170,9 @@
.banner {
height: 45%
}
.sound {
filter: drop-shadow(0 0 .4rem rgba(0, 0, 0, 1))
}
/* video {
object-fit: cover;
} */

73
common/views/ViewAnime/AudioLabel.svelte
View file

@ -4,7 +4,7 @@
import { malDubs } from '@/modules/animedubs.js'
import { writable } from 'svelte/store'
import { matchPhrase } from "@/modules/util.js"
import { Mic, MicOff, Captions, GraduationCap } from 'lucide-svelte'
import { Mic, MicOff, Captions, TriangleAlert } from 'lucide-svelte'
/** @type {import('@/modules/al.d.ts').Media} */
export let media = null
@ -35,20 +35,22 @@
{#if !banner && !viewAnime && !example}
{#if settings.value.cardAudio}
<div class='pl-10 pt-10 position-absolute top-0 left-0 filled font-weight-medium z-10 {$isDubbed ? "dubbed" : $isPartial ? "incomplete" : "subbed"}' title={$isDubbed ? "English Dubbed" : $isPartial ? "English Dub was not completed" : "Subtitles Only"}>
<div class='position-absolute top-0 left-0 ml-10 mt-10 d-flex align-items-center justify-content-center'>
<div class='w-auto h-auto z-10 text-white d-flex align-items-center justify-content-center {$isDubbed ? "dubbed" : $isPartial ? "incomplete" : "subbed"}'>
{#if $isDubbed}
<Mic size='3rem' />
<Mic size='2.5rem' />
{:else if $isPartial}
<MicOff size='3rem' />
<MicOff size='2.5rem' />
{:else}
<Captions size='3rem' />
<Captions size='2.5rem' />
{/if}
</div>
{#if media.isAdult}
<div class='pt-10 position-absolute top-0 left-0 filled font-weight-medium z-10 adult'>
<GraduationCap size='3rem' />
</div>
<div class='ml-5 w-auto h-auto z-10 text-white d-flex align-items-center justify-content-center adult'>
<TriangleAlert size='2.5rem' />
</div>
{/if}
</div>
{/if}
{:else if !viewAnime && !example}
{$isDubbed ? 'Dub' : $isPartial ? 'Partial Dub' : 'Sub'}
@ -65,44 +67,53 @@
</span>
{:else}
<div>
<span class='font-size-24 label ml-20 position-relative z-10 adult'>
<GraduationCap size='2.5rem' />
</span>
<span class='position-relative ml-2'>Rated 18+</span>
<span class='font-size-24 label ml-20 position-relative z-10 subbed'>
<Captions size='2.5rem' />
</span>
<span class='position-relative ml-2'>Sub Only</span>
<span class='font-size-24 label ml-20 position-relative z-10 incomplete'>
<MicOff size='2.5rem' />
</span>
<span class='position-relative ml-2'>Partial Dub</span>
<span class='font-size-24 label ml-20 position-relative z-10 dubbed'>
<Mic size='2.5rem' />
</span>
<span class='position-relative ml-2'>Dub</span>
<div class='position-relative d-flex align-items-center justify-content-center mt-5'>
<div class='position-relative d-flex align-items-center justify-content-center'>
<div class='font-size-24 label ml-20 z-10 adult'>
<TriangleAlert size='2.5rem' />
</div>
<span class='ml-5 mb-5'>Rated 18+</span>
</div>
<div class='position-relative d-flex align-items-center justify-content-center'>
<div class='font-size-24 label ml-20 z-10 subbed'>
<Captions size='2.5rem' />
</div>
<span class='ml-5 mb-5'>Sub Only</span>
</div>
<div class='position-relative d-flex align-items-center justify-content-center'>
<div class='font-size-24 label ml-20 z-10 incomplete'>
<MicOff size='2.5rem' />
</div>
<span class='ml-5 mb-5'>Partial Dub</span>
</div>
<div class='position-relative d-flex align-items-center justify-content-center'>
<div class='font-size-24 label ml-20 z-10 dubbed'>
<Mic size='2.5rem' />
</div>
<span class='ml-5 mb-5 mr-10'>Dub</span>
</div>
</div>
</div>
{/if}
<style>
.label {
top: 0.625rem;
top: .625rem;
}
.adult {
color: rgba(215, 6, 10) !important;
padding-left: 4.6rem;
text-shadow: black 0 0 1rem;
color: rgb(215, 6, 10) !important;
filter: drop-shadow(0 0 .4rem rgba(0, 0, 0, 1)) drop-shadow(0 0 .4rem rgba(0, 0, 0, 1));
}
.dubbed {
color: rgb(255, 214, 0) !important;
text-shadow: black 0 0 .5rem;
filter: drop-shadow(0 0 .4rem rgba(0, 0, 0, 1)) drop-shadow(0 0 .4rem rgba(0, 0, 0, 1));
}
.subbed {
color: rgb(137, 39, 255) !important;
text-shadow: black 0 0 .5rem;
filter: drop-shadow(0 0 .4rem rgba(0, 0, 0, 1)) drop-shadow(0 0 .4rem rgba(0, 0, 0, 1));
}
.incomplete {
color: rgb(255, 94, 0) !important;
text-shadow: black 0 0 .5rem;
filter: drop-shadow(0 0 .4rem rgba(0, 0, 0, 1)) drop-shadow(0 0 .4rem rgba(0, 0, 0, 1));
}
</style>

4
common/views/ViewAnime/Details.svelte
View file

@ -1,5 +1,5 @@
<script>
import { Building2, Earth, GraduationCap, FolderKanban, Languages, CalendarRange, MonitorPlay, Type } from 'lucide-svelte'
import { Building2, Earth, TriangleAlert, FolderKanban, Languages, CalendarRange, MonitorPlay, Type } from 'lucide-svelte'
export let media = null
export let alt = null
@ -10,7 +10,7 @@
{ property: 'studios', label: 'Studio', icon: Building2, custom: 'property' },
{ property: 'source', label: 'Source', icon: FolderKanban },
{ property: 'countryOfOrigin', label: 'Country', icon: Earth, custom: 'property' },
{ property: 'isAdult', label: 'Adult', icon: GraduationCap },
{ property: 'isAdult', label: 'Adult', icon: TriangleAlert },
{ property: 'english', label: 'English', icon: Type },
{ property: 'romaji', label: 'Romaji', icon: Languages },
{ property: 'native', label: 'Native', icon: '語', custom: 'icon' }