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

Update video progress bar colors to a new vibrant pinkish-red gradient

Browse Source 
Update the color scheme for video progress bars and category indicators from a purple gradient to a new pinkish-red gradient, incorporating specific hex color codes for both the main progress bar and its associated glow and dot elements.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 946a0075-7e32-454b-b348-9e7f576d7f45
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/946a0075-7e32-454b-b348-9e7f576d7f45/PO46AHf
This commit is contained in:
sebastjanartic 2025-09-04 13:52:57 +00:00
parent 3fb75d4a7b
commit 88a2967b93
3 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/netflix-grid.tsx
View File

@ -472,7 +472,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
}}
className={`rounded-full transition-colors duration-300 ease-in-out ${
index === currentIndex
? 'bg-gradient-to-r from-purple-500 to-blue-500'
? 'bg-gradient-to-r from-[#ec4c73] to-[#e91e63]'
: 'bg-white/25 hover:bg-white/40'
}`}
style={{

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

@ -309,13 +309,13 @@ export default function VideoCard({ video, onClick, className = "", hideOverlay
{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="h-full bg-gradient-to-r from-cyan-400 to-purple-500 transition-all duration-200 ease-out shadow-lg relative"
className="h-full bg-gradient-to-r from-[#ec4c73] to-[#e91e63] transition-all duration-200 ease-out shadow-lg relative"
style={{ width: `${(currentTime / duration) * 100}%` }}
>
{/* Glow effect */}
<div className="absolute inset-0 bg-gradient-to-r from-cyan-300 to-purple-400 opacity-60 blur-sm"></div>
<div className="absolute inset-0 bg-gradient-to-r from-[#f57496] to-[#f06292] opacity-60 blur-sm"></div>
{/* 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-[#ec4c73]"></div>
</div>
</div>
)}

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

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