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: #477 banner gradient too small

Browse source
This commit is contained in:
ThaUnknown 2024-07-11 17:52:40 +02:00
parent 806633fc33
commit e9775843e6
3 changed files with 13 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
common/components/banner/Banner.svelte
View file

@ -21,7 +21,7 @@
} }
</script> </script>
<div class='w-full h-450 position-relative gradient'> <div class='w-full h-450 position-relative'>
<!-- really shit and hacky way of fixing scroll position jumping when banner changes height --> <!-- really shit and hacky way of fixing scroll position jumping when banner changes height -->
<div class='position-absolute top-0 transparent h-450 opacity-0'>.</div> <div class='position-absolute top-0 transparent h-450 opacity-0'>.</div>
{#await data} {#await data}
@ -32,9 +32,6 @@
</div> </div>
<style> <style>
.gradient {
background: var(--banner-gradient);
}
.opacity-0 { .opacity-0 {
opacity: 0; opacity: 0;
} }

12
common/components/banner/FullBanner.svelte
View file

@ -46,7 +46,9 @@
{#key current} {#key current}
<img src={current.bannerImage || `https://i.ytimg.com/vi/${current.trailer?.id}/maxresdefault.jpg` || ''} alt='banner' class='img-cover w-full h-full position-absolute' /> <img src={current.bannerImage || `https://i.ytimg.com/vi/${current.trailer?.id}/maxresdefault.jpg` || ''} alt='banner' class='img-cover w-full h-full position-absolute' />
{/key} {/key}
<div class='pl-20 pb-20 justify-content-end d-flex flex-column h-full banner mw-full '> <div class='gradient-bottom h-full position-absolute top-0 w-full' />
<div class='gradient-left h-full position-absolute top-0 w-800' />
<div class='pl-20 pb-20 justify-content-end d-flex flex-column h-full banner mw-full'>
<div class='text-white font-weight-bold font-size-40 title w-800 mw-full overflow-hidden'> <div class='text-white font-weight-bold font-size-40 title w-800 mw-full overflow-hidden'>
{current.title.userPreferred} {current.title.userPreferred}
</div> </div>
@ -110,6 +112,12 @@
</div> </div>
<style> <style>
.gradient-bottom {
background: var(--banner-gradient-bottom);
}
.gradient-left {
background: var(--banner-gradient-left);
}
.progress-badge { .progress-badge {
transition: width .8s ease; transition: width .8s ease;
} }
@ -146,7 +154,7 @@
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
img { img, .gradient-bottom, .gradient-left {
z-index: -1; z-index: -1;
} }
.font-size-40 { .font-size-40 {

3
common/css.css
View file

@ -24,7 +24,8 @@
--safe-area-top: 0px; --safe-area-top: 0px;
--safe-area-left: 0px; --safe-area-left: 0px;
--sidebar-gradient: linear-gradient(90deg, #17191D 15.62%, rgba(23, 25, 29, 0.92) 36.46%, rgba(23, 25, 29, 0.619632) 70.83%, rgba(23, 25, 29, 0) 100%); --sidebar-gradient: linear-gradient(90deg, #17191D 15.62%, rgba(23, 25, 29, 0.92) 36.46%, rgba(23, 25, 29, 0.619632) 70.83%, rgba(23, 25, 29, 0) 100%);
--banner-gradient: linear-gradient(0deg, #17191D 0%, #0000 15%, #0000 100%), linear-gradient(90deg, #17191D 0%, rgba(23, 25, 29, 0.885417) 15%, rgba(25, 28, 32, 0) 72%); --banner-gradient-bottom: linear-gradient(0deg, #17191D 0%, #0000 15%, #0000 100%);
--banner-gradient-left: linear-gradient(90deg, #17191D 0%, rgba(23, 25, 29, 0.5) 75%, rgba(25, 28, 32, 0) 100%);
--torrent-card-gradient: linear-gradient(90deg, #17191C 32%, rgba(23, 25, 28, 0.90) 100%); --torrent-card-gradient: linear-gradient(90deg, #17191C 32%, rgba(23, 25, 28, 0.90) 100%);
--episode-card-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 77.08%, rgba(0, 0, 0, 0.7) 100%); --episode-card-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 77.08%, rgba(0, 0, 0, 0.7) 100%);
--episode-preview-card-gradient: linear-gradient(180deg, #0000 0%, #25292f00 80%, #25292f 95%, #25292f 100%); --episode-preview-card-gradient: linear-gradient(180deg, #0000 0%, #25292f00 80%, #25292f 95%, #25292f 100%);