dj7nt/award
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

fix: improve dark mode contrast for Points and Target badges in award detail view

Browse Source 
Replace inline styles with CSS classes that use semi-transparent
backgrounds in dark mode instead of bright solid colors.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Joerg
2026-01-23 14:07:23 +01:00
parent 8b846bffbe
commit 2ae47232cb
1 changed files with 21 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/frontend/src/routes/awards/[id]/+page.svelte
View File

@@ -631,7 +631,7 @@
<span class="summary-label">Confirmed:</span>
<span class="summary-value">{filteredEntities.filter((e) => e.confirmed).length}</span>
</div>
<div class="summary-card" style="background-color: #fff3cd; border-color: #ffc107;">
<div class="summary-card points">
<span class="summary-label">Points:</span>
<span class="summary-value">{earnedPoints}</span>
</div>
@@ -640,7 +640,7 @@
<span class="summary-label">Needed:</span>
<span class="summary-value">{neededPoints}</span>
</div>
<div class="summary-card" style="background-color: #e3f2fd; border-color: #2196f3;">
<div class="summary-card target">
<span class="summary-label">Target:</span>
<span class="summary-value">{targetPoints}</span>
</div>
@@ -665,7 +665,7 @@
<span class="summary-label">Needed:</span>
<span class="summary-value">{neededCount}</span>
</div>
<div class="summary-card" style="background-color: #e3f2fd; border-color: #2196f3;">
<div class="summary-card target">
<span class="summary-label">Target:</span>
<span class="summary-value">{targetCount}</span>
</div>
@@ -1141,6 +1141,24 @@
background-color: var(--color-warning-bg);
}
.summary-card.points {
border-color: #ff9800;
background-color: var(--bg-secondary);
}
:global(.dark) .summary-card.points {
background-color: rgba(255, 152, 0, 0.15);
}
.summary-card.target {
border-color: var(--color-primary);
background-color: var(--bg-secondary);
}
:global(.dark) .summary-card.target {
background-color: rgba(33, 150, 243, 0.15);
}
.summary-label {
display: block;
font-size: 0.875rem;