Add support/fix? for card-mod

[peledzius]

Describe the solution you'd like

Picture elements does not support customizing padding in style, for that you need to use card-mod But it seems this card does not support card-mod yet or it does not work as suppose to.

NOTE: card-mod only works on cards that contain a ha-card element. This includes almost every card which can be seen, but not e.g. conditional, entity_filter, vertical-stack, horizontal-stack, grid.

I put this configuration at the bottom of frigate-hass-card for testing purposes:

card_mod:
  style: |
    ha-card {
      color: red;
    }

As we see in image below, this card has <ha-card> element, but card-mod styles does not inject declared styles. There is card-mod element, but style is empty(filled with <!---->)

And this image below shows how it looks when it's injected in Picture Elements card

Current situation:

What's my goal with 0px padding:

Maybe there is easier way to do this that I can't think of now?

[dermotduffy]

Haven't explored this topic at all, honestly -- so not sure, but I can investigate. Would you mind including the card config for your nice temperature sensor example so I can use that as my test case? [Goal as I understand it is to get it to look like your second image, and I'm assuming you got it to look like that in the screenshot via browser style tweaks]

[peledzius]

I did use browser Inspector tools to edit element style, just like you see in the last screenshot.

Configuration I used:

type: custom:frigate-card
view:
  default: image
image:
  src: https://xxxxx:5000/api/living_room/latest.jpg
  refresh_seconds: 5
elements:
  - type: custom:frigate-card-conditional
    conditions:
      view:
        - image
        - live
    elements:
      - type: state-label
        entity: sensor.living_room_multisensor_temperature
        style:
          top: 5%
          left: 10%
          font-weight: bold
          color: rgb(153, 255, 153)
          background: rgba(67, 66, 62, 0.7)
          pointer-events: none
          padding: 4px
        tap_action:
          action: none
      - type: icon
        icon: mdi:arrow-up
        style:
          color: rgba(255, 255, 255, 0.7)
          background: rgba(255, 255, 255, 0.2)
          border-radius: 15px
          opacity: 0.8
          right: 25px
          bottom: 125px
        tap_action:
          action: call-service
          service: onvif.ptz
          service_data:
            entity_id: camera.living_room_onvif
            tilt: UP
            move_mode: ContinuousMove
            speed: 0
            distance: 0.01
            continuous_duration: 0
      - type: icon
        icon: mdi:arrow-down
        style:
          color: rgba(255, 255, 255, 0.7)
          background: rgba(255, 255, 255, 0.2)
          border-radius: 15px
          opacity: 0.8
          right: 25px
          bottom: 75px
        tap_action:
          action: call-service
          service: onvif.ptz
          service_data:
            entity_id: camera.living_room_onvif
            tilt: DOWN
            move_mode: ContinuousMove
            speed: 0
            distance: 0.01
            continuous_duration: 0
      - type: icon
        icon: mdi:arrow-left
        style:
          color: rgba(255, 255, 255, 0.7)
          background: rgba(255, 255, 255, 0.2)
          border-radius: 15px
          opacity: 0.8
          right: 50px
          bottom: 100px
        tap_action:
          action: call-service
          service: onvif.ptz
          service_data:
            entity_id: camera.living_room_onvif
            pan: LEFT
            move_mode: ContinuousMove
            speed: 0
            distance: 0.01
            continuous_duration: 0
      - type: icon
        icon: mdi:arrow-right
        style:
          color: rgba(255, 255, 255, 0.7)
          background: rgba(255, 255, 255, 0.2)
          border-radius: 15px
          opacity: 0.8
          right: 0px
          bottom: 100px
        tap_action:
          action: call-service
          service: onvif.ptz
          service_data:
            entity_id: camera.living_room_onvif
            pan: RIGHT
            move_mode: ContinuousMove
            speed: 0
            distance: 0.01
            continuous_duration: 0
menu:
  buttons:
    live: true
    snapshots: false
    frigate_ui: false
    download: false
    frigate: false
    clips: false
    image: true
    fullscreen: false
  mode: above
event_viewer:
  autoplay_clip: false
  controls:
    next_previous:
      style: chevrons
  draggable: true
event_gallery:
  min_columns: 5
cameras:
  - camera_entity: camera.living_room_frigate
    live_provider: frigate
    title: Living room
  - camera_entity: camera.living_room_frigate
    id: living_room_webrtc
    title: living_room_webrtc
    webrtc:
      style: |
        .fullscreen {
          color: white;
          right: 30px;
          left: unset !important
        }
      url: rtsp://xxx:[email protected]:554/live/ch1
      ui: true
      mse: false
      ice_servers:
        - urls: stun:stun.xxx.eu:3478
        - urls: turn:turn.xxx.eu:3478
          username: xxx
          credential: xxx
live:
  controls:
    next_previous:
      style: none
card_mod:
  style: |
    ha-card {
      color: red;
    }

EDIT: Sorry, forgot to add elements: block.

[dermotduffy]

Poked at this a little bit:

• The padding styling on the element is not working because there is a nested div under the state label element with a padding of 8px. As the style is only set on the outermost element, that padding remains on the nested div. I think this is working as intended -- the only way around it would be a complex DOM navigation styling in the elements (and this is what card-mod appears to offer).
• Played with card-mod a little. Aside from near obliterating the performance on my machine for some reason (!), I ran into the same issue you describe: the nested <style> object shows up ~empty for the Frigate card for some reason (but not for a random other card I chose).

So, not much progress, but I can reproduce what you see. Can't yet tell if this is a bug in this card, or in card-mod.

[dermotduffy]

@peledzius Your usecase is now an example in the docs: https://github.com/dermotduffy/frigate-hass-card#using-card-mod-to-style-the-card

[peledzius]

@dermotduffy Thank you so much for this, works flawlessly!