Request for better popup dialog styling example

[hheimbuerger]

Hey @thomasloven,

I searched for "card-mod styling browser_mod popup", and the only accurate hit is your comment on #117 (comment):

Here's some styles for setting height and width, making a transparent background and setting a border radius

style:
  $: |
    .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
      border-radius: 25px;
    }
  .: |
    :host {
      --mdc-theme-surface: rgba(0,0,0,0);
      --secondary-background-color: rgba(0,0,0,0.5);
      --ha-card-background: rgba(0,0,0,0.5);
    }
    :host .content {
      width: 90vw;
      height: 90vh;
     }

This sounds great, but is it still correct in 2024? I tried this, and I think not everything is still working:

It looks like the border radius should now be done via the --ha-dialog-border-radius variable, but I cannot get it working. The width change does change some width, but only of the content pane inside the popup (making it horizontally scrollable, which is probably undesired), while it's probably supposed to change the entire popup width.

Learning this entire shadow DOM and $-chaining business is pretty challenging, and a good starting point would be very much appreciated.

To be a bit more specific, I suggest adding an example to https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/popups.md#styling-popups, which documents the best practices for:

• changing base CSS variables like --ha-dialog-border-radius
• setting the background of the entire dialog, e.g. making it semi transparent (the old example used --ha-card-background: rgba(0,0,0,0.5))
• changing the width and height of the entire dialog to 90vw/90vh

If both the mappings of $ and . are still needed, I would also appreciate another explanation of why attributes of the popup need to be set on one, and some on the other. I know this is more of a card-mod thing, but I've read and re-read the card-mod documentation so many times and still don't understand it -- so I think reiterating it here with a specific use case might be helpful, not only for me.

I would also appreciate a list of the popup variables that can easily be changed, like what does --mdc-theme-surface represent, or what is the --secondary-background-color used for?