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

Make the header transparent across the entire platform

Browse Source 
Update CSS to make the header transparent, removing background and backdrop filter. Modify button colors in various components from a gradient to a solid rose color. Change placeholder text in the loading spinner.

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/jh6R7y2
This commit is contained in:
sebastjanartic 2025-09-04 13:29:26 +00:00
parent be763410ab
commit 20ccad65c1
5 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/bunny-video-modal.tsx
View File

@ -232,7 +232,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
<>
<Button
onClick={() => navigateToVideo('prev')}
className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-60 hover:bg-opacity-80 text-white border-none p-2 rounded-full z-20"
className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-rose-600 hover:bg-rose-700 text-white border-none p-2 rounded-full z-20"
size="sm"
data-testid="button-prev-video"
>
@ -240,7 +240,7 @@ export default function BunnyVideoModal({ video, isOpen, onClose, onEdit, videos
</Button>
<Button
onClick={() => navigateToVideo('next')}
className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-60 hover:bg-opacity-80 text-white border-none p-2 rounded-full z-20"
className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-rose-600 hover:bg-rose-700 text-white border-none p-2 rounded-full z-20"
size="sm"
data-testid="button-next-video"
>

2
client/src/components/loading-spinner.tsx
View File

@ -4,7 +4,7 @@ interface LoadingSpinnerProps {
className?: string;
}
export function LoadingSpinner({ size = 'md', text = 'Loading...', className = '' }: LoadingSpinnerProps) {
export function LoadingSpinner({ size = 'md', text = 'Amazing Content', className = '' }: LoadingSpinnerProps) {
const sizeClasses = {
sm: 'w-6 h-6',
md: 'w-10 h-10',

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

@ -387,7 +387,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
onClick={() => scroll('left')}
onMouseEnter={() => startAutoScroll('left')}
onMouseLeave={stopAutoScroll}
className="absolute left-2 top-1/2 -translate-y-1/2 z-[60] bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white border-none w-8 h-8 rounded-full transition-all duration-300 hidden md:flex items-center justify-center shadow-xl opacity-75"
className="absolute left-2 top-1/2 -translate-y-1/2 z-[60] bg-rose-600 hover:bg-rose-700 text-white border-none w-8 h-8 rounded-full transition-all duration-300 hidden md:flex items-center justify-center shadow-xl opacity-75"
size="sm"
>
<ChevronLeft className="w-4 h-4" />
@ -400,7 +400,7 @@ function CategoryRow({ category, onVideoClick, hideScrollButtons = false }: Cate
onClick={() => scroll('right')}
onMouseEnter={() => startAutoScroll('right')}
onMouseLeave={stopAutoScroll}
className="absolute right-2 top-1/2 -translate-y-1/2 z-[60] bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white border-none w-8 h-8 rounded-full transition-all duration-300 hidden md:flex items-center justify-center shadow-xl opacity-75"
className="absolute right-2 top-1/2 -translate-y-1/2 z-[60] bg-rose-600 hover:bg-rose-700 text-white border-none w-8 h-8 rounded-full transition-all duration-300 hidden md:flex items-center justify-center shadow-xl opacity-75"
size="sm"
>
<ChevronRight className="w-4 h-4" />

4
client/src/index.css
View File

@ -363,8 +363,8 @@ input[data-testid*="search"]::placeholder {
/* Mobile specific adjustments for header */
@media (max-width: 768px) {
.header-sticky {
background: rgba(30, 20, 40, 0.95) !important;
backdrop-filter: blur(10px);
background: transparent !important;
backdrop-filter: none;
}
.has-fixed-header {

4
client/src/pages/VideoPage.tsx
View File

@ -553,7 +553,7 @@ export default function VideoPage() {
e.stopPropagation();
navigateToVideo('prev');
}}
className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white border-none p-2 rounded-full z-20 shadow-lg hidden md:group-hover:flex items-center justify-center w-10 h-10 transition-all duration-200 opacity-0 group-hover:opacity-75"
className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-rose-600 hover:bg-rose-700 text-white border-none p-2 rounded-full z-20 shadow-lg hidden md:group-hover:flex items-center justify-center w-10 h-10 transition-all duration-200 opacity-0 group-hover:opacity-75"
size="sm"
data-testid="button-prev-video"
>
@ -565,7 +565,7 @@ export default function VideoPage() {
e.stopPropagation();
navigateToVideo('next');
}}
className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gradient-to-r from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white border-none p-2 rounded-full z-20 shadow-lg hidden md:group-hover:flex items-center justify-center w-10 h-10 transition-all duration-200 opacity-0 group-hover:opacity-75"
className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-rose-600 hover:bg-rose-700 text-white border-none p-2 rounded-full z-20 shadow-lg hidden md:group-hover:flex items-center justify-center w-10 h-10 transition-all duration-200 opacity-0 group-hover:opacity-75"
size="sm"
data-testid="button-next-video"
>