Hey everyone. I recently attempted to recreate the new google home app style lights with mushroom cards. That sort of worked but was a bit glitchy with all the css changes to the card. I decided to redo it with button-card and slider-v2. It looks great and works exactly how I intend on my pc.
The problem I am having is when I go to my iphone companion app it looks nothing like this. The spacing is entirely different and the slider doesn’t cover the entire card. I tried to use % based sizing as much as I could but I’m still new to this so I might be using it wrong. If anyone has any tips or can point me in the right direction that would be wonderful.
Here is the code:
type: custom:button-card
entity: light.living_room_lights
name: Living room
label: |
[[[ if (entity.state == 'on')
return (states['sensor.livingroom_count'].state) + ' On • ' + Math.round(states['light.living_room_lights'].attributes.brightness/2.55) + '%';
return entity.state;
]]]
icon: |
[[[
if (entity.state == 'on')
return "fapro:light-group-fill";
return "fapro:light-group";
]]]
size: 28px
show_name: true
show_label: true
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: light.living_room_lights
allowTapping: true
styles:
card:
- height: 100%
container:
- width: 100%
- height: 100%
- position: relative
- overflow: hidden
- border-radius: 35px
track:
- width: 100%
- height: 100%
- position: relative
- background: |
[[[
if (entity.state == "on") return "#ffefc9";
else return "#f2f6fc";
]]]
progress:
- height: 100%
- background: '#ffe082'
- position: absolute
thumb:
- background: none
button:
card:
type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state(entity, 'off') %}
mdi:chevron-down
{% elif is_state(entity, 'on') %}
mdi:chevron-up
{% endif %}
tap_action:
action: toggle
entity: input_boolean.living_room_toggle
icon_color: |-
{% if is_state('light.living_room_lights', 'off') %}
31,31,31
{% elif is_state('light.living_room_lights', 'on') %}
115,92,0
{% endif %}
card_mod:
style: |
ha-card {
--chip-icon-size: 0.7em;
--chip-padding: 0px 6px;
--chip-height: 40px;
--chip-border-radius: 100px;
}
styles:
grid:
- grid-template-areas: |
"i n button"
"i l button"
- grid-template-rows: 1fr 1fr
- grid-template-columns: 68px min-content 2fr
card:
- height: 100%
- border-radius: 35px
- background-color: |
[[[
if (entity.state == 'on')
return "#ffefc9";
return "#f2f6fc";
]]]
icon:
- z-index: 1
- color: |
[[[
if (entity.state == 'on')
return "#735c00";
return "#1f1f1f";
]]]
name:
- z-index: 1
- pointer-events: none
- justify-self: start
- font-weight: 600
- font-size: 15px
- margin: 18% 0% 0% 0%
- color: |
[[[
if (entity.state == 'on')
return "#735c00";
return "#1f1f1f";
]]]
label:
- z-index: 1
- pointer-events: none
- justify-self: start
- text-transform: capitalize
- font-weight: 500
- font-size: 14px
- margin: 0% 0% 16% 0%
- color: |
[[[
if (entity.state == 'on')
return "#735c00";
return "#1f1f1f";
]]]
custom_fields:
button:
- z-index: 1
- justify-self: end
- padding-right: 24px
slider:
- z-index: 0
- position: absolute
- width: 100%
- height: 100%