Fixed paper-card-background-color (disabled)

[ricardoquecria]

The paper-card-background-color variable was disabled in version 0.113. The recommendation is to use the ha-card-background.

[nitobuendia]

Not the owner here. However, var(--ha-card-background) didn't seem to solve it for me. Using var(--card-background-color) instead did. This value also seems to be align with this pull request description in frontend.

[anachronox99]

I tried this change - applied it to my local file, restarted HA, but the problem still persists.

  style.textContent = `
      ha-card {
        text-align: center;
        --bignumber-color: ${this._getColor(null, cardConfig)};
        --bignumber-fill-color: ${this._getStyle(null, cardConfig)};
        --bignumber-percent: 100%;
        --bignumber-direction: ${cardConfig.from};
        --base-unit: ${cardConfig.scale};
        padding: calc(var(--base-unit)*0.6) calc(var(--base-unit)*0.3);
        **background: linear-gradient(to var(--bignumber-direction), var(--card-background-color) var(--bignumber-percent), var(--bignumber-fill-color) var(--bignumber-percent));**
      }
      #value {
        font-size: calc(var(--base-unit) * 1.3);
        line-height: calc(var(--base-unit) * 1.3);
        color: var(--bignumber-color);
      }
      #title {
        font-size: calc(var(--base-unit) * 0.5);
        line-height: calc(var(--base-unit) * 0.5);
        color: var(--bignumber-color);
      }
    `;

[nitobuendia]

@anachronox99 Did you update the version, refreshed cache, click update resources, etc?

[anachronox99]

@anachronox99 Did you update the version, refreshed cache, click update resources, etc?

OK - no. I just copied the code into the existing file and saved it, then restarted HA. Clearly I'm missing some steps? That's what I've always done

[nitobuendia]

@anachronox99 The issue is that your browser may have cached the file. This is: create a local copy of the file, which does not contain the changes you just made.

Usually, there are two ways of preventing this:

1) Go to your lovelace resources and update the version:

You may have something like:

  - url: /local/custom-lovelace/bignumber-card/bignumber-card.js?v=0.0.1.1
    type: module

You'd need to change for a new version number like:

  - url: /local/custom-lovelace/bignumber-card/bignumber-card.js?v=0.0.1.2
    type: module

Then on the dashboard where it's used, you can click the 3 dots on the lovelace dashboard, the click "Reload Resources" and then "Refresh". This might be enough.

2) Alternatively, you could try clearing your local cache. The easiest option is to simply access using Incognito Mode and that should work. Other way could be opening the actual script file on the browser and using ctrl+F5 or cmd+R to update it until it shows the new changes; but this is a bit more error prone. You can also clear all cache and cookies, but it might be an overkill.

[anachronox99]

that did it thanks. I made up a fictitious version number and everything fixed up. On the desktop.

On the mobile devices it's still the same problem as before for iOS - tried both Chrome and Edge. Android is fine.

[nitobuendia]

Maybe related to #10 ?