Colour score ring background based on score level

- Red ring for low/zero scores
- Amber ring for medium scores
- Green ring for high scores
- Background ring now visible and coloured appropriately

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-21 00:02:06 +01:00
parent a15be6423a
commit 150cb268bd

View File

@@ -526,7 +526,6 @@
.score-roundel .score-ring-bg { .score-roundel .score-ring-bg {
fill: none; fill: none;
stroke: rgba(255, 255, 255, 0.2);
stroke-width: 8; stroke-width: 8;
} }
@@ -538,15 +537,25 @@
transition: stroke-dasharray 0.6s ease; transition: stroke-dasharray 0.6s ease;
} }
/* Score color variants */ /* Score color variants - colours both the background ring and progress */
.score-roundel.score-high .score-ring-bg {
stroke: rgba(16, 185, 129, 0.3);
}
.score-roundel.score-high .score-ring-progress { .score-roundel.score-high .score-ring-progress {
stroke: #10b981; stroke: #10b981;
} }
.score-roundel.score-medium .score-ring-bg {
stroke: rgba(245, 158, 11, 0.3);
}
.score-roundel.score-medium .score-ring-progress { .score-roundel.score-medium .score-ring-progress {
stroke: #f59e0b; stroke: #f59e0b;
} }
.score-roundel.score-low .score-ring-bg {
stroke: rgba(239, 68, 68, 0.5);
}
.score-roundel.score-low .score-ring-progress { .score-roundel.score-low .score-ring-progress {
stroke: #ef4444; stroke: #ef4444;
} }