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

fix discover scroll bars

Browse source
This commit is contained in:
Pas 2025-02-24 17:57:08 -07:00
parent af64857017
commit 7861e7ace7
2 changed files with 14 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,17 +1,17 @@
.carousel-container {
position: relative;
mask-image: linear-gradient(
to right,
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),
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;
@ -33,3 +33,12 @@ button {
position: relative;
z-index: 2;
}
.scrollbar::-webkit-scrollbar {
display: none;
}
.scrollbar {
scrollbar-width: none !important;
-ms-overflow-style: -ms-autohiding-scrollbar !important;
}

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

@ -624,11 +624,6 @@ export function DiscoverContent() {
<div
id={`carousel-${categorySlug}`}
className="flex whitespace-nowrap pt-0 pb-4 overflow-auto scrollbar rounded-xl overflow-y-hidden"
style={{
scrollbarWidth: "thin",
// scrollbarColor: `${bgColor} transparent`,
scrollbarColor: "transparent transparent",
}}
ref={(el) => {
carouselRefs.current[categorySlug] = el;
}}
@ -1079,10 +1074,6 @@ export function DiscoverContent() {
<div
id="button-carousel-providers"
className="flex lg:px-4 mb-4 overflow-x-auto scroll-smooth"
style={{
scrollbarWidth: "thin",
scrollbarColor: "transparent transparent",
}}
>
<div className="flex space-x-2 py-1">
{renderMovieProviderButtons()}
@ -1099,10 +1090,6 @@ export function DiscoverContent() {
<div
id="button-carousel-movies"
className="flex lg:px-4 mb-4 overflow-x-auto scroll-smooth"
style={{
scrollbarWidth: "thin",
scrollbarColor: "transparent transparent",
}}
>
<div className="flex space-x-2 py-1">
{renderTopMovieButtons()}
@ -1126,10 +1113,6 @@ export function DiscoverContent() {
<div
id="button-carousel-tv-providers"
className="flex lg:px-4 mb-4 overflow-x-auto scroll-smooth"
style={{
scrollbarWidth: "thin",
scrollbarColor: "transparent transparent",
}}
>
<div className="flex space-x-2 py-1">
{renderTvProviderButtons()}
@ -1146,10 +1129,6 @@ export function DiscoverContent() {
<div
id="button-carousel-tvshows"
className="flex lg:px-4 mb-4 overflow-x-auto scroll-smooth"
style={{
scrollbarWidth: "thin",
scrollbarColor: "transparent transparent",
}}
>
<div className="flex space-x-2 py-1">
{renderTopTvButtons()}
@ -1219,10 +1198,6 @@ export function DiscoverContent() {
<div
id="button-carousel-providers"
className="flex mb-4 overflow-x-auto scroll-smooth"
style={{
scrollbarWidth: "thin",
scrollbarColor: "transparent transparent",
}}
>
<div className="flex space-x-2 py-1">
{renderMovieProviderButtons()}
@ -1302,10 +1277,6 @@ export function DiscoverContent() {
<div
id="button-carousel-tv-providers"
className="flex mb-0 overflow-x-auto scroll-smooth"
style={{
scrollbarWidth: "thin",
scrollbarColor: "transparent transparent",
}}
>
<div className="flex space-x-2 py-1">
{renderTvProviderButtons()}