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

Improve visual layering and stacking context for video page elements

Browse Source 
Adjust z-index values for header and main content containers on the VideoPage to ensure correct visual layering, especially with overlapping elements or complex CSS.

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/DFHhzsd
This commit is contained in:
sebastjanartic 2025-08-30 20:23:11 +00:00
parent e967dfdecd
commit 90c50cc1da
2 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1756585370154.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 512 KiB

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

@ -182,7 +182,7 @@ export default function VideoPage() {
return ( return (
<div className="min-h-screen bunny-dark static-triangles"> <div className="min-h-screen bunny-dark static-triangles">
{/* Header with triangle design */} {/* Header with triangle design */}
<div className="bunny-gray border-b border-white/20 sticky top-0 z-50 backdrop-blur-md relative overflow-hidden"> <div className="bunny-gray border-b border-white/20 sticky top-0 z-[60] backdrop-blur-md relative overflow-hidden">
{/* Triangle decorations in header - same as home page */} {/* Triangle decorations in header - same as home page */}
<div className="absolute top-2 right-20 w-0 h-0 border-l-[35px] border-l-transparent border-r-[35px] border-r-transparent border-b-[50px] border-b-blue-400/15 rotate-12"></div> <div className="absolute top-2 right-20 w-0 h-0 border-l-[35px] border-l-transparent border-r-[35px] border-r-transparent border-b-[50px] border-b-blue-400/15 rotate-12"></div>
<div className="absolute top-3 left-1/3 w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-purple-400/12 -rotate-6"></div> <div className="absolute top-3 left-1/3 w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-purple-400/12 -rotate-6"></div>
@ -299,7 +299,7 @@ export default function VideoPage() {
}} }}
/> />
<div className="flex flex-col lg:flex-row gap-6 relative z-10 bg-green-500/20 border border-green-500 p-4"> <div className="flex flex-col lg:flex-row gap-6 relative z-[60] bg-green-500/20 border border-green-500 p-4">
{/* Main video section */} {/* Main video section */}
<div className="flex-1 bg-purple-500/20 border border-purple-500 p-2"> <div className="flex-1 bg-purple-500/20 border border-purple-500 p-2">
{/* Video player */} {/* Video player */}