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

Enhance visual appearance of video category rows with stronger gradients

Browse Source 
Update client/src/components/netflix-grid.tsx to apply stronger left and right gradient masks to category rows for improved visual depth.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 890577b1-c154-40a4-a177-a0c6d55320c3
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/890577b1-c154-40a4-a177-a0c6d55320c3/2xHHKQn
This commit is contained in:
sebastjanartic 2025-09-01 20:19:48 +00:00
parent 79d6459a61
commit 56dab34290
2 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1756757950999.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

14
client/src/components/netflix-grid.tsx
View File

@ -243,11 +243,17 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
{category.title}
</h2>
<div className="relative overflow-hidden">
{/* Left gradient fade */}
<div className="absolute left-0 top-0 w-16 h-full bg-gradient-to-r from-bunny-dark via-bunny-dark/80 to-transparent z-[30] pointer-events-none"></div>
{/* Left gradient mask - stronger */}
<div className="absolute left-0 top-0 w-20 h-full z-[30] pointer-events-none"
style={{
background: 'linear-gradient(to right, hsl(250, 50%, 15%) 0%, hsl(250, 50%, 15%) 40%, rgba(60, 40, 90, 0.8) 70%, transparent 100%)'
}}></div>
{/* Right gradient fade */}
<div className="absolute right-0 top-0 w-16 h-full bg-gradient-to-l from-bunny-dark via-bunny-dark/80 to-transparent z-[30] pointer-events-none"></div>
{/* Right gradient mask - stronger */}
<div className="absolute right-0 top-0 w-20 h-full z-[30] pointer-events-none"
style={{
background: 'linear-gradient(to left, hsl(250, 50%, 15%) 0%, hsl(250, 50%, 15%) 40%, rgba(60, 40, 90, 0.8) 70%, transparent 100%)'
}}></div>
{/* Left scroll button - positioned at container edge */}
{!hideScrollButtons && (