Allow to style nested elements shadow root on themes

[junalmeida]

I'm looking for customizing cards in HA via a theme (so all cards will have my changes applied).

I currently have:

  card-mod-theme: "Google Dark Theme"
  card-mod-card: |
    ha-card.type-picture-glance hui-image {
      max-height: 115px;
      filter: brightness(0.7);
    }

Which works, I can successfully style the hui-image element, but what I'm really trying to reach is the <img> under the shadow-root of hui-image. I can't find a cascade way to reach that.

[thomasloven]

$ is a card-mod specific selector used to step into a shadow root. I realize this is not clear enough from the readme and will fix that.

ha-card.type-picture-glance hui-image $ img will select the img element, but CSS doesn't understand this.

You'll need to do it stepwise as described in the DOM navigation section of the readme. https://github.com/thomasloven/lovelace-card-mod#dom-navigation

[junalmeida]

@thomasloven how to use the dom nav section in a theme, since theme does not support card-mod-card-yaml ? It is not clear to me yet how to do it.

[thomasloven]

What makes you think that?

[junalmeida]

Because I tried and it didn't work, and on the docs it says: https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes#special-theme-variables

Card-mod themes gives you access to three more things to style via card-mod- and card-mod--yaml. Those are view, root and more-info.

There is no card-mod-card-yaml, right?

[thomasloven]

I can see how that's confusing. But that relates only to the variables which are only usable in a theme.

The sections above that say:

https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes#basic-card-mod-theme

To apply the basic functionality of card-mod globally, you can use the card-mod-<thing> variables, where <thing> is card, row, glance or badge.

and https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes#navigating-the-shadowdom

To do this, you need to specify the variable card-mod-<thing>-yaml,...

I'll try to rewrite the wiki to make this clearer.

[junalmeida]

Ok thank you, I will try to redo my style here. Congrats for the nice lib.

[junalmeida]

@thomasloven
I could accomplish what I need with the following in a theme:

card-mod-card-yaml: |
  "hui-image": 
    $: |
      div img {
        border: solid 1px red;
        // removed for brevity
      }
  ".": |
    ha-card.type-picture-glance .box {
        border: solid 1px blue;
        // removed for brevity
    } 

However I believe the hui-image shadow root applies to all cards that have images. I'd like to apply it only to type-picture-glance. Do you have a suggestion? Thank you!

[thomasloven]

ha-card.type-picture-glance hui-image:?