[Feature]: Make the hover effect configurable to be able to deactivate

[RkcCorian]

Requirements

• I checked the README.
• I have updated entity-progress-card to the latest available version.
• I did a search to see if there is a similar issue.

Is your feature request related to a problem?

I have the Problem, when I use the card at the Mobile (but also via Mouse at the PC / Tablet) the hover effect is a different behaviour then the standard cards.
Specifically at the mobile when I click and hold on the icon the "black" background is remaining.

Describe the solution you'd like

Make the hover effect configurable to be able to deactivate (as I would like to align with the other cards)

Describe alternatives you've considered

No response

Additional context

Many thanks in advance!!

[WarC0zes]

Hi,
Use card_mod :

card_mod:
  style: |
    :host {
      --epb-hover-opacity: 0%;
      --epb-active-opacity: 0%;
    }

[RkcCorian]

@WarC0zes : Many thanks! I tried but it does not work. Also defining as theme variable (what I prefer) does not work unfortunately.

[WarC0zes]

in a theme :

  card-mod-theme: xxxxxxx
  card-mod-card: |
    :host {
      --epb-hover-opacity: 0%;
      --epb-active-opacity: 0%;
    }

[RkcCorian]

@WarC0zes : Many thanks! I added but still no change.

Example XAML from one of my lights..

type: custom:entity-progress-card-template
entity: light.schlafzimmerdeckenbeleuchtung
name: Schlafzimmerdecke
secondary: "{{ state_translated(entity) }}"
hide:
  - secondary_info
percent: |-
  {% if is_state_attr(entity, 'brightness', None) %}
    0
  {% else %}
    {{ ((state_attr(entity, 'brightness') | int /  255) * 100) | round(0) }}
  {% endif %}
icon: |-
  {% if states(entity) == 'on' %}
    mdi:lightbulb
  {% else %}
    mdi:lightbulb-off
  {% endif %}
color: |-
  {% if states(entity) == 'on' %}
    var(--yellow-color)
  {% else %}
    var(--grey-color)
  {% endif %}
bar_color: linear-gradient(90deg, lightyellow, var(--yellow-color))
card_mod:
  style:
    .icon-section: |
      .shape {
        background-color: transparent !important;
        box-shadow: none !important;
      }

I added to my theme:

[WarC0zes]

test this code :

type: custom:entity-progress-card-template
entity: light.schlafzimmerdeckenbeleuchtung
name: Schlafzimmerdecke
secondary: "{{ state_translated(entity) }}"
hide:
  - secondary_info
percent: |-
  {% if is_state_attr(entity, 'brightness', None) %}
    0
  {% else %}
    {{ ((state_attr(entity, 'brightness') | int /  255) * 100) | round(0) }}
  {% endif %}
icon: |-
  {% if states(entity) == 'on' %}
    mdi:lightbulb
  {% else %}
    mdi:lightbulb-off
  {% endif %}
color: |-
  {% if states(entity) == 'on' %}
    var(--yellow-color)
  {% else %}
    var(--grey-color)
  {% endif %}
bar_color: linear-gradient(90deg, lightyellow, var(--yellow-color))
card_mod:
  style:
    .icon-section: |
      .shape {
        background-color: transparent !important;
        box-shadow: none !important;
      }
    .: |
      :host {
        --epb-hover-opacity: 0%;
        --epb-active-opacity: 0%;
      }

[RkcCorian]

@WarC0zes : Unfortunately no difference...

[francois-le-ko4la]

Hello @RkcCorian @WarC0zes

Thank you @WarC0zes for your suggestions !
@RkcCorian, It will be supported in 1.5.2.

TY.