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

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;
    }

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.

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

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

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).