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

Enhance visual appeal with gradient text and remove static opacity from background elements

Browse Source 
Update CSS styles to implement gradient backgrounds for text elements and remove fixed opacity settings in various page components.

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/d8KMm1m
This commit is contained in:
sebastjanartic 2025-08-28 15:32:53 +00:00
parent e866b9fd67
commit 89932a2530
4 changed files with 26 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
client/src/index.css
View File

@ -311,35 +311,50 @@ input[data-testid*="search"]::placeholder {
.bg-text-large {
position: absolute;
font-family: 'Inter', sans-serif;
font-weight: 800;
color: rgba(255, 255, 255, 0.015);
font-weight: 900;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(147, 51, 234, 0.2));
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-size: clamp(120px, 15vw, 220px);
pointer-events: none;
z-index: 0;
user-select: none;
white-space: nowrap;
text-shadow: 0 0 30px rgba(59, 130, 246, 0.4);
filter: drop-shadow(0 0 20px rgba(147, 51, 234, 0.3));
}
.bg-text-medium {
position: absolute;
font-family: 'Inter', sans-serif;
font-weight: 500;
color: rgba(255, 255, 255, 0.012);
font-weight: 700;
background: linear-gradient(135deg, rgba(147, 51, 234, 0.2), rgba(6, 182, 212, 0.18));
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-size: clamp(80px, 10vw, 150px);
pointer-events: none;
z-index: 0;
user-select: none;
white-space: nowrap;
text-shadow: 0 0 25px rgba(147, 51, 234, 0.3);
filter: drop-shadow(0 0 15px rgba(6, 182, 212, 0.25));
}
.bg-text-small {
position: absolute;
font-family: 'Inter', sans-serif;
font-weight: 300;
color: rgba(255, 255, 255, 0.008);
font-weight: 500;
background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(59, 130, 246, 0.12));
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-size: clamp(50px, 6vw, 100px);
pointer-events: none;
z-index: 0;
user-select: none;
white-space: nowrap;
text-shadow: 0 0 20px rgba(6, 182, 212, 0.25);
filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.2));
}

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

@ -164,7 +164,7 @@ export default function VideoPage() {
<div className="bg-text-large" style={{top: '20%', right: '8%', transform: 'rotate(-15deg)'}}>
go4.video
</div>
<div className="bg-text-medium" style={{top: '60%', left: '5%', transform: 'rotate(20deg)', opacity: 0.5}}>
<div className="bg-text-medium" style={{top: '60%', left: '5%', transform: 'rotate(20deg)'}}>
go4.video
</div>
<div className="bg-text-small" style={{top: '80%', right: '30%', transform: 'rotate(-25deg)'}}>

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

@ -94,13 +94,13 @@ export default function Home() {
<div className="bg-text-small" style={{top: '70%', right: '15%', transform: 'rotate(-10deg)'}}>
go4.video
</div>
<div className="bg-text-large" style={{top: '85%', left: '25%', transform: 'rotate(25deg)', opacity: 0.4}}>
<div className="bg-text-large" style={{top: '85%', left: '25%', transform: 'rotate(25deg)'}}>
go4.video
</div>
<div className="bg-text-medium" style={{top: '25%', left: '55%', transform: 'rotate(-30deg)', opacity: 0.6}}>
<div className="bg-text-medium" style={{top: '25%', left: '55%', transform: 'rotate(-30deg)'}}>
go4.video
</div>
<div className="bg-text-small" style={{top: '60%', left: '70%', transform: 'rotate(12deg)', opacity: 0.5}}>
<div className="bg-text-small" style={{top: '60%', left: '70%', transform: 'rotate(12deg)'}}>
go4.video
</div>

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

@ -41,7 +41,7 @@ export default function NotFound() {
<div className="bg-text-large" style={{top: '30%', right: '10%', transform: 'rotate(-18deg)'}}>
go4.video
</div>
<div className="bg-text-medium" style={{top: '70%', left: '8%', transform: 'rotate(22deg)', opacity: 0.7}}>
<div className="bg-text-medium" style={{top: '70%', left: '8%', transform: 'rotate(22deg)'}}>
go4.video
</div>