How to set a custom style for an element inside shadow-root on lovelace

Configuration Frontend
1

Hi,

I’m trying to move the paper-checkbox from the popup video stream of the camera card with custom css. I’ve added a custom css file to the page but every selector I try doesn’t work.

My issue is that the “Preload stream” checkbox is over the time so I can’t know if the image is frozen or not.

image
image1318×167 46.7 KB

I’ve tried adding the following to my lovelace config:

  - type: css
    url: /local/custom.css

While custom.css contains the following:

more-info-camera paper-checkbox {
  bottom: 12px !important;
  top: auto !important;
}

I’ve tried different combinations using the :host() selector but none of them worked.
I’ve also tried specifying the style with card-mod which didn’t change anything as well.

Anyone knows how I can change the position of this annoying checkbox?

1 Like