# Dashboard - 🌻 Minimalist

**URL:** <https://forum.hacf.fr/t/dashboard-minimalist/5507>\
**Category:** Interface / Lovelace / Thème / Custom Card\
**Tags:** interface-lovelace\
**Created:** [Juillet 27, 2021, 11:40 UTC](https://forum.hacf.fr/t/dashboard-minimalist/5507 "2021-07-27T23:40:50Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![Clemalex](https://forum.hacf.fr/user_avatar/forum.hacf.fr/clemalex/32/3691_2.png) [@Clemalex](https://forum.hacf.fr/u/Clemalex)\
**Post date:** [Juillet 29, 2021, 10:09 UTC](https://forum.hacf.fr/t/dashboard-minimalist/5507/6 "2021-07-29T22:09:36Z")

</div>

Vraiment sympa :

 ![20210730_000836](https://forum.hacf.fr/uploads/default/original/2X/3/329cdcbaf97e8d6c0b4cdd18e46098318f254597.jpeg)
  

 ![20210730_000827](https://forum.hacf.fr/uploads/default/original/2X/7/7edd650593f6b16596052d14525e74ca1b1a843e.jpeg)

 ![animate](https://forum.hacf.fr/uploads/default/original/2X/a/a27d5798e2a3c0d4d7e0d454767e194b0f982432.gif)

J'ai retravaillé la carte alarme pour qu'elle colle mieux au désign. Je laisse le code pour ceux qui veulent l'améliorer 👍

```auto
type: vertical-stack
cards:
  - card:
      entity: alarm_control_panel.alarme
      states:
        - arm_home
      style:
        .: |
          ha-card > ha-label-badge{
            --alarm-state-color: var(--google-green-500) !important;
          }
          ha-card{
            padding-top: 16px;
            padding-bottom: 12px !important;
            border-radius: 21px;
          }
          ha-card > h1{
             padding-top: 0;
             color: transparent;
          }
          ha-card > h1::before{
             content: "Désactivée";
             color: var(--google-green-500);
             position: absolute;
             font-variant: small-caps;
          }
          #alarmCode{
            display: none;
          }
          #keypad{
            display: none !important;
          }
        '#armActions':
          mwc-button:
            $: |
              #button > span.slot-container{
                color: transparent;
                position: absolute;

              }
              #button{
                width: 150px;
                border-radius: 21px;
              }
              #button > span.slot-container::before{
                color: var(--mdc-theme-primary, #6200ee);
                content: "Activer";
                margin: 0 0 0 50%;
              }
      title: Alarme
      type: alarm-panel
    conditions:
      - entity: alarm_control_panel.alarme
        state: disarmed
    type: conditional
  - card:
      entity: alarm_control_panel.alarme
      states:
        - arm_home
      title: Alarme
      type: alarm-panel
      style:
        .: |
          ha-card > ha-label-badge{
            --alarm-state-color: var(--google-red-500) !important;
          }
          ha-card{
            padding-top: 16px;
            padding-bottom: 12px !important;
            border-radius: 21px;
          }
          ha-card > h1{
             padding-top: 0;
             color: transparent;
          }
          ha-card > h1::before{
             content: "Activée";
             color: var(--google-red-500);
             position: absolute;
             font-variant: small-caps;
          }
        '#armActions':
          mwc-button:
            $: |
              #button > span.slot-container{
                color: transparent;
                position: absolute;    
              }
              #button{
                width: 150px;
                border-radius: 21px;
              }
              #button > span.slot-container::before{
                color: var(--mdc-theme-primary, #6200ee);
                content: "Désactiver";
                margin: 0 0 0 50%;
              }
        '#keypad':
          mwc-button:
            $: |
              #button{
                border-radius: 12px
              }
    conditions:
      - entity: alarm_control_panel.alarme
        state_not: disarmed
    type: conditional

```

~~Il reste a reprendre les couleurs...~~ Fait :

 ![c6d82fa9f96043b90134f2a35e1acc2235534603](https://forum.hacf.fr/uploads/default/original/2X/c/c6d82fa9f96043b90134f2a35e1acc2235534603.png)

---

_[View the full topic](https://forum.hacf.fr/t/dashboard-minimalist/5507)._