Overlay makes dashboard uneditable

Configuration Frontend
1

Hello, everyone. I’ve been struggling with a problem for days now, and perhaps someone can help me.

I would like to place overlays on my dashboard that appear when certain triggers are activated (e.g. camera triggers or critical alarm message).

I use the following YAML code for the overlay:

type: custom:mod-card
style: |
  :host {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  :host::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
  }
  ha-card {
    width: 300px;
    padding: 20px;
    border-radius: 16px;
    text-align: center;
  }
card:
  type: markdown
  content: |
    ## Overlay aktiv
    Wenn du das siehst → funktioniert es ✅

When I insert the YAML code into a card, it looks like this for me:

overlay
overlay1687×1161 65 KB

I am now unable to edit anything on the dashboard. The only way to do so is via the dashboard’s raw configuration editor.

Does anyone have any idea how I can create such an overlay while still keeping the dashboard editable?

2

I have not tested thoroughly, but you can put your overlay in its own section and use the div.edit-mode selector to do styling to the overlay when in edit mode. Perhaps hide, or adjust so it allows you to edit other cards

type: grid
cards:
  - type: custom:mod-card
    ...
card_mod:
  style: |
    div.edit-mode {
      background-color: red;
    }