Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-01-11 20:10:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add carousel gradients to episode selector

Browse source
This commit is contained in:
Pas 2025-04-30 21:00:51 -06:00
parent 648df78aad
commit c77a4d2e78
5 changed files with 40 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/assets/css/index.css
View file

@ -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%
);
}
}

2
src/components/overlays/DetailsModal.tsx
View file

@ -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",

2
src/components/player/atoms/Episodes.tsx
View file

@ -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",

38
src/pages/discover/discover.css
View file

@ -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;

1
src/pages/discover/discoverContent.tsx
View file

@ -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";