From c77a4d2e78ffb98fa4ae85b80403d535f3bc6c62 Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Wed, 30 Apr 2025 21:00:51 -0600
Subject: [PATCH] add carousel gradients to episode selector

---
 src/assets/css/index.css                 | 38 ++++++++++++++++++++++++
 src/components/overlays/DetailsModal.tsx |  2 +-
 src/components/player/atoms/Episodes.tsx |  2 +-
 src/pages/discover/discover.css          | 38 ------------------------
 src/pages/discover/discoverContent.tsx   |  1 -
 5 files changed, 40 insertions(+), 41 deletions(-)

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index ff1af94c..0b50127a 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -251,3 +251,41 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
 .jiggle {
   animation: jiggle 0.25s infinite;
 }
+
+.carousel-container {
+  position: relative;
+  mask-image: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0), /* Left edge */
+    rgba(0, 0, 0, 1) 80px, /* visible after 80px */
+    rgba(0, 0, 0, 1) calc(100% - 80px), /* invisible 80px from right */
+    rgba(0, 0, 0, 0) 100% /* Right edge */
+  );
+  -webkit-mask-image: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 1) 80px,
+    rgba(0, 0, 0, 1) calc(100% - 80px),
+    rgba(0, 0, 0, 0) 100%
+  );
+  z-index: 1;
+}
+
+@media (max-width: 768px) {
+  .carousel-container {
+    mask-image: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0), /* Left edge */
+    rgba(0, 0, 0, 1) 20px, /* visible after 80px */
+    rgba(0, 0, 0, 1) calc(100% - 20px), /* invisible 80px from right */
+    rgba(0, 0, 0, 0) 100% /* Right edge */
+  );
+  -webkit-mask-image: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 1) 20px,
+    rgba(0, 0, 0, 1) calc(100% - 20px),
+    rgba(0, 0, 0, 0) 100%
+  );
+  }
+}
\ No newline at end of file
diff --git a/src/components/overlays/DetailsModal.tsx b/src/components/overlays/DetailsModal.tsx
index 1a879694..c2584329 100644
--- a/src/components/overlays/DetailsModal.tsx
+++ b/src/components/overlays/DetailsModal.tsx
@@ -582,7 +582,7 @@ function DetailsContent({
 
               <div
                 ref={carouselRef}
-                className="flex overflow-x-auto space-x-4 pb-4 pt-2 lg:px-12 scrollbar-hide"
+                className="flex overflow-x-auto space-x-4 pb-4 pt-2 lg:px-12 scrollbar-hide carousel-container"
                 style={{
                   scrollbarWidth: "none",
                   msOverflowStyle: "none",
diff --git a/src/components/player/atoms/Episodes.tsx b/src/components/player/atoms/Episodes.tsx
index b59e3a23..765f4c0c 100644
--- a/src/components/player/atoms/Episodes.tsx
+++ b/src/components/player/atoms/Episodes.tsx
@@ -196,7 +196,7 @@ function EpisodesView({
 
         <div
           ref={carouselRef}
-          className="flex flex-col lg:flex-row lg:overflow-x-auto space-y-3 sm:space-y-4 lg:space-y-0 lg:space-x-4 pb-4 pt-2 lg:px-12 scrollbar-hide"
+          className="flex flex-col lg:flex-row lg:overflow-x-auto space-y-3 sm:space-y-4 lg:space-y-0 lg:space-x-4 pb-4 pt-2 lg:px-12 scrollbar-hide carousel-container"
           style={{
             scrollbarWidth: "none",
             msOverflowStyle: "none",
diff --git a/src/pages/discover/discover.css b/src/pages/discover/discover.css
index 2f2a9019..3a729225 100644
--- a/src/pages/discover/discover.css
+++ b/src/pages/discover/discover.css
@@ -1,41 +1,3 @@
-.carousel-container {
-  position: relative;
-  mask-image: linear-gradient(
-    to right,
-    rgba(0, 0, 0, 0), /* Left edge */
-    rgba(0, 0, 0, 1) 80px, /* visible after 80px */
-    rgba(0, 0, 0, 1) calc(100% - 80px), /* invisible 80px from right */
-    rgba(0, 0, 0, 0) 100% /* Right edge */
-  );
-  -webkit-mask-image: linear-gradient(
-    to right,
-    rgba(0, 0, 0, 0),
-    rgba(0, 0, 0, 1) 80px,
-    rgba(0, 0, 0, 1) calc(100% - 80px),
-    rgba(0, 0, 0, 0) 100%
-  );
-  z-index: 1;
-}
-
-@media (max-width: 768px) {
-  .carousel-container {
-    mask-image: linear-gradient(
-    to right,
-    rgba(0, 0, 0, 0), /* Left edge */
-    rgba(0, 0, 0, 1) 20px, /* visible after 80px */
-    rgba(0, 0, 0, 1) calc(100% - 20px), /* invisible 80px from right */
-    rgba(0, 0, 0, 0) 100% /* Right edge */
-  );
-  -webkit-mask-image: linear-gradient(
-    to right,
-    rgba(0, 0, 0, 0),
-    rgba(0, 0, 0, 1) 20px,
-    rgba(0, 0, 0, 1) calc(100% - 20px),
-    rgba(0, 0, 0, 0) 100%
-  );
-  }
-}
-
 h2 {
   position: relative;
   z-index: 2;
diff --git a/src/pages/discover/discoverContent.tsx b/src/pages/discover/discoverContent.tsx
index 1ffe4fe2..3614a2a8 100644
--- a/src/pages/discover/discoverContent.tsx
+++ b/src/pages/discover/discoverContent.tsx
@@ -15,7 +15,6 @@ import {
 import { conf } from "@/setup/config";
 import { MediaItem } from "@/utils/mediaTypes";
 
-import "./discover.css";
 import { CategoryButtons } from "./components/CategoryButtons";
 import { LazyMediaCarousel } from "./components/LazyMediaCarousel";
 import { LazyTabContent } from "./components/LazyTabContent";