From e9775843e6bcff203afb936d670bf7f3d21c8355 Mon Sep 17 00:00:00 2001
From: ThaUnknown <6506529+ThaUnknown@users.noreply.github.com>
Date: Thu, 11 Jul 2024 17:52:40 +0200
Subject: [PATCH] fix: #477 banner gradient too small

---
 common/components/banner/Banner.svelte     |  5 +----
 common/components/banner/FullBanner.svelte | 12 ++++++++++--
 common/css.css                             |  3 ++-
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/common/components/banner/Banner.svelte b/common/components/banner/Banner.svelte
index 5230b7c..714bf55 100644
--- a/common/components/banner/Banner.svelte
+++ b/common/components/banner/Banner.svelte
@@ -21,7 +21,7 @@
   }
 </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 -->
   <div class='position-absolute top-0 transparent h-450 opacity-0'>.</div>
   {#await data}
@@ -32,9 +32,6 @@
 </div>
 
 <style>
-  .gradient {
-    background: var(--banner-gradient);
-  }
   .opacity-0 {
     opacity: 0;
   }
diff --git a/common/components/banner/FullBanner.svelte b/common/components/banner/FullBanner.svelte
index 1acba79..76a2aa3 100644
--- a/common/components/banner/FullBanner.svelte
+++ b/common/components/banner/FullBanner.svelte
@@ -46,7 +46,9 @@
 {#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' />
 {/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'>
     {current.title.userPreferred}
   </div>
@@ -110,6 +112,12 @@
 </div>
 
 <style>
+  .gradient-bottom {
+    background: var(--banner-gradient-bottom);
+  }
+  .gradient-left {
+    background: var(--banner-gradient-left);
+  }
   .progress-badge {
     transition: width .8s ease;
   }
@@ -146,7 +154,7 @@
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
   }
-  img {
+  img, .gradient-bottom, .gradient-left {
     z-index: -1;
   }
   .font-size-40 {
diff --git a/common/css.css b/common/css.css
index 48d2af3..6bfaa4f 100644
--- a/common/css.css
+++ b/common/css.css
@@ -24,7 +24,8 @@
   --safe-area-top: 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%);
-  --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%);
   --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%);