How do I style all entity popups using card-mod-more-info in the theme?

Configuration Frontend
1

I hope this is the right place to ask for card-mod/browser-mod support.

Does anybody know how card-mod-more-info works in themes?
What element should I attach my rules to? Having this in my theme seems to affect nothing:

card-mod-more-info: |
  * {
    font-size: 99pt;
    background: hotpink !important;
  }

I’m trying to style all auto-generated entity popups, like the dialogs that appear when tapping a Tile Card or a mini-graph-card.

In both cases, there seems to be an <ha-dialog> in the shadow DOM of an <ha-more-info-dialog>. The <ha-dialog> element receives the <card-mod> child, but my styles do not land on it.

In some desperation, I’ve also tried this, but also not getting anything to stick:

card-mod-more-info-yaml: |
  .: |
    :host {
      font-size: 99pt !important;
      background: hotpink !important;
    }
    * {
      font-size: 99pt !important;
      background: hotpink !important;
    }
  $: |
    :host {
      font-size: 99pt !important;
      background: hotpink !important;
    }
    * {
      font-size: 99pt;
      background: hotpink !important;
    }
2

I found this rule working for browser_mod popup dialogs on Reddit:

action: fire-dom-event
browser_mod:
  service: browser_mod.popup
  data:
    card_mod:
      style:
        ha-dialog$: |
          div.mdc-dialog div.mdc-dialog__scrim {
            backdrop-filter: var(--bg-filter);
          }
    content:
      ...

So from there, I adapted a theme rule:

card-mod-more-info-yaml: |
  ha-more-info-dialog$: |
    ha-dialog$: |
      div.mdc-dialog div.mdc-dialog__scrim {
        backdrop-filter: blur(20px);
      }

But sadly, it also has no effect.

It doesn’t even work as a card-mod rule on a simple tile card, though:

- type: tile
  entity: light.some_desk_lamp
  card-mod: |
    ha-more-info-dialog$: |
      ha-dialog$: |
        div.mdc-dialog div.mdc-dialog__scrim {
          backdrop-filter: blur(20px);
        }

The query looks like it’s matching the DOM to me, but alas, no <card-mod> element appears in the shadow DOM that contains the .mdc-dialog elements – as it does in the case of browser_mod popups. That might mean my query is wrong, or … well, there’s a hundred other things that I might have gotten wrong, honestly.

3

This is a proper place to ask card-mod-theme related questions.
As for styling cards - this thread.

4

You’re saying I should convert my question into a comment on that thread?

5

My suggestion is to use dedicated threads for discussing any card-mod / card-mod-theme related questions:

  • solutions are kept in one place - not scattered in 100500 threads
  • you may probably attract more users to get an answer / share your experience

In general:

  1. 1st get a stable expected result by using card-mod applied to a particular card - and ask questions in that card-mod thread.
  2. Next create a card-mod-theme to apply a style to all cards - and ask questions in that card-mod-theme thread.

In this particular case:

  1. Styling a “more-info” window can only be done by card-mod-theme. What you tried was using a “ha-more-info-dialog” element to a Tile card.
  2. Using “browser_mod” - for cases like “display a custom window as a popup”. Then it becomes unclear from your post - what window exactly you wish to style? Suggest to sort it out and then decide - either you are styling a standard more-info (then go to card-mod-themes thread) or you are styling a custom popup by browser-mod (then go to card-mod thread) or you are styling a “normal card” on a view (then go to card-mod thread).
6

Gotcha. I come from communities where the exact opposite is expected and posting on someone else’s thread with your own (different) question is highly frowned upon, e.g. Stack Overflow.

I’ll review the threads you linked to above and ask on that one, if it doesn’t answer my question.

2 Likes