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

Update video card appearance for better readability and visual appeal

Browse Source 
Refactor VideoCard component to simplify title overlay styling, remove cinematic text animations, and adjust text size and color for improved clarity.

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/kdQ95gE
This commit is contained in:
sebastjanartic
2025-08-29 20:14:31 +00:00
parent 9d73ffc20e
commit 3313d7ab18
2 changed files with 4 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/video-card.tsx
+3 -11
View File
@@ -226,23 +226,15 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
</div>
)}
{/* Cinematic title overlay */}
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/95 via-black/60 to-transparent p-4 transition-all duration-500 group-hover:from-black/100 group-hover:via-black/80">
{/* Title overlay at bottom */}
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent p-3">
<h3
className="text-white text-sm md:text-lg font-bold tracking-wide leading-tight line-clamp-2 hover:text-yellow-400 transition-all duration-500 cursor-pointer transform group-hover:scale-105 drop-shadow-2xl"
style={{
fontFamily: 'system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif',
textShadow: '2px 2px 8px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.5)',
letterSpacing: '0.025em'
}}
className="text-white text-sm md:text-base font-semibold line-clamp-2 hover:text-bunny-blue transition-colors duration-300 cursor-pointer"
onClick={() => onClick?.(video)}
data-testid={`text-title-${video.id}`}
>
{video.title}
</h3>
{/* Subtle accent line */}
<div className="w-0 h-0.5 bg-gradient-to-r from-yellow-400 to-orange-500 transition-all duration-700 group-hover:w-full mt-2 opacity-0 group-hover:opacity-100"></div>
</div>
</div>