Yes thanks. I made a few more adjustments and now it looks perfect.
type: custom:mushroom-template-card
primary: PlayStation 5
secondary: |-
{% if is_state('switch.ps5_id_power', 'on') %}
{% if is_state('sensor.ps5_id_activity', 'idle') %}
Ligado
{% elif is_state('sensor.ps5_id_activity', 'playing') %}
{{ state_attr('sensor.ps5_id_activity', 'title_name') or states('sensor.ps5_id_activity') }}
{%- else -%}
{{ state_attr('sensor.ps5_id_activity', 'title_name') or states('sensor.ps5_id_activity') }}
{%- endif -%}
{%- elif is_state('switch.ps5_id_power', 'unavailable') -%}
IndisponĂvel
{%- elif is_state('switch.ps5_id_power', 'off') -%}
Desligado
{%- else -%}
{{ states('switch.ps5_id_power') }}
{%- endif -%}
icon: mdi:sony-playstation
entity: switch.ps5_id_power
picture: '{{state_attr(''sensor.ps5_id_activity'', ''title_image'')}}'
badge_icon: |-
{% if is_state('sensor.ps5_id_activity', 'playing') %}
mdi:controller
{%- elif is_state('sensor.ps5_id_activity', 'idle') -%}
mdi:sleep
{%- elif is_state('sensor.ps5_id_activity', 'unavailable') -%}
mdi:power-plug-off
{%- endif -%}
fill_container: true
multiline_secondary: true
icon_color: |-
{% if is_state('sensor.ps5_id_activity', 'playing') %}
#1986e6
{%- elif is_state('sensor.ps5_id_activity', 'idle') -%}
#ffe057
{%- elif is_state('sensor.ps5_id_activity', 'unavailable') -%}
#737373
{%- endif -%}
badge_color: |-
{% if is_state('sensor.ps5_id_activity', 'playing') %}
#1986e6
{%- elif is_state('sensor.ps5_id_activity', 'idle') -%}
#ffe057
{%- elif is_state('sensor.ps5_id_activity', 'unavailable') -%}
#737373
{%- endif -%}
layout: horizontal
card_mod:
layout: horizontal
style:
mushroom-state-item$: |
.container {
{% if is_state('sensor.ps5_id_activity', 'playing') %}
width: 100%;
gap: 1rem;
{% else %}
{% endif %}
}
.icon {
{% if is_state('sensor.ps5_id_activity', 'playing') %}
margin-right: 0 !important;
{% else %}
margin-right: 1 !important;
{% endif %}
display: flex;
justify-content: flex-end;
}
.info {
{% if is_state('sensor.ps5_id_activity', 'playing') %}
width: 100%;
{% else %}
{% endif %}
}
.: |
ha-card {
padding:0 !important;
}
mushroom-shape-icon {
display: flex;
{% if is_state('sensor.ps5_id_activity', 'playing') %}
padding-top: var(--spacing);
{% else %}
{% endif %}
}
mushroom-shape-avatar {
--icon-size: 100%;
--icon-height: 100%;
display: flex;
{% if is_state('sensor.ps5_id_activity', 'playing') %}
width: 150px;
position:relative;
margin: .6rem;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
--icon-border-radius: 8px;
overflow: hidden;
border-radius: 8px;
{% else %}
{% endif %}
}
mushroom-state-item {
display: flex;
{% if is_state('sensor.ps5_id_activity', 'playing') %}
padding: 0;
{% else %}
padding: 1rem 2rem 1rem 1rem;
{% endif %}
}
mushroom-state-info {
{% if is_state('sensor.ps5_id_activity', 'playing') %}
padding: 4rem 1rem 1rem 0;
{% else %}
{% endif %}
}
mushroom-badge-icon {
{% if is_state('sensor.ps5_id_activity', 'playing') %}
top: 3rem;
right: unset;
left: calc(100% + 1rem);
--badge-size: 32px;
--badge-border-radius: .4rem;
{% else %}
{% endif %}
}
