fix color outline option

D34DC3N73R · Oct 21, 2021 · a1ae01b · a1ae01b
1 parent eb12dc0
commit a1ae01b
Showing 1 changed file with 11 additions and 7 deletions.
diff --git a/dist/ha-nfl-card.js b/dist/ha-nfl-card.js
@@ -23,13 +23,14 @@ class NFLCard extends LitElement {
 
     const stateObj = this.hass.states[this._config.entity];
     const outline = this._config.outline;
+    const outlineColor = this._config.outline_color;
     const teamProb = (stateObj.attributes.team_win_probability * 100).toFixed(0);
     const oppoProb = (stateObj.attributes.opponent_win_probability * 100).toFixed(0);
 
-    var outlineColor = this._config.outline_color;
     var dateForm = new Date (stateObj.attributes.date);
     var gameDay = dateForm.toLocaleDateString('en-US', { weekday: 'long' });
     var gameTime = dateForm.toLocaleTimeString('en-US', { hour: '2-digit', minute:'2-digit' });
+    var outColor = outlineColor;
 
     if (outline == true) {
       var clrOut = 1;
@@ -42,8 +43,8 @@ class NFLCard extends LitElement {
       var probRadius = 6;
     }
     if (!this._config.outline_color) {
-      var outlineColor = white;
-    }  
+      var outColor = '#ffffff';
+    }
     if (stateObj.attributes.possession == stateObj.attributes.team_id) {
       var teamPoss = 1;
     }
@@ -72,6 +73,9 @@ class NFLCard extends LitElement {
     }
     if (stateObj.state == 'unavailable') {
       return html`
+        <style>
+          ha-card {padding: 10px 16px;}
+        </style>
         <ha-card>
           Sensor unavailable: ${this._config.entity}
         </ha-card> 
@@ -140,8 +144,8 @@ class NFLCard extends LitElement {
             .timeouts { margin: 0 auto; width: 70%; }
             .timeouts div.opponent-to:nth-child(-n + ${stateObj.attributes.opponent_timeouts})  { opacity: 1; }
             .timeouts div.team-to:nth-child(-n + ${stateObj.attributes.team_timeouts})  { opacity: 1; }
-            .team-to { height: 6px; border-radius: ${toRadius}px; border: ${clrOut}px solid ${outlineColor}; width: 20%; background-color: ${teamColor}; display: inline-block; margin: 0 auto; position: relative; opacity: 0.2; }
-            .opponent-to { height: 6px; border-radius: ${toRadius}px; border: ${clrOut}px solid ${outlineColor}; width: 20%; background-color: ${oppoColor}; display: inline-block; margin: 0 auto; position: relative; opacity: 0.2; }
+            .team-to { height: 6px; border-radius: ${toRadius}px; border: ${clrOut}px solid ${outColor}; width: 20%; background-color: ${teamColor}; display: inline-block; margin: 0 auto; position: relative; opacity: 0.2; }
+            .opponent-to { height: 6px; border-radius: ${toRadius}px; border: ${clrOut}px solid ${outColor}; width: 20%; background-color: ${oppoColor}; display: inline-block; margin: 0 auto; position: relative; opacity: 0.2; }
             .status { text-align:center; font-size:1.6em; font-weight: 700; }
             .sub1 { font-weight: 700; font-size: 1.2em; margin: 6px 0 2px; }
             .sub1, .sub2, .sub3 { display: flex; justify-content: space-between; align-items: center; margin: 2px 0; }
@@ -153,8 +157,8 @@ class NFLCard extends LitElement {
             .play-clock { font-size: 1.4em; text-align: center; margin-top: -24px; }
             .probability-text { text-align: center; }
             .prob-flex { width: 100%; display: flex; justify-content: center; margin-top: 4px; }
-            .opponent-probability { width: ${oppoProb}%; background-color: ${oppoColor}; height: 12px; border-radius: 0 ${probRadius}px ${probRadius}px 0; border: ${clrOut}px solid ${outlineColor}; border-left: 0; transition: all 1s ease-out; }
-            .team-probability { width: ${teamProb}%; background-color: ${teamColor}; height: 12px; border-radius: ${probRadius}px 0 0 ${probRadius}px; border: ${clrOut}px solid ${outlineColor}; border-right: 0; transition: all 1s ease-out; }
+            .opponent-probability { width: ${oppoProb}%; background-color: ${oppoColor}; height: 12px; border-radius: 0 ${probRadius}px ${probRadius}px 0; border: ${clrOut}px solid ${outColor}; border-left: 0; transition: all 1s ease-out; }
+            .team-probability { width: ${teamProb}%; background-color: ${teamColor}; height: 12px; border-radius: ${probRadius}px 0 0 ${probRadius}px; border: ${clrOut}px solid ${outColor}; border-right: 0; transition: all 1s ease-out; }
             .probability-wrapper { display: flex; }
             .percent { padding: 0 6px; }
             .post-game { margin: 0 auto; }