mwf975_git/tippspiel
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: stronger visual scoring differentiation + streak fix
Build & Deploy Tippspiel / build (push) Successful in 50s
Details

Browse Source 
- Exakt cards: gold glow border, gold banner, trophy emoji, larger animated badge
- Tendency: green accent (was blue), clearer differentiation from Exakt
- Falsch: muted gray, reduced opacity — clearly "lost"
- Profile tip history: solid gold/green/gray badges with distinct borders
- Streak: remove utc_date <= NOW() filter so dev-finished matches count; handle PostgreSQL boolean serialization

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ronny
2026-04-12 09:31:15 +02:00
parent 24edb0cec5
commit 3f757e712f
4 changed files with 48 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/MatchCard.module.css
+30 -23
View File
@@ -341,43 +341,46 @@
/* Farb-Varianten Banner */
.exact {
background: linear-gradient(90deg, rgba(52,211,153,0.18) 0%, rgba(52,211,153,0.08) 100%);
color: #4ade80;
border-top: 1px solid rgba(52,211,153,0.20);
background: linear-gradient(90deg, rgba(254,174,50,0.22) 0%, rgba(254,174,50,0.09) 100%);
color: #FECC4C;
border-top: 1px solid rgba(254,174,50,0.30);
}
.tendency {
background: linear-gradient(90deg, rgba(75,183,248,0.18) 0%, rgba(75,183,248,0.08) 100%);
color: var(--primary);
border-top: 1px solid rgba(75,183,248,0.20);
background: linear-gradient(90deg, rgba(52,211,153,0.18) 0%, rgba(52,211,153,0.08) 100%);
color: #4ade80;
border-top: 1px solid rgba(52,211,153,0.22);
}
.wrong {
background: linear-gradient(90deg, rgba(248,113,113,0.15) 0%, rgba(248,113,113,0.06) 100%);
color: var(--error);
border-top: 1px solid rgba(248,113,113,0.18);
background: linear-gradient(90deg, rgba(148,163,184,0.12) 0%, rgba(148,163,184,0.05) 100%);
color: var(--text-muted);
border-top: 1px solid rgba(148,163,184,0.15);
}
/* Card-Glow je Ergebnis */
.glowExact {
box-shadow:
0 0 0 1px rgba(52,211,153,0.18),
0 10px 30px rgba(52,211,153,0.07),
inset 0 1px 0 rgba(255,255,255,0.07) !important;
0 0 0 1.5px rgba(254,174,50,0.40),
0 0 20px rgba(254,174,50,0.18),
0 10px 30px rgba(254,174,50,0.10),
inset 0 1px 0 rgba(255,255,255,0.09) !important;
border-color: rgba(254,174,50,0.35) !important;
}
.glowTendency {
box-shadow:
0 0 0 1px rgba(75,183,248,0.18),
0 10px 30px rgba(75,183,248,0.07),
0 0 0 1px rgba(52,211,153,0.28),
0 10px 30px rgba(52,211,153,0.10),
inset 0 1px 0 rgba(255,255,255,0.07) !important;
}
.glowWrong {
box-shadow:
0 0 0 1px rgba(248,113,113,0.15),
0 10px 30px rgba(248,113,113,0.05),
inset 0 1px 0 rgba(255,255,255,0.07) !important;
0 0 0 1px rgba(148,163,184,0.15),
0 10px 20px rgba(0,0,0,0.08),
inset 0 1px 0 rgba(255,255,255,0.05) !important;
opacity: 0.85;
}
.editBtn {
@@ -493,19 +496,23 @@
}
.pointsBadge_exact {
background: linear-gradient(135deg, var(--gold), #FFD700);
background: linear-gradient(135deg, #FEAE32, #FFD700, #FECC4C);
color: #1a1a1a;
animation: shimmer 2s ease-in-out;
font-size: 0.9rem;
padding: 5px 12px;
box-shadow: 0 0 12px rgba(254,174,50,0.45);
animation: shimmer 2.5s ease-in-out infinite;
}
.pointsBadge_tendency {
background: var(--success);
color: #1a1a1a;
background: linear-gradient(135deg, var(--success), #22c55e);
color: #0a2a1a;
}
.pointsBadge_wrong {
background: var(--text-muted);
color: var(--bg-deep);
background: var(--surface-high);
color: var(--text-muted);
border: 1px solid var(--border-subtle);
}
/* Missed label */