Alarm Control Panel Sizing

Share your Projects! Dashboards & Frontend
4

So I had a hard time too getting it to look right on my fire tab size and just making the alarm panel bigger in general. Since i haven’t seen where anyone else has posted a working solution with the card mod i’ll give my solution for you or anyone else. There are still some oddities where there are two hover highlights for the keys and no outline for the clear or arm/disarms but is usable to me:

image
image925×888 25.1 KB 

type: alarm-panel
entity: alarm_control_panel.ha_alarm
states:
  - arm_home
  - arm_away
card_mod:
  style: |
    ha-card { 
      --paper-input-container-shared-input-style_-_font-size: 2.5rem;
      --keypad-font-size: 2.5rem;
      --mdc-typography-button-font-size: 1.5rem;
      --mdc-button-outline-color: rgba(0, 0, 0, 0);
      --paper-font-subhead_-_font-size: 1.5rem;
      --mdc-shape-small: 100%;
    }
    #keypad {
      width: 30%;
      max-width: 500px !important;
    }
    #keypad mwc-button {
      border-radius: 5px;
    }
    mwc-button.numberkey {
      border-color: rgba(100,100,100,.1);
      border-width: 2px;
      border-style: solid;
    }
    #keypad mwc-button:hover {
      background: rgba(100,100,100,.2);
    }
    #keypad mwc-button {
      padding: 30px !important;
      margin: 4px;
      width: 30%;
      box-sizing: border-box;
      height: 100px;
    }
    paper-input {
        max-width: 300px !important;
    }
9 Likes