Carte Alarmo avec card mod

[Gram]

Bonsoir à tous.

Je suis en pleine configuration de mon dashboard et je recontre un soucis avec le css de la carte Alarmo.

Je cherche a modifier la couleur du texte et des chiffres du pavé numérique pour qu’ils soient plus visibles sur fond transparent.
Jusque là, j’ai pu modifier le header, la case code (qui se trouve dans un shadow-root) mais je sèche sur les chiffres du pavé numérique…

Sur la capture, on voit a gauche, le chemin que j’utilise pour entrer dans le shadow-root. Et à droite, card-mod qui est bien présent sous le shadow-root, au même niveau que l’élément « button disabled » que je veux modifier mais rien ne se passe…
D’après l’outil de developpement, je suis pourtant bien sur le bon élément pour modifier la couleur du texte alors si quelqu’un pouvait me dire ce que je fais de mal, ça m’aiderai beaucoup

[Herbs]

Salut @Gram

Ce serait peut-être plus simple si tu partageais le code de ce que tu as déjà réussi à faire

[Gram]

sur le champ!

type: custom:alarmo-card
entity: alarm_control_panel.alarmo
name: Alarme
button_scale_keypad: 1.2
use_clear_icon: false
keep_keypad_visible: true
states:
  armed_night:
    hide: true
card_mod:
  style:
    .: |
      ha-card{
       background: rgba(250,250,250,0.8);
       
      }
      ha-card > div.header > div.summary{
        color: black;
      }
    '#code_input':
      $: |
        #label{
          color: black;
          background: 
        }
    alarmo-button:nth-child(2):
      $: |
        button{
          color: red;
        }

et le rendu

[Herbs]

Il va encore te rester des choses à voir mais pour le « keypad », ça devrait le faire avec ça :

type: custom:alarmo-card
entity: alarm_control_panel.alarmo
name: Alarme
button_scale_keypad: 1.2
use_clear_icon: false
keep_keypad_visible: true
states:
  armed_night:
    hide: true
card_mod:
  style:
    .: |
      ha-card{
       background: rgba(250,250,250,0.8);
       
      }
      ha-card > div.header > div.summary{
        color: black;
      }
    '#code_input':
      $: |
        #label{
          color: black;
          background: 
        }
    alarmo-button:
      $: |
        button{
          color: black !important;
        }

[Gram]

@Herbs

'#code_input':
      $: |
        #label{
          color: black;
          background: 
        }

Génial, c’est exactement ça que je cherchais!

type: custom:alarmo-card
entity: alarm_control_panel.alarmo
name: Alarme
button_scale_keypad: 1.2
use_clear_icon: false
keep_keypad_visible: true
states:
  armed_night:
    hide: true
card_mod:
  style:
    .: |
      ha-card{
       background: rgba(250,250,250,0.8);
       
      }
      ha-card > div.header > div.summary{
        color: black;
      }
    '#code_input':
      $: |
        #label{
          color: black;
        }
        label{
          background: rgba(250,250,250,0) !important;
        }
    alarmo-button:
      $: |
        button{
          color: black !important;
        }
view_layout:
  column: 2

J’ai une autre question mais je ne sais pas si je dois créer un autre sujet pour ça.
Ca concerne le header avec les boutons d’accès aux différents dashboard. ils ne sont pas tous visible mais bien la physiquement. Lorsque je passe la souris dessus, l’infobox apparait avec le titre du bouton et si je clique, j’accède bien au dashboard que ça renvoit.

[Herbs]

J’imagine que tu as pensé à vider le cache au cas où ?

@Gram

je ne sais pas si je dois créer un autre sujet

Ce serait sûrement mieux

[Gram]

@Herbs

J’imagine que tu as pensé à vider le cache au cas où ?

oui: CTRL+F5

@Herbs

Ce serait sûrement mieux

Ok je fais ça