DBuit/light-popup-card

After HA update to version 113 background image not working

tomerbs opened this issue · 3 comments

tomerbs commented

Hi,
I use to have a background image in the style of the popup, like the example below:

``style:
position: fixed
z-index: 999
top: 0
left: 0
height: 99%
width: 100%
color: var(--homekit-white)
display: block
align-items: center
justify-content: center
background: 'center / cover repeat-x url("/local/images/night.jpg") fixed'
flex-direction: column
margin: 0
"--iron-icon-fill-color": "#FFF"`

and now it's not working anymore with the new style template, I've tried this:

`` .: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: 'center / cover repeat-x url("/local/images/night.jpg") fixed';
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;`

Your help will be appreciated.
Thanks.

tomerbs commented
DBuit commented

Hi @tomerbs ,

Add the moment this is my default css for the homekit popups:

style:
      $: |
        .mdc-dialog .mdc-dialog__container {
          width: 100%;
        }
        .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
          width:100%;
        }
      .: |
        :host {
          --mdc-theme-surface: rgba(0,0,0,0);
          --secondary-background-color: rgba(0,0,0,0);
          --ha-card-background: rgba(0,0,0,0);
          --mdc-dialog-scrim-color: rgba(0,0,0,0.8);
          --mdc-dialog-min-height: 100%;
          --mdc-dialog-min-width: 100%;
          --mdc-dialog-max-width: 100%;
        }
        mwc-icon-button {
          color: #FFF;
        }

If you add .mdc-dialog .mdc-dialog__scrim with a background image that should work

style:
      $: |
        .mdc-dialog .mdc-dialog__container {
          width: 100%;
        }
        .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
          width:100%;
        }
        .mdc-dialog .mdc-dialog__scrim {
           background: center / cover repeat-x url("/local/images/night.jpg") fixed;
        }
      .: |
        :host {
          --mdc-theme-surface: rgba(0,0,0,0);
          --secondary-background-color: rgba(0,0,0,0);
          --ha-card-background: rgba(0,0,0,0);
          --mdc-dialog-scrim-color: rgba(0,0,0,0.8);
          --mdc-dialog-min-height: 100%;
          --mdc-dialog-min-width: 100%;
          --mdc-dialog-max-width: 100%;
        }
        mwc-icon-button {
          color: #FFF;
        }
tomerbs commented