Hmmm in this way how to have always the latest release after conversion?
Hey! Is there a way how to add other CSS grid properties? Right now I would like to use justify-items but itās not available.
OK thanks, that can work too!
Maybe Iām saying something crazy but could there be an implementation to parse key value to css?
I think it would help keeping our YAML file cleaner with less nested cards.
Oh, right. I forgot youād need mod-card for layout-cardā¦ Thatās not a pretty solution.
Iāll see what I can do.
2 Likes
@thomasloven I recently updated Home Assistant from 0.106.x to 0.114.1 and all of the custom components that got an update in the meantime. I posted about this yesterday in the Button Card topic as I first thought it was an issue with that component, but after some testing I found out that the issue is with Layout Card. Only on mobile (iOS), on desktop it works fine.
In a reply to my post from yesterday someone mentioned that something changed in Layout Card around the time of 0.112.0, so I went through the changelog and found out that it had to be release 14 of Layout Card. So, I reinstalled version 13 and got the following result (as expected):
That is what it looked like before the update. I updated back to release 16 and got this as a result (unexpected):
Just to make sure it actually changed in release 14, I installed both release 14 and 15 as well. This was kind of unexpected to what Iāve read elsewhere as both release 14 as well as 15 worked perfectly fine.
I didnāt change any of my code btw. These are the cards shown in the screenshots on my Lovelace view:
- type: custom:button-card
template: heading
name: {{ _t_i18n.lights.title }}
- type: custom:mod-card
style: |
layout-card {
padding: 0 10px;
}
card:
type: custom:layout-card
layout: horizontal
justify_content: start
min_columns: 4
cards:
{% for light in room.lights %}
- type: custom:button-card
template: room_light
entity: {{ light.entity }}
icon: {{ light.icon }}
name: {{ light.name }}
label: "{{ light.label | default(' ') }}"
hold_action:
!include
- ../../popups/light.yaml
- entity: {{ light.entity }}
{% endfor %}
- type: custom:button-card
color_type: blank-card
aspect_ratio: 1/1
- type: custom:button-card
color_type: blank-card
aspect_ratio: 1/1
- type: custom:button-card
color_type: blank-card
aspect_ratio: 1/1
{% endif %}
This is the room_light Button Card template (not sure whether you would need this), but just in case here it is:
---
room_light:
size: 25%
aspect_ratio: 1/1
show_state: true
deep_press: true
tap_action:
action: toggle
haptic: light
styles:
card:
- box-shadow: none
- border-radius: 12px
grid:
- grid-template-areas: '"i i" "n n" "s brightness"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
icon:
- padding: 10px 10px
- height: 50%
name:
- justify-self: start
- padding: 5px 0 0 10px
- font-weight: bold
- font-size: 13px
label:
- justify-self: start
- padding: 0 10px 5px
- font-size: 11px
state:
- justify-self: start
- padding: 0 10px 5px
- font-size: 11px
custom_fields:
brightness:
- position: absolute
- top: 12px
- right: 12px
- width: 30%
state:
- value: 'unavailable'
styles:
card:
- filter: opacity(50%)
In issues related to Layout Card release 14 on this forum and on your Github issues youāve asked those people to update to release 16. All of those issues seem to have been fixed with that release. For me however it didnāt. For me the issue actually started to occur with release 16. All release before that seem to work fine. Do you know how to fix this?
Edit:
Something I posted in the other thread, but not hereā¦ when I have 2, 3 or 4 columns, the buttons in column 2 and 3 are smaller. The buttons in column 1 and 4 however are the correct size (screenshot with 4 columns can be seen here in the other thread).
@thomasloven Hi, I was wondering: is it possible to create a layout card with a max height, where if the content exceeds the height you can continuously scroll to reveal the rest of the content? So basically like swiper card, but vertically with a set max height and continuous scrolling. Trying to build a new user interface where this would be the basis.
Iām trying to see if I can use layout card for my light buttons, instead of combing horizontal-stacks withing vertical-stacks. Goal is to include auto-entities later on, to populate my UI with button cards automatically.
However I am having weird issues with sizing. I use the following code:
- layout: horizontal
type: 'custom:layout-card'
column_num: 4
column_width: 100%
cards:
- template: light
entity: light.small_bulb
name: Raam
type: 'custom:button-card'
- MORE BUTTON CARDS 8x DOWN HERE
The layout itself works, but the sides are expanded somehow. Expanding the window a little bit solves this weird behaviour. Tried adding column_width: 100% and even made that smaller. Makes no difference. This is on Chrome/chromium browser and iOS (13.6). On iOS this is kinda bad, since I canāt resize windows (nor should I want to). One thing to note: I have this line of code at the base of my view (so I have a little padding all around).
- layout: vertical
type: 'custom:layout-card'
column_width: 96%
I tried chaning that to 100% for now, but solves nothing. Also, this should just work (which shows when Iām slightly expanding the window). This is only with the content inside the layout-card you see in the gif below.
Video of the glitch:
Is this a bug or a user error on my end?
Edit: I changed the code to this:
- layout: horizontal
type: 'custom:layout-card'
column_width: 25%
cards:
- template: light
entity: light.small_bulb
name: Raam
type: 'custom:button-card'
- MORE BUTTON CARDS 8x DOWN HERE
I figured, letās just devide by 4 since I want 4 button cards, so put in 25% column width instead of column_num. This does work. Though I am curious if this is the correct way to use it. I want to avoid issues down the roadā¦
Edit 2: After further testing this also gives a different issue, kinda like @thmry mentioned. 2 and 3 button cards are slightly smaller than 1 and 4. Also this ONLY occurs when setting the windows to smallest size (which is standard on mobile).
Edit 3: I can confirm this issue is not present with build 14. After that build something has changed with the paddings. I noticed back then (and now again) that I need to set my base layout card to 98% with build 14, while build 16 needs ~96% to achieve the same margins. Could be related to this: https://github.com/thomasloven/lovelace-layout-card/issues/93
I will revert back to horizontal and vertical stacks for now (cause I donāt want to use an older build of layout card). I hope this will be fixed soon.
1 Like
Itās the exact same issue I have. Itās an issue in the latest release as youāve already noticed. I reverted back to release 15 which works fine.
1 Like
Yeah, Iām worried that build 16 added features that build 15 will break because thatās missing. Or that it never gets fully updated and newer builds with more features release. I donāt want to rewrite my entire view and revert everything to horizontal/vertical stacks down the road.
If this gets fixed or there is a workaround, Iāll take the plunge and change everything to layout card 
Edit: @thmry I kinda used a workaround to use build 16 with the normal styling of build 15. I figured it was because of the styling in the .js file. I inspected the elements and changed some stuff and could indeed fix the paddings around the left and right card. I couldnāt fix the 2nd and 3rd buttons though. I noticed 16 had more styling codes, so I thought maybe that caused it.
So what I figured: why not use the styling codes of build 15 and remove the one of build 16ā¦ The code of 15 works flawlessly in 16. Kinda hacky method, but it works. Running build 16 now without the glitched view. Maybe doing this is the same as running build 15, but at least I donāt see an update in HACS anymore lol.
I try to show my Lights Button Cards only if they are āonā. All works in the Way i want, little bit complicated i think, but this way it works. But one thing i dint understand.
The Position of the Buttons change when a second or more lights go āonā. Is there a way to set the position fixed?
This is my Config:
- type: custom:stack-in-card
style:
left: 75.0%
top: 18.0%
width: 50%
cards:
- type: markdown
content: ' '
- type: custom:auto-entities
show_empty: false
filter:
include:
- entity_id: light.wohnzimmer
state: 'on'
options:
type: custom:button-card
entity: light.wohnzimmer
name: Wohnen
show_icon: false
show_state: false
custom_fields:
icon_wohnen: >
<svg viewBox="0 0 35.02 31.02">
<path fill="#9da0a2" d="M12.44,15.69v.24c0,.06,0,.11,0,.19.49,0,.92.06,1.05.61h3.56V10.68c0-.33,0-.35.34-.35h3.46c.34,0,.35,0,.35.35v5.88a1.21,1.21,0,0,0,0,.18c.1,0,.2,0,.3,0s.22.09.22.24c0,1.35,0,2.7,0,4.05,0,.35,0,.36-.37.36H21c0,.36-.07.71-.11,1.07l0,.33c0,.34,0,.34-.37.34-.64,0-.53.07-.61-.58,0-.38-.07-.77-.11-1.15H2.46c0,.35-.07.7-.1,1.05,0,.15,0,.31,0,.46s-.09.22-.24.22H1.63c-.17,0-.24-.07-.25-.24,0-.44-.08-.88-.13-1.32a1.68,1.68,0,0,0,0-.18H.84c-.3,0-.32,0-.32-.33V17c0-.26,0-.29.29-.29H1c0-.08,0-.15,0-.21V10.66c0-.3,0-.33.31-.33H4.91c.26,0,.29.05.29.31v5.23c0,.28,0,.56,0,.86H8.73c.29-.52.29-.52,1.07-.63v-.41h-3a.87.87,0,0,1-1-1c0-1.53,0-3.07,0-4.61a.85.85,0,0,1,.89-.91h8.83a.85.85,0,0,1,.91.93v4.66a.85.85,0,0,1-.89.91H12.44Zm-3.74-1c.45,0,.45,0,.72-.22l.89-.84c.09-.09.18-.16.29,0s0,.2-.06.28L10.4,14l-.72.68h6.4V10.18H15.5c-.11,0-.22,0-.23-.16s.11-.18.24-.18h.54c-.09-.25-.19-.31-.49-.31H6.62a.42.42,0,0,0-.44.31h8.23a.69.69,0,0,1,.25,0,.27.27,0,0,1,.13.18s-.08.11-.14.14a.59.59,0,0,1-.19,0H6.17v4.51H8a.5.5,0,0,0,.31-.12C8.9,14,9.46,13.48,10,12.93c.09-.08.19-.15.29,0s0,.21-.05.29l-.57.54C9.38,14,9.06,14.34,8.7,14.67ZM.87,21H5.36V17.09H3.94c0,.08,0,.15,0,.22,0,.29,0,.32-.33.32H2.48c-.25,0-.29,0-.29-.29v-.25H.87Zm20.51,0V17.09H20.07v.33a.19.19,0,0,1-.21.21H18.53a.19.19,0,0,1-.21-.21v-.33H16.89V21ZM5.73,17.09v2.83H7.45v-1.6c0-.29,0-.31.29-.31h6.79c.25,0,.28,0,.28.28,0,.54,0,1.08,0,1.63h1.72V17.09ZM1.39,15.73H4.84v-5H1.39Zm19.46,0V10.68H17.41v5.05Zm-4.32,4.56H5.73V21h10.8Zm-7.76-.37h4.7V18.37H8.77ZM6.18,15a.5.5,0,0,0,.54.32h8.85c.29,0,.42-.08.47-.31Zm11.23,1.69h3.44V16.1H17.41Zm-16,0H4.84V16.1H1.39Zm7.72,0h4a.39.39,0,0,0-.39-.27H9.5A.39.39,0,0,0,9.11,16.73Zm-.69,3.2V18.36H7.8v1.57Zm6-1.57h-.62v1.56h.62Zm-2.37-2.65H10.16v.4h1.93ZM2,22.78l.13-1.37H1.58l.13,1.37ZM20.13,21.4l.14,1.38h.27c0-.37.08-.72.11-1.08,0-.09,0-.19,0-.3ZM2.53,17.29h.91c.15,0,.15,0,.12-.2h-1Zm16.15-.2c-.05.15,0,.2.15.2h.73c.15,0,.21,0,.13-.21h-1ZM1.68,14a1.47,1.47,0,0,1,1.44-1.46,1.45,1.45,0,1,1,0,2.9A1.49,1.49,0,0,1,1.68,14ZM2,14a1.11,1.11,0,1,0,1.1-1.12A1.11,1.11,0,0,0,2,14Zm1.65-2.35a.57.57,0,0,1-.54.54.58.58,0,0,1-.54-.54.57.57,0,0,1,.55-.54A.57.57,0,0,1,3.66,11.64Zm-.3,0c0-.18-.1-.25-.24-.25a.18.18,0,0,0-.2.19c0,.14.07.23.21.21A1,1,0,0,0,3.36,11.69ZM20.58,14a1.49,1.49,0,0,1-1.45,1.46A1.5,1.5,0,0,1,17.68,14a1.45,1.45,0,0,1,2.9,0Zm-.34,0a1.11,1.11,0,1,0-1.13,1.11A1.1,1.1,0,0,0,20.24,14ZM19.13,11.1a.57.57,0,0,1,.54.54.54.54,0,1,1-1.08,0A.57.57,0,0,1,19.13,11.1Zm-.23.6a.79.79,0,0,0,.23.14.18.18,0,0,0,.2-.21.17.17,0,0,0-.2-.19C19,11.44,18.93,11.51,18.9,11.7ZM9.78,18.64c-.13,0-.26,0-.26.18s.14.16.27.16h2.67c.13,0,.26,0,.27-.16s-.15-.18-.28-.18H9.78ZM3.14,13.12a.87.87,0,1,1,0,1.73.87.87,0,0,1,0-1.73ZM2.6,14a.5.5,0,0,0,.53.52.53.53,0,0,0,0-1A.5.5,0,0,0,2.6,14ZM20,14a.86.86,0,1,1-.87-.86A.9.9,0,0,1,20,14Zm-.34,0a.5.5,0,0,0-.52-.53.53.53,0,1,0,0,1A.49.49,0,0,0,19.65,14ZM.33,1c.1,0,.3-.2.6-.2a3.87,3.87,0,0,1,2.6.1c.3.1.4.3.6.4s.1.3-.1.5a2.29,2.29,0,0,1-.5.3,5.24,5.24,0,0,1-2.8-.2l-.6-.3C-.07,1.45-.07,1.25.33,1Zm1.5-1a2.09,2.09,0,0,0-1.7.8A4.79,4.79,0,0,1,4,1,2.17,2.17,0,0,0,1.83,0Zm5.8,1c.1,0,.3-.2.6-.2a4.24,4.24,0,0,1,2.7.2,2,2,0,0,1,.6.4c.2.1.1.3-.1.5l-.6.3A4.5,4.5,0,0,1,8,2a2,2,0,0,0-.6-.4C7.23,1.45,7.23,1.25,7.63,1Zm1.5-1a2.09,2.09,0,0,0-1.7.8,5.26,5.26,0,0,1,3.9.1A2.3,2.3,0,0,0,9.13,0Zm5.5,1c.1,0,.3-.2.6-.2a4.24,4.24,0,0,1,2.7.2,2,2,0,0,1,.6.4c.2.1.1.3-.1.5l-.6.3A4.5,4.5,0,0,1,15,2a2.29,2.29,0,0,1-.5-.3C14.23,1.45,14.33,1.25,14.63,1Zm1.6-1a2.09,2.09,0,0,0-1.7.8,5.26,5.26,0,0,1,3.9.1A2.39,2.39,0,0,0,16.23,0Zm5.7,1c.1,0,.3-.2.6-.2a4.24,4.24,0,0,1,2.7.2.81.81,0,0,1,.5.3c.2.1.1.3-.1.5l-.6.3a4.41,4.41,0,0,1-2.8-.2,2.29,2.29,0,0,1-.5-.3C21.53,1.45,21.63,1.25,21.93,1Zm1.6-1a2.09,2.09,0,0,0-1.7.8,4.82,4.82,0,0,1,3.9.2A2.26,2.26,0,0,0,23.53,0Zm6,1c.1,0,.3-.2.6-.2a4.24,4.24,0,0,1,2.7.2,2,2,0,0,1,.6.4c.2.1.1.3-.1.5a1.42,1.42,0,0,0-.6.2,4.41,4.41,0,0,1-2.8-.2,2.29,2.29,0,0,1-.5-.3C29.13,1.45,29.13,1.25,29.53,1ZM31,0a2.09,2.09,0,0,0-1.7.8,4.78,4.78,0,0,1,3.9.2A2.17,2.17,0,0,0,31,0Z"/>
<path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M8.7,14.67c.36-.33.68-.64,1-.95l.57-.54c.09-.08.16-.18.05-.29s-.2,0-.29,0c-.57.55-1.13,1.09-1.71,1.63a.5.5,0,0,1-.31.12H6.17V10.18h8.29a.59.59,0,0,0,.19,0c.06,0,.15-.1.14-.14a.27.27,0,0,0-.13-.18.69.69,0,0,0-.25,0H6.18a.42.42,0,0,1,.44-.31h8.94c.3,0,.4.06.49.31h-.54c-.13,0-.24,0-.24.18s.12.16.23.16h.58v4.49H9.68L10.4,14l.14-.14c.09-.08.16-.17.06-.28s-.2-.05-.29,0l-.89.84C9.15,14.71,9.15,14.71,8.7,14.67Zm-.28,3.69H7.8v1.57h.62Zm5.42,0v1.56h.62V18.36ZM3.44,17.29c.15,0,.15,0,.12-.2h-1v.2Zm15.39,0h.73c.15,0,.21,0,.13-.21h-1C18.63,17.24,18.68,17.29,18.83,17.29ZM3.12,15.1A1.12,1.12,0,1,0,2,14,1.1,1.1,0,0,0,3.12,15.1ZM4,14a.92.92,0,0,1-.89.84.87.87,0,0,1,0-1.73A.92.92,0,0,1,4,14Zm-.87-2.57a.18.18,0,0,0-.2.19c0,.14.07.23.21.21a1,1,0,0,0,.23-.15C3.32,11.51,3.26,11.44,3.12,11.44Zm16,1.43A1.12,1.12,0,1,0,20.24,14,1.1,1.1,0,0,0,19.14,12.87Zm0,2A.87.87,0,1,1,20,14,.91.91,0,0,1,19.13,14.85Zm0-3a.18.18,0,0,0,.2-.21.17.17,0,0,0-.2-.19c-.14,0-.2.07-.23.26A.79.79,0,0,0,19.13,11.84Zm-16,2.67a.53.53,0,0,0,0-1,.53.53,0,1,0,0,1Zm16-1a.53.53,0,1,0,0,1,.49.49,0,0,0,.51-.52A.5.5,0,0,0,19.13,13.46ZM3.23,1.83a3.75,3.75,0,0,1-2.1,0c-.2-.1-.4-.1-.4-.4s.2-.3.4-.4a3,3,0,0,1,2.1.22c.1,0,.2.1.3.1a.22.22,0,0,1,.05.08.25.25,0,0,1-.15.32C3.33,1.85,3.33,1.85,3.23,1.83Zm7.3,0a3,3,0,0,1-2.1-.1c-.2-.1-.4-.2-.4-.4s.2-.3.4-.3a3.75,3.75,0,0,1,2.1.12c.1.1.2.1.3.2a.22.22,0,0,1,.05.08.25.25,0,0,1-.15.32C10.63,1.85,10.63,1.85,10.53,1.83Zm7,0a3,3,0,0,1-2.1-.1c-.2-.1-.4-.2-.4-.4s.2-.3.4-.3a3,3,0,0,1,2.1.1c.1.1.2.1.3.2a.22.22,0,0,1,.05.08.25.25,0,0,1-.15.32C17.73,1.85,17.63,1.85,17.53,1.85ZM25,1.75c0,.1-.07.1-.17.1a3,3,0,0,1-2.1-.1c-.2-.1-.4-.2-.4-.4s.2-.3.4-.3a3.75,3.75,0,0,1,2.1.1c.1.1.2.1.3.2a.22.22,0,0,1,.05.08.25.25,0,0,1-.15.32Zm7.43.1a3,3,0,0,1-2.1-.1c-.2-.1-.4-.2-.4-.4s.2-.3.4-.3a3.75,3.75,0,0,1,2.1.1c.1.1.2.1.3.2a.22.22,0,0,1,.05.08.25.25,0,0,1-.15.32C32.53,1.85,32.53,1.85,32.43,1.85Z"/></svg>
styles:
custom_fields:
icon_wohnen:
[top: 0%, left: 2%, width: 100%, position: absolute]
template: ['base', 'light']
- entity_id: light.kuche
state: 'on'
options:
type: custom:button-card
entity: light.kuche
name: KĆ¼che
custom_fields:
icon_kuche: >
<svg viewBox="0 0 35.02 31.02">
<path fill="#9da0a2" d="M.33,1c.1,0,.3-.2.6-.2a3.87,3.87,0,0,1,2.6.1c.3.1.4.3.6.4s.1.3-.1.5a2.29,2.29,0,0,1-.5.3,5.24,5.24,0,0,1-2.8-.2l-.6-.3C-.07,1.45-.07,1.25.33,1Zm1.5-1a2.09,2.09,0,0,0-1.7.8A4.79,4.79,0,0,1,4,1,2.17,2.17,0,0,0,1.83,0Zm5.8,1c.1,0,.3-.2.6-.2a4.24,4.24,0,0,1,2.7.2,2,2,0,0,1,.6.4c.2.1.1.3-.1.5l-.6.3A4.5,4.5,0,0,1,8,2a2,2,0,0,0-.6-.4C7.23,1.45,7.23,1.25,7.63,1Zm1.5-1a2.09,2.09,0,0,0-1.7.8,5.26,5.26,0,0,1,3.9.1A2.3,2.3,0,0,0,9.13,0Zm5.5,1c.1,0,.3-.2.6-.2a4.24,4.24,0,0,1,2.7.2,2,2,0,0,1,.6.4c.2.1.1.3-.1.5l-.6.3A4.5,4.5,0,0,1,15,2a2.29,2.29,0,0,1-.5-.3C14.23,1.45,14.33,1.25,14.63,1Zm1.6-1a2.09,2.09,0,0,0-1.7.8,5.26,5.26,0,0,1,3.9.1A2.39,2.39,0,0,0,16.23,0Zm5.7,1c.1,0,.3-.2.6-.2a4.24,4.24,0,0,1,2.7.2.81.81,0,0,1,.5.3c.2.1.1.3-.1.5l-.6.3a4.41,4.41,0,0,1-2.8-.2,2.29,2.29,0,0,1-.5-.3C21.53,1.45,21.63,1.25,21.93,1Zm1.6-1a2.09,2.09,0,0,0-1.7.8,4.82,4.82,0,0,1,3.9.2A2.26,2.26,0,0,0,23.53,0Zm6,1c.1,0,.3-.2.6-.2a4.24,4.24,0,0,1,2.7.2,2,2,0,0,1,.6.4c.2.1.1.3-.1.5a1.42,1.42,0,0,0-.6.2,4.41,4.41,0,0,1-2.8-.2,2.29,2.29,0,0,1-.5-.3C29.13,1.45,29.13,1.25,29.53,1ZM31,0a2.09,2.09,0,0,0-1.7.8,4.78,4.78,0,0,1,3.9.2A2.17,2.17,0,0,0,31,0ZM.66,15.59A1,1,0,0,1,1,15.51H6.68a1.57,1.57,0,0,1,.28.06l0,0a18.35,18.35,0,0,1,2.87-.08c.67,0,1.34,0,2,0,.14,0,.28.06.42.06s.23-.06.35-.06h4c0-.18,0-.35,0-.52s.11-.15.23-.15H18l0-.05.23-.28.22.27-.05.05h.33c0-.39,0-.78,0-1.17,0-.05.1-.13.16-.14s.15.08.15.13c0,.39,0,.79,0,1.18h.33l-.05-.05.24-.27.21.28,0,.05h1.06c.2,0,.28.07.26.27s0,.25,0,.4h.74a1.38,1.38,0,0,1,.29.08v7.5a1.09,1.09,0,0,1-.31.08H12.61c-.11,0-.22-.05-.32-.05s-.2.05-.3.05H8.8c-.36,0-.71,0-1.06,0s-.68,0-1,0c-1.93,0-3.86,0-5.79,0a.92.92,0,0,1-.27-.08Zm21,6.58V16.51H19v5.66Zm-3,0V16.51H16v5.66Zm-12-5.65H4v5.64H6.68Zm-5.7,0v5.65H3.69V16.51ZM7,15.81l-.12.68s0,0,0,.06a1.13,1.13,0,0,1,.06.31c0,1.52,0,3,0,4.54a11.52,11.52,0,0,0,0,1.44h5.31a1.48,1.48,0,0,0,.08-.29.27.27,0,0,0,0-.09,1.4,1.4,0,0,1-.06-.28c0-1.78,0-3.55,0-5.33,0-.12.08-.24.07-.35s-.08-.47-.11-.69Zm8.65.71h-3V18.2h3Zm-3,3.68h3V18.48h-3Zm3,2V20.48h-3v1.69Zm6.05.35H12.62l.06.31h9Zm-.05-6.67h-9v.31h9ZM6.71,22.52H1l.06.31H6.64Zm-.06-6.67H1v.31H6.65ZM17,15.49h3.75l-.06-.31H17Zm5-4.4a1,1,0,0,1-.29.08h-9.1c-.24,0-.28,0-.28-.28V6.12c0-.24,0-.28.28-.28h9.12a.92.92,0,0,1,.27.08Zm-5-.26V6.19H12.67v4.64Zm4.63-4.65H17.31v4.65h4.35Zm-21-.26A1,1,0,0,1,1,5.84H6.7c.27,0,.3,0,.3.3v4.71c0,.3,0,.32-.32.32H1a1,1,0,0,1-.29-.08ZM1,10.83H6.65V6.19H1Zm7.7-2a3,3,0,0,1,0-.31c0-.79,0-1.59,0-2.39,0,0,0-.09,0-.12s.1-.11.15-.17A1,1,0,0,1,9,6s0,.08,0,.12V8.55c0,.09,0,.18,0,.28h1.41a2.17,2.17,0,0,1,0-.25V6.1s0-.1,0-.12.11-.13.16-.13.12.08.15.13,0,.11,0,.17c0,.8,0,1.59,0,2.39,0,.1,0,.19,0,.3h.81A.52.52,0,0,1,12,9.4c0,.44,0,.44-.44.44H7.62c-.27,0-.29,0-.29-.3V9.38a.51.51,0,0,1,.53-.54H8.7Zm-1,.66h4c0-.28,0-.32-.29-.32H8C7.7,9.17,7.66,9.21,7.67,9.49Zm-.12,5.36c-.07,0-.14.1-.22.16.08.05.15.15.23.16H9.11c.07,0,.15-.11.22-.17-.08-.05-.15-.15-.22-.15-.26,0-.52,0-.77,0S7.81,14.83,7.55,14.85Zm4.22.32c.12,0,.24,0,.21-.17s-.14-.15-.21-.15c-.52,0-1,0-1.54,0-.12,0-.24,0-.22.17s.14.15.22.16c.26,0,.51,0,.77,0ZM9.82,10.4c0-.08-.1-.15-.15-.22s-.16.14-.16.21c0,.4,0,.79,0,1.19,0,.07.11.15.16.22s.15-.14.16-.22a3.75,3.75,0,0,0,0-.58A4,4,0,0,0,9.82,10.4Zm-1.16-.06c0-.06-.1-.11-.15-.16s-.16.1-.17.17a3.21,3.21,0,0,0,0,.62c0,.06.1.11.15.16s.14-.1.17-.17a1.6,1.6,0,0,0,0-.31A1.61,1.61,0,0,0,8.66,10.34Zm2,.32a1.6,1.6,0,0,0,0,.31c0,.06.1.15.16.15A.25.25,0,0,0,11,11a3.42,3.42,0,0,0,0-.64.22.22,0,0,0-.16-.15.21.21,0,0,0-.15.14,1.22,1.22,0,0,0,0,.33ZM20.78,17.5c.08,0,.15-.11.22-.16s-.14-.15-.21-.16a7.21,7.21,0,0,0-.93,0c-.06,0-.13.11-.19.16s.13.15.2.16a3.53,3.53,0,0,0,.46,0A2.26,2.26,0,0,0,20.78,17.5Zm-3.9-.32c-.08,0-.14.1-.21.15s.13.17.19.17a7.37,7.37,0,0,0,.94,0c.07,0,.13-.11.2-.16s-.13-.15-.21-.16a3.2,3.2,0,0,0-.44,0A3.65,3.65,0,0,0,16.88,17.18Zm-12,0c-.06,0-.12.1-.18.15s.12.16.19.17a7.53,7.53,0,0,0,.95,0c.06,0,.12-.1.18-.15s-.12-.16-.19-.17a3.34,3.34,0,0,0-.45,0A4.17,4.17,0,0,0,4.85,17.18Zm-2.06.32c.08,0,.14-.1.2-.16s-.12-.15-.19-.16a7.21,7.21,0,0,0-.93,0c-.07,0-.14.1-.2.16s.12.15.19.16a3.85,3.85,0,0,0,.48,0A2.26,2.26,0,0,0,2.79,17.5ZM12,20v2.21c0,.25,0,.29-.29.29H7.63c-.27,0-.3,0-.3-.3v-4.4c0-.27,0-.3.3-.3h4.08c.26,0,.29,0,.29.29Zm-.35-2.15h-4v4.3h4ZM9.19,16.52c-.07,0-.13.09-.19.15s.11.16.17.16a8,8,0,0,0,1,0c.06,0,.12-.1.18-.16s-.12-.14-.18-.15a2.36,2.36,0,0,0-.46,0A2.77,2.77,0,0,0,9.19,16.52Zm2.33-.33c-.07,0-.12.1-.18.15s.1.14.16.15.13-.07.24-.14C11.64,16.27,11.57,16.18,11.52,16.19Zm-2.86.49c0-.06-.1-.11-.16-.17s-.15.1-.15.16.08.13.16.24C8.58,16.8,8.67,16.73,8.66,16.68Zm-1-.35c0,.07.1.12.16.17s.13-.11.14-.17-.07-.12-.15-.23C7.76,16.21,7.68,16.28,7.69,16.33Zm3,.34c0,.06.1.11.16.17s.14-.11.14-.17-.07-.12-.15-.23C10.76,16.55,10.68,16.62,10.69,16.67Zm3.16.51c-.07,0-.12.1-.18.15s.11.16.17.17a3.64,3.64,0,0,0,.66,0c.06,0,.11-.1.16-.15s-.1-.15-.17-.17a1.22,1.22,0,0,0-.33,0A1.61,1.61,0,0,0,13.85,17.18Zm.64,2.32c.07,0,.11-.11.17-.16s-.12-.15-.18-.16a3.42,3.42,0,0,0-.64,0c-.06,0-.11.11-.17.16s.11.14.18.16a1.08,1.08,0,0,0,.31,0A1.22,1.22,0,0,0,14.49,19.5Zm0,2c.08,0,.13-.1.19-.15s-.11-.16-.17-.17a3.53,3.53,0,0,0-.65,0c-.06,0-.11.11-.17.17s.11.13.18.15a1.08,1.08,0,0,0,.31,0A1.05,1.05,0,0,0,14.47,21.5ZM14.22,9.85c-.07,0-.14.1-.22.15.07.06.14.16.22.16.41,0,.81,0,1.22,0,.08,0,.15-.1.22-.15s-.14-.15-.21-.16a4,4,0,0,0-.6,0A4.42,4.42,0,0,0,14.22,9.85Zm4.67,0c-.08,0-.15.1-.22.16s.15.15.22.15c.41,0,.82,0,1.22,0,.08,0,.15-.1.22-.16s-.14-.14-.22-.15a4,4,0,0,0-.6,0A4.26,4.26,0,0,0,18.89,9.85Zm-14.45.31c.08,0,.15-.1.22-.16s-.13-.15-.2-.15c-.42,0-.84,0-1.27,0-.06,0-.12.1-.19.16s.13.15.2.15a4.3,4.3,0,0,0,.62,0A4.26,4.26,0,0,0,4.44,10.16Zm6.65,8.35c.12,0,.23,0,.23-.17s-.11-.17-.23-.17H8.25c-.12,0-.24,0-.24.16s.12.18.24.18h2.84Z"/>
<path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M3.23,1.83a3.75,3.75,0,0,1-2.1,0c-.2-.1-.4-.1-.4-.4s.2-.3.4-.4a3,3,0,0,1,2.1.22c.1,0,.2.1.3.1a.22.22,0,0,1,.05.08.25.25,0,0,1-.15.32C3.33,1.85,3.33,1.85,3.23,1.83Zm7.3,0a3,3,0,0,1-2.1-.1c-.2-.1-.4-.2-.4-.4s.2-.3.4-.3a3.75,3.75,0,0,1,2.1.12c.1.1.2.1.3.2a.22.22,0,0,1,.05.08.25.25,0,0,1-.15.32C10.63,1.85,10.63,1.85,10.53,1.83Zm7,0a3,3,0,0,1-2.1-.1c-.2-.1-.4-.2-.4-.4s.2-.3.4-.3a3,3,0,0,1,2.1.1c.1.1.2.1.3.2a.22.22,0,0,1,.05.08.25.25,0,0,1-.15.32C17.73,1.85,17.63,1.85,17.53,1.85ZM25,1.75c0,.1-.07.1-.17.1a3,3,0,0,1-2.1-.1c-.2-.1-.4-.2-.4-.4s.2-.3.4-.3a3.75,3.75,0,0,1,2.1.1c.1.1.2.1.3.2a.22.22,0,0,1,.05.08.25.25,0,0,1-.15.32Zm7.43.1a3,3,0,0,1-2.1-.1c-.2-.1-.4-.2-.4-.4s.2-.3.4-.3a3.75,3.75,0,0,1,2.1.1c.1.1.2.1.3.2a.22.22,0,0,1,.05.08.25.25,0,0,1-.15.32C32.53,1.85,32.53,1.85,32.43,1.85ZM11.66,9.49c0-.28,0-.32-.29-.32H8c-.26,0-.3,0-.29.32Z"/></svg>
styles:
custom_fields:
icon_kuche:
[top: 0%, left: 6%, width: 100%, position: absolute]
template: ['light']
- entity_id: light.tradfri_esszimmer
state: 'on'
options:
type: custom:button-card
entity: light.tradfri_esszimmer
name: Essen
custom_fields:
icon_essen: >
<svg viewBox="0 0 35.02 31.02">
<path fill="#9da0a2" d="M12.82,3.81c.32-.09.38.11.42.32a.63.63,0,0,0,.41.47,2.34,2.34,0,0,1,1.43,1.91c0,.16,0,.23-.19.23H10.47c-.2,0-.25-.07-.2-.32a2.42,2.42,0,0,1,1.51-1.87c.15-.06.25-.13.27-.29l0-.12c.06-.21.11-.43.44-.33V.29c0-.06,0-.13,0-.18A.16.16,0,0,1,12.66,0a.22.22,0,0,1,.15.1.64.64,0,0,1,0,.2V3.81Zm1.95,2.63A2,2,0,0,0,13.58,4.9.87.87,0,0,1,13,4.2a.17.17,0,0,0-.1-.1c-.35-.07-.42,0-.53.31a.49.49,0,0,0,0,.11.32.32,0,0,1-.27.26,2.07,2.07,0,0,0-1.39,1.46,1.06,1.06,0,0,0,0,.2Zm4-2.63V.28c0-.05,0-.12,0-.16A.29.29,0,0,1,18.9,0s.1.07.13.13,0,.09,0,.14V3.78a.92.92,0,0,1,.19,0c.06,0,.16.08.17.14a1,1,0,0,0,.61.73,2.28,2.28,0,0,1,1.29,1.75c.05.27,0,.32-.27.32H16.75c-.27,0-.31,0-.26-.3A2.39,2.39,0,0,1,18,4.55a.38.38,0,0,0,.26-.29.78.78,0,0,1,.05-.14C18.37,3.92,18.43,3.72,18.74,3.81ZM21,6.43c0-.08,0-.14,0-.2A1.88,1.88,0,0,0,19.81,4.9a.87.87,0,0,1-.64-.7A.17.17,0,0,0,19,4.1c-.38,0-.38,0-.51.32,0,0,0,0,0,0a.4.4,0,0,1-.33.34,2,2,0,0,0-1.4,1.63ZM1.62,16.27H1c-.15,0-.21-.07-.21-.22v-.63H.26c-.23,0-.26,0-.26-.26V14c0-.23,0-.27.27-.27h4v-2a.89.89,0,0,1,1-.95H7.48a.91.91,0,0,1,.9.9v2.08h2.24v-2a.9.9,0,0,1,1-1h2a1.79,1.79,0,0,1,.4,0,.9.9,0,0,1,.71.89V13.7h4c.28,0,.31,0,.31.31s0,.78,0,1.17c0,.17-.06.25-.23.24h-.58V16c0,.24,0,.26-.27.26h-.55v.25c-.05,2.25-.09,4.5-.14,6.75,0,.24,0,.27-.27.27h-.52c-.21,0-.26,0-.26-.25,0-1.44-.06-2.88-.08-4.33q0-1.32-.06-2.67H14.71v.47H15a.68.68,0,0,1,.63.42.6.6,0,0,1-.16.68.42.42,0,0,0-.08.21.88.88,0,0,0,0,.28c0,.17-.07.24-.24.23h-.29v3.92c0,.3,0,.31-.32.31-.13,0-.26,0-.39,0s-.21-.09-.21-.23c0-.56,0-1.11,0-1.66a.37.37,0,0,0-.17-.33c-.37-.27-.73-.56-1.12-.86a7.26,7.26,0,0,1-.78.59,1,1,0,0,0-.52,1.07c0,.39,0,.79,0,1.19,0,.17-.06.24-.23.23a3.38,3.38,0,0,0-.45,0c-.17,0-.23-.06-.23-.23,0-.83,0-1.65,0-2.48V18.57h-.32c-.13,0-.21-.05-.2-.2v-.2a.45.45,0,0,0-.13-.37.55.55,0,0,1-.12-.63.67.67,0,0,1,.57-.42c.11,0,.23,0,.35,0v-.48H8.39v.48h.29a.67.67,0,0,1,.63.43.6.6,0,0,1-.16.68.37.37,0,0,0-.09.2,1.71,1.71,0,0,0,0,.32.17.17,0,0,1-.19.19H8.53v3.95c0,.27,0,.28-.27.28H7.89c-.24,0-.26,0-.26-.25V20.87a.28.28,0,0,0-.12-.25l-1.17-.9-1.22.94a.32.32,0,0,0-.06.2c0,.54,0,1.08,0,1.62,0,.31,0,.32-.32.32h-.3c-.27,0-.29,0-.29-.28V18.57H3.82c-.14,0-.21-.06-.21-.2v-.15a.51.51,0,0,0-.14-.43.54.54,0,0,1-.09-.64.66.66,0,0,1,.57-.4c.11,0,.22,0,.34,0v-.47H3v.44Q2.88,20,2.82,23.21c0,.3,0,.32-.32.32H2c-.23,0-.26,0-.26-.26,0-1.11-.05-2.22-.07-3.33s-.05-2.35-.07-3.52C1.63,16.37,1.62,16.33,1.62,16.27ZM.3,15.12H13.09c.05,0,.11,0,.15,0s.13.09.12.14-.08.12-.13.14a1.31,1.31,0,0,1-.28,0H1.12V16H17.88v-.54h-1c-.11,0-.22,0-.22-.14s.1-.16.22-.16H18.7c0-.32,0-.62,0-.91s0-.22-.21-.22H.48c-.09,0-.18,0-.18.12Zm7.78-1.43c0-.73,0-1.46,0-2.18A.53.53,0,0,0,7.54,11H5.27a.59.59,0,0,0-.67.66v1.84c0,.06,0,.11,0,.17Zm2.84,0H14.4V11.62c0-.31-.19-.57-.45-.57-.84,0-1.69,0-2.53,0a.5.5,0,0,0-.5.51C10.91,12.25,10.92,13,10.92,13.68ZM8.75,18H5.32c-.06,0-.12,0-.17,0S5,17.94,5,17.89s.08-.11.14-.14a.42.42,0,0,1,.16,0H8.66c.27,0,.39-.11.39-.34s-.12-.35-.39-.35H4c-.25,0-.38.13-.38.34a.35.35,0,0,0,.37.35.28.28,0,0,1,.13,0c.15,0,.42-.12.42.15s-.26.11-.41.14H3.91v.21H8.75ZM2.52,23.22l.14-6.94H1.92l.14,6.94Zm14.41,0,.15-6.94h-.74l.14,6.94Zm-4.26-6.17H10.32c-.27,0-.4.14-.38.39s.15.3.4.3h4.73a.33.33,0,0,0,.29-.44c0-.21-.2-.25-.38-.25Zm-8.06-.31H8.07v-.46H4.61Zm9.78-.46H10.93v.46h3.46ZM4.74,22.49V18.58H4.45v3.91Zm9.51-3.91v3.9h.3v-3.9Zm-6,3.91v-3.9H7.94v3.9Zm2.55-3.91v3.91h.29V18.58Zm4.31-.53H10.25v.21h4.83Zm-7.46.68-1,.8,1,.8Zm3.76,0v1.6l1-.8Zm-6.31,0v1.58l1-.79Zm8.87,0-1,.8,1,.8Zm-8.59-.15.93.71s.11,0,.15,0,.31-.24.46-.35l.43-.34Zm6.32,0,.54.42c.15.11.3.3.45.3s.3-.19.45-.31l.54-.41ZM14.14,15c-.11,0-.22,0-.2.16a.27.27,0,0,0,.2.13h1.34c.1,0,.19,0,.2-.14s-.09-.16-.2-.16H14.14Z"/>
<path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M14.77,6.44H10.59a1.06,1.06,0,0,1,0-.2A2.07,2.07,0,0,1,12,4.78a.32.32,0,0,0,.27-.26.49.49,0,0,1,0-.11c.11-.33.18-.38.53-.31a.17.17,0,0,1,.1.1.87.87,0,0,0,.63.7A2,2,0,0,1,14.77,6.44Zm6.17-.21A1.88,1.88,0,0,0,19.81,4.9a.87.87,0,0,1-.64-.7A.17.17,0,0,0,19,4.1c-.38,0-.38,0-.51.32,0,0,0,0,0,0a.4.4,0,0,1-.33.34,2,2,0,0,0-1.4,1.63H21C21,6.35,21,6.29,20.94,6.23Zm-3.42-.15a.18.18,0,0,1-.13-.14s.08-.13.12-.13a3.31,3.31,0,0,1,.63,0c.05,0,.12.09.12.14s-.07.12-.12.13a1.61,1.61,0,0,1-.31,0h0A1.06,1.06,0,0,1,17.52,6.08ZM18.92,6c0,.13-.1.14-.21.14s-.22,0-.19-.16.12-.11.22-.2C18.83,5.82,18.92,5.88,18.92,6Z"/></svg>`; ]]]
styles:
custom_fields:
icon_essen:
[top: 0%, left: 6%, width: 100%, position: absolute]
template: ['light']
- entity_id: light.wc
state: 'on'
options:
type: custom:button-card
entity: light.wc
name: WC
custom_fields:
icon_wc: >
<svg viewBox="0 0 35.02 31.02">
<path style="clip-path: url(#mask);" fill="#9da0a2" d="M8.13,1A3,3,0,0,1,8.69.76a4.48,4.48,0,0,1,2.73.18,1.77,1.77,0,0,1,.56.39.27.27,0,0,1-.05.46,1.86,1.86,0,0,1-.59.27,5.11,5.11,0,0,1-2.82-.17A1.92,1.92,0,0,1,8,1.6C7.79,1.41,7.81,1.23,8.13,1ZM9.69,0A2,2,0,0,0,8,.83,4.8,4.8,0,0,1,11.89,1,2.19,2.19,0,0,0,9.69,0ZM3.33,16.91v1h.24v.51H.35c-.27,0-.35-.08-.35-.34V9.77A.25.25,0,0,1,.27,9.5H2.8c.18,0,.27.11.27.32v4h.77c0-.34,0-.67,0-1A2.15,2.15,0,0,1,4,12.31c.3-1,.61-2.08.91-3.12a1.25,1.25,0,0,1,1.3-1,4,4,0,0,0,.49,0l-.25-.07A1.66,1.66,0,0,1,7,4.9c.5,0,1,0,1.51,0A.54.54,0,0,0,9,4.63l.26-.39.41.28a1.27,1.27,0,0,1-1.49.86A1.66,1.66,0,0,1,8.54,7.1,1.62,1.62,0,0,1,7.28,8.2L8,8.59a1.73,1.73,0,0,1,0-.3,1,1,0,0,1,2,.08l.42,3.3a1,1,0,0,1-.73,1.12l-.11,0a.84.84,0,0,1,.58,1c-.07,1-.13,2-.19,3v.09h.21a.76.76,0,0,1,.75.76,4,4,0,0,1,0,.49.25.25,0,0,1-.27.29H9.17a.74.74,0,0,1-.73-.79c0-.59.07-1.18.11-1.77s.06-1,.1-1.52H7.42v.4a6.7,6.7,0,0,1,0,.9,1.5,1.5,0,0,1-1.47,1.25c-.8,0-1.6,0-2.39,0Zm-2.81,1H2.8v-1H2.06V16.4H5.87a1,1,0,0,0,1-.87,11.22,11.22,0,0,0,0-1.16H.52ZM7.76,9.5a.68.68,0,0,0-.67-.77H6.15a.71.71,0,0,0-.75.56c-.3,1-.58,2-.89,3a3.4,3.4,0,0,0-.16,1.18c0,.29.07.37.37.37H8.85c.24,0,.33.1.32.33s0,.51-.05.77c0,.89-.11,1.78-.17,2.68,0,.21.09.31.3.31h1.12l.1,0c0-.43,0-.5-.44-.5h0c-.56,0-.54-.11-.51-.55.07-1.07.14-2.14.2-3.21,0-.23-.08-.33-.32-.33h-2c-.49,0-1,0-1.47-.05-.3,0-.38-.21-.22-.46l.65-1,.35-.54c-.28-.18-.55-.34-.8-.52a1,1,0,0,1-.43-1,1,1,0,0,1,.68-.81,1,1,0,0,1,.88.12ZM10,11.8v-.1c-.14-1.09-.28-2.17-.41-3.26a.51.51,0,1,0-1,.13c.06.53.13,1,.2,1.58,0,.14,0,.26-.11.34s-.24,0-.35-.05L6.84,9.52a.67.67,0,0,0-.39-.1.47.47,0,0,0-.42.4.49.49,0,0,0,.23.53l1,.66,1.89,1.22a.51.51,0,0,0,.8-.43ZM.53,11v2.79h2V11ZM8.12,6.56A1.14,1.14,0,0,0,7,5.41a1.15,1.15,0,1,0,0,2.3A1.15,1.15,0,0,0,8.12,6.56Zm-.95,5-.81,1.26H9.14Zm-6.65-1h2V10h-2ZM4.1,14.88v.49H6.39v-.49Zm15.28-4.35a1.16,1.16,0,0,1-.58-.14s-.06,0-.09,0a1.49,1.49,0,0,1-1,.56,1.31,1.31,0,0,1-.59,0A.12.12,0,0,0,17,11a1.42,1.42,0,0,1-1.52.58l-.21-.08a.08.08,0,0,0-.11,0,.86.86,0,0,1-.76.37.94.94,0,0,1-.73-1.4c0-.06,0-.08,0-.12A1.68,1.68,0,0,1,13,9.61a1.73,1.73,0,0,1-.12-.78.13.13,0,0,0-.09-.14,1.44,1.44,0,0,1-.78-1A1.48,1.48,0,0,1,12.87,6a.08.08,0,0,0,.05-.12,1.64,1.64,0,0,1,.25-1.34,1.51,1.51,0,0,1,.77-.59,1.44,1.44,0,0,1,.87,0c.07,0,.1,0,.12,0a1.42,1.42,0,0,1,2.53-.21c.09.15.08.14.24.12a3.88,3.88,0,0,1,.48,0c.06,0,.09,0,.11-.08A1.05,1.05,0,0,1,19.57,3a1,1,0,0,1,.76.85A1.06,1.06,0,0,1,20,4.9s-.05,0-.08.06-.1.08-.09.2a2,2,0,0,1,0,.34c0,.07,0,.1.08.12a1.61,1.61,0,0,1,.76.5,1.75,1.75,0,0,1,.43,1.37,1.72,1.72,0,0,1-.51,1.07.09.09,0,0,0,0,.12,1.33,1.33,0,0,1-.95,1.83ZM14.45,10v0a.81.81,0,0,1,.47.13.89.89,0,0,1,.42.86c0,.07,0,.1.08.11l.19.07a1,1,0,0,0,1.17-.59c.08-.14.15-.17.3-.12a1.14,1.14,0,0,0,.94,0,1.3,1.3,0,0,0,.5-.46.19.19,0,0,1,.32-.06.85.85,0,0,0,.55.18.88.88,0,0,0,.78-.48.94.94,0,0,0,0-.93c-.11-.19-.1-.24,0-.38a1.39,1.39,0,0,0-.61-2.42c-.14,0-.19-.09-.18-.24s0-.23,0-.34a1.35,1.35,0,0,0-1-1.22,1.28,1.28,0,0,0-.92.08.18.18,0,0,1-.26-.11A.77.77,0,0,0,17.2,4a1.05,1.05,0,0,0-1.52-.44,1.11,1.11,0,0,0-.47.68.2.2,0,0,1-.29.15h0a1,1,0,0,0-.69-.06A1.23,1.23,0,0,0,13.35,6c.07.16,0,.26-.15.31l-.08,0a1.1,1.1,0,0,0-.68,1.49,1,1,0,0,0,.67.62.2.2,0,0,1,.16.25v.06a1.41,1.41,0,0,0,.68,1.42.14.14,0,0,0,.14,0Zm4.78-6.71a.66.66,0,0,0-.56.38c0,.06,0,.09,0,.12a1.67,1.67,0,0,1,.87.75c.05.09.06.09.14,0A.74.74,0,0,0,20,3.81.73.73,0,0,0,19.23,3.33ZM15,11c0-.05,0-.1,0-.14a.52.52,0,0,0-1-.17.42.42,0,0,0,0,.12.14.14,0,0,1,0,.06s0,0,0,.07A.53.53,0,1,0,15,11ZM14,3.13a.44.44,0,0,0,.43.45.45.45,0,0,0,.43-.44.44.44,0,0,0-.43-.45A.44.44,0,0,0,14,3.13Zm5.3,7.67a.39.39,0,0,0-.39.4.39.39,0,1,0,.78,0A.4.4,0,0,0,19.32,10.8Zm1.22-5.94a.3.3,0,0,0-.3.31.3.3,0,0,0,.3.3.29.29,0,0,0,.3-.3A.29.29,0,0,0,20.54,4.86Zm-2.79,6.59a.17.17,0,0,0-.17-.16.16.16,0,0,0-.16.16.17.17,0,0,0,.16.17A.18.18,0,0,0,17.75,11.45Zm-5.22-.93a.16.16,0,0,0,.32,0,.16.16,0,1,0-.32,0Zm.9-6.95a.17.17,0,0,0,.17.16.17.17,0,0,0,.16-.16.18.18,0,0,0-.17-.17A.18.18,0,0,0,13.43,3.57Zm5.65,3.49a1.78,1.78,0,0,1-.74,1.43c-.09.07-.19.13-.28.21a.12.12,0,0,0,0,.09,1.33,1.33,0,0,1,0,.28A.64.64,0,0,1,17,9.4a.1.1,0,0,0-.12,0,.64.64,0,0,1-.7,0,.11.11,0,0,0-.12,0,.67.67,0,0,1-.63,0A.46.46,0,0,1,15.15,9a.42.42,0,0,0-.23-.4,1.88,1.88,0,0,1-.72-.84,1.59,1.59,0,0,1-.13-.88,1.89,1.89,0,0,1,.37-.92A2.27,2.27,0,0,1,15.84,5a2.8,2.8,0,0,1,2.63.62A1.84,1.84,0,0,1,19.08,7.06ZM16.79,5.31A2.49,2.49,0,0,0,15,5.87a1.61,1.61,0,0,0-.52,1,1.3,1.3,0,0,0,.26,1,2.16,2.16,0,0,0,.64.56.28.28,0,0,1,.16.27,1.31,1.31,0,0,0,0,.28c0,.09.09.13.19.13A.18.18,0,0,0,15.94,9s0-.05,0-.07a.22.22,0,0,1,.19-.15.19.19,0,0,1,.2.13l0,.1a.16.16,0,0,0,.19.12.18.18,0,0,0,.2-.17.18.18,0,0,1,.12-.16.21.21,0,0,1,.29.17.19.19,0,0,0,.22.16.18.18,0,0,0,.19-.18v-.2c0-.15.05-.24.18-.32a2.16,2.16,0,0,0,.64-.56,1.47,1.47,0,0,0-.11-1.8A2.06,2.06,0,0,0,16.79,5.31Zm2.06,3.13a.31.31,0,0,0-.3.32.32.32,0,0,0,.3.31.32.32,0,0,0,0-.63ZM16.37,4.12a.21.21,0,0,0-.21-.21.2.2,0,0,0-.21.22.21.21,0,0,0,.21.21A.21.21,0,0,0,16.37,4.12ZM13.63,7.68a.21.21,0,1,0,.21.21A.21.21,0,0,0,13.63,7.68Zm6.13.52A.17.17,0,0,0,19.6,8a.16.16,0,0,0-.16.17.16.16,0,1,0,.32,0Zm-.24-.86a.11.11,0,0,0-.11-.12.1.1,0,0,0-.11.11.1.1,0,0,0,.1.11A.11.11,0,0,0,19.52,7.34ZM14.11,8.39A.12.12,0,0,0,14,8.5a.12.12,0,0,0,.11.11.1.1,0,0,0,.11-.11A.1.1,0,0,0,14.11,8.39Zm2.72-4a.1.1,0,0,0-.12.1.11.11,0,0,0,.1.12.12.12,0,0,0,.12-.11A.1.1,0,0,0,16.83,4.39Zm.58,3.29a.79.79,0,0,1-.84-.74.85.85,0,0,1,1.69,0A.79.79,0,0,1,17.41,7.68Zm0-.36a.38.38,0,1,0,0-.76.43.43,0,0,0-.44.38A.42.42,0,0,0,17.41,7.32Zm-1.91.56a.8.8,0,0,1-.84-.74.8.8,0,0,1,.86-.74.79.79,0,0,1,.84.76A.81.81,0,0,1,15.5,7.88Zm.44-.74a.41.41,0,0,0-.43-.38.43.43,0,0,0-.44.37.42.42,0,0,0,.44.39A.41.41,0,0,0,15.94,7.14Zm.62,1.26h.19c.27,0,.43-.26.3-.45a1.39,1.39,0,0,0-.21-.27.37.37,0,0,0-.52,0,1.68,1.68,0,0,0-.25.29.29.29,0,0,0,.23.42,1.1,1.1,0,0,0,.26,0Z"/></clipPath></defs><path class="${state}" fill="var(--button-card-light-color-no-temperature)" d="M11.24,1.74c.18-.14.2-.26.07-.39a1,1,0,0,0-.25-.17A3.25,3.25,0,0,0,9,1c-.18.05-.4.11-.41.33s.2.3.37.37a3.24,3.24,0,0,0,2.15.08A.62.62,0,0,0,11.24,1.74Zm6.17,5.58A.42.42,0,0,1,17,6.94a.43.43,0,0,1,.44-.38.38.38,0,1,1,0,.76Zm-1.47-.18a.41.41,0,0,1-.43.38.42.42,0,0,1-.44-.39.43.43,0,0,1,.44-.37A.41.41,0,0,1,15.94,7.14Z"/></svg>
styles:
custom_fields:
icon_wc:
[top: 0%, left: 6%, width: 100%, position: absolute]
template: ['light']
sort:
method: last_changed
count: 5
card:
type: custom:layout-card
layout: horizontal
min_columns: 5
column_width: 18%
justify-content: flex-start
and this is the result:
Funny you mention this, I have this problem since v14 and on smaller screens the buttons in the middle are always smaller in height (the width is fine). I have tried so many things but it seems I have not the skills to fix it.
I donāt understand how it can work for you guys since you guys run v15 (which has the very same problem for me). Only v14 works, but the spacings left and right are huge. So I am currently still on v13, though v13 has a bug that when resizing the window on a browser the view will go into an LSD trip and is unusable
This is fixed in v14 and up but canāt use that because of the buttons getting smaller.
I also wonder if this will ever be updated since well, your post is almost a month old, and the other card from this developer (more-info-card) also has problems (unfortunately he didnt respond to that issue either).
So either heās fed up with the custom cards (or fed up by people nagging him about them). Or he is working on core (which would be the best scenario imho) or he simply stopped developing for HA all together. Who knows? If someone does know please reply here.
Its a shame because his cards are really good (when they work as intended) and Iād hate to see them go.
1 Like
Yeah it is a shame, though I understand if heās done with it. HA pumps out updates every week and a major every 3 weeks or so, which can break lots of stuff. I really hope Thomasā work gets incorporated into the core, because as of right now, they are kinda musthaves (especially browser_mod, card_mod, card_tools).
I decided to only use layout-card to put my UI inside a column to add some paddings. Iām not looking into breaking my UI every three weeks. I guess itās time I get my app developing skills and create a native app based of my UI so I donāt have to worry anymore xD
With version 16 and HA 115.3, the layout is a bit of. The button card in column 2 is less high as the rest (only on mobile)
Any idea how to resolve this ?
EDIT: I just now saw the posts from above from ppl having the same issue 
Same problem here, you can downgrade to version 12 to solve this.
Hello guys, iām trying to understand how to align all the column to the left.
The default behavior of this card put the cards on the middle of the screen.
Can i set it to āstartā from the left side?
Thank you!
EDIT: Iām using it in panel mode!
1 Like
Iām actually on version 15 which works for me.
Any news about this?
I temporary switched to Layout Card Gridder.
1 Like
Hello friends. I ask because I know that at the beginning it was very complicated and now it is solved. I have a view that is armed with a 2x2 grid, but when I break the phone I would like to see it as a 1x4 grid or vertically. If there is a solution for this, I would like you to help me. Excellent what they programmed and thank you very much.
type: 'custom:layout-card'
layout: vertical
column_width: 100%
cards:
- type: 'custom:layout-card'
layout: grid
gridrows: auto auto
gridcols: 40% 60%
min-witdh: 40px
cards:
- type: thermostat
entity: climate.acuario
gridrow: 1 / 1
gridcol: 1 / 1
style: 'ha-card { height: 100%; }'
- type: 'custom:mini-graph-card'
entities:
- sensor.temperature
hours_to_show: 24
name: Temperatura de acuario
points_per_hour: 2
show:
extrema: true
- type: vertical-stack
gridrow: 2 / 4
gridcol: 1
style: 'ha-card { height: 100%; }'
cards:
- type: horizontal-stack
cards:
- entity: switch.enchufe_termometro_acuario
hold_action:
action: more-info
icon: 'mdi:fan'
icon_height: 40px
name: Fan
show_icon: true
show_name: true
tap_action:
action: toggle
theme: default
type: entity-button
- color: var(--state-icon-active-color)
entity: input_boolean.clima_manual
icon: 'mdi:air-conditioner'
icon_height: 40px
name: Aire
state:
- color: null
value: 'off'
type: 'custom:button-card'
- entity: switch.enchufe_retorno
hold_action:
action: more-info
icon: 'mdi:power'
icon_height: 40px
name: Retorno
show_icon: true
show_name: true
tap_action:
action: toggle
theme: default
type: entity-button
- entity: switch.enchufe_skimmer
hold_action:
action: more-info
icon: 'mdi:power'
icon_height: 40px
name: Skimmer
show_icon: true
show_name: true
tap_action:
action: toggle
theme: default
type: entity-button
- type: horizontal-stack
cards:
- entity: switch.sonoff_refugio
hold_action:
action: more-info
icon: 'mdi:radiator'
icon_height: 40px
name: Calefactor
show_icon: true
show_name: true
tap_action:
action: toggle
type: entity-button
- entity: switch.sonoff_refugio
hold_action:
action: more-info
icon: 'mdi:ceiling-light'
icon_height: 40px
name: Refugio
show_icon: true
show_name: true
show_state: false
tap_action:
action: toggle
type: button
- entity: switch.enchufe_luz_sump
hold_action:
action: more-info
icon: 'mdi:ceiling-light'
icon_height: 40px
name: Luz Sump
show_icon: true
show_name: true
tap_action:
action: toggle
type: button
- type: 'custom:flex-table-card'
gridrow: 2 / 2
gridcol: 2 / 2
columns:
- attr_as_list: mediciones
modify: x.KH
name: KH
- attr_as_list: mediciones
modify: x.CA
name: CA
- attr_as_list: mediciones
modify: x.MG
name: MG
- attr_as_list: mediciones
modify: x.NO3
name: NO3
- attr_as_list: mediciones
modify: x.PO4
name: PO4
- attr_as_list: mediciones
modify: x.Fecha
name: Fecha
entities:
include: sensor.mediciones
title: Mediciones del Acuario
