thomasloven / lovelace-card-mod

🔹 Add CSS styles to (almost) any lovelace card
MIT License
1.13k stars 168 forks source link

Cards render without corner radius and outline under certain conditions #395

Open stleusc opened 1 month ago

stleusc commented 1 month ago

My Home Assistant version: 2024.8.1

My lovelace configuration method (GUI or yaml): GUI

What I am doing: simply updated HA to 2024.8.1

What I expected to happen: no visual changes

What happened instead: cards lost corner radius and outline

Minimal steps to reproduce:

type: custom:mod-card
card_mod:
  style: |
    ha-card {
      padding: 8px;
      border: 0px;
    }
card:
  type: grid
  columns: 1
  square: false
  cards:
    - type: entities
      entities:
        - entity: scene.good_night
    - square: false
      type: grid
      columns: 4
      cards:
        - type: custom:slider-button-card
          entity: light.kitchen_light
          name: Kitchen

View must be set to Panel (1 card).

When removing

type: custom:mod-card
card_mod:
  style: |
    ha-card {
      padding: 8px;
      border: 0px;
    }
card:

from the config then the cards all render correctly again!

This seems to be related to View type as well since changing it to Masonry makes it render correctly again!

This is a new issue. Running on older HA version before today's update worked fine.

Error messages from the browser console:


By putting an X in the boxes ([]) below, I indicate that I:

stleusc commented 1 month ago

adding

      --ha-card-border-radius: 12px;
      --ha-card-border-width: 1px;

to the style 'restores' the border but this is a 'hack'. Browser inspection indicated that the values of 0px were inherited from mod-card.