Bouton en surbrillance

Bonjour,
Je voudrais savoir si je veux mettre ce bouton power en surbrillance lorsque la tv est allumée
Voici le code

type: custom:button-card
name: Power
show_name: false
icon: mdi:power
styles:
  card:
    - border-radius: 50%
    - aspect-ratio: 1/1
    - width: 80px
    - border: 2px rgba(211,211,211,1.0) outset
    - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
    - '--mdc-ripple-press-opacity': 0.12
  icon:
    - width: 70%
tap_action:
  action: call-service
  service: remote.send_command
  data:
    command: POWER
  target:
    entity_id: remote.bboxtv
hold_action:
  action: none
state:
  - value: 'on'
    styles:
      icon:
        - filter: drop-shadow(0 0 12px red)
view_layout:
  grid-area: 1 / 4 / 2 / 5


Teste ça :

type: custom:button-card
name: Power
icon: mdi:power
show_name: false
styles:
  card:
    - aspect-ratio: 1/1
    - width: 100%
    - height: 70px
    - border-radius: 50%
    - border: 2px rgba(211,211,211,1.0) outset
    - box-shadow: |
        [[[
          if (states['remote.bboxtv'].state == 'on')
            return '2px 2px 4px 0px rgba(64,192,64,1.0)';
          else
            return '2px 2px 4px 0px rgba(32,32,32,0.5)';
        ]]]
  icon:
    - width: 70%
    - color: |
        [[[
          if (states['remote.bboxtv'].state == 'on')
            return 'green';
          else 
            return 'black';
          ]]]
tap_action:
  action: call-service
hold_action:
  action: none
view_layout:
  grid-area: 1 / 4 / 2 / 5

Sinon, le drop-shadow fonctionne de la même manière que le box-shadow :

icon:
  - drop-shadow: 0px 0px 0px 12px red

En utilisant le icôn: - drop shadow cela ne fonctionne pas

Oui, j’ai vu (je n’utilise le drop-shadow que pour le texte). Voilà ce que ça donne avec un autre réglage du box-shadow (en vert) :

styles:
  card:
    - aspect-ratio: 1/1
    - width: 100%
    - height: 70px
    - border-radius: 50%
    - border: 2px rgba(211,211,211,1.0) outset
    - box-shadow: |
        [[[
          if (states['media_player.salon_televiseur_samsung_2'].state == 'on')
            return '0px 0px 8px 4px rgba(64,192,64,1.0)';
          else
            return '2px 2px 4px 0px rgba(32,32,32,0.5)';
        ]]]
  icon:
    - width: 70%
    - color: |
        [[[
          if (states['media_player.salon_televiseur_samsung_2'].state == 'on')
            return 'green';
          else 
            return 'black';
          ]]]

(en rouge) :

styles:
  card:
    - aspect-ratio: 1/1
    - width: 100%
    - height: 70px
    - border-radius: 50%
    - border: 2px rgba(211,211,211,1.0) outset
    - box-shadow: |
        [[[
          if (states['media_player.salon_televiseur_samsung_2'].state == 'on')
            return '0px 0px 8px 4px rgba(255,0,0,1.0)';
          else
            return '2px 2px 4px 0px rgba(32,32,32,0.5)';
        ]]]
  icon:
    - width: 70%
    - color: |
        [[[
          if (states['media_player.salon_televiseur_samsung_2'].state == 'on')
            return 'red';
          else 
            return 'black';
          ]]]

Faut que tu remettes ton entité (remote.bboxtv).

PS : tu peux le faire aussi avec state…

Avec state cela ne fonctionnais pas mais c’est pas grave j’essaye de comprendre :joy:

Pour que le state fonctionne, il faut spécifier ton entité au niveau de la carte :

type: custom:button-card
name: Power
icon: mdi:power
entity: media_player.salon_televiseur_samsung_2
show_name: false
state:
  - value: on
    styles:
      card:
        - box-shadow: 0px 0px 8px 4px rgba(255,0,0,1.0)
      icon:
        - color: red
styles:
  card:
    - aspect-ratio: 1/1
    - width: 100%
    - height: 70px
    - border-radius: 50%
    - border: 2px rgba(211,211,211,1.0) outset
    - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
  icon:
    - width: 70%
    - color: black
tap_action:
  action: call-service
hold_action:
  action: none
view_layout:
  grid-area: 1 / 4 / 2 / 5
2 « J'aime »

N’hésite pas à poster d’autres sujets si tu as d’autres questions : c’est bon pour mes stats :joy:

1 « J'aime »