CSGOWTF/csgowtf
3
2
Fork 1
Code Issues 18 Pull Requests Projects Releases 7 Wiki Activity

fix: Improve text visibility on match hero section

Browse Source 
- Strengthen background gradient overlay from 90/70/50% to 95/85/75% opacity
- Add stronger text shadows to score numbers (double shadow for depth)
- Increase team label opacity from 70% to 90%
- Increase metadata text from white/80 to white with drop-shadow
- Increase tabs background from black/30 to black/50
- Improve colon separator contrast

Fixes readability issues on bright maps like de_dust2.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
vikingowl
2025-11-12 23:16:25 +01:00
parent eb68c5d00b
commit a3955da7f2
1 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/routes/match/[id]/+layout.svelte
View File

@@ -48,7 +48,8 @@
<!-- Background Image -->
<div class="absolute inset-0">
<img src={mapBg} alt={mapName} class="h-full w-full object-cover" onerror={handleImageError} />
<div class="absolute inset-0 bg-gradient-to-r from-black/90 via-black/70 to-black/50"></div>
<!-- Stronger gradient overlay for better text contrast -->
<div class="absolute inset-0 bg-gradient-to-r from-black/95 via-black/85 to-black/75"></div>
</div>
<div class="container relative mx-auto px-4 py-8">
@@ -82,20 +83,28 @@
<!-- Score -->
<div class="mb-6 flex items-center justify-center gap-6">
<div class="text-center">
<div class="text-sm font-medium text-white/70">TERRORISTS</div>
<div class="font-mono text-5xl font-bold text-terrorist drop-shadow-lg">
<div class="text-sm font-medium text-white/90 drop-shadow-md">TERRORISTS</div>
<div
class="font-mono text-5xl font-bold text-terrorist"
style="text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.6);"
>
{match.score_team_a}
</div>
</div>
<div class="text-3xl font-bold text-white/40">:</div>
<div class="text-3xl font-bold text-white/60 drop-shadow-lg">:</div>
<div class="text-center">
<div class="text-sm font-medium text-white/70">COUNTER-TERRORISTS</div>
<div class="font-mono text-5xl font-bold text-ct drop-shadow-lg">{match.score_team_b}</div>
<div class="text-sm font-medium text-white/90 drop-shadow-md">COUNTER-TERRORISTS</div>
<div
class="font-mono text-5xl font-bold text-ct"
style="text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.6);"
>
{match.score_team_b}
</div>
</div>
</div>
<!-- Match Meta -->
<div class="flex flex-wrap items-center justify-center gap-4 text-sm text-white/80">
<div class="flex flex-wrap items-center justify-center gap-4 text-sm text-white drop-shadow-md">
<div class="flex items-center gap-2">
<Calendar class="h-4 w-4" />
<span>{formattedDate}</span>
@@ -111,7 +120,7 @@
</div>
<!-- Tabs -->
<div class="mt-6 rounded-lg bg-black/30 p-4 backdrop-blur-sm">
<div class="mt-6 rounded-lg bg-black/50 p-4 backdrop-blur-sm">
<Tabs {tabs} variant="bordered" size="md" />
</div>
</div>