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

Update video card appearance with improved text and background styling

Browse Source 
Refactor the `VideoCard` component to adjust the overlay's background color to black with a 75% opacity, blur effect, and update the text styling for the title and metadata.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/074b0e4c-6171-43bd-aa98-f9e04623ca14/DVZN4Rp
This commit is contained in:
sebastjanartic 2025-08-30 14:58:10 +00:00
parent ed2447177b
commit 8b36470d2c
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1756565833133.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

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

@ -212,12 +212,12 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
{/* Title overlay - only show when not playing preview */} {/* Title overlay - only show when not playing preview */}
{!showPreview && ( {!showPreview && (
<div className="absolute bottom-1 left-1 right-1 sm:bottom-2 sm:left-2 sm:right-2 bg-gradient-to-r from-orange-600/80 via-purple-800/70 to-orange-600/80 text-white px-2 py-1.5 sm:px-3 sm:py-2 md:px-4 md:py-3 rounded-lg sm:rounded-xl backdrop-blur-lg border border-orange-400/30 shadow-2xl z-10"> <div className="absolute bottom-2 left-2 right-2 bg-black/75 text-white px-2 py-1 rounded backdrop-blur-sm z-10">
<div className="truncate font-bold text-white text-xs sm:text-sm md:text-base drop-shadow-lg mb-0 sm:mb-0.5 md:mb-1">{video.title}</div> <div className="truncate font-medium text-sm">{video.title}</div>
<div className="text-xs sm:text-sm text-orange-100/95 flex items-center space-x-1 sm:space-x-2 md:space-x-3"> <div className="text-xs text-gray-300 flex items-center space-x-1 mt-0.5">
<span className="bg-orange-500/40 px-1.5 py-0.5 sm:px-2 sm:py-0.5 md:px-3 md:py-1 rounded-full font-medium border border-orange-400/30 text-xs sm:text-xs md:text-sm">{formatViews(video.views)}</span> <span>{formatViews(video.views)}</span>
<span className="text-white/80 font-bold text-xs sm:text-sm">•</span> <span>•</span>
<span className="bg-purple-500/40 px-1.5 py-0.5 sm:px-2 sm:py-0.5 md:px-3 md:py-1 rounded-full font-medium border border-purple-400/30 text-xs sm:text-xs md:text-sm">{formatDate(video.createdAt)}</span> <span>{formatDate(video.createdAt)}</span>
</div> </div>
</div> </div>
)} )}