Complicated CSS / theme question : changing the @media rule on a dialog

I have some cameras integrated on to a page, some of them use an extension called “rtsp2webrtc” from HACS and it works just fine. each card has a tiny little “fullscreen” button which does what it says

Some cameras however, cannot use that integration because they use h265. Im not fully savvy to the whole situation but it seems like that particular integration does not like to use h265. Those cameras do work through a different integration as picture-glance cards, and when you look at the card layout, everything is perfect IMO.

Here is my issue: the picture glance cards do not have a “full screen” button. What they have is a “details” view, where they do go “full screen” on all phone clients, but not on my desktop. On my desktop they pop up in a tiny microscopic window that is exactly the same size as a card. Its useless.

Now honestly I would consider this to allllmost be a “bug” in the CSS because the experience on desktop is really crappy, the “details” of a large image is just a second tiny thumbnail :thinking:. But lets put that aside for now because I thought maybe I can do a workaround on my own

Using the element inspector in my browser, I determined that the popup appears as a disembodied dialog so my “card-mod” extension probably will not work to hack the CSS. I also determined that the rule that was causing this is contained in the frontend source code at
/src/resources/styles.ts

  /* make dialog fullscreen on small screens */
  @media all and (max-width: 450px), all and (max-height: 500px) {
    ha-dialog {
      --mdc-dialog-min-width: calc(
        100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
      );
      --mdc-dialog-max-width: calc(
        100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
      );
      --mdc-dialog-min-height: 100%;
      --mdc-dialog-max-height: 100%;
      --vertial-align-dialog: flex-end;
      --ha-dialog-border-radius: 0px;
    }
  }

If I manually change this rule in my browser to have a “max with” and “max height” value of like, 5000, then i get the exact behavior I wanted on my cameras. But it also changes all the other glances, like when you expand the graph of a sensor, now it is also fullscreen but with a tiny graph still. I would keep that behaviour If i can make the graph bigger! why not.

My question is: Does anyone have any ideas how to affect the CSS of the picture-glance details given that it is provided by a dynamic @media rule, with the goal of making the picture-glance be fullscreen even on large screens, the same as it already is on mobile screens?

My attempts at creating a “theme” just keep breaking things and I have no idea how to tackle an @media rule, is it even possible? The documentation of themes is kind of hand-wavey like “here are some things you can do but there are many other things…” so it does not answer my question because maybe i could be doing one of the “other things”

1 Like

@timmeh87 did you happen to ever find a solution to this?

I know this is an old thread, but does anyone have any recommendations?

haha so it turns out for the particular card I was using, it has the (undocumented? poorly documented?) feature that you can just click on the title of the card and it goes fullscreen. Thats all I wanted so I stoped looking for other answers. Since then the camera integration (webrtc camera integration) also added the ability to zoom in on the card, which is even nicer