Alarmo-card modifier button avec card_mod

WarC0zes · Avril 21, 2024, 3:01

Mon problème

Bonjour,
je cherche a modifier le border-radius, border et box-shadow du button pour armer sur la carte alarmo.
Aussi de la case du code. Pour la case du code j’ai pu modifier le border et box-shadow, mais en appliquant le border-radius on vois une bordure en fond. Donc ce n’est pas le bon endroit que je modifie.

Je cherche a avoir le même résultat que les boutons du keypad
J’ai encore du mal avec card_mod et ces shadow-root.

  - type: custom:alarmo-card
    entity: alarm_control_panel.alarmo
    name: Alarme maison
    button_scale_keypad: 1
    use_clear_icon: true
    keep_keypad_visible: true
    card_mod:
      style: |
        ha-card {
          margin-top: -5px;
          background: transparent;
        }
        ha-card > div.header > div.icon > alarmo-state-badge {
          --state-alarm_control_panel-armed_away-color: var(--red-color);
          --state-alarm_control_panel-armed_custom_bypass-color: var(--red-color);
          --state-alarm_control_panel-armed_home-color: var(--red-color);
          --state-alarm_control_panel-armed_night-color: var(--red-color);
          --state-alarm_control_panel-armed_vacation-color: var(--red-color);
          --state-alarm_control_panel-arming-color: var(--orange-color);
          --state-alarm_control_panel-disarming-color: var(--orange-color);
          --state-alarm_control_panel-pending-color: var(--orange-color);
          --state-alarm_control_panel-triggered-color: var(--red-color);
          --state-alarm_control_panel-disarmed-color: var(--green-color)
        }
        ha-textfield {
          box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
          border: 1px rgba(0,0,0,1.0) outset;
        }
        #keypad alarmo-button {
          box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
          border: 1px rgba(0,0,0,1.0) outset;
          border-radius: 25px;
          margin: 4px;
        }

@Herbs j’ai besoin de toi
Si quelqu’un peut m’aider ?

Ma configuration

Pas utile pour ce problème

Cleya · Avril 21, 2024, 3:10

Pourquoi tu ne fais pas une carte complète avec button-card ?

WarC0zes · Avril 21, 2024, 3:13

Parce que j’ai la flemme, que ca va prendre 1000 lignes de code. Alors qu’avec card_mod, sa sera que quelques lignes a ajouter.

Bob · Avril 21, 2024, 4:44

@WarC0zes
Je dirais même, pourquoi tu ne gardes pas la carte originale
Détente du dimanche
Bob

Cleya · Avril 21, 2024, 4:45

Parce que maintenant qu’il a découvert le relief avec border et box-shadow, il veut en mettre partout

WarC0zes · Avril 21, 2024, 4:48

Parce que la carte alarme par défaut, ne permet pas l’affichage du keypad en permance.

WarC0zes · Avril 21, 2024, 4:49

J’ai pas découvert, juste que j’ai trouver un box-shadow qui me plait. Ce que j’avais était pas génial et mettais pas focaliser dessus.

Cleya · Avril 21, 2024, 4:49

Oui, je sais même où tu l’as trouvé

Krull56 · Avril 21, 2024, 4:51

La carte mushroom le fait

WarC0zes · Avril 21, 2024, 4:54

je les essayer, il y a bien l’option pour afficher le keypad, mais pas en permanence.

type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.alarmo
states:
  - armed_home
  - armed_away
show_keypad: true

Herbs · Avril 21, 2024, 6:14

Salut @WarC0zes

Vite fait en rentrant de la sortie « dominicale » :

type: custom:alarmo-card
entity: alarm_control_panel.alarmo
name: Alarme maison
button_scale_keypad: 1
use_clear_icon: true
keep_keypad_visible: true
card_mod:
  style:
    alarmo-button$:
      mwc-button$: |
        #button {
          box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
          border: 1px rgba(0,0,0,1.0) outset;
          border-radius: 25px;
          margin: 4px;
        }
    .: |
      ha-card {
        margin-top: -5px;
        background: transparent;
      }
      ha-card > div.header > div.icon > alarmo-state-badge {
        --state-alarm_control_panel-armed_away-color: var(--red-color);
        --state-alarm_control_panel-armed_custom_bypass-color: var(--red-color);
        --state-alarm_control_panel-armed_home-color: var(--red-color);
        --state-alarm_control_panel-armed_night-color: var(--red-color);
        --state-alarm_control_panel-armed_vacation-color: var(--red-color);
        --state-alarm_control_panel-arming-color: var(--orange-color);
        --state-alarm_control_panel-disarming-color: var(--orange-color);
        --state-alarm_control_panel-pending-color: var(--orange-color);
        --state-alarm_control_panel-triggered-color: var(--red-color);
        --state-alarm_control_panel-disarmed-color: var(--green-color)
      }
      ha-textfield {
        box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
        border: 1px rgba(0,0,0,1.0) outset;
      }

