pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
add carousel gradients to episode selector
+40
-41
+38
src/assets/css/index.css
+38
src/assets/css/index.css
···
251
251
.jiggle {
252
252
animation: jiggle 0.25s infinite;
253
253
}
254
+
255
+
.carousel-container {
256
+
position: relative;
257
+
mask-image: linear-gradient(
258
+
to right,
259
+
rgba(0, 0, 0, 0), /* Left edge */
260
+
rgba(0, 0, 0, 1) 80px, /* visible after 80px */
261
+
rgba(0, 0, 0, 1) calc(100% - 80px), /* invisible 80px from right */
262
+
rgba(0, 0, 0, 0) 100% /* Right edge */
263
+
);
264
+
-webkit-mask-image: linear-gradient(
265
+
to right,
266
+
rgba(0, 0, 0, 0),
267
+
rgba(0, 0, 0, 1) 80px,
268
+
rgba(0, 0, 0, 1) calc(100% - 80px),
269
+
rgba(0, 0, 0, 0) 100%
270
+
);
271
+
z-index: 1;
272
+
}
273
+
274
+
@media (max-width: 768px) {
275
+
.carousel-container {
276
+
mask-image: linear-gradient(
277
+
to right,
278
+
rgba(0, 0, 0, 0), /* Left edge */
279
+
rgba(0, 0, 0, 1) 20px, /* visible after 80px */
280
+
rgba(0, 0, 0, 1) calc(100% - 20px), /* invisible 80px from right */
281
+
rgba(0, 0, 0, 0) 100% /* Right edge */
282
+
);
283
+
-webkit-mask-image: linear-gradient(
284
+
to right,
285
+
rgba(0, 0, 0, 0),
286
+
rgba(0, 0, 0, 1) 20px,
287
+
rgba(0, 0, 0, 1) calc(100% - 20px),
288
+
rgba(0, 0, 0, 0) 100%
289
+
);
290
+
}
291
+
}
+1
-1
src/components/overlays/DetailsModal.tsx
+1
-1
src/components/overlays/DetailsModal.tsx
···
582
582
583
583
<div
584
584
ref={carouselRef}
585
-
className="flex overflow-x-auto space-x-4 pb-4 pt-2 lg:px-12 scrollbar-hide"
585
+
className="flex overflow-x-auto space-x-4 pb-4 pt-2 lg:px-12 scrollbar-hide carousel-container"
586
586
style={{
587
587
scrollbarWidth: "none",
588
588
msOverflowStyle: "none",
+1
-1
src/components/player/atoms/Episodes.tsx
+1
-1
src/components/player/atoms/Episodes.tsx
···
196
196
197
197
<div
198
198
ref={carouselRef}
199
-
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"
199
+
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"
200
200
style={{
201
201
scrollbarWidth: "none",
202
202
msOverflowStyle: "none",
-38
src/pages/discover/discover.css
-38
src/pages/discover/discover.css
···
1
-
.carousel-container {
2
-
position: relative;
3
-
mask-image: linear-gradient(
4
-
to right,
5
-
rgba(0, 0, 0, 0), /* Left edge */
6
-
rgba(0, 0, 0, 1) 80px, /* visible after 80px */
7
-
rgba(0, 0, 0, 1) calc(100% - 80px), /* invisible 80px from right */
8
-
rgba(0, 0, 0, 0) 100% /* Right edge */
9
-
);
10
-
-webkit-mask-image: linear-gradient(
11
-
to right,
12
-
rgba(0, 0, 0, 0),
13
-
rgba(0, 0, 0, 1) 80px,
14
-
rgba(0, 0, 0, 1) calc(100% - 80px),
15
-
rgba(0, 0, 0, 0) 100%
16
-
);
17
-
z-index: 1;
18
-
}
19
-
20
-
@media (max-width: 768px) {
21
-
.carousel-container {
22
-
mask-image: linear-gradient(
23
-
to right,
24
-
rgba(0, 0, 0, 0), /* Left edge */
25
-
rgba(0, 0, 0, 1) 20px, /* visible after 80px */
26
-
rgba(0, 0, 0, 1) calc(100% - 20px), /* invisible 80px from right */
27
-
rgba(0, 0, 0, 0) 100% /* Right edge */
28
-
);
29
-
-webkit-mask-image: linear-gradient(
30
-
to right,
31
-
rgba(0, 0, 0, 0),
32
-
rgba(0, 0, 0, 1) 20px,
33
-
rgba(0, 0, 0, 1) calc(100% - 20px),
34
-
rgba(0, 0, 0, 0) 100%
35
-
);
36
-
}
37
-
}
38
-
39
1
h2 {
40
2
position: relative;
41
3
z-index: 2;
-1
src/pages/discover/discoverContent.tsx
-1
src/pages/discover/discoverContent.tsx
···
15
15
import { conf } from "@/setup/config";
16
16
import { MediaItem } from "@/utils/mediaTypes";
17
17
18
-
import "./discover.css";
19
18
import { CategoryButtons } from "./components/CategoryButtons";
20
19
import { LazyMediaCarousel } from "./components/LazyMediaCarousel";
21
20
import { LazyTabContent } from "./components/LazyTabContent";