Dunno if it’ll work but I add the style/card part to my cards and it seems to work
- type: custom:button-card
entity: sensor.template_sidebar
template: sidebar
styles:
card:
- border-width: 0
Hi
Since this morning, I have a huge margin between content and footer.
Any idea where this could come from?
Thanks
I’m trying to move the last 2 items of the vertical-stack in sidebar to the bottom, any clues on how to approach this?
So now it looks like this:
I would like to achieve this
Code:
#################################################
# #
# SIDEBAR #
# #
#################################################
- type: vertical-stack
view_layout:
grid-area: sidebar
cards:
- type: custom:button-card
entity: sensor.template_sidebar
template: sidebar
# - type: custom:button-card
# entity: sensor.template_sidebar_weather
# template: sidebar
- type: custom:button-card
entity: sensor.template_sidebar_gast
template: sidebar
- type: custom:button-card
entity: sensor.template_sidebar_vacuum
template: sidebar
tap_action:
!include popup/footer_vacuum.yaml
- type: custom:button-card
entity: sensor.template_sidebar_vacuum2
template: sidebar
- type: custom:button-card
entity: sensor.template_sidebar_active
template: sidebar
tap_action:
!include popup/active.yaml
- type: custom:mini-media-player
entity: media_player.leefkeuken8
toggle_power: false
group: true
show_source: full
volume_stateless: true
icon: mdi:spotify
replace_mute: play_pause
speaker_group:
platform: linkplay
show_group_count: true
sync_volume: true
entities:
- entity_id: media_player.woonkamer6
name: Woonkamer
- entity_id: media_player.leefkeuken8
name: Leefkeuken
hide:
info: true
name: false
mute: false
icon: true
power: true
play_pause: true
play_stop: true
volume: false
volume_level: true
power_state: false
- type: custom:mini-media-player
entity: media_player.leefkeuken8
toggle_power: false
artwork: full-cover
show_source: full
icon: mdi:spotify
replace_mute: play_pause
hide:
controls: true
info: false
name: true
mute: false
icon: true
power: true
play_pause: true
play_stop: true
volume: true
source: true
power_state: true
- type: horizontal-stack
mode: horizontal
cards:
- type: custom:button-card
entity: person.tim
entity_picture: /local/timkleur2.png
show_entity_picture: true
show_name: false
tap_action:
!include popup/tim.yaml
state:
- value: 'not_home'
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(90%)
template: footer2
card_mod:
style: |
ha-card {
margin: 2vh;
}
- type: custom:button-card
entity: person.mieke
entity_picture: /local/miekekleur2.png
show_entity_picture: true
show_name: false
tap_action:
!include popup/mieke.yaml
state:
- value: 'not_home'
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(90%)
template: footer2
card_mod:
style: |
ha-card {
margin: 2vh;
}
- type: custom:button-card
entity: person.gast
entity_picture: /local/guest.png
show_entity_picture: true
show_name: false
tap_action:
action: call-service
service: script.gast_toggle
state:
- value: 'not_home'
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(90%)
template: footer2
card_mod:
style: |
ha-card {
margin: 2vh;
}
card_mod:
style: |
ha-card {
border: none;
--card-height: inherit !important;
position: absolute;
bottom: 4vh;
left: 6vh;
}
@media (max-width: 400px) {
ha-card {
position: inherit;
}
}
Hey, would u share your icons please?
This seems like the most asked question with no definitive answer. I tried everything on this thread and nothing works. Or I’m doing it wrong of course.
Sure they are mostly just the SVG code from MDI website.
icon_shutter:
styles:
custom_fields:
icon:
- width: 180%
- margin-left: -10%
- margin-top: -5%
custom_fields:
icon: >
[[[
if (variables.state === 'open') {
return `
<svg viewBox="0 0 50 50">
<path fill="#3182B7" d="M3 4H21V8H19V20H17V8H7V20H5V8H3V4M8" />
</svg>
`;
} else {
return `
<svg viewBox="0 0 50 50">
<path d="M3 4H21V8H19V20H17V8H7V20H5V8H3V4M8 9H16V11H8V9M8 12H16V14H8V12M8 15H16V17H8V15M8 18H16V20H8V18Z" fill="#9da0a2" />
</svg>
`;
}
]]]
icon_home:
state_display: Auto
styles:
card:
- transition: all 0.3s ease-out
custom_fields:
icon:
- width: 72%
- margin-left: -1%
- fill: >
[[[ return variables.state_on ? '#c7983e' : '#9da0a2'; ]]]
custom_fields:
icon: >
[[[
let state = variables.state_on ? 'on' : null;
return `
<svg viewBox="0 0 50 50">
<style>
@keyframes on {
from,
20%,
40%,
60%,
80%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
transform: scale(0.3);
}
20% {
transform: scale(1.1);
}
40% {
transform: scale(0.9);
}
60% {
transform: scale(1.03);
}
80% {
transform: scale(0.97);
}
to {
transform: scale(1);
}
}
.on {
animation: on 1s;
transform-origin: center;
}
</style>
<path class="${state}" d="M42.2 28.3c0-.8-.2-1-.2-1L26 12.1s-.5-.4-1-.4-1 .3-1 .3L8.2 27.1c-.4.5-.4.9-.4.9v18.3c0 1.1.9 2 1.9 2h8.2a1.47 1.47 0 0 0 1.5-1.5v-14a1.47 1.47 0 0 1 1.5-1.5h8.4a1.47 1.47 0 0 1 1.5 1.5v14a1.47 1.47 0 0 0 1.5 1.5h8.2c1.1 0 2-.9 2-1.9 0-.2-.3-18.1-.3-18.1zM7.3 25l-1.6 1.5s-.3.3-.5.3-.5 0-.8-.2c-.2-.2-2-2.8-2-2.8s-.1-.4-.1-.7c.1-.3.2-.7.3-.8.4-.1 21.5-20.1 21.5-20.1s.4-.3.9-.3c.4 0 .8.1.9.2s.5.4.5.4l8.9 8.5V6s.1-.4.2-.7c.1-.2.3-.3.4-.3s.3-.1.3-.1h3s.3.1.4.3a1.08 1.08 0 0 1 .3.7v9.8l7.2 6.9s.2.3.3.4c.1.2.1.7.1.7 0 .1-.1.4-.2.5s-1.6 2.5-1.6 2.5-.1.3-.3.3c-.2.1-.4.1-.7 0-.2-.1-.5-.4-.5-.4L26.4 9.4s-.3-.3-.5-.4-.4-.2-.8-.2-.5.1-.8.1c-.1.1-.4.3-.7.5C23.3 9.8 7.3 25 7.3 25z"/>
</svg>
`;
]]]
icon_washer:
styles:
custom_fields:
icon:
- width: 78%
- margin-left: -6%
custom_fields:
icon: >
[[[
let center = `
<path d="M31.8,23.1c3.8,3.8,3.8,9.8,0,13.6c-3.8,3.8-9.8,3.8-13.6,0L31.8,23.1"/>
<path fill="none" d="M25,15.4c-8,0-14.4,6.4-14.4,14.4S17,44.3,25,44.3s14.4-6.4,14.4-14.4S33,15.4,25,15.4z"/>
`,
base = `
<path fill="#9da0a2" d="M10.6,1.1h28.7c2.6,0,4.8,2.1,4.8,4.8v38.4c0,2.6-2.1,4.8-4.8,4.8H10.6c-2.6,0-4.8-2.1-4.8-4.8V5.8C5.8,3.2,8,1.1,10.6,1.1 M13.1,5.8c-1.4,0-2.4,1.1-2.4,2.4c0,1.4,1.1,2.4,2.4,2.4s2.4-1.1,2.4-2.4S14.3,5.8,13.1,5.8 M20.2,5.8c-1.4,0-2.4,1.1-2.4,2.4 c0,1.4,1.1,2.4,2.4,2.4c1.4,0,2.4-1.1,2.4-2.4S21.5,5.8,20.2,5.8 M25,15.4c-8,0-14.4,6.4-14.4,14.4S17,44.3,25,44.3 s14.4-6.4,14.4-14.4S33,15.4,25,15.4z"/>
`,
style = `
<svg viewBox="0 0 50 50">
<style>
@keyframes rotate {
0% {
visibility: visible;
transform: rotate(0deg) translateZ(0);
}
100% {
transform: rotate(720deg) translateZ(0);
}
}
.start {
animation: rotate 2.8s ease-in;
transform-origin: center 60%;
fill: #5daeea;
visibility: hidden;
will-change: transform;
}
.on {
animation: rotate 1.8s linear infinite;
transform-origin: center 60%;
fill: #5daeea;
animation-delay: 2.8s;
visibility: hidden;
will-change: transform;
}
.end {
animation: rotate 2.8s;
transform-origin: center 60%;
fill: #9ca2a5;
animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
will-change: transform;
}
.start_timeout {
animation: rotate 1.8s linear infinite;
transform-origin: center 60%;
fill: #5daeea;
visibility: hidden;
will-change: transform;
}
.end_timeout {
fill: #9ca2a5;
}
</style>
`;
if (variables.state_on) {
return `${style}${base}<g class="start">${center}</g><g class="on">${center}</g></svg>`;
}
if (!variables.state_on) {
return `${style}${base}<g class="end">${center}</g></svg>`;
}
if (variables.state_on && variables.timeout > 2000) {
return `${style}${base}<g class="start_timeout">${center}</g></svg>`;
} else {
return `${style}${base}<g class="end_timeout">${center}</g></svg>`;
}
]]]
icon_dryer:
styles:
custom_fields:
icon:
- width: 78%
- margin-left: -6%
custom_fields:
icon: >
[[[
let center = `
<path d="M15.7,21.5h4.6c-0.6,3.3,0,5.2,1.4,6.7c2.6,2.5,3.8,5.8,3.1,10.1h-4.6c0.6-3.3,0-5.2-1.4-6.7 C16.2,28.9,15.1,25.7,15.7,21.5"/>
<path d="M25.3,21.5h4.6c-0.6,3.3,0,5.2,1.4,6.7c2.6,2.5,3.8,5.8,3.1,10.1h-4.6c0.6-3.3,0-5.2-1.4-6.7 C25.8,28.9,24.6,25.7,25.3,21.5z"/>
<path fill="none" d="M25,15.4c-8,0-14.4,6.4-14.4,14.4S17,44.3,25,44.3s14.4-6.4,14.4-14.4S33,15.4,25,15.4"/>
`,
base = `
<path fill="#9da0a2" d="M10.6,1.1h28.7c2.6,0,4.8,2.1,4.8,4.8v38.4c0,2.6-2.1,4.8-4.8,4.8H10.6c-2.6,0-4.8-2.1-4.8-4.8V5.8C5.8,3.2,8,1.1,10.6,1.1 M13.1,5.8c-1.4,0-2.4,1.1-2.4,2.4c0,1.4,1.1,2.4,2.4,2.4s2.4-1.1,2.4-2.4S14.3,5.8,13.1,5.8 M20.2,5.8c-1.4,0-2.4,1.1-2.4,2.4 c0,1.4,1.1,2.4,2.4,2.4c1.4,0,2.4-1.1,2.4-2.4S21.5,5.8,20.2,5.8 M25,15.4c-8,0-14.4,6.4-14.4,14.4S17,44.3,25,44.3 s14.4-6.4,14.4-14.4S33,15.4,25,15.4"/>
`,
style = `
<svg viewBox="0 0 50 50">
<style>
@keyframes rotate {
0% {
visibility: visible;
transform: rotate(0deg) translateZ(0);
}
100% {
transform: rotate(720deg) translateZ(0);
}
}
.start {
animation: rotate 2.8s ease-in;
transform-origin: center 60%;
fill: #5daeea;
visibility: hidden;
will-change: transform;
}
.on {
animation: rotate 1.8s linear infinite;
transform-origin: center 60%;
fill: #5daeea;
animation-delay: 2.8s;
visibility: hidden;
will-change: transform;
}
.end {
animation: rotate 2.8s;
transform-origin: center 60%;
fill: #9ca2a5;
animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
will-change: transform;
}
.start_timeout {
animation: rotate 1.8s linear infinite;
transform-origin: center 60%;
fill: #5daeea;
visibility: hidden;
will-change: transform;
}
.end_timeout {
fill: #9ca2a5;
}
</style>
`;
if (variables.state_on) {
return `${style}${base}<g class="start">${center}</g><g class="on">${center}</g></svg>`;
}
if (!variables.state_on) {
return `${style}${base}<g class="end">${center}</g></svg>`;
}
if (variables.state_on && variables.timeout > 2000) {
return `${style}${base}<g class="start_timeout">${center}</g></svg>`;
} else {
return `${style}${base}<g class="end_timeout">${center}</g></svg>`;
}
]]]
icon_stove:
styles:
custom_fields:
icon:
- width: 180%
- margin-left: -10%
- margin-top: -5%
custom_fields:
icon: >
<svg viewBox="0 0 50 50">
<path d="M6 14h2l3 3H9l-3-3M4 4h1V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h2V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h1a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2v1h-3v-1H7v1H4v-1a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2m14 3a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1m-4 0a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1m6-1H4v4h16V6M4 19h16v-7H4v7M6 7a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1m7 7h2l3 3h-2l-3-3Z" fill="#9da0a2" />
<path class="${state} light-color" d="M6 14h2l3 3H9l-3-3M4 4h1V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h2V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h1a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2v1h-3v-1H7v1H4v-1a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2m14 3a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1m-4 0a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1m6-1H4v4h16V6M4 19h16v-7H4v7M6 7a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1m7 7h2l3 3h-2l-3-3Z"/>
</svg>
icon_sprinkler:
styles:
custom_fields:
icon:
- width: 180%
- margin-left: -10%
- margin-top: -5%
custom_fields:
icon: >
<svg viewBox="0 0 50 50">
<path d="M10 10h4v12h-4V10M7 9h2V7H7v2M4 8h2V6H4v2m0 3h2V9H4v2m-3 2h2v-2H1v2m0-6h2V5H1v2m0 3h2V8H1v2m17 1h2V9h-2v2m3-1h2V8h-2v2m0-5v2h2V5h-2m0 8h2v-2h-2v2m-6-4h2V7h-2v2m3-1h2V6h-2v2m-8-1h.33L11 9h2l.67-2H14V6h-4v1Z" fill="#9da0a2" />
<path class="${state} light-color" d="M10 10h4v12h-4V10M7 9h2V7H7v2M4 8h2V6H4v2m0 3h2V9H4v2m-3 2h2v-2H1v2m0-6h2V5H1v2m0 3h2V8H1v2m17 1h2V9h-2v2m3-1h2V8h-2v2m0-5v2h2V5h-2m0 8h2v-2h-2v2m-6-4h2V7h-2v2m3-1h2V6h-2v2m-8-1h.33L11 9h2l.67-2H14V6h-4v1Z"/>
</svg>
icon_sauna:
styles:
custom_fields:
icon:
- width: 160%
- margin-left: -10%
- margin-top: -5%
custom_fields:
icon: >
<svg viewBox="0 0 50 50">
<path d="M20,12H4A2,2 0 0,0 2,14V22H4V20H20V22H22V14A2,2 0 0,0 20,12M7,17A1,1 0 0,1 6,18A1,1 0 0,1 5,17V15A1,1 0 0,1 6,14A1,1 0 0,1 7,15V17M11,17A1,1 0 0,1 10,18A1,1 0 0,1 9,17V15A1,1 0 0,1 10,14A1,1 0 0,1 11,15V17M15,17A1,1 0 0,1 14,18A1,1 0 0,1 13,17V15A1,1 0 0,1 14,14A1,1 0 0,1 15,15V17M19,17A1,1 0 0,1 18,18A1,1 0 0,1 17,17V15A1,1 0 0,1 18,14A1,1 0 0,1 19,15V17Z" fill="#9da0a2" />
<path class="${state} light-color" d="M7.95,3L6.53,5.19L7.95,7.4H7.94L5.95,10.5L4.22,9.6L5.64,7.39L4.22,5.19L6.22,2.09L7.95,3M13.95,2.89L12.53,5.1L13.95,7.3L13.94,7.31L11.95,10.4L10.22,9.5L11.64,7.3L10.22,5.1L12.22,2L13.95,2.89M20,2.89L18.56,5.1L20,7.3V7.31L18,10.4L16.25,9.5L17.67,7.3L16.25,5.1L18.25,2L20,2.89M2,22V14A2,2 0 0,1 4,12H20A2,2 0 0,1 22,14V22H20V20H4V22H2M6,14A1,1 0 0,0 5,15V17A1,1 0 0,0 6,18A1,1 0 0,0 7,17V15A1,1 0 0,0 6,14M10,14A1,1 0 0,0 9,15V17A1,1 0 0,0 10,18A1,1 0 0,0 11,17V15A1,1 0 0,0 10,14M14,14A1,1 0 0,0 13,15V17A1,1 0 0,0 14,18A1,1 0 0,0 15,17V15A1,1 0 0,0 14,14M18,14A1,1 0 0,0 17,15V17A1,1 0 0,0 18,18A1,1 0 0,0 19,17V15A1,1 0 0,0 18,14Z"/>
</svg>
icon_hottub:
styles:
custom_fields:
icon:
- width: 160%
- margin-left: -10%
- margin-top: -5%
custom_fields:
icon: >
<svg viewBox="0 0 50 50">
<path d="M7,4A2,2 0 0,1 9,6A2,2 0 0,1 7,8A2,2 0 0,1 5,6A2,2 0 0,1 7,4M11.15,12H22V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V12H5V11.25C5,10 6,9 7.25,9H7.28C7.62,9 7.95,9.09 8.24,9.23C8.5,9.35 8.74,9.5 8.93,9.73L10.33,11.28C10.56,11.54 10.84,11.78 11.15,12M7,20V14H5V20H7M11,20V14H9V20H11M15,20V14H13V20H15M19,20V14H17V20H19M18.65,5.86C19.68,6.86 20.16,8.21 19.95,9.57L19.89,10H18L18.09,9.41C18.24,8.62 18,7.83 17.42,7.21L17.35,7.15C16.32,6.14 15.85,4.79 16.05,3.43L16.11,3H18L17.91,3.59C17.76,4.38 18,5.17 18.58,5.79L18.65,5.86M14.65,5.86C15.68,6.86 16.16,8.21 15.95,9.57L15.89,10H14L14.09,9.41C14.24,8.62 14,7.83 13.42,7.21L13.35,7.15C12.32,6.14 11.85,4.79 12.05,3.43L12.11,3H14L13.91,3.59C13.76,4.38 14,5.17 14.58,5.79L14.65,5.86Z" fill="#9da0a2" />
<path class="${state} light-color" d="M7,4A2,2 0 0,1 9,6A2,2 0 0,1 7,8A2,2 0 0,1 5,6A2,2 0 0,1 7,4M11.15,12H22V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V12H5V11.25C5,10 6,9 7.25,9H7.28C7.62,9 7.95,9.09 8.24,9.23C8.5,9.35 8.74,9.5 8.93,9.73L10.33,11.28C10.56,11.54 10.84,11.78 11.15,12M7,20V14H5V20H7M11,20V14H9V20H11M15,20V14H13V20H15M19,20V14H17V20H19M18.65,5.86C19.68,6.86 20.16,8.21 19.95,9.57L19.89,10H18L18.09,9.41C18.24,8.62 18,7.83 17.42,7.21L17.35,7.15C16.32,6.14 15.85,4.79 16.05,3.43L16.11,3H18L17.91,3.59C17.76,4.38 18,5.17 18.58,5.79L18.65,5.86M14.65,5.86C15.68,6.86 16.16,8.21 15.95,9.57L15.89,10H14L14.09,9.41C14.24,8.62 14,7.83 13.42,7.21L13.35,7.15C12.32,6.14 11.85,4.79 12.05,3.43L12.11,3H14L13.91,3.59C13.76,4.38 14,5.17 14.58,5.79L14.65,5.86Z"/>
</svg>
icon_pool:
styles:
custom_fields:
icon:
- width: 160%
- margin-left: -10%
- margin-top: -5%
custom_fields:
icon: >
<svg viewBox="0 0 50 50">
<path d="M19 6C17.9 6 17 6.9 17 8V14.8C16.4 15.4 16 16.2 16 17C16 18.7 17.3 20 19 20S22 18.7 22 17C22 16.1 21.6 15.3 21 14.8V8C21 6.9 20.1 6 19 6M19 7C19.5 7 20 7.4 20 8V9H18V8C18 7.4 18.5 7 19 7M15 20.3C14.1 20.7 13.2 21 12.3 21C10.1 21 7.9 19 5.6 19C4.4 19 3.2 19.3 1.9 19.7V17.7C3.2 17.3 4.4 17 5.7 17C7.9 17 10.1 19 12.4 19C13.3 19 14.2 18.7 15.1 18.3V20.3M12.3 17C13.2 17 14.1 16.7 15 16.3V14.3C14.3 14.6 13.7 14.8 13 15V5C13 4.4 13.4 4 14 4H16.8C16.4 2.8 15.3 2 14 2C12.3 2 11 3.3 11 5V6H6V5C6 4.4 6.4 4 7 4H9.8C9.4 2.8 8.3 2 7 2C5.3 2 4 3.3 4 5V13.2C3.3 13.3 2.7 13.5 2 13.8V15.8C3.2 15.3 4.4 15 5.7 15C7.9 15 10.1 17 12.3 17M6 8H11V10H6V8M6 12H11V14.8C9.3 14.3 7.7 13.2 6 13V12Z" fill="#9da0a2" />
<path class="${state} light-color" d="M19 6C17.9 6 17 6.9 17 8V14.8C16.4 15.4 16 16.2 16 17C16 18.7 17.3 20 19 20S22 18.7 22 17C22 16.1 21.6 15.3 21 14.8V8C21 6.9 20.1 6 19 6M19 7C19.5 7 20 7.4 20 8V9H18V8C18 7.4 18.5 7 19 7M15 20.3C14.1 20.7 13.2 21 12.3 21C10.1 21 7.9 19 5.6 19C4.4 19 3.2 19.3 1.9 19.7V17.7C3.2 17.3 4.4 17 5.7 17C7.9 17 10.1 19 12.4 19C13.3 19 14.2 18.7 15.1 18.3V20.3M12.3 17C13.2 17 14.1 16.7 15 16.3V14.3C14.3 14.6 13.7 14.8 13 15V5C13 4.4 13.4 4 14 4H16.8C16.4 2.8 15.3 2 14 2C12.3 2 11 3.3 11 5V6H6V5C6 4.4 6.4 4 7 4H9.8C9.4 2.8 8.3 2 7 2C5.3 2 4 3.3 4 5V13.2C3.3 13.3 2.7 13.5 2 13.8V15.8C3.2 15.3 4.4 15 5.7 15C7.9 15 10.1 17 12.3 17M6 8H11V10H6V8M6 12H11V14.8C9.3 14.3 7.7 13.2 6 13V12Z"/>
icon_temp:
styles:
custom_fields:
icon:
- margin-top: 2%
custom_fields:
icon: >
<svg viewBox="10 5 50 50">
<style>@keyframes animate{0%{transform: scale(0.85);}20%{transform: scale(1.1);}40%{transform: scale(0.95);}60%{transform: scale(1.03);}80%{transform: scale(0.97);}100%{transform: scale(1);}}.animate{animation: animate 0.8s; transform-origin: center;}</style>
<path fill="#9da0a2" d="M41.74 10.852v2h-7.75v-2zm-3.25 4.36h-4.5v2h4.5zm-4.5 6.36h7.75v-2h-7.75zm4.5 2.36h-4.5v2h4.5zm-4.5 6.36h7.75v-2h-7.75zM35.2 41.685A10.14 10.14 0 0 1 25.074 51.81a10.14 10.14 0 0 1-10.125-10.125c0-3.618 1.9-6.906 5-8.725V10.006c0-2.826 2.3-5.125 5.125-5.125s5.125 2.3 5.125 5.125V32.96c3.1 1.817 5 5.106 5 8.725zm-2 0c0-3.07-1.706-5.845-4.453-7.24l-.547-.278v-24.16a3.13 3.13 0 0 0-3.125-3.125 3.13 3.13 0 0 0-3.125 3.125v24.16l-.547.278a8.09 8.09 0 0 0-4.453 7.24c0 4.48 3.645 8.125 8.125 8.125s8.125-3.645 8.125-8.125zm-1.666 0a6.47 6.47 0 0 1-6.459 6.458 6.47 6.47 0 0 1-6.458-6.458 6.46 6.46 0 0 1 4.796-6.233l.37-.1v-22.23h2.583v22.23l.37.1a6.46 6.46 0 0 1 4.796 6.233zm-6.14-4.305c-.154-.684-.842-1.134-1.543-.974a5.31 5.31 0 0 0-4.158 5.207 1.29 1.29 0 0 0 2.58 0c0-1.277.902-2.41 2.147-2.7.692-.16 1.13-.85.974-1.543z"/>
</svg>
i got it working finally
I’ve put the last two items (music and icons) in a seperate vertical stack and place the cardmod before the cards, this worked. Placing the cardmod afther the -cards didnt.
- type: custom:vertical-stack-in-card
view_layout:
grid-area: sidebar
card_mod:
style: |
ha-card {
border: none;
--card-height: inherit !important;
position: absolute;
bottom: 2vh;
}
@media (max-width: 800px) {
ha-card {
position: inherit;
}
}
complete code
- type: custom:vertical-stack-in-card
view_layout:
grid-area: sidebar
cards:
- type: custom:button-card
entity: sensor.template_sidebar
template: sidebar
# - type: custom:button-card
# entity: sensor.template_sidebar_weather
# template: sidebar
- type: custom:button-card
entity: sensor.template_sidebar_gast
template: sidebar
- type: custom:button-card
entity: sensor.template_sidebar_vacuum
template: sidebar
tap_action:
!include popup/footer_vacuum.yaml
- type: custom:button-card
entity: sensor.template_sidebar_vacuum2
template: sidebar
# - type: custom:button-card
# entity: sensor.template_sidebar_bbq
# template: sidebar
# - type: custom:button-card
# entity: sensor.template_sidebar_bbq2
# template: sidebar
- type: custom:button-card
entity: sensor.template_sidebar_active
template: sidebar
tap_action:
!include popup/active.yaml
- type: custom:vertical-stack-in-card
view_layout:
grid-area: sidebar
card_mod:
style: |
ha-card {
border: none;
--card-height: inherit !important;
position: absolute;
bottom: 2vh;
}
@media (max-width: 800px) {
ha-card {
position: inherit;
}
}
cards:
- type: custom:mini-media-player
entity: media_player.leefkeuken8
toggle_power: false
group: true
show_source: full
volume_stateless: true
icon: mdi:spotify
replace_mute: play_pause
speaker_group:
platform: linkplay
show_group_count: true
sync_volume: true
entities:
- entity_id: media_player.woonkamer6
name: Woonkamer
- entity_id: media_player.leefkeuken8
name: Leefkeuken
hide:
info: true
name: false
mute: false
icon: true
power: true
play_pause: true
play_stop: true
volume: false
volume_level: true
power_state: false
- type: custom:mini-media-player
entity: media_player.leefkeuken8
toggle_power: false
artwork: full-cover
show_source: full
icon: mdi:spotify
replace_mute: play_pause
hide:
controls: true
info: false
name: true
mute: false
icon: true
power: true
play_pause: true
play_stop: true
volume: true
source: true
power_state: true
- type: horizontal-stack
mode: horizontal
cards:
- type: custom:button-card
entity: person.tim
entity_picture: /local/timkleur2.png
show_entity_picture: true
show_name: false
tap_action:
!include popup/tim.yaml
state:
- value: 'not_home'
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(90%)
template: footer2
card_mod:
style: |
ha-card {
margin: 2vh;
}
- type: custom:button-card
entity: person.mieke
entity_picture: /local/miekekleur2.png
show_entity_picture: true
show_name: false
tap_action:
!include popup/mieke.yaml
state:
- value: 'not_home'
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(90%)
template: footer2
card_mod:
style: |
ha-card {
margin: 2vh;
}
- type: custom:button-card
entity: person.gast
entity_picture: /local/guest.png
show_entity_picture: true
show_name: false
tap_action:
action: call-service
service: script.gast_toggle
state:
- value: 'not_home'
styles:
card:
- filter: opacity(50%)
icon:
- filter: grayscale(90%)
template: footer2
card_mod:
style: |
ha-card {
margin: 2vh;
}
@masoncrawford1994, I wanted to follow up on my request from before. How can I add the actual countdown into my code. I cannot get it to show up, but I am also trying to use it to replace the circle section on some cards.
Here is my current countdown template code.
countdown:
variables:
state_on: >
[[[ return ['active'].indexOf(!entity || entity.state) !== -1; ]]]
state: |
[[[ return !entity || entity.state; ]]]
entity_id: |
[[[ return !entity || entity.entity_id; ]]]
aspect_ratio: 1/1
show_name: false
show_state: true
show_icon: false
tap_action:
action: more-info
styles:
state:
- position: relative
- line-height: 0px
- overflow: visible
- top: '-2.5em'
- margin: auto
- display: initial
- '--button-card-font-size': 4vw
card:
- --c-stroke-color-on: var(--contrast1)
- --c-stroke-color-off: none
- --c-stroke-width: 0
- --c-stroke-width-dragging: 2.3
- --c-font-color-on: var(--contrast1)
- --c-font-color-off: none
- --c-font-size: 14px
- --c-unit-font-size: 10.5px
- --c-font-weight: 700
- --c-letter-spacing: '-0.02rem'
- border-radius: 10px
- border-width: 0px
- color: none
- background-color: none
custom_fields:
countdown:
- position: absolute
- width: 100%
- height: 100%
- left: 0
- top: 0
- display: initial
- opacity: 1
- justify-self: end
custom_fields:
countdown: |
[[[
setTimeout(() => {
let elt = this.shadowRoot,
circle_stroke = elt.getElementById('circle_stroke'),
r = 22.1,
c = r * 2 * Math.PI,
now = new Date().getTime(),
endDate = new Date(entity.attributes.finishes_at),
remaining = entity.attributes.remaining.split(':'),
duration = entity.attributes.duration.split(':'),
startDate = new Date(endDate.getTime() - (remaining[0]*3600+remaining[1]*60)*1000),
percent = ((endDate - now) / (endDate - startDate)) * 100;
circle_stroke.style.strokeDashoffset = c - percent / 100 * c;
circle_stroke.style.strokeWidth = 'var(--c-stroke-width-dragging)';
}, 0);
let r = 22.1,
c = r * 2 * Math.PI,
state = true,
input = variables.circle_input || ' ';
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${c};
stroke-dashoffset: ${typeof input === 'number' && c - input / 100 * c};
stroke-width: var(--c-stroke-width);
}
#circle_stroke{
stroke: ${variables.state_on ? 'var(--c-stroke-color-on)' : 'var(--c-stroke-color-off)' };
fill: ${'none'};
}
#circle_bg {
stroke: ${'none'};
fill: ${'none'};
}
text {
font-size: var(--c-font-size);
font-weight: var(--c-font-weight);
letter-spacing: var(--c-letter-spacing);
fill: ${variables.state_on ? 'var(--c-font-color-on)' : 'var(--c-font-color-off)' };
}
tspan {
font-size: var(--c-unit-font-size);
}
#circle_value, tspan {
text-anchor: middle;
dominant-baseline: central;
}
</style>
<circle id="circle_stroke" cx="25" cy="25" r="${r}"/>
<circle id="circle_bg" cx="25" cy="25" r="${r}"/>
</svg>
`;
]]]
You are using 2 vertical-stack cards. I’m just using one for the whole sidebar. Maybe I need to use two. You are also redefining the “view_layout:” for the second stack which I don’t. Maybe that’ll do the trick.
K I tried and it didn’t. Setting that card-mod style anywhere in ym sidebar section doesn’t change a thing.
This is my sidebar:
#################################################
# #
# SIDEBAR #
# #
#################################################
- type: vertical-stack
view_layout:
grid-area: sidebar
# I tried the car-mod hack here and it didn't work
# Right now it's set lower, right before my horizontal-stack
cards:
- type: custom:button-card
entity: sensor.template_ptime
template:
- ptime
# Added Weather-forcast Card
- type: weather-forecast
style: |
ha-card {
background: transparent !important;
color: #fff !important;
overflow: hidden !important;
box-shadow: none !important;
border: none !important;
}
entity: weather.openweathermap
show_current: true
show_forecast: false
secondary_info_attribute: precipitation
name: Culver City
tap_action: !include popup/weather.yaml
card_mod:
style: |
ha-card {
border: none;
}
# Clock-Weather-Card
- type: custom:clock-weather-card
style: |
ha-card {
background: transparent !important;
color: #fff !important;
overflow: hidden !important;
box-shadow: none !important;
border: none !important;
}
entity: weather.openweathermap
tap_action: !include popup/weather2.yaml
sun_entity: sun.sun
weather_icon_type: line
animated_icon: true
forecast_rows: 5
locale: en-GB
time_pattern: HH:mm
time_format: 24
date_pattern: ccc, d.MM.yy
hide_today_section: true
hide_forecast_section: false
hide_clock: true
hide_date: true
hourly_forecast: false
use_browser_time: true
time_zone: null
card_mod:
style: |
ha-card {
border: none;
}
# Atomic Calendar Revive
- type: "custom:atomic-calendar-revive"
maxDaysToShow: 4
showLoader: true
startDaysAhead: 4
styles:
card:
- border-width: 0
entities:
- entity: calendar.family
name: 'Family'
color: blue
blocklist: '(Zoom)|(word2)'
- entity: calendar.formula_1
name: 'Formula 1'
color: red
- entity: calendar.holidays_in_united_state
name: 'Holidays'
card_mod:
style: |
ha-card {
border: none;
}
# Sidebar Template
- type: custom:button-card
entity: sensor.template_sidebar
template: sidebar
styles:
card:
- border-width: 0
card_mod:
style: |
ha-card {
border: none;
--card-height: inherit !important;
position: absolute;
bottom: 2vh;
}
# Added bottom Footer buttons
- type: horizontal-stack
view_layout:
grid-area: sidebar
# Just added this code to bring buttons to bottom of Sidebar
card_mod:
style: |
ha-card {
border: none;
--card-height: inherit !important;
position: absolute;
bottom: 2vh;
}
@media (max-width: 800px) {
ha-card {
position: inherit;
}
}
cards:
- type: custom:mushroom-entity-card
style: |
ha-card {
background: transparent !important;
overflow: hidden !important;
box-shadow: none !important;
}
entity: sun.sun
vertical: true
primary_info: none
secondary_info: none
icon: mdi:spotify
icon_color: green
hold_action:
action: none
tap_action: !include popup/spotify.yaml
- type: custom:mushroom-entity-card
style: |
ha-card {
background: transparent !important;
overflow: hidden !important;
box-shadow: none !important;
}
entity: sun.sun
vertical: true
primary_info: none
secondary_info: none
icon: mdi:lightbulb-auto
icon_color: amber
hold_action:
action: none
tap_action: !include popup/all_lights_mushroom.yaml
- type: custom:mushroom-entity-card
style: |
ha-card {
background: transparent !important;
overflow: hidden !important;
box-shadow: none !important;
}
entity: sun.sun
vertical: true
primary_info: none
secondary_info: none
icon: mdi:lightbulb-auto-outline
icon_color: brown
hold_action:
action: none
tap_action:
action: call-service
service: scene.turn_on
service_data:
transition: 5
target:
entity_id: scene.living_room_tropical_twilight
- type: custom:mushroom-entity-card
style: |
ha-card {
background: transparent !important;
overflow: hidden !important;
box-shadow: none !important;
}
entity: sun.sun
vertical: true
primary_info: none
secondary_info: none
icon: mdi:radio
icon_color: deep-orange
hold_action:
action: none
tap_action: !include popup/all_lights_mushroom.yaml
did you try this?
#################################################
# #
# SIDEBAR #
# #
#################################################
- type: vertical-stack
view_layout:
grid-area: sidebar
# I tried the car-mod hack here and it didn't work
# Right now it's set lower, right before my horizontal-stack
cards:
- type: custom:button-card
entity: sensor.template_ptime
template:
- ptime
# Added Weather-forcast Card
- type: weather-forecast
style: |
ha-card {
background: transparent !important;
color: #fff !important;
overflow: hidden !important;
box-shadow: none !important;
border: none !important;
}
entity: weather.openweathermap
show_current: true
show_forecast: false
secondary_info_attribute: precipitation
name: Culver City
tap_action: !include popup/weather.yaml
card_mod:
style: |
ha-card {
border: none;
}
# Clock-Weather-Card
- type: custom:clock-weather-card
style: |
ha-card {
background: transparent !important;
color: #fff !important;
overflow: hidden !important;
box-shadow: none !important;
border: none !important;
}
entity: weather.openweathermap
tap_action: !include popup/weather2.yaml
sun_entity: sun.sun
weather_icon_type: line
animated_icon: true
forecast_rows: 5
locale: en-GB
time_pattern: HH:mm
time_format: 24
date_pattern: ccc, d.MM.yy
hide_today_section: true
hide_forecast_section: false
hide_clock: true
hide_date: true
hourly_forecast: false
use_browser_time: true
time_zone: null
card_mod:
style: |
ha-card {
border: none;
}
# Atomic Calendar Revive
- type: "custom:atomic-calendar-revive"
maxDaysToShow: 4
showLoader: true
startDaysAhead: 4
styles:
card:
- border-width: 0
entities:
- entity: calendar.family
name: 'Family'
color: blue
blocklist: '(Zoom)|(word2)'
- entity: calendar.formula_1
name: 'Formula 1'
color: red
- entity: calendar.holidays_in_united_state
name: 'Holidays'
card_mod:
style: |
ha-card {
border: none;
}
# Sidebar Template
- type: custom:button-card
entity: sensor.template_sidebar
template: sidebar
styles:
card:
- border-width: 0
- type: vertical-stack
view_layout:
grid-area: sidebar
# I tried the car-mod hack here and it didn't work
# Right now it's set lower, right before my horizontal-stack
card_mod:
style: |
ha-card {
border: none;
--card-height: inherit !important;
position: absolute;
bottom: 2vh;
}
cards:
# Added bottom Footer buttons
- type: horizontal-stack
# Just added this code to bring buttons to bottom of Sidebar
card_mod:
style: |
ha-card {
border: none;
--card-height: inherit !important;
position: absolute;
bottom: 2vh;
}
@media (max-width: 800px) {
ha-card {
position: inherit;
}
}
cards:
- type: custom:mushroom-entity-card
style: |
ha-card {
background: transparent !important;
overflow: hidden !important;
box-shadow: none !important;
}
entity: sun.sun
vertical: true
primary_info: none
secondary_info: none
icon: mdi:spotify
icon_color: green
hold_action:
action: none
tap_action: !include popup/spotify.yaml
- type: custom:mushroom-entity-card
style: |
ha-card {
background: transparent !important;
overflow: hidden !important;
box-shadow: none !important;
}
entity: sun.sun
vertical: true
primary_info: none
secondary_info: none
icon: mdi:lightbulb-auto
icon_color: amber
hold_action:
action: none
tap_action: !include popup/all_lights_mushroom.yaml
- type: custom:mushroom-entity-card
style: |
ha-card {
background: transparent !important;
overflow: hidden !important;
box-shadow: none !important;
}
entity: sun.sun
vertical: true
primary_info: none
secondary_info: none
icon: mdi:lightbulb-auto-outline
icon_color: brown
hold_action:
action: none
tap_action:
action: call-service
service: scene.turn_on
service_data:
transition: 5
target:
entity_id: scene.living_room_tropical_twilight
- type: custom:mushroom-entity-card
style: |
ha-card {
background: transparent !important;
overflow: hidden !important;
box-shadow: none !important;
}
entity: sun.sun
vertical: true
primary_info: none
secondary_info: none
icon: mdi:radio
icon_color: deep-orange
hold_action:
action: none
tap_action: !include popup/all_lights_mushroom.yaml
created a second vertical stack.
I tried it. Good idea. But for some reason it moved the buttons to the top of my sidebar?!
With this code:
#################################################
# #
# SIDEBAR #
# #
#################################################
- type: vertical-stack
view_layout:
grid-area: sidebar
cards:
- type: custom:button-card
entity: sensor.template_ptime
template:
- ptime
# Added Weather-forcast Card
- type: weather-forecast
style: |
ha-card {
background: transparent !important;
color: #fff !important;
overflow: hidden !important;
box-shadow: none !important;
border: none !important;
}
entity: weather.openweathermap
show_current: true
show_forecast: false
secondary_info_attribute: precipitation
name: Culver City
tap_action: !include popup/weather.yaml
card_mod:
style: |
ha-card {
border: none;
}
# Clock-Weather-Card
- type: custom:clock-weather-card
style: |
ha-card {
background: transparent !important;
color: #fff !important;
overflow: hidden !important;
box-shadow: none !important;
border: none !important;
}
entity: weather.openweathermap
tap_action: !include popup/weather2.yaml
sun_entity: sun.sun
weather_icon_type: line
animated_icon: true
forecast_rows: 5
locale: en-GB
time_pattern: HH:mm
time_format: 24
date_pattern: ccc, d.MM.yy
hide_today_section: true
hide_forecast_section: false
hide_clock: true
hide_date: true
hourly_forecast: false
use_browser_time: true
time_zone: null
card_mod:
style: |
ha-card {
border: none;
}
# Atomic Calendar Revive
- type: "custom:atomic-calendar-revive"
maxDaysToShow: 4
showLoader: true
startDaysAhead: 4
styles:
card:
- border-width: 0
entities:
- entity: calendar.family
name: 'Family'
color: blue
blocklist: '(Zoom)|(word2)'
- entity: calendar.formula_1
name: 'Formula 1'
color: red
- entity: calendar.holidays_in_united_state
name: 'Holidays'
card_mod:
style: |
ha-card {
border: none;
}
# Sidebar Template
- type: custom:button-card
entity: sensor.template_sidebar
template: sidebar
styles:
card:
- border-width: 0
card_mod:
style: |
ha-card {
border: none;
--card-height: inherit !important;
position: absolute;
bottom: 2vh;
}
# New added Spotify, Light and Radio bottom Footer buttons
- type: vertical-stack
view_layout:
grid-area: sidebar
card_mod:
style: |
ha-card {
border: none;
--card-height: inherit !important;
position: absolute;
bottom: 2vh;
}
@media (max-width: 800px) {
ha-card {
position: inherit;
}
}
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
style: |
ha-card {
background: transparent !important;
overflow: hidden !important;
box-shadow: none !important;
}
entity: sun.sun
You had left the car-mod style in both vertical and horizontal which I left only in the second vertical.
Is there a difference between vertical-stack and vertical-stack-in-card
Yes maybe try the vertical-stack-in-card
Yes!!! that worked…haha.!. Sorry, i’ve been at this one for a while. Thank you so much man.
use card mod with position for last child
type: custom:stack-in-card
card_mod:
style:
.: |
ha-card {
min-height: calc(100vh - var(--header-height));
background-color: rgb(112 128 144 / 30%);
}
cards:
- type: entity
entity: sensor.date
- type: entity
entity: sensor.time
- type: entity
entity: sensor.motion_detected
- type: entity
entity: sun.sun
- type: custom:mushroom-template-card
primary: bottom card
secondary: abcdf
icon: mdi:home
card_mod:
style: |
ha-card {
position: absolute !important;
bottom: 1vh !important;
}
First of all, I want to express my gratitude to Matthias and everyone in this discussion. I would like to showcase my fork of this amazing theme.
Looks cool, can you share your Media Section?
hehe man, how can you post this and not give us your code. 
I like the different style you going for. Very cool
Would you mind posting the spotify (or media) card that pops up when you press the media playing big button? Thanks
Here is my media popup.
Don’t forget, the iframe only works in Fullykiosk URL or a windows browser, the companion app does not support it.
action: fire-dom-event
browser_mod:
service: browser_mod.sequence
data:
sequence:
- service: script.mediapopup_main
- service: browser_mod.popup
data:
title: ' '
style: >
--popup-background-color: var(--mypopup-background);
--popup-max-width: calc(500px + 500px);
--ha-card-border-radius: 0;
card_mod:
style:
layout-card:
$grid-layout$:
# card divider border
.: |
#root {
margin: 0px 0 !important;
}
hui-entities-card:
$: |
.card-content {
padding: var(--tablet-popup-content-padding);
padding-bottom: 0.8em;
}
ha-card {
border-right: 1.5px solid rgba(0, 0, 0, 0.2);
border-radius: 0;
transition: none;
}
/* portrait */
@media screen and (max-width: 1200px) {
ha-card {
border-right: none;
border-bottom: 1.5px solid rgba(0, 0, 0, 0.2);
}
}
$hui-horizontal-stack-card:
# horizontal bottom buttons
$: |
#root {
justify-content: space-evenly;
margin-top: 1.7em;
max-width: 82vw; /* iphonex */
}
content:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
margin: 0
grid-template-columns: 500px 500px
grid-template-rows: 1fr
grid-template-areas: |
"hass docker"
mediaquery:
#phone
"(max-width: 800px)":
grid-template-columns: 100%
grid-template-rows: repeat(2, 1fr)
grid-template-areas: |
"hass"
"docker"
cards:
- type: entities
view_layout:
grid-area: hass
title: " "
card_mod:
class: header
entities:
- type: custom:hui-element
card_type: vertical-stack
cards:
- !include spotify_popup.yaml
- type: 'custom:mini-media-player'
artwork: none
entity: media_player.spotify_homeassistant
group: false
hide:
controls: true
icon: true
name: true
power: true
source: true
volume: true
info: false
runtime: false
progress: false
hold_action:
action: none
tap_action:
action: none
style: |
ha-card {
font-family: Mynerve
}
.entity__info {
max-width: 100% !important;
font-size: 18px;
}
- type: entities
view_layout:
grid-area: docker
title: " "
show_header_toggle: false
card_mod:
class: header
entities:
- type: custom:hui-element
card_type: vertical-stack
cards:
- type: picture-elements
image: local/overlay.svg
style: |
ha-card {
--ha-card-background: transparent !important;
--ha-card-border-width: 0px !important;
--ha-card-border-radius: 5px !important;
box-shadow: none !important;
}
elements:
- type: custom:spotify-card
account: default
spotify_entity: media_player.spotify_homeassistant
playlist_type: discover-weekly #default #featured #discover-weekly
grid_covers_per_row: 3
limit: 9
country_code: HU
display_style: grid
#default_device: Grandmaster's Echo Dot
style:
left: '50%'
top: 50%
height: 100%
width: 100%
card_mod:
style: |
ha-card {
border-radius: calc(var(--custom-button-card-border-radius) / 2) !important; /* card - rounded corners */
aspect-ratio: 2/2 !important; /* card - square */
margin: 0px !important; /* remove card margins to line up with rest of dashboard */
padding: 0% !important;
font-family: Bangers !important;
}
.grid{
object-fit: cover !important; /* fill the whole card */
aspect-ratio: 1/1; /* needed for object-fit */
border-radius: calc(var(--custom-button-card-border-radius) / 2) !important; /* card - rounded corners */
margin: 0px !important; /* remove card margins to line up with rest of dashboard */
gap: 5% !important;
}
.btn {
top: 50% !important; /* center buttons */
}
.grid-item{
border-radius: var(--button-card-border-radius) !important;
object-fit: cover !important; /* fill the whole card */
aspect-ratio: unset; /* undo image aspect-ratio when clicked */
box-shadow:none !important;
color: transparent !important;
}
.grid-item-album-image img{
border-radius: var(--button-card-border-radius) !important;
object-fit: cover !important; /* fill the whole card */
aspect-ratio: unset; /* undo image aspect-ratio when clicked */
margin: 0px !important; /* remove card margins to line up with rest of dashboard */
}
.grid-item:hover{
box-shadow:none !important;
color: transparent !important;
}
.grid-item-album-image.playing{
border-radius: var(--button-card-border-radius) !important;
}
#header{
display:none !important;
}
#footer{
display:none !important;
}
.playback-controls{
display:none !important;
}
#header-track{
display:none;
}
#content{
border: 0px !important;
background-color: transparent !important;
filter: grayscale(65%) blur(0px) !important;
transition: all 0.5s ease !important;
}
- type: custom:hui-element
card_type: vertical-stack
cards:
- type: custom:hui-element
card_type: horizontal-stack
cards:
- type: custom:button-card
show_entity_picture: true
entity_picture: /local/sauna.png
icon: 'mdi:circle'
size: 108%
show_name: false
name: S Z A U N A
tap_action:
action: call-service
service: script.spotistart_sauna
template:
- tilt
- media_button
styles:
card:
- opacity: 0.7 !important;
- type: custom:button-card
name: K O N Y H A
show_entity_picture: true
entity_picture: /local/alexa.png
icon: 'mdi:circle'
size: 110%
show_name: false
tap_action:
action: call-service
service: script.spotistart_konyha
template:
- tilt
- media_button
styles:
card:
- opacity: 0.7 !important;
- type: custom:hui-element
card_type: horizontal-stack
cards:
- type: custom:button-card
name: N A P P A L I
show_entity_picture: true
entity_picture: /local/tv.png
icon: 'mdi:circle'
size: 108%
show_name: false
tap_action:
action: call-service
service: script.spotistart_tv
template:
- tilt
- media_button
styles:
card:
- opacity: 0.7 !important;
- aspect_ratio: 1/1
show_entity_picture: true
entity_picture: /local/spotify.png
icon: 'mdi:circle'
size: 110%
show_name: false
type: 'custom:button-card'
template:
- tilt
- media_button
styles:
card:
- opacity: 0.7 !important;
entity: media_player.spotify_homeassistant
tap_action:
haptic: heavy
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
size: fullscreen
title: ' '
content:
type: iframe
url: https://...YOURHOMEASSISTANT.../media-browser/media_player.spotify_homeassistant
hold_action:
action: none
style:
right: '-13.5%'
top: 85%
width: 28%
- type: 'custom:mini-media-player'
artwork: none
entity: media_player.spotify_homeassistant
group: false
hide:
progress: true
controls: true
icon: true
name: true
power: true
runtime: true
source: true
volume: >
[[[
if (states['media_player.spotify_homeassistant'].state == 'idle')
return true
return false
]]]
info: true
hold_action:
action: none
tap_action:
action: none
icon: 'mdi:spotify'
info: none
card_mod:
style: |
ha-card {
margin-top: 34px !important;
}