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

Make decorative triangles static to prevent visual jumping

Browse Source 
Replaced 'floating-triangles' CSS class with 'static-triangles' and removed animations from triangle decorations in the header and page backgrounds to ensure stable visual elements.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7424866-83d1-4486-a212-ac12b4c7becf
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/d7424866-83d1-4486-a212-ac12b4c7becf/UjCt1XL
This commit is contained in:
sebastjanartic 2025-08-28 17:07:13 +00:00
parent b03df1c422
commit 44d6f571a5
5 changed files with 8 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/components/search-header.tsx
View File

@ -47,9 +47,9 @@ export default function SearchHeader({
<div className="bunny-gray border-b border-white/20 sticky top-0 z-50 backdrop-blur-md relative overflow-hidden">
{/* Triangle decorations v headerju - z nižjim z-index da ne zakrivajo besedila */}
<div className="absolute top-2 right-[25%] w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-blue-400/8 rotate-12 z-0"></div>
<div className="absolute top-3 left-[40%] w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[25px] border-b-purple-400/6 -rotate-6 z-0"></div>
{/* Static triangle decorations - fixed positioning */}
<div className="absolute top-2 right-[25%] w-0 h-0 border-l-[25px] border-l-transparent border-r-[25px] border-r-transparent border-b-[35px] border-b-blue-400/8 transform rotate-12 z-0 pointer-events-none"></div>
<div className="absolute top-3 left-[40%] w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-b-[25px] border-b-purple-400/6 transform -rotate-6 z-0 pointer-events-none"></div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div className="flex items-center justify-between h-20">

35
client/src/index.css
View File

@ -272,44 +272,13 @@ input[data-testid*="search"]::placeholder {
z-index: 1;
}
.floating-triangles {
/* Static triangle decorations - no animations to prevent jumping */
.static-triangles {
position: relative;
overflow: hidden;
}
.floating-triangles::before {
content: '';
position: absolute;
top: 15%;
right: 2%;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 30px solid rgba(59, 130, 246, 0.03);
transform: rotate(30deg);
z-index: -1;
}
.floating-triangles::after {
content: '';
position: absolute;
bottom: 25%;
left: 2%;
width: 0;
height: 0;
border-left: 18px solid transparent;
border-right: 18px solid transparent;
border-bottom: 28px solid rgba(147, 51, 234, 0.03);
transform: rotate(-15deg);
z-index: -1;
}
/* Background go4.video logo decorations */
.floating-triangles {
position: relative;
overflow: hidden;
}
.bg-logo-large {
position: absolute;

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

@ -121,7 +121,7 @@ export default function VideoPage() {
}
return (
<div className="min-h-screen bunny-dark floating-triangles">
<div className="min-h-screen bunny-dark static-triangles">
{/* Header with triangle design */}
<div className="bunny-gray border-b border-white/20 sticky top-0 z-50 backdrop-blur-md relative overflow-hidden">
{/* Triangle decorations in header - same as home page */}

2
client/src/pages/home.tsx
View File

@ -77,7 +77,7 @@ export default function Home() {
}, [searchQuery, offset, refetch]);
return (
<div className="min-h-screen bunny-dark floating-triangles">
<div className="min-h-screen bunny-dark static-triangles">
<SearchHeader
onSearch={handleSearch}
onViewChange={setViewMode}

2
client/src/pages/not-found.tsx
View File

@ -5,7 +5,7 @@ import go4LogoPath from "@assets/go4_1756394900352.png";
export default function NotFound() {
return (
<div className="min-h-screen bunny-dark floating-triangles">
<div className="min-h-screen bunny-dark static-triangles">
{/* Header - same as other pages */}
<div className="bunny-gray border-b border-white/20 sticky top-0 z-50 backdrop-blur-md relative overflow-hidden">
{/* Triangle decorations in header */}