Some colors fill entire text-box for negative values, just the text for positive

EDIT: I’m officially an idiot, I overlooked an additional entry that was in the floorplan.css file I modified.

Problem solved.


I have the temperatures being reported on the floorplan, and they change color based on temperature intervals. But I’ve seen that when temperatures go below zero (unfortunately, that happens around here), there is a bluish-white box around the value. This does not happen for positive temperatures, and I’m at a complete loss for what’s going on.

See the temperatures under “Outdoor” on the left side, it shows both negative (“Temp” and "Low) and positive (“High”) values.

My floorplan.yaml has:

        - name: dark_sky_temperature
          entities:
            - sensor.dark_sky_temperature
          text_template: '${entity.state ? Math.ceil(entity.state) + "   C": "undefined"}'
          class_template: '
            var temp = parseFloat(entity.state);
            if (temp < 0)
              return "temp-very-low";
            else if (temp < 15)
              return "temp-low";
            else if (temp < 25)
              return "temp-good";
            else
              return "temp-high";
            '

My floorplan.css has:

/* Outdoor Temperature */


.temp-very-low {
  fill: #00a1ff !important;
  fill-opacity: 1 !important;
}


.temp-low {
  fill: #00ddff !important;
  fill-opacity: 1 !important;
}


.temp-good {
  fill: #00c609 !important;
  fill-opacity: 1 !important;
}


.temp-high {
  fill: #ff4c00 !important;
  fill-opacity: 1 !important;
}

Any ideas?