Creepso/migu
1
0
Fork 0
mirror of https://github.com/NoCrypt/migu.git synced 2026-04-21 08:31:58 +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'> <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' /> <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} {#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} {#if muted}
<VolumeX size='2.2rem' fill='currentColor' /> <VolumeX size='2.2rem' fill='currentColor' />
{:else} {:else}
@ -170,6 +170,9 @@
.banner { .banner {
height: 45% height: 45%
} }
.sound {
filter: drop-shadow(0 0 .4rem rgba(0, 0, 0, 1))
}
/* video { /* video {
object-fit: cover; object-fit: cover;
} */ } */

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

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

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

@ -1,5 +1,5 @@
<script> <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 media = null
export let alt = null export let alt = null
@ -10,7 +10,7 @@
{ property: 'studios', label: 'Studio', icon: Building2, custom: 'property' }, { property: 'studios', label: 'Studio', icon: Building2, custom: 'property' },
{ property: 'source', label: 'Source', icon: FolderKanban }, { property: 'source', label: 'Source', icon: FolderKanban },
{ property: 'countryOfOrigin', label: 'Country', icon: Earth, custom: 'property' }, { 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: 'english', label: 'English', icon: Type },
{ property: 'romaji', label: 'Romaji', icon: Languages }, { property: 'romaji', label: 'Romaji', icon: Languages },
{ property: 'native', label: 'Native', icon: '語', custom: 'icon' } { property: 'native', label: 'Native', icon: '語', custom: 'icon' }