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

fix: Significantly improve text and button visibility on match hero

Browse Source 
- Back button: solid black/60 background with backdrop-blur instead of ghost
- Download Demo button: solid primary background instead of outline
- Map name: triple-layer text shadow for maximum contrast
- Score labels: full white with strong shadows, uppercase styling
- Score numbers: triple shadow with glow effect (0.95/0.8/0.6 opacity layers)
- Colon separator: full white with strong shadow
- Metadata text/icons: strong text shadows and drop-shadow filters
- Tabs container: increased to black/70 with stronger backdrop-blur

All text elements now have multiple layers of shadows for readability
on bright map backgrounds 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:17:54 +01:00
parent a3955da7f2
commit 4cc2b70dbc
1 changed files with 34 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -57,7 +57,7 @@
<div class="mb-4">
<button
onclick={handleBack}
class="btn btn-ghost btn-sm gap-2 text-white/80 hover:text-white"
class="btn btn-sm gap-2 bg-black/60 text-white backdrop-blur-sm hover:bg-black/80"
>
<ArrowLeft class="h-4 w-4" />
<span>Back to Matches</span>
@@ -70,10 +70,17 @@
{#if match.map}
<Badge variant="default" size="lg">{match.map}</Badge>
{/if}
<h1 class="mt-2 text-4xl font-bold text-white drop-shadow-lg">{mapName}</h1>
<h1
class="mt-2 text-4xl font-bold text-white"
style="text-shadow: 0 4px 12px rgba(0, 0, 0, 0.9), 0 2px 6px rgba(0, 0, 0, 0.7);"
>
{mapName}
</h1>
</div>
{#if match.demo_parsed}
<button class="btn btn-outline btn-primary gap-2">
<button
class="btn gap-2 bg-primary/90 text-primary-content backdrop-blur-sm hover:bg-primary"
>
<Download class="h-4 w-4" />
Download Demo
</button>
@@ -83,20 +90,32 @@
<!-- Score -->
<div class="mb-6 flex items-center justify-center gap-6">
<div class="text-center">
<div class="text-sm font-medium text-white/90 drop-shadow-md">TERRORISTS</div>
<div
class="text-sm font-medium uppercase tracking-wider text-white"
style="text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);"
>
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);"
style="text-shadow: 0 6px 12px rgba(0, 0, 0, 0.95), 0 3px 6px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6);"
>
{match.score_team_a}
</div>
</div>
<div class="text-3xl font-bold text-white/60 drop-shadow-lg">:</div>
<div class="text-3xl font-bold text-white" style="text-shadow: 0 4px 8px rgba(0, 0, 0, 0.9);">
:
</div>
<div class="text-center">
<div class="text-sm font-medium text-white/90 drop-shadow-md">COUNTER-TERRORISTS</div>
<div
class="text-sm font-medium uppercase tracking-wider text-white"
style="text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);"
>
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);"
style="text-shadow: 0 6px 12px rgba(0, 0, 0, 0.95), 0 3px 6px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.6);"
>
{match.score_team_b}
</div>
@@ -104,13 +123,16 @@
</div>
<!-- Match Meta -->
<div class="flex flex-wrap items-center justify-center gap-4 text-sm text-white drop-shadow-md">
<div
class="flex flex-wrap items-center justify-center gap-4 text-sm text-white"
style="text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);"
>
<div class="flex items-center gap-2">
<Calendar class="h-4 w-4" />
<Calendar class="h-4 w-4" style="filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));" />
<span>{formattedDate}</span>
</div>
<div class="flex items-center gap-2">
<Clock class="h-4 w-4" />
<Clock class="h-4 w-4" style="filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9));" />
<span>{duration}</span>
</div>
<Badge variant="info" size="sm">MR12 ({match.max_rounds} rounds)</Badge>
@@ -120,7 +142,7 @@
</div>
<!-- Tabs -->
<div class="mt-6 rounded-lg bg-black/50 p-4 backdrop-blur-sm">
<div class="mt-6 rounded-lg bg-black/70 p-4 backdrop-blur-md">
<Tabs {tabs} variant="bordered" size="md" />
</div>
</div>