à tester dans tous les cas de figures, voir si ça tient selon les différents états

[EDIT] je viens de voir que mon code réduit la taille des boutons « numériques », tu me diras si ça pose problème ou si tu gardes comme ça ?

[EDIT 2] il manque le champs de saisie pour le code pin

WarC0zes · Avril 21, 2024, 6:26

Salut @Herbs,
je savais que tu aurais la solution

Pour la taille des boutons, c’est encore mieux. Ca ira très bien comme ça.

Oui, il manquerais le champs du code.
pour la bordure ca irais, mais si j’applique un border-radius. On vois une bordure derrière.

      ha-textfield {
        box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
        border: 1px rgba(0,0,0,1.0) outset;
      }

edit:

C’est bon, aucun soucis ( tester avec absent et present , j’ai pas nuit ).

WarC0zes · Avril 21, 2024, 6:32

J’en est mis partout ou je pouvais

LeLapinFou · Avril 21, 2024, 6:49

ca me rappelle un truc ça .

WarC0zes · Avril 21, 2024, 6:51

C’est toi la source de ce border box-shadow ?
je l’avais demander a Cleya, comme je l’avais vu sur une capture d’une carte qui avait faite.

LeLapinFou · Avril 21, 2024, 6:52

non, moi, j’utilise :
inset -4px -4px 5px #b38888, inset 4px 4px 5px #ffffff

mais on avait fait un fil sur les theme et les box shadow:)
[dashboard & thème] Version custom du theme Soft-UI (Yaml inclus) - Home Assistant - Tutoriels & Partages / Interface / Lovelace / Thème / Custom Card - Home Assistant Communauté Francophone (hacf.fr)

WarC0zes · Avril 21, 2024, 6:58

exacte, m’en souvenais plus

Herbs · Avril 21, 2024, 8:19

@WarC0zes

Avec le code pin :

type: custom:alarmo-card
entity: alarm_control_panel.alarmo
name: Alarme maison
button_scale_keypad: 1
use_clear_icon: true
keep_keypad_visible: true
card_mod:
  style:
    alarmo-button$:
      mwc-button$: |
        #button {
          box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
          border: 1px rgba(0,0,0,1.0) outset;
          border-radius: 25px;
          margin: 4px;
        }
    ha-textfield $: |
      .mdc-text-field {
        border-radius: 25px !important;
      }
      .mdc-text-field__ripple {
        border-radius: 25px !important;
      }      
      .mdc-line-ripple {
        display: none !important;
      }
    .: |
      ha-card {
        margin-top: -5px;
        background: transparent;
      }
      ha-card > div.header > div.icon > alarmo-state-badge {
        --state-alarm_control_panel-armed_away-color: var(--red-color);
        --state-alarm_control_panel-armed_custom_bypass-color: var(--red-color);
        --state-alarm_control_panel-armed_home-color: var(--red-color);
        --state-alarm_control_panel-armed_night-color: var(--red-color);
        --state-alarm_control_panel-armed_vacation-color: var(--red-color);
        --state-alarm_control_panel-arming-color: var(--orange-color);
        --state-alarm_control_panel-disarming-color: var(--orange-color);
        --state-alarm_control_panel-pending-color: var(--orange-color);
        --state-alarm_control_panel-triggered-color: var(--red-color);
        --state-alarm_control_panel-disarmed-color: var(--green-color)
      }
      ha-textfield {
        box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
        border: 1px rgba(0,0,0,1.0) outset;
        border-radius: 25px;
      }

peek

WarC0zes · Avril 22, 2024, 1:00

@Herbs bravo
meci beaucoup, je vais étudier ta solution.

50px en border-radius pour le code, rends mieux