sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve carousel button visibility and video overlay behavior

Browse Source 
Increase z-index for carousel navigation buttons to ensure they appear above other content and adjust CSS to prevent videos from overlaying interactive elements on hover.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2eb1084e-b728-4449-9231-f1665924c8d5
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2eb1084e-b728-4449-9231-f1665924c8d5/yexZbDm
This commit is contained in:
sebastjanartic 2025-08-29 17:58:47 +00:00
parent cc0ec8a2c1
commit 8501ea9b5b
2 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/simple-carousel.tsx
View File

@ -107,7 +107,7 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
onClick={() => scroll('left')} onClick={() => scroll('left')}
onMouseEnter={() => startAutoScroll('left')} onMouseEnter={() => startAutoScroll('left')}
onMouseLeave={stopAutoScroll} onMouseLeave={stopAutoScroll}
className="absolute left-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full flex items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg opacity-80 hover:!opacity-100" className="absolute left-2 top-[45%] -translate-y-1/2 w-12 h-12 z-[10000] bg-black/80 hover:bg-black/95 rounded-full flex items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg opacity-80 hover:!opacity-100"
> >
<ChevronLeft className="w-6 h-6 text-white" /> <ChevronLeft className="w-6 h-6 text-white" />
</button> </button>
@ -117,7 +117,7 @@ export default function SimpleCarousel({ category, onVideoClick }: SimpleCarouse
onClick={() => scroll('right')} onClick={() => scroll('right')}
onMouseEnter={() => startAutoScroll('right')} onMouseEnter={() => startAutoScroll('right')}
onMouseLeave={stopAutoScroll} onMouseLeave={stopAutoScroll}
className="absolute right-2 top-[45%] -translate-y-1/2 w-12 h-12 z-30 bg-black/80 hover:bg-black/95 rounded-full flex items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg opacity-80 hover:!opacity-100" className="absolute right-2 top-[45%] -translate-y-1/2 w-12 h-12 z-[10000] bg-black/80 hover:bg-black/95 rounded-full flex items-center justify-center transition-all duration-300 cursor-pointer border border-white/30 shadow-lg opacity-80 hover:!opacity-100"
> >
<ChevronRight className="w-6 h-6 text-white" /> <ChevronRight className="w-6 h-6 text-white" />
</button> </button>

4
client/src/index.css
View File

@ -387,8 +387,8 @@ input[data-testid*="search"]::placeholder {
opacity: 0; opacity: 0;
} }
/* Force hover video above everything */ /* Force hover video above everything - but not buttons */
.individual-video-hover:hover { .individual-video-hover:hover:not(button):not([role="button"]) {
z-index: 9999 !important; z-index: 9999 !important;
position: relative !important; position: relative !important;
transform: scale(1.05) !important; transform: scale(1.05) !important;