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:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user