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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -226,23 +226,15 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
</div> </div>
)} )}
{/* Cinematic title overlay */} {/* Title overlay at bottom */}
<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"> <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent p-3">
<h3 <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" className="text-white text-sm md:text-base font-semibold line-clamp-2 hover:text-bunny-blue transition-colors duration-300 cursor-pointer"
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'
}}
onClick={() => onClick?.(video)} onClick={() => onClick?.(video)}
data-testid={`text-title-${video.id}`} data-testid={`text-title-${video.id}`}
> >
{video.title} {video.title}
</h3> </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>
</div> </div>

12
client/src/index.css
View File

@ -387,21 +387,11 @@ input[data-testid*="search"]::placeholder {
opacity: 0; opacity: 0;
} }
/* Maximum possible z-index for video card hover with cinematic effects */ /* Maximum possible z-index for video card hover */
.video-card:hover { .video-card:hover {
z-index: 2147483647 !important; z-index: 2147483647 !important;
} }
/* Cinematic text animations */
@keyframes titleGlow {
0%, 100% { text-shadow: 2px 2px 8px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.5); }
50% { text-shadow: 2px 2px 12px rgba(0,0,0,0.9), 0 0 25px rgba(255,215,0,0.3), 0 0 35px rgba(255,165,0,0.2); }
}
.video-card:hover h3 {
animation: titleGlow 2s ease-in-out infinite;
}
/* Hide picture-in-picture button on all video elements */ /* Hide picture-in-picture button on all video elements */
video::-webkit-media-controls-picture-in-picture-button { video::-webkit-media-controls-picture-in-picture-button {
display: none !important; display: none !important;