fugley
May 22, 2023, 5:02pm
6910
this works for myself
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{% if is_state(config.entity, 'on') %}
--icon-animation: door 3s steps(1) infinite alternate;
}
@keyframes door {
0% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 74%, 81% 74%, 81% 100%, 100% 100%, 100% 0); }
50% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 60%, 81% 60%, 81% 100%, 100% 100%, 100% 0); }
75% { clip-path: polygon(0 0, 0 100%, 19% 100%, 19% 48%, 81% 48%, 81% 100%, 100% 100%, 100% 0); }
}
{% else %}
{%endif%}
}
wgumaa
May 22, 2023, 5:43pm
6911
But what do you get when press open your entity? I donāt get an āonā but a timestamp.
My garage is on an impulse. Press it opens; press it closes.
Neo1984
May 22, 2023, 5:48pm
6912
Hello everyone,
is there any way to combine a Mushroom Light Card together with the benefits (secondary) from the mushroom tamplate card? I want to have the style of my Mushroom Light Card with a Brightness Slider but as well i want to display the consumption of the device which i have done with a tamplate card - I want to have it as one
Hi, could you help me figure out where Iām going wrong? Thanks in advance
type: custom:mushroom-template-card
primary: Update HA
entity: null
icon: mdi:home-assistant
badge_icon: none
layout: vertical
hold_action:
action: toggle
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Update HA
content:
type: custom:auto-entities
card:
type: entities
filter:
include:
- type: custom:button-card
entity: null
show_icon: false
show_name: true
name: Update
styles:
card:
- border-radius: 15px
- border-left: 20px solid var(--state-icon-color)
- border-right: 20px solid var(--state-icon-color)
- height: 30px
name:
- font-size: 30px
- color: var(--state-icon-color)
tap_action:
action: navigate
navigation_path: /config/updates
haptic: heavy
- square: true
columns: 1
type: grid
cards:
- extra_styles: |
@keyframes fade {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
type: custom:button-card
entity: null
icon: mdi:home-assistant
show_entity_picture: false
aspect_ratio: 1/1
name: HomeAssistant
styles:
card:
- border-radius: 15%
- padding: 10%
- color: ivory
- font-size: 12px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"i update" "n n" "ha ha" "super super" "os os"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 3px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- margin-top: '-5%'
- width: 85%
- color: >
[[[
if (states['update.home_assistant_core_update'].state
== "on")
return 'red'
else if
(states['update.home_assistant_supervisor_update'].state
==
"on")
return 'red'
else if
(states['update.home_assistant_operating_system_update'].state
== "on")
return 'red'
else
return 'var(--state-icon-color)'
]]]
- animation: >
[[[
if (states['update.home_assistant_core_update'].state
== "on")
return 'fade 3s infinite'
else if
(states['update.home_assistant_supervisor_update'].state
==
"on")
return 'fade 3s infinite'
else if
(states['update.home_assistant_operating_system_update'].state
== "on")
return 'fade 3s infinite'
else
return ''
]]]
custom_fields:
update:
- align-self: start
- justify-self: end
- font-size: 12px
ha:
- padding-bottom: 1px
- align-self: middle
- justify-self: start
- font-size: 9px
super:
- padding-bottom: 1px
- align-self: middle
- justify-self: start
- font-size: 9px
os:
- padding-bottom: 0px
- align-self: middle
- justify-self: start
- font-size: 9px
custom_fields:
update: >
[[[
if (states['update.home_assistant_core_update'].state ==
"on")
return `<span><span style="color: red;">Update</span>`
else if
(states['update.home_assistant_supervisor_update'].state
== "on")
return `<span><span style="color: red;">Update</span>`
else if
(states['update.home_assistant_operating_system_update'].state
==
"on")
return `<span><span style="color: red;">Update</span>`
else
return `<span><span style="color: lime;">Ok</span>`
]]]
ha: |
[[[
if (states['update.home_assistant_core_update'].state == "on")
return `Core: <span style="color: red;"><span>${states['update.home_assistant_core_update'].attributes.installed_version}</span> <span style="color: orange;"><span> -> </span><span style="color: lime;"><span>${states['update.home_assistant_core_update'].attributes.latest_version}</span></span>`
else
return `Core : <span style="color: deepskyblue;"><span>${states['update.home_assistant_core_update'].attributes.installed_version}</span>`
]]]
super: |
[[[
if (states['update.home_assistant_supervisor_update'].state == "on")
return `Supe: <span style="color: red;"><span>${states['update.home_assistant_supervisor_update'].attributes.installed_version}</span> <span style="color: orange;"><span> -> </span><span style="color: lime;"><span>${states['update.home_assistant_supervisor_update'].attributes.latest_version}</span></span>`
else
return `Supe : <span style="color: deepskyblue;"><span>${states['update.home_assistant_supervisor_update'].attributes.installed_version}</span>`
]]]
os: |
[[[
if (states['update.home_assistant_operating_system_update'].state == "on")
return `Os: <span style="color: red;"><span>${states['update.home_assistant_operating_system_update'].attributes.installed_version}</span> <span style="color: orange;"><span> -> </span><span style="color: lime;"><span>${states['update.home_assistant_operating_system_update'].attributes.latest_version}</span></span>`
else
return `Os : <span style="color: deepskyblue;"><span>${states['update.home_assistant_operating_system_update'].attributes.installed_version}</span>`
]]]
- extra_styles: |
@keyframes fade {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
type: custom:button-card
entity: sensor.hacs
icon: mdi:store
show_entity_picture: false
aspect_ratio: 1/1
name: Hacs
styles:
card:
- border-radius: 15%
- padding: 10%
- color: ivory
- font-size: 12px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"i update" "n n" "install install"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 5px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- color: |
[[[
if (entity.state == "0") return 'var(--state-icon-color)';
else return 'red';
]]]
- margin-top: '-10%'
- width: 80%
- animation: |
[[[
if (entity.state != "0") return 'fade 3s infinite';
else return '';
]]]
custom_fields:
update:
- align-self: start
- justify-self: end
install:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
new:
- align-self: middle
- justify-self: start
custom_fields:
update: |
[[[
if (entity.state == "0")
return `<span><span style="color: lime;">Ok</span>`
else
return `<span><span style="color: Red;">Update</span>`
]]]
install: |
[[[
if (entity.state == "0")
return `<span>Repo : <span style="color: deepskyblue;">Tutto Aggiornato</span>`
else
return `<span>Repo : <span style="color: red;"><span>${entity.state}</span></span>`
]]]
- extra_styles: |
@keyframes fade {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
type: custom:button-card
entity: update.dynu_dns_update
icon: mdi:network
show_entity_picture: false
aspect_ratio: 1/1
name: Dynu Ddns
styles:
card:
- border-radius: 15%
- padding: 10%
- color: ivory
- font-size: 12px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"i update" "n n" "install install" "new new"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 5px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- color: |
[[[
if (entity.state == "off") return 'var(--state-icon-color)';
else return 'red';
]]]
- margin-top: '-10%'
- width: 80%
- animation: |
[[[
if (entity.state == "on") return 'fade 3s infinite';
else return '';
]]]
custom_fields:
update:
- align-self: start
- justify-self: end
install:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
new:
- align-self: middle
- justify-self: start
custom_fields:
update: |
[[[
if (entity.state == "off")
return `<span><span style="color: lime;">Ok</span>`
else
return `<span><span style="color: Red;">Update</span>`
]]]
install: |
[[[
if (entity.state == "off")
return `<span>Installata : <span style="color: deepskyblue;"><span>${entity.attributes.installed_version}</span></span>`
else
return `<span>Installata : <span style="color: red;"><span>${entity.attributes.installed_version}</span></span>`
]]]
new: |
[[[
if (entity.state == "off")
return `<span>Ultima : <span style="color: deepskyblue;"><span>${entity.attributes.latest_version}</span></span>`
else
return `<span>Ultima : <span style="color: red;"><span>${entity.attributes.latest_version}</span></span>`
]]]
- extra_styles: |
@keyframes fade {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
type: custom:button-card
entity: update.terminal_ssh_update
icon: mdi:ssh
show_entity_picture: false
aspect_ratio: 1/1
name: Terminale & Ssh
styles:
card:
- border-radius: 15%
- padding: 10%
- color: ivory
- font-size: 12px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"i update" "n n" "install install" "new new"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 5px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- color: |
[[[
if (entity.state == "off") return 'var(--state-icon-color)';
else return 'red';
]]]
- margin-top: '-10%'
- width: 80%
- animation: |
[[[
if (entity.state == "on") return 'fade 3s infinite';
else return '';
]]]
custom_fields:
update:
- align-self: start
- justify-self: end
install:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
new:
- align-self: middle
- justify-self: start
custom_fields:
update: |
[[[
if (entity.state == "off")
return `<span><span style="color: lime;">Ok</span>`
else
return `<span><span style="color: Red;">Update</span>`
]]]
install: |
[[[
if (entity.state == "off")
return `<span>Installata : <span style="color: deepskyblue;"><span>${entity.attributes.installed_version}</span></span>`
else
return `<span>Installata : <span style="color: red;"><span>${entity.attributes.installed_version}</span></span>`
]]]
new: |
[[[
if (entity.state == "off")
return `<span>Ultima : <span style="color: deepskyblue;"><span>${entity.attributes.latest_version}</span></span>`
else
return `<span>Ultima : <span style="color: red;"><span>${entity.attributes.latest_version}</span></span>`
]]]
- extra_styles: |
@keyframes fade {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
type: custom:button-card
entity: update.file_editor_update
icon: mdi:file-cog
show_entity_picture: false
aspect_ratio: 1/1
name: File Editor
styles:
card:
- border-radius: 15%
- padding: 10%
- color: ivory
- font-size: 12px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"i update" "n n" "install install" "new new"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 5px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- color: |
[[[
if (entity.state == "off") return 'var(--state-icon-color)';
else return 'red';
]]]
- margin-top: '-10%'
- width: 80%
- animation: |
[[[
if (entity.state == "on") return 'fade 3s infinite';
else return '';
]]]
custom_fields:
update:
- align-self: start
- justify-self: end
install:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
new:
- align-self: middle
- justify-self: start
custom_fields:
update: |
[[[
if (entity.state == "off")
return `<span><span style="color: lime;">Ok</span>`
else
return `<span><span style="color: Red;">Update</span>`
]]]
install: |
[[[
if (entity.state == "off")
return `<span>Installata : <span style="color: deepskyblue;"><span>${entity.attributes.installed_version}</span></span>`
else
return `<span>Installata : <span style="color: red;"><span>${entity.attributes.installed_version}</span></span>`
]]]
new: |
[[[
if (entity.state == "off")
return `<span>Ultima : <span style="color: deepskyblue;"><span>${entity.attributes.latest_version}</span></span>`
else
return `<span>Ultima : <span style="color: red;"><span>${entity.attributes.latest_version}</span></span>`
]]]
- extra_styles: |
@keyframes fade {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
type: custom:button-card
entity: update.network_ups_tools_update
icon: mdi:network
show_entity_picture: false
aspect_ratio: 1/1
name: Network UPS
styles:
card:
- border-radius: 15%
- padding: 10%
- color: ivory
- font-size: 12px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"i update" "n n" "install install" "new new"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 5px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- color: |
[[[
if (entity.state == "off") return 'var(--state-icon-color)';
else return 'red';
]]]
- margin-top: '-10%'
- width: 80%
- animation: |
[[[
if (entity.state == "on") return 'fade 3s infinite';
else return '';
]]]
custom_fields:
update:
- align-self: start
- justify-self: end
install:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
new:
- align-self: middle
- justify-self: start
custom_fields:
update: |
[[[
if (entity.state == "off")
return `<span><span style="color: lime;">Ok</span>`
else
return `<span><span style="color: Red;">Update</span>`
]]]
install: |
[[[
if (entity.state == "off")
return `<span>Installata : <span style="color: deepskyblue;"><span>${entity.attributes.installed_version}</span></span>`
else
return `<span>Installata : <span style="color: red;"><span>${entity.attributes.installed_version}</span></span>`
]]]
new: |
[[[
if (entity.state == "off")
return `<span>Ultima : <span style="color: deepskyblue;"><span>${entity.attributes.latest_version}</span></span>`
else
return `<span>Ultima : <span style="color: red;"><span>${entity.attributes.latest_version}</span></span>`
]]]
- extra_styles: |
@keyframes fade {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
type: custom:button-card
entity: update.nginx_home_assistant_ssl_proxy_update
icon: mdi:all-inclusive
show_entity_picture: false
aspect_ratio: 1/1
name: Nginx
styles:
card:
- border-radius: 15%
- padding: 10%
- color: ivory
- font-size: 12px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"i update" "n n" "install install" "new new"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 5px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- color: |
[[[
if (entity.state == "off") return 'var(--state-icon-color)';
else return 'red';
]]]
- margin-top: '-10%'
- width: 80%
- animation: |
[[[
if (entity.state == "on") return 'fade 3s infinite';
else return '';
]]]
custom_fields:
update:
- align-self: start
- justify-self: end
install:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
new:
- align-self: middle
- justify-self: start
custom_fields:
update: |
[[[
if (entity.state == "off")
return `<span><span style="color: lime;">Ok</span>`
else
return `<span><span style="color: Red;">Update</span>`
]]]
install: |
[[[
if (entity.state == "off")
return `<span>Installata : <span style="color: deepskyblue;"><span>${entity.attributes.installed_version}</span></span>`
else
return `<span>Installata : <span style="color: red;"><span>${entity.attributes.installed_version}</span></span>`
]]]
new: |
[[[
if (entity.state == "off")
return `<span>Ultima : <span style="color: deepskyblue;"><span>${entity.attributes.latest_version}</span></span>`
else
return `<span>Ultima : <span style="color: red;"><span>${entity.attributes.latest_version}</span></span>`
]]]
give an example, attach some photos. Go to developer tools and see the attributes of the entity.
wgumaa
May 22, 2023, 7:20pm
6915
@Mattia2399
This is what I get. The switch is a toggle switch.
Dibbler
May 22, 2023, 7:24pm
6916
@wgumaa Nice work and thanks for sharing the code. I copied it to adapt it an my washing machine.
To learn some thing it try to rebuild things. Could you explain why there are two template cards? At first sight i expected a template card and a chips card.
wgumaa
May 22, 2023, 7:29pm
6917
The second template card is for the drum rotation and to have it a different colour. This was taken from the animated washing machine done by @rhysb
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:washing-machine
icon_color: orange
primary: 'Washing Machine #2'
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: shake 400ms ease-in-out infinite;
transform-origin: 50% 58%;
clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
- type: custom:mushroom-template-card
icon: mdi:washing-machine
icon_color: orange
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: spin 1s linear infinite;
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
}
.shape {
--shape-color: none;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
card_mod:
style: |
ha-card {
height: 66px;
}
1 Like
Dibbler
May 22, 2023, 7:35pm
6918
Tnaks for the explanation. Thats very clever to put stack two card. Thats why i try to rebuild thing - Leand something Thanks
1 Like
what a strange thing, i have no idea
1 Like
Iām still fooling with custom icon colors. When I read it might not work with mushroom entity cards, I tried mushroom template cards with no luck. Iām not getting anywhere with state-based icon colors. See anything wrong with this?
removed
EDIT: Got somewhereā¦ this works:
type: custom:stack-in-card
title: ''
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Night Mode
secondary: >
{% set state = (states.input_boolean.night_mode.state) %}
{% set changed =
as_timestamp(states.input_boolean.night_mode.last_changed)
%} {% set diff2 =
as_timestamp(now()) - changed %} {% if diff2 <= 1 %}
Just turned {{state}}
{% elif diff2 <= 59 %}
Turned {{state}} {{diff2 | round(0) }} seconds ago
{% elif diff2 <= 3599 and ((diff2/60) | round(0)) == 1 %}
Turned {{state}} 1 minute ago
{% elif diff2 <= 3599 %}
Turned {{state}} {{ (diff2/60) | round(0) }} minutes ago
{% elif diff2 <= 86399 and ((diff2/3600) | round(0)) == 1 %}
Turned {{state}} 1 hour ago
{% elif diff2 <= 86399 %}
Turned {{state}} {{(diff2/3600) | round(0) }} hours ago
{% elif diff2 >= 86400 and ((diff2/86400) | round(0)) == 1 %}
Turned {{state}} 1 day ago
{% elif diff2 >= 86400 %}
Turned {{state}} {{(diff2/86400) | round(0) }} days ago
{% else %}
Unknown
{% endif %}
entity: input_boolean.night_mode
icon: mdi:notification-clear-all
icon_color: >-
{{ is_state('input_boolean.night_mode', 'off') |
iif('blue', 'red') }}
layout: horizontal
tap_action:
action: toggle
card_mod:
style: |
ha-card {
border: none;
}
card_mod:
style: |
ha-card {
--ha-card-background: rgba(7, 103, 215, 0.24);
}
The card background is the correct color, the icon changes color with state (but no rgba codes?), and the borders are gone.
Now if I can only get an expander-type card to play nice with mushroom cards.
1 Like
Iām just getting started with lovelace, and Iām wondering if what Iām trying to achieve can be done. Iām trying to horizontally stack three icons next to each other on the left, then right align a text entity on the right, like this:
But when I use a Horizontal stack with mushroom cards, it ends up looking like this with boxes around each card:
Can anyone help me get closer to what Iām trying to achieve? Thanks in advance.
dyego.hass
May 23, 2023, 2:02am
6922
Could you share the code for configuring the hardware monitoring panel. I found it very beautiful.
fugley
May 23, 2023, 7:33am
6923
style: |
ha-card {
background: none;
box-shadow: none;
}
1 Like
tonivss
May 23, 2023, 11:59am
6924
Hi everyone,
1 Like
Would it be possible to combine the weather chip icon with my two outside temperature templates? These are separate chips now:
edit:
type: template
content: >
{{ (states('sensor.comfoairq_outside_temperature')|float )}} / {{
(states('sensor.ecodan_outdoor_ambient_temperature')|float )}} Ā°C
picture: |-
{% set state = states('weather.knmi_thuis') %}
{% if state == "clear-night" %}
local/images/weather_icons/clear-night.svg
{% elif state == "cloudy" %}
local/images/weather_icons/cloudy.svg
{% elif state == "fog" %}
local/images/weather_icons/fog.svg
{% elif state == "hail" %}
local/images/weather_icons/hail.svg
{% elif state == "lightning" %}
local/images/weather_icons/lightning.svg
{% elif state == "partlycloudy" %}
local/images/weather_icons/partlycloudy.svg
{% elif state == "pouring" %}
local/images/weather_icons/pouring.svg
{% elif state == "rainy" %}
local/images/weather_icons/rainy.svg
{% elif state == "snowy" %}
local/images/weather_icons/snowy.svg
{% elif state == "sunny" %}
local/images/weather_icons/sunny.svg
{% else %}
local/images/weather_icons/exceptional.svg
{% endif %}
tap_action:
action: navigate
navigation_path: /lovelace/weather
2 Likes
How might I reduce the padding between these entity & light cards in a stack-in card? Iām using card_mod and padding-top/padding-bottom (as shown in the 2nd card down) yield no results.
type: custom:stack-in-card
title: ''
mode: vertical
cards:
- type: custom:mushroom-title-card
title: FIRST FLOOR LIGHTS
- type: custom:mushroom-entity-card
entity: switch.entry_light
secondary_info: last-updated
icon_color: orange
tap_action:
action: toggle
card_mod:
style: |
ha-card {
border: none;
--card-primary-font-size: 16px;
--card-secondary-font-size: 12px;
padding-top: 0px;
padding-bottom: 0px;
}
- type: custom:mushroom-light-card
primary_info: name
secondary_info: last-updated
entity: light.living_room_light
layout: horizontal
show_brightness_control: true
collapsible_controls: true
card_mod:
style: |
ha-card {
border: none;
--card-primary-font-size: 16px;
--card-secondary-font-size: 12px;
}
- type: custom:mushroom-entity-card
entity: switch.living_room_table_lamp
secondary_info: last-updated
icon_color: orange
tap_action:
action: toggle
card_mod:
style: |
ha-card {
border: none;
--card-primary-font-size: 16px;
--card-secondary-font-size: 12px;
}
card_mod:
style: |
ha-card {
--ha-card-background: rgba(7, 103, 215, 0.24);
}
1 Like
Is there a way to use negative spacing to overlap chips in the chips card? Iāve tried this but it doesnāt seem to do anything:
type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-spacing: -4;
}
Faecon
May 25, 2023, 10:26am
6929
I want some kind of navigation bar at the bottom of the screen, in the center.
- type: custom:mod-card
card:
type: horizontal-stack
cards:
- type: "custom:button-card" #navigatie terug naar hoofdscherm
template: chip_navigate
variables:
ulm_chip_navigate_path: home
ulm_chip_navigate_icon: mdi:home-outline
- type: custom:button-card
template: chip_navigate
variables:
ulm_chip_navigate_path: verbruikgisteren
ulm_chip_navigate_icon: mdi:flash
ulm_chip_navigate_icon_color: grey
card_mod:
style: |
:host {
/* Make the media player sticky at the bottom of the page */
position: sticky;
bottom: 12px;
}
#root {
justify-content: center;
}
weppa
May 25, 2023, 10:45am
6930
Thanks for the above @rhysb !
Iām back once again for the Renegade Master, D for Damager, Power to the Peopleā¦
How do I apply the same effect but to chips? Donāt laugh at my attempt below:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Living
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: Television
secondary: >-
{{ states(entity) | title }} {% if is_state_attr('remote.living_room',
'current_activity', 'PowerOff') %} {% else %}
- {{ state_attr('remote.living_room', 'current_activity') | replace('Nintendo','') }}
{% endif %}
icon: mdi:television
icon_color: |-
{% if is_state(entity, 'off') %}
disabled
{% else %}
blue
{% endif %}
entity: remote.living_room
card_mod:
style:
mushroom-shape-icon$: |
.shape:active {
transform: scale(1.2);
}
.: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: switch.living_room_google_tv
icon_color: green
icon: mdi:google
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(var(--rgb-green),0.2)' if is_state(config.entity, 'on') else 'rgba(var(--rgb-primary-text-color), 0.05)' }};
--chip-border-width: 0;
--icon-color: rgb(var(--rgb-white));
}
- type: entity
entity: switch.living_room_nintendo_switch
icon_color: green
icon: mdi:nintendo-switch
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-background: {{ 'rgba(var(--rgb-green),0.2)' if is_state(config.entity, 'on') else 'rgba(var(--rgb-primary-text-color), 0.05)' }};
--chip-border-width: 0;
--icon-color: rgb(var(--rgb-white));
}
- type: action
icon_color: white
icon: mdi:volume-low
tap_action:
action: call-service
service: remote.send_command
data:
device: Bose Amp
command: VolumeDown
target:
entity_id: remote.living_room
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-primary-text-color), 0.05);
--chip-border-width: 0;
--icon-color: rgb(var(--rgb-white));
}
ha-card:active {
--chip-background: rgba(var(--rgb-red), 0.5);
transform: scale(1.2);
}
.content:active {
transform: scale(1.2);
}
- type: action
icon_color: white
icon: mdi:volume-high
tap_action:
action: call-service
service: remote.send_command
data:
device: Bose Amp
command: VolumeUp
target:
entity_id: remote.living_room
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-primary-text-color), 0.05);
--chip-border-width: 0;
--icon-color: rgb(var(--rgb-white));
}
ha-card:active {
--chip-background: rgba(var(--rgb-green), 0.5);
transform: scale(1.2);
}
.content:active {
transform: scale(1.2);
}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
top: 16px;
width: -webkit-fill-available;
right: 12px;
position: absolute;
}
.chip-container {
right: 0px;
position: absolute;
}
1 Like
