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

Improve video titles displayed on hover for better readability

Browse Source 
Update VideoCard component to display the first part of the video title in a larger font and the second part in a smaller font, enhancing visual hierarchy and user experience.

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/S0hX96S
This commit is contained in:
sebastjanartic 2025-09-02 10:59:43 +00:00
parent 21fb013487
commit 12df511504
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/components/video-card.tsx
View File

@ -213,12 +213,12 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
{!showPreview && !hideOverlay && (
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent z-10 flex items-end p-4 group-hover:from-black/95 transition-all duration-300">
<div className="w-full">
<p className="text-white/95 text-base font-bold drop-shadow-xl transform group-hover:scale-105 transition-transform duration-300 mb-1" style={{fontFamily: 'Inter, sans-serif', textShadow: '1px 1px 4px rgba(0,0,0,0.8)'}}>
<h3 className="text-white font-extrabold text-xl leading-tight drop-shadow-2xl tracking-wide transform group-hover:scale-105 transition-transform duration-300 mb-1" style={{fontFamily: 'Poppins, Inter, sans-serif', textShadow: '2px 2px 8px rgba(0,0,0,0.8)'}}>
{video.title.split(' - ')[0] || 'go4.video'}
</p>
<h3 className="text-white font-extrabold text-xl leading-tight drop-shadow-2xl tracking-wide transform group-hover:scale-105 transition-transform duration-300" style={{fontFamily: 'Poppins, Inter, sans-serif', textShadow: '2px 2px 8px rgba(0,0,0,0.8)'}}>
{video.title.split(' - ')[1] || video.title}
</h3>
<p className="text-white/85 text-sm font-medium drop-shadow-xl transform group-hover:scale-105 transition-transform duration-300" style={{fontFamily: 'Inter, sans-serif', textShadow: '1px 1px 4px rgba(0,0,0,0.8)'}}>
{video.title.split(' - ')[1] || video.title}
</p>
</div>
</div>
)}