Epingler depuis août 2021 sur mon « shaarli » 
1 « J'aime »
Il est présent dans le premier post depuis sa création en avril 2021…
1 « J'aime »
Super!! Merci @Herbs et @Clemalex. Avec ça, je devrais enfin comprendre comment et sous quelle conditions, rentrer dans ce fichu « #shadow-root » ^^
Ce qu’il me reste à faire, c’est fouiller un peu pour trouver et comprendre le fonctionnement des appels d’éléments ha-card, le rôle des caractères spéciaux comme « . », « $: », « – » etc.
heureusement que je suis déterminé quand j’ai une idée en tête lol. Card mod et le CSS sont des outils puissant mais quand on arrive dans le monde de la programmation, c’est une vraie usine à gaz et il n’est pas facile du tout de trouver les solutions.
heureusement que vous êtes là pour nous aider. Un grand merci encore 
Edit:
je viens de tomber sur le site w3 school. Ca devrait m’aider à rattraper 20 ans de non utilisation CSS 
J’ai une question concernant les différentes possibilités pour rentrer dans les #shadow-root.
J’ai réussi (après quelques heures de fouilles et relecture du git de thomasloven à faire ça:
type: markdown
content: '## <center>lumières</center>'
card_mod:
style:
ha-markdown$: |
h2 {
color: red;
}
.: |
ha-card{
background: rgba(250,250,250,0);
border: none;
}
La carte est transparente et sans bordures apparentes (comme je le voulais)
ce qui m’amène à la (les) question(s) suivante(s): pour rentrer ici, dans le #shadow-root, j’ai du utiliser le selecteur ha-markdown$. pour le fond, je suis retourné dans ha-card et ai utilisé la clé .: pour accéder au style de la carte. Sur la carte entités, c’est encore différent avec :host…
A quel moment, puis-je savoir avec quoi et comment entrer dans un #shadow-root?
- type: custom:mushroom-chips-card
chips:
- type: template
entity: input_boolean.veluxscreen_links
icon: >
{% if is_state('input_boolean.veluxscreen_links', 'on')%}
mdi:blinds-open
{% elif is_state('cover.screenlinks', 'open')%}
mdi:blinds-open
{% else %}
mdi:roller-shade-closed
{% endif %}
icon_color: |-
{{ iif(is_state(entity, 'on'), 'white', 'grey') }}
card_mod:
style: |
ha-card$: |
.blink-icon {
{% if state_attr('cover.screenlinks','current_position')|int(default=-1) > 0 and state_attr('cover.screenlinks','current_position')|int(default=-1) < 78 %}
animation: blink 2s linear infinite;
{% endif %}
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
Je ne suis pas francophone, je m’excuse pour ma langue
J’ai des problemes avec le card mod.
l’icône doit clignoter à une valeur comprise entre o et 78. mais rien ne se passe. Est-ce que quelqu’un peut m’aider ?
Bonjour,
Pour les mushroom chips, il y a deux possibilités
- Au niveau du template chip avec
.content - au niveau de le carte custom:mushroom-chips-card avec
mushroom-template-chip:nth-child(n)$:ou n est la position dans la liste
type: custom:mushroom-chips-card
chips:
- type: template
icon_color: red
icon: mdi:heart-pulse
card_mod:
style: |
.content {
animation: beat 1.3s ease-out infinite both;
}
@keyframes beat {
0%, 60% { transform: scale(0.8); }
5%, 17%, 57% { transform: scale(1.1); }
10%, 20%, 51% { transform: scale(1); }
25%, 45% { transform: scale(0.9); }
30%, 39% { transform: scale(1.1); }
33% { transform: scale(1.2); }
}
- type: template
icon_color: red
icon: mdi:heart-pulse
card_mod:
style:
mushroom-template-chip:nth-child(2)$: |
ha-icon {
animation: pulse 3s linear infinite;
transform-origin: 50% 60%;
}
@keyframes pulse {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
Resultat du code ci-dessus
L’icône devrait clignoter en fonction de la position avec cette modification.
card_mod:
style: |
.content {
{% if state_attr('cover.screenlinks','current_position')|int(default=-1) > 0 and state_attr('cover.screenlinks','current_position')|int(default=-1) < 78 %}
animation: blink 2s linear infinite;
{% endif %}
} @keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
Cordialement
Abel
1 « J'aime »
Bonjour, Je souhaiterai que l’icône s’anime uniquement si l’entité est sur ‹ on ›. Voici ce que j’ai écrit mais ça ne fonctionne pas. La carte est de type: custom:mushroom-chips-card. Merci pour votre aide.
card_mod:
style: |
.content {
{if is_state('switch.passerelle_alarme_mode_presence_898','on') else
animation: pulse 5s linear infinite;
transform-origin: 50% 60%;}
}
@keyframes pulse {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
Bonjour,
Essaye de cette façon
card_mod:
style: |
ha-card {
{% if is_state('switch.passerelle_alarme_mode_presence_898','on') %}
animation: pulse 5s linear infinite;
transform-origin: 50% 60%;
{% endif %}
}
@keyframes pulse {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
Cordialement,
Abel
1 « J'aime »
Super merci beaucoup, ça fonctionne!
Je reviens avec une autre question. Dans le code que tu m’as fourni, l’effet ce trouve sur la carte, est-il possible d’avoir l’effet que sur l’icône?
Si le code fonctionne mais c’est sur toute la carte que l’effet ce produit et j’aimerai que ce soit que l’icône. J’essai de trouver le lien qui explique comment mettre une vidéo pour illustrer mon propos.
Suis le lien de mon message car ce n’est pas la carte.
Le dernier exemple de @Abel c’est la carte car il cible ha-card.
Tu parles de quelle lien?
C’est bon j’ai trouvé la solution!
Voici le code pour ceux à qui ça intéresserait:
card_mod:
style: |
.content {
{% if is_state('switch.passerelle_alarme_mode_presence_898','on') %}
animation: pulse 3s linear infinite;
transform-origin: 50% 60%;
{% endif %}
}
@keyframes pulse {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
1 « J'aime »
Bonjour @fredokl ,
J’aurai du mentionner que le problème dans ton code était la syntaxe du « if » où il y manquait le « endif » et li n’y avait pas d’instructions après le test du switch mais directement un « else »
Cordialement,
Abel
2 « J'aime »
Hello à tous! Je reviens vers vous car je souhaite que seul l’icône soit animé et non l’icone + le texte. Le code juste au-dessus fait clignoter les deux.
Merci pour vos réponses.
Bonjour,
Voici un example avec icône animée et texte statique.
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:heart-pulse
icon_color: red
content: '69'
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{% if is_state('swtich.passerelle_alarme_mode_presence_898','on') %}
animation: pulse 3s linear infinite;
transform-origin: 50% 60%;
{% endif %}
}
@keyframes pulse {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
Le nombre dans mushroom-template-chip:nth-child(1)$ indique la position du chip dans la liste.
Ici le style est sur le premier chip.
Le card-mode est aligné avec chips et pas avec type: template.
Pour plusieurs chips à animer, il faut mettre les mushroom-template-chip:nth-child(n)$ à la suite avec le numéro correspondant.
Cordialement,
Abel
1 « J'aime »
Merci. Mais je dois commettre une erreur quelque part car rien ne s’anime chez moi. Voici mon code:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:shield-home
icon_color: green
content: Présence
entity: switch.passerelle_alarme_mode_presence_898
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{% if is_state('swtich.passerelle_alarme_mode_presence_898','on') %}
animation: pulse 3s linear infinite;
transform-origin: 50% 60%;
{% endif %}
}
@keyframes pulse {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
Glissade de doigts
2 « J'aime »