mod-card: a border is displayed around a card in 2022.11

ildar170975 commented 1 year ago

My Home Assistant version: 2022.11.1

My lovelace configuration method (GUI or yaml): storage / yaml

I have a lot of decluttering templates for a card or a row (supposed to be used inside Entities card). Some of them have mod-card to use card-mod, like:

some_decluttering_template:
  card:
    type: custom:mod-card
    card:
      type: custom:multiple-entity-row
      ...
    card_mod:
      style:
        ...

or

some_decluttering_template:
  card:
    type: custom:mod-card
    card:
      type: custom:hui-element
      ...
    card_mod:
      style:
        ...

Since 2022.11.0 these cards got a border.

First, I suspected a decluttering-card. But then I concluded that mod-card gets this border.

Check this test example:

decluttering_templates:
  decl_test_hui_element:
    default:
      - NAME: xxx
    card: &ref_card
      type: custom:hui-element
      row_type: sensor-entity
      entity: sun.sun
      name: '[[NAME]]'

  decl_test_hui_element_card_mod:
    default:
      - NAME: xxx
    card:
      type: custom:mod-card
      card: *ref_card
      card_mod:
        style:
          hui-element $ hui-generic-entity-row $: |
            .text-content {
              color: red;
            }

The test card:

type: entities
entities:
  - type: custom:decluttering-card
    template: decl_test_hui_element
    variables:
      - NAME: decl_test_hui_element
  - type: custom:decluttering-card
    template: decl_test_hui_element_card_mod
    variables:
      - NAME: decl_test_hui_element_card_mod

The 2nd row gets a border:

Then I tested mod-card w/o using a decluttering-card:

type: entities
entities:
  - type: custom:hui-element
    row_type: sensor-entity
    entity: sun.sun
    name: hui-element
  - type: custom:mod-card
    card:
      type: custom:hui-element
      row_type: sensor-entity
      entity: sun.sun
      name: hui-element

The 2nd row with mod-card gets a border:

Probably a reason of this is that the mod-card inherits a border of a parent card. Here is a fix for this:

Error messages from the browser console: none

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

[x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[x] Have made sure I am using the latest version of the plugin.
[x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

ildar170975 commented 1 year ago

Another example - using mod-card for vertical-stack:

type: custom:mod-card
style:
  hui-vertical-stack-card$: |
    .card-header {
      font-size: 10px !important;
      color: red !important;
    }
card:
  type: vertical-stack
  title: Changed font for title
  cards:
    - type: entities
      entities:
        - entity: sun.sun
        - entity: sun.sun
    - type: entity
      entity: sun.sun

The stack gets a border:

ildar170975 commented 1 year ago

I believe this could be solved by https://github.com/thomasloven/lovelace-card-mod/pull/231

EuleMitKeule commented 1 year ago

I have the same problem. Do you have a quick fix for this while your PR isn't merged yet by any chance? I tried putting `:host { border-style: none !important; } on pretty much every place inside my theme file without any effect.