From 150cb268bde7b82df90874b7559e1da014272ffc Mon Sep 17 00:00:00 2001 From: peter Date: Wed, 21 Jan 2026 00:02:06 +0100 Subject: [PATCH] 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 --- src/TrueCV.Web/Components/Pages/Report.razor | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/TrueCV.Web/Components/Pages/Report.razor b/src/TrueCV.Web/Components/Pages/Report.razor index c34e23e..519540b 100644 --- a/src/TrueCV.Web/Components/Pages/Report.razor +++ b/src/TrueCV.Web/Components/Pages/Report.razor @@ -526,7 +526,6 @@ .score-roundel .score-ring-bg { fill: none; - stroke: rgba(255, 255, 255, 0.2); stroke-width: 8; } @@ -538,15 +537,25 @@ 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 { stroke: #10b981; } + .score-roundel.score-medium .score-ring-bg { + stroke: rgba(245, 158, 11, 0.3); + } .score-roundel.score-medium .score-ring-progress { stroke: #f59e0b; } + .score-roundel.score-low .score-ring-bg { + stroke: rgba(239, 68, 68, 0.5); + } + .score-roundel.score-low .score-ring-progress { stroke: #ef4444; }