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

Update video progress bar colors to match the logo

Browse Source 
Modify the video progress bar and hover states to use a cyan-to-purple gradient, replacing the previous orange gradient, in `client/src/components/video-card.tsx` and `client/src/components/video-modal.tsx`.

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 15:44:54 +00:00
parent 0e110cddce
commit 752fdd052c
3 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1756568636261.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 122 KiB

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

@ -197,11 +197,11 @@ export default function VideoCard({ video, onClick, className = "" }: VideoCardP
{duration > 0 && ( {duration > 0 && (
<div className="absolute bottom-1 left-2 right-2 h-2 bg-black/40 rounded-full overflow-hidden backdrop-blur-sm border border-white/20"> <div className="absolute bottom-1 left-2 right-2 h-2 bg-black/40 rounded-full overflow-hidden backdrop-blur-sm border border-white/20">
<div <div
className="h-full bg-gradient-to-r from-orange-500 via-orange-400 to-orange-600 transition-all duration-200 ease-out shadow-lg relative" className="h-full bg-gradient-to-r from-cyan-400 to-purple-500 transition-all duration-200 ease-out shadow-lg relative"
style={{ width: `${(currentTime / duration) * 100}%` }} style={{ width: `${(currentTime / duration) * 100}%` }}
> >
{/* Glow effect */} {/* Glow effect */}
<div className="absolute inset-0 bg-gradient-to-r from-orange-400 via-orange-300 to-orange-500 opacity-60 blur-sm"></div> <div className="absolute inset-0 bg-gradient-to-r from-cyan-300 to-purple-400 opacity-60 blur-sm"></div>
{/* Progress dot at the end */} {/* Progress dot at the end */}
<div className="absolute right-0 top-1/2 transform translate-x-1/2 -translate-y-1/2 w-3 h-3 bg-white rounded-full shadow-lg border-2 border-purple-400"></div> <div className="absolute right-0 top-1/2 transform translate-x-1/2 -translate-y-1/2 w-3 h-3 bg-white rounded-full shadow-lg border-2 border-purple-400"></div>
</div> </div>

2
client/src/components/video-modal.tsx
View File

@ -502,7 +502,7 @@ export default function VideoModal({ video, isOpen, onClose, enableAds = true }:
data-testid="progress-bar" data-testid="progress-bar"
> >
<div <div
className="h-full bg-orange-500 rounded-full transition-all duration-200" className="h-full bg-gradient-to-r from-cyan-400 to-purple-500 rounded-full transition-all duration-200"
style={{ width: `${duration > 0 ? (currentTime / duration) * 100 : 0}%` }} style={{ width: `${duration > 0 ? (currentTime / duration) * 100 : 0}%` }}
/> />