type: custom:state-switch
entity: media_player.camera_mattia
default: 'off'
transition: swap-left
transition_time: 10
states:
'off':
type: custom:stack-in-card
mode: horizontal
cards:
- type: vertical-stack
cards:
- type: conditional
conditions:
- entity: input_boolean.menu1
state: 'on'
card:
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Home
secondary: ''
icon: mdi:home
icon_color: white
fill_container: false
layout: vertical
entity: input_select.seleziona_stanza
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.seleziona_stanza
data:
option: Home
card_mod:
style: |
ha-card {
width: 210px;
height: 20px;
--spacing: 0px;
padding-top: 10px !important;
//box-shadow: var(--ha-card-box-shadow) !important;
//border-radius: 10px 10px 10px 10px !important;
transition: all 0s;
--icon-size: 60px;
}
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-{{ 'white' if is_state('input_select.seleziona_stanza', 'Home') else 'none' }}), 0.4) !important;
}
- type: custom:mushroom-template-card
primary: Cucina
secondary: ''
icon: mdi:fridge
icon_color: white
fill_container: false
layout: vertical
entity: input_select.seleziona_stanza
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.seleziona_stanza
data:
option: Cucina
card_mod:
style: |
ha-card {
width: 210px;
height: 20px;
--spacing: 0px;
padding-top: 10px !important;
//box-shadow: var(--ha-card-box-shadow) !important;
//border-radius: 10px 10px 10px 10px !important;
transition: all 0s;
--icon-size: 60px;
}
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-{{ 'white' if is_state('input_select.seleziona_stanza', 'Cucina') else 'none' }}), 0.4) !important;
}
- type: custom:mushroom-template-card
primary: Salotto
secondary: ''
icon: mdi:sofa
icon_color: white
fill_container: false
layout: vertical
entity: input_select.seleziona_stanza
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.seleziona_stanza
data:
option: Salotto
card_mod:
style: |
ha-card {
width: 210px;
height: 20px;
--spacing: 0px;
padding-top: 10px !important;
//box-shadow: var(--ha-card-box-shadow) !important;
//border-radius: 10px 10px 10px 10px !important;
transition: all 0s;
--icon-size: 60px;
}
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-{{ 'white' if is_state('input_select.seleziona_stanza', 'Salotto') else 'none' }}), 0.4) !important;
}
card_mod:
style: |
ha-card {
position: fixed;
top: 0;
bottom: 40px;
left: 8px;
right: 0;
animation: slide-up 0.5s;
z-index: 5;
width: 210px;
height: 400px !important;
padding: 0px;
overflow-y: hidden;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: 35px 35px 35px 35px !important;
}
@keyframes slide-up {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: >-
{% set stanza = states('input_select.seleziona_stanza') %} {%
if stanza == 'Home' %}
Home
{% elif stanza == 'Cucina' %}
Cucina
{% elif stanza == 'Salotto' %}
Salotto
{% endif %}
secondary: ''
icon: >-
{% set stanza = states('input_select.seleziona_stanza') %} {%
if stanza == 'Home' %}
mdi:home
{% elif stanza == 'Cucina' %}
mdi:fridge
{% elif stanza == 'Salotto' %}
mdi:sofa
{% endif %}
icon_color: white
entity: input_select.seleziona_stanza
tap_action: none
card_mod:
style: |
ha-card {
--spacing: 8px;
--icon-size: 35px;
--primary-text-color: rgb(var(--rgb-white));
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: input_boolean.menu1
double_tap_action:
action: none
icon: mdi:chevron-up
tap_action:
action: toggle
hold_action:
action: none
card_mod:
style: |
ha-card {
margin-top: 7px;
margin-left: 50px;
--chip-icon-size: 20px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
padding: 0px;
width: 210px;
height: 50px;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: 35px 35px 35px 35px !important;
background: var(--card-background-color);
}
- type: custom:mushroom-template-card
secondary: ''
icon: mdi:music-note-eighth
layout: vertical
icon_color: blue
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
width: 50px;
--spacing: 5px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin: 0px 0px 0px 120px;
transition: all 0.5s;
}
- type: custom:mushroom-template-card
secondary: ''
icon: mdi:video
layout: vertical
icon_color: ''
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
width: 50px;
--spacing: 5px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin: 0px 0px 0px 80px;
transition: all 0.5s;
}
- type: custom:mushroom-template-card
secondary: ''
icon: mdi:chart-bar
layout: vertical
icon_color: orange
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
width: 50px;
--spacing: 5px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin: 0px 0px 0px 40px;
transition: all 0.5s;
}
card_mod:
style: |
ha-card {
overflow: visible !important;
margin-top: 100%;
margin-bottom: 0;
box-shadow: none;
border: none;
background: none;
padding: var(--mush-chip-spacing, 8px);
transition: all 0s;
}
:host {
position: sticky;
z-index: 4;
bottom: 0px;
}
ha-card:after {
content: "";
position: absolute;
bottom: 0px;
height: 80px;
width: 100%;
max-width: calc(var(--column-max-width) - 2 * var(--ha-card-border-width, 1px) - var(--mush-chip-spacing, 8px));
left: 50%;
transform: translateX(-50%);
z-index: -1;
background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color));
border-radius: 35px 35px 0px 0px;
}
ha-card:before {
content: "";
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: -1;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: rgba(var(--rgb-card-background-color), 0.8);
border-radius: 35px 35px 0px 0px;
box-shadow: var(--ha-card-box-shadow);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
}
playing:
type: custom:stack-in-card
mode: horizontal
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
secondary: ''
icon: >-
{% set room = states('input_select.seleziona_stanza') %} {% if
room == 'Home' %} mdi:home {% elif room == 'Cucina' %} mdi:fridge
{% elif room == 'Salotto' %} mdi:sofa {% endif %}
layout: vertical
icon_color: white
entity: input_boolean.menu1
tap_action:
action: toggle
card_mod:
style: |
ha-card {
width: 50px;
--spacing: 5px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-top: 0px;
margin-left: 0px;
transition: all 0.5s;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-media-player-card
entity: media_player.camera_mattia
layout: horizontal
show_volume_level: true
use_media_info: true
card_mod:
style: |
mushroom-shape-icon {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
--card-mod-icon: mdi:television-classic;
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
--card-mod-icon: mdi:movie-roll;
animation: spin 2s linear infinite reverse;
{% elif media_type in ['music', 'playlist'] %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
{% if not is_state(config.entity, 'off') %}
background: rgba(var(--rgb-card-background-color), 0.6) url('{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
background-size: cover;
background-blend-mode: overlay;
{% endif %}
border-radius: 35px 35px 35px 35px !important;
height: 50px !important;
margin-left: -8px;
}
card_mod:
style: |
ha-card {
width: 210px;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: 35px 35px 35px 35px !important;
margin-left: -40px;
{% if is_state('media_player.camera_mattia', 'off') %}
{% else %}
background-image: url('{{ state_attr("media_player.camera_mattia", "entity_picture") }}');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(var(--rgb-card-background-color), 0.8);
background-blend-mode: overlay;
position: relative;
{% endif %}
}
- type: custom:mushroom-template-card
secondary: ''
icon: mdi:video
layout: vertical
icon_color: ''
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
width: 50px;
--spacing: 5px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-top: 0px;
margin-left: 80px;
transition: all 0s;
}
- type: custom:mushroom-template-card
secondary: ''
icon: mdi:chart-bar
layout: vertical
icon_color: orange
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
width: 50px;
--spacing: 5px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-top: 0px;
margin-left: 40px;
transition: all 0s;
}
card_mod:
style: |
ha-card {
//overflow: visible !important;
overflow: hidden !important;
margin-top: 100%;
margin-bottom: 0px;
box-shadow: none;
border: none;
background: none;
padding: var(--mush-chip-spacing, 8px);
transition: all 0s;
}
:host {
position: sticky;
z-index: 4;
bottom: 0px;
overflow: hidden;
}
ha-card:after {
content: "";
position: absolute;
bottom: 0px;
height: 80px;
width: 100%;
max-width: calc(var(--column-max-width) - 2 * var(--ha-card-border-width, 1px) - var(--mush-chip-spacing, 8px));
left: 50%;
transform: translateX(-50%);
z-index: -1;
background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color));
border-radius: 35px 35px 0px 0px;
}
ha-card:before {
content: "";
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: -1;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: rgba(var(--rgb-card-background-color), 0.8);
border-radius: 35px 35px 0px 0px;
box-shadow: var(--ha-card-box-shadow);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
}
4 Likes
Thanks for this! It nearly works perfectly on my device and looks great but thereās a few small issues that are still a little bit off. Might have just been my copy/paste/edit though.
- When music is playing you canāt change the room.
- The room popup doesnāt popup over the screen contents, itāll only popup above the bar itself meaning you need to scroll down to see all options.
Can anyone help me to fill the boxes with a background? I can only get a background on the Title line where the temparature sensor is, but i want it to fill the whole box.
type: horizontal-stack
cards:
- square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-template-card
primary: Stua
secondary: >-
{{ states('sensor.verisure_rv_stua_temp') }} Ā°C | {{
states('sensor.verisure_rv_stua_fukt') | int(0) }} %
icon: ''
icon_color: blue
tap_action:
action: call-service
service: script.popup_stua
hold_action:
action: navigate
navigation_path: /lovelace-panel/stua
card_mod:
style:
mushroom-state-info$: |
.container {
display: table !important;
}
.secondary {
display: table-cell;
text-align: right;
width: 100%;
}
- type: custom:mushroom-template-card
primary: KjĆøkken
secondary: >-
{{ states('sensor.aqara_multisensor_kjokkenet_temp') }} Ā°C | {{
states('sensor.aqara_multisensor_kjokkenet_fukt') | int(0) }} %
icon: ''
icon_color: orange
tap_action:
action: call-service
service: script.popup_kjokken
hold_action:
action: navigate
navigation_path: /lovelace-panel/kjokken
card_mod:
style:
mushroom-state-info$: |
.container {
display: table !important;
}
.secondary {
display: table-cell;
text-align: right;
width: 100%;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:radiator
{% else %}
mdi:radiator-off
{% endif %}
entity: switch.hue_kontakt_stua_1
icon_color: |-
{% if is_state(config.entity, 'on') %}
red
{% else %}
blue
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 0.6em
- type: template
entity: light.over_stuebordet
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:ceiling-light
{% else %}
mdi:ceiling-light-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
orange
{% else %}
grey
{% endif %}
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 0.6em
- type: template
entity: light.stua_uten_stuebordlys_dz
content_info: none
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:lamp
{% else %}
mdi:lamp-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 0.6em
- type: template
entity: input_boolean.boolean_filmlys_stua
content_info: none
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:movie-open-outline
{% else %}
mdi:movie-open-off-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
green
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 0.6em
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 10;
margin-top: -10px;
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state(config.entity, 'heat') %}
mdi:radiator
{% else %}
mdi:radiator-off
{% endif %}
entity: climate.mill_ovn_kjokkenet
icon_color: |-
{% if is_state(config.entity, 'heat') %}
red
{% else %}
blue
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 0.6em
- type: template
entity: light.taklyset_pa_kjokken
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:ceiling-light
{% else %}
mdi:ceiling-light-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
orange
{% else %}
grey
{% endif %}
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 0.6em
- type: template
entity: light.kjokkenbenken
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:led-strip-variant
{% else %}
mdi:led-strip-variant-off
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
orange
{% else %}
grey
{% endif %}
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 0.6em
- type: template
entity: switch.aqara_kontakt_kjokkenet_1
content_info: none
icon: |-
{% if is_state(config.entity, 'on') %}
hue:plug
{% else %}
hue:plug
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
green
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 0.6em
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 10;
margin-top: -10px;
1 Like
youāre right, but Iām implementing the functions hand hand. Unfortunately the work steals a lot of time 
Yeah I can appreciate that and thanks for the hard work! My yaml skills are no way near good enough to get anywhere near sadly but just wanted to check you had the same problems and it wasnāt my copying. Hopefully stuff like this comes out of the box at some point but I think weāre probably years off seeing that yet.
Iām using
--chip-spacing: -12px !important;
to get chips close enough together for my cards
2 Likes
Thank you for your response. However, what I am trying to do is add a new button that will open another window to activate the timer. Specifically, I have created an input boolean for the fan to turn on for 20 minutes, 30 minutes, and 120 minutes, with the name ā20ā, ā30ā, and ā120ā respectively.( input_boolean.fan_on_for_20_minutes_minutes_minutes_minutes_minutes_minutes
name: 20) The service I am using is āscript.set_20_time_for_fan_parentsā. My question is, how can I add these options to the new window I am creating with the additional button? Thank you for your assistance.
I also adapted your code to no longer go through state-switch but rather with conditional-card and CSS:
Without media_player being played:
When media_player is playing or paused:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Search...
secondary: ''
icon: mdi:search-web
icon_color: white
entity: input_select.plex_recently
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: ChatGPT
content:
type: custom:stack-in-card
cards:
- type: entities
entities:
- entity: input_text.gpt_prompt
- type: markdown
content: >-
{{ state_attr('sensor.hassio_mindsdb_response',
'response_text') }}
title: RĆ©ponse
card_mod:
style: |
ha-card {
{% if is_state('media_player.currently_playing', ['idle','off']) %}
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
width: 100%;
--spacing: 5px;
margin-bottom: 2px;
margin-top: 2px;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-left: 0px;
margin-right: auto;
{% else %}
width: 50px;
--spacing: 5px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-top: 2px;
margin-bottom: 2px;
margin-left: 1%;
transition: all 0.5s;
{% endif %}
}
ha-card:hover {
background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 25%, var(--card-background-color)) !important;
transition: all 0.1s;
}
- type: conditional
conditions:
- entity: media_player.currently_playing
state_not: 'off'
- entity: media_player.currently_playing
state_not: idle
card:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
layout: horizontal
show_volume_level: true
use_media_info: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: En cours
content:
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
icon_type: none
layout: vertical
media_controls:
- previous
- play_pause_stop
- next
volume_controls:
- volume_set
- volume_buttons
show_volume_level: false
use_media_info: true
collapsible_controls: false
card_mod:
style:
mushroom-state-info$: |
/* CSS for Mushroom Popup Media Player */
.secondary:before {
/* Add album name between song title and artist name */
{% if state_attr(config.entity, 'media_album_name') != none %}
content: "{{ state_attr(config.entity, 'media_album_name')}}\A";
{% endif %}
/* Format title to fit on seperate line */
white-space: pre;
text-overflow: ellipsis;
}
.: |
ha-card {
/* Remove border from media player */
--ha-card-border-width: 0;
/* Apply album art color to media player icon & volume bar */
--rgb-state-media-player: var(--album-art-color);
/* Disable transitions */
transition: all 0.5s;
}
.actions {
/* Apply album art color to media player controls */
--rgb-primary-text-color: var(--album-art-color);
--primary-text-color: rgb(var(--album-art-color));
/* Move volume button to seperate row */
display: block !important;
}
ha-card:before {
content: "";
/* Show album art above media player when active and default image when idle */
{% if is_state(config.entity, ['playing', 'paused']) %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% else %}
background: url('/local/idle_art.png') center no-repeat;
{% endif %}
/* Add padding around album art */
margin: 0px 4px 16px;
/* Add drop shadow to album art */
filter: drop-shadow(4px 4px 6px rgba(var(--album-art-color), 0.3));
/* Round borders of album art */
border-radius: var(--control-border-radius);
/* Adjust the album art aspect ratio based on media type */
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 16 / 9;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
/* Stretch album art to fit box. Fix for if album art is not sized correctly */
background-size: 100% 100%;
}
mushroom-button {
/* Size volume button to match other controls and center */
display: flex;
width: calc((100% / 3) - (var(--spacing) / 3) * 2);
margin: auto;
}
mushroom-media-player-media-control,
mushroom-media-player-volume-control {
/* Correct margins for volume button on second row */
display: flex;
margin-right: 0px !important;
/* Check if PLAY|STOP are supported and adjust margin accordingly */
{% if state_attr(config.entity, 'supported_features') | int | bitwise_and(20480) > 0 %}
margin-bottom: var(--spacing) !important;
{% endif %}
}
- entity: media_player.currently_playing
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: true
info: true
progress: false
controls: true
more_info: false
type: custom:mini-media-player
toggle_power: false
group: true
card_mod:
style:
mmp-progress$: |
paper-progress {
/* Apply album art color to progress bar when paused */
--paper-progress-container-color: rgba(var(--album-art-color), 0.2) !important;
/* Apply album art color to progress bar when playing */
--paper-progress-active-color: rgb(var(--album-art-color)) !important;
}
.: |
ha-card {
/* Move progress bar up into gap. Check if PLAY|STOP are supported */
--base-offset: calc(4 * var(--mush-spacing, 12px)
+ 1.33 * var(--mush-spacing, 12px)
+ var(--mush-card-primary-line-height, 1.5) * var(--mush-card-primary-font-size, 14px)
+ var(--mush-card-secondary-line-height, 1.5) * var(--mush-card-secondary-font-size, 12px)
+ var(--mush-control-height, 42px));
/* Check if Play (16385) or Stop (4096) are supported and add control button height if they are */
{% if state_attr(config.entity, 'supported_features') | int | bitwise_and(20480) > 0 %}
--control-offset: calc(var(--mush-spacing, 12px) + var(--mush-control-height, 42px));
{% else %}
--control-offset: 0px;
{% endif %}
/* Check if album name is present and add to height if it is */
{% set album_name = state_attr(config.entity, 'media_album_name') %}
{% if album_name == None or album_name == "" %}
--album-offset: 0px;
{% else %}
--album-offset: calc(var(--mush-card-secondary-line-height, 1.5) * var(--mush-card-secondary-font-size, 12px));
{% endif %}
bottom: calc(var(--base-offset) + var(--control-offset) + var(--album-offset));
/* Correct margins for progress bar */
margin: 0px 28px -12px;
/* Set height of card to match pregress bar height */
height: var(--mmp-progress-height);
/* Remove border outline */
--ha-card-border-width: 0;
/* Round corners of progress bar */
--mmp-border-radius: var(--control-border-radius, 12px) !important;
/* Set height of progress bar */
--mmp-progress-height: 12px !important;
/* Remove transitions to prevent progress bar floating in */
transition: all 0.5s;
}
card_mod:
style: |
:host {
/* Assign album art color to variable used in popup */
--album-art-color:
{% if is_state('media_player.currently_playing', ['playing', 'paused']) %}
{{ states('sensor.muted_color') }}
{% else %}
141, 117, 238
{% endif %};
/* Remove background because it is applied to popup */
--ha-card-background: none;
}
card_mod:
style:
ha-dialog$: |
.mdc-dialog__surface {
/* Apply gradient background to popup using album art colors. Set to default colors when idle */
{% if is_state('media_player.currently_playing', ['playing', 'paused']) %}
background: linear-gradient(305deg, transparent 50%, rgba({{ states('sensor.dark_vibrant_color') }}, 0.4)),
linear-gradient(55deg, transparent 50%, rgba({{ states('sensor.vibrant_color') }}, 0.2)),
linear-gradient(180deg, transparent 40%, rgba({{ states('sensor.dark_muted_color') }}, 0.3));
{% else %}
background: linear-gradient(0deg, transparent 40%, rgba(192, 127, 190, 0.3)),
linear-gradient(240deg, transparent 40%, rgba(143, 119, 237, 0.3)),
linear-gradient(120deg, transparent 40%, rgba(122, 181, 239, 0.3));
{% endif %}
}
ha-header-bar$: |
.mdc-top-app-bar {
/* Remove header background so that popup background is visible */
--mdc-theme-primary: none;
/* Reduced the gap between header and album art */
margin-bottom: -16px;
}
.: |
:host {
/* Set width of popup */
--popup-min-width: 450px;
}
card_mod:
style: |
mushroom-shape-icon {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
--card-mod-icon: mdi:television-classic;
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
--card-mod-icon: mdi:movie-roll;
--icon-animation: spin 2s linear infinite reverse;
{% elif media_type == 'music' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
{% if not is_state(config.entity, 'off') %}
background: rgba(var(--rgb-card-background-color), 0.6) url( '{{ state_attr(config.entity, "entity_picture") }}' ) center no-repeat;
background-size: cover;
background-blend-mode: overlay;
{% endif %}
border-radius: 35px 35px 35px 35px !important;
height: 55px !important;
margin-left: -8px;
}
card_mod:
style: |
ha-card {
{% if is_state('media_player.currently_playing', ['playing','paused']) %}
background-image: url( '{{ state_attr( "media_player.currently_playing", "entity_picture" ) }}' );
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(var(--rgb-card-background-color), 0.8);
background-blend-mode: overlay;
position: relative;
margin-left: -72%;
width: 170%;
border-radius: 35px 35px 35px 35px !important;
transition: all 0.5s;
{% else %}
width: 50px;
--spacing: 5px;
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-top: 2px;
margin-left: auto;
margin-right: -64%;
transition: all 0.5s;
{% endif %}
}
I also applied a color modification depending on the media being played:
ha-card:before {
content: "";
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: calc(100% - 2 * var(--ha-card-border-width, 1px));
z-index: -1;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 35px;
box-shadow: var(--ha-card-box-shadow);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
{% if is_state('media_player.currently_playing', ['playing', 'paused']) %}
background: linear-gradient(135deg, rgba({{ states('sensor.dark_vibrant_color') }}, 0.85), rgba({{ states('sensor.dark_muted_color') }}, 0.75));
{% else %}
background: rgba(var(--rgb-card-background-color), 0.20);
{% endif %}
}
11 Likes
That looks amazing! I am also using a bottom bar, but I havenāt been able to get it exacly how I want it. Would you mind sharing your code on how you did it? I am very interested in implementing the āleft-rightā swiping.
Also, I saw your search button is linked to ChatGPT? Can I ask you how you have integrated that?
Thanks 
great!
I was really looking for someone to help me with the development.
Share all the code please.
1 Like
Hi,
I will share my bar code soon.
Regarding ChatGPT, I went through this integration:
1 Like
I opted for a dashboard with a single view. To keep and use only one menu bar on my entire dashboard.
I chose to use local-conditional-card to do this.
It also allows me to easily manage which cards are shown or hidden.
Result:
Here is the full code for my top bar:
19 Likes
Is there anyway to change the colors of the alarm card icon? The normal alarm card uses blue for disarmed and green for armed. Iād like to make it green for disarmed, and red for armed, but I donāt see options in the visual editor or looking over the options on github. Iām guessing Iād have to use a template card, but I also want the arm/disarm buttons at the bottom of the card.
This is how I want it to look, just the colors of the icon different.
Any suggestions?
Can you make a version of this with ātype: custom:search-cardā if you have it, please? Thanks.
I replaced the first card with it and doesnāt look right for me so maybe you can style it better.
1 Like
something like thisā¦
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state('xxxx', 'on') %}
--shape-color: rgba(var(--rgb-red), 0.25);
--icon-color: rgba(var(--rgb-white), 1);
{% else %}
--shape-color: rgba(var(--rgb-green), 0.25);
--icon-color: rgba(var(--rgb-white), 1);
{% endif %}
}
2 Likes
Thank you, that worked perfectly. I hadnāt thought about using a card mod, and honestly, Iād never used one before to know how to do that even if I had. I really appreciate it.
Hi,
Iām facing an issue where I canāt get nested mushroom template chips (combined with different mushroom cards in a vertical-stack-in-card) to be visible in chrome or edge browser on e.g. desktop/tablet or the companion app on my phone.
However, it is working when showing the same view on my mobile in brave browser or opera on my desktop. And I can also see those conditional mushroom chips in edit mode, every time.
Is there anybody who has an idea, why that is the case? I canāt seem to figure out, why this is behaving so inconsistently.
Iāve already been playing around and tested different approaches (for the conditional visibility). I tried the āoriginalā approach, from the code example I started with, with the conditional card and also tried to achieve a similar behaviour with only a conditional if-clause in the icon-value.
I also played around with different margins and sizes in general. But it was never consistently showing in all contexts (except for the mentioned contexts where it always works, e.g. edit mode).
My current approach is using conditional if-clauses in the icon parameter value, instead of conditional cards. Hereās a code example.
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: sensor.lights_currently_turned_on
icon: mdi:lightbulb-group
icon_color: |
{% if states('sensor.lights_currently_turned_on') == '0' %}
grey
{% else %}
#f39c12
{% endif %}
primary: Licht
secondary: |
{% if states('sensor.lights_currently_turned_on') == '0' %}
aus
{% else %}
{{ states('sensor.lights_currently_turned_on') }} eingeschaltet
{% endif %}
layout: horizontal
tap_action:
action: navigate
navigation_path: /dashboard-start/lichtsteuerung
double_tap_action:
action: navigate
navigation_path: /dashboard-start/lichtsteuerung
hold_action:
action: toggle
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 14px !important;
position: relative;
top: -50px;
left: -160px;
overflow: visible !important;
white-space: normal !important;
}
.secondary {
position: relative;
overflow: visible !important;
top: -52px;
left: -160px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -50px;
top: 45px;
}
.: |
:host {
--mush-icon-size: 146px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: media_player.player
icon: >-
{% if is_state('media_player.player', 'on') or
is_state('media_player.player_zone_2', 'on') %}
{% if is_state('media_player.player', 'on') and (is_state_attr('media_player.player', 'source',
'strm-box') or
is_state_attr('media_player.player', 'source',
'video1') or
is_state_attr('media_player.player', 'source',
'video2') or
is_state_attr('media_player.player', 'source',
'video3') or
is_state_attr('media_player.player', 'source',
'video4') or
is_state_attr('media_player.player', 'source',
'video5') or
is_state_attr('media_player.player', 'source',
'video6')) %}
mdi:television-play
{% else %}
mdi:music
{% endif %}
{% else %}
{% endif %}
icon_color: blue
content_info: none
card_mod:
style:
.: |
ha-card {
width: 66px;
margin-left: 75%;;
top: -70px;
background: none;
--chip-border-width: 0;
}
:host {
--mush-icon-size: 20px;
--mush-chip-spacing: -2.9px;
}
The result remains the same.
In card-editor view the āconditional mushroom chipsā work like a charm.
In most contexts the āconditional mushroom template chipsā can only be seen, if the whole browser/app was stopped and re-run. Sometimes those chips become visible. But after some time it stops working again and needs a new restart-cycle, to maybe become visible again.
I dont suppose anyone has got a card that you can add a google calendar event ?
I want to choose the date, time and name and pick the calendar I would like to add it to.
The service for this isnt the friendliest, so was hoping there was a card or way to do this
Thanks
Put this code in your configuration.yaml
binary_sensor:
- platform: template
sensors:
general_high_temperature_alert sensation:
friendly_name: "Kitchen high temperature warning."
value_template: "{{ states('sensor.media_thermal_sensation') | float > 25 }}"
general_low_temperature_alert sensation:
friendly_name: "Kitchen low temperature warning."
value_template: "{{ states('sensor.media_thermal_sensation') | float < 15 }}"
This will create the necessary sensors to work in friend code, Iāve changed the names to my language, feel free to customize. The principle will be the same.
About the sensor.nightstate, I didnāt use it, I preferred to put an entity that shows humidity, but if you want:
sensor:
- platform: template
sensors:
night_state:
friendly_name: "State of the Night"
value_template: >
{% if is_state('sun.sun', 'below_horizon') %}
Night
{% else %}
Day
{% endif %}
Sorry for any translation errors, Iām using google.