Fix me maybe?

contentScript.js

@@ -50,6 +50,8 @@ if (typeof Overlay === "undefined") {
       this.mCenter.style.left = "50%";
       this.mCenter.style.top = "50%";
       this.mCenter.style.transform = "translate(-50%, -50%)";
+      this.mCenter.style.backgroundColor = "rgba(0, 0, 0, 0.75)";
+      this.mCenter.style.fontSize = "4vmax";
 
       this.mBottomRight.id = "overlay-mBottomRight";
       this.mBottomRight.style.right = 0;
@@ -206,6 +208,7 @@ if (typeof Overlay === "undefined") {
     async startWorkout(bike, program) {
       this.bike = bike;
       this.program = program;
+      this.milestones = [];
 
       const bikeId = bike.id;
       const programId = program.id;
@@ -320,15 +323,26 @@ if (typeof Overlay === "undefined") {
     }
 
     updateMilestones(minutes, calories) {
-      this.milestones.push({minutes, calories});
+      const expected = this.expectedCalories(minutes, 0);
+      const diff = calories - expected;
+
+      this.milestones.push({minutes, calories, diff});
 
       if (minutes % 5 === 0) {
         this.milestones = this.milestones.filter(m => m.minutes % 5 === 0)
       }
 
       let lines = "";
-      this.milestones.sort((i, j) => j.minutes - i.minutes).forEach(({minutes, calories}) => {
-        lines += `<tr style="text-align: right"><td>${minutes}&nbsp;</td><td>&nbsp;${calories}</td></tr>`;
+      let lastDiff = 0;
+      this.milestones.sort((i, j) => j.minutes - i.minutes).forEach(({minutes, calories, diff}) => {
+        let color = this.colors["0"];
+        if (diff < 0) {
+          color = diff < lastDiff ? this.colors["-2"] : this.colors["-1"];
+        } else {
+          color = diff > lastDiff ? this.colors["2"] : this.colors["1"];
+        }
+
+        lines += `<tr style="text-align: right; color: ${color}"><td>${minutes}&nbsp;</td><td>&nbsp;${calories}</td></tr>`;
       });
 
       if (lines.length > 0) {