No. That gives the same result.
Which āThemeā do you use?
My Card puts a button-card over (overlapping) the apex-charts-card. I think the problem may have to do with paddings or margins (which are defined by a āthemeā)
I use the Default Theme. Tried switching to the Mushroom Theme, with the same result.
Does it work for you in the App? What Theme are you using? I could install that and see if this fixes it.
iĀ“m also using the āstandard themeā. Mmmā¦ does it only look āweirdā in the app or also on the browser on a windows pc or mac?
I can conclude it is a Safari thing! The Appās on both iPhone and iPad use the same rendering engine as the Safari browser on the Mac, and on all of them I get the display error. In Chrome on the same Mac it looks perfect.
I donāt know if there is a Cardmod thing that can be added - I am not close to be a Frontend Developer.
me neither. Maybe someone else around here could offer some help with it!?
Thanks for the effort 
I hope someone else knows, or I will start googling
1 Like
Hi, here is my initial version that was posted here working in Auto Entities. Hopefully you can use mine to use their adaption too 
- type: custom:auto-entities
card:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
card_param: cards
filter:
template: >-
{% for state in states.light
|selectattr('entity_id', 'in',
area_entities('Lounge'))
|rejectattr('attributes.icon', 'eq',
'mdi:lightbulb-group') %}
{%- if state.state == 'on' or state.state == 'off' -%}
{{
{
'type': 'custom:mushroom-light-card',
'entity': state.entity_id,
'use_light_color': true,
'layout': 'horizontal',
'show_color_control': true,
'show_brightness_control': true,
'show_color_temp_control': true,
'collapsible_controls': true,
'name': state.attributes.friendly_name.split('Lounge ')[1],
'card_mod':
{
'style':
{
'mushroom-state-info$':
{
'.container':
".primary {
flex-shrink: 1;
flex-grow: 1;
{% if state_attr(config.entity, 'rgb_color') == none %}
{% if states(config.entity) == 'on' %}
--primary-text-color: #1a1a1a;
{% else %}
{% endif %}
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
--primary-text-color: #1a1a1a;
{% else %}
--primary-text-color: #fafafa;
{% endif %}
{% endif %}
}
.secondary {
flex-shrink: 1;
flex-grow: 0;
{% if state_attr(config.entity, 'rgb_color') == none %}
{% if states(config.entity) == 'on' %}
--secondary-text-color: #3b3b3b;
{% else %}
{% endif %}
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
--secondary-text-color: #3b3b3b;
{% else %}
--secondary-text-color: #c9c9c9;
{% endif %}
{% endif %}
}",
'.':
".container {
display: flex;
pointer-events: none;
{% if states(config.entity) == 'on' %}
z-index: 1;
flex-direction: row !important;
align-items: baseline;
pointer-events: none !important;
margin-left: 10px;
margin-right: -8px;
{% else %}
{% endif %}
}",
},
'mushroom-button:nth-child(2)$':
":host {
z-index: 1;
{% if state_attr(config.entity, 'rgb_color') == none %}
--bg-color: rgba(var(--rgb-disabled),0.5) !important;
--icon-color: #1a1a1a !important;
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
--icon-color: #1a1a1a !important;
{% else %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
--icon-color: #dedede !important;
{% endif %}
{% endif %}
}",
'mushroom-button:nth-child(3)$':
":host {
z-index: 1;
{% if state_attr(config.entity, 'rgb_color') == none %}
--bg-color: rgba(var(--rgb-disabled),0.5) !important;
--icon-color: #1a1a1a !important;
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
--icon-color: #1a1a1a !important;
{% else %}
--bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
--icon-color: #dedede !important;
{% endif %}
{% endif %}
}",
'mushroom-light-brightness-control$':
{
'mushroom-slider$':
".container {
position: absolute;
flex-basis: max-content;
width: calc(100% - 80px);
left: 68px;
top: 18.2%
}",
},
'mushroom-light-color-control$':
{
'mushroom-slider$':
".container {
position: absolute;
flex-basis: max-content;
width: calc(100% - 80px);
left: 68px;
top: 18.2%
}",
},
'mushroom-light-color-temp-control$':
{
'mushroom-slider$':
".container {
position: absolute;
flex-basis: max-content;
width: calc(100% - 80px);
left: 68px;
top: 18.2%
}",
},
'.':
".actions {
display: flex;
flex-basis: min-content;
align-items: flex-end !important;
justify-content: flex-end !important;
flex-grow: 0;
flex-shrink: 0;
}
mushroom-state-info {
display: flex;
}
ha-card {
box-shadow: none !important;
border: none !important;
margin-bottom: -10px;
}
ha-state-icon {
{% if 'Lamp' in state_attr(config.entity,'friendly_name') %}
--card-mod-icon: mdi:lamp;
{% elif 'Desk' in state_attr(config.entity,'friendly_name') or 'Shelf' in state_attr(config.entity,'friendly_name') or 'TV' in state_attr(config.entity,'friendly_name') or 'Cabinet' in state_attr(config.entity,'friendly_name') or 'Wardrobe' in state_attr(config.entity,'friendly_name')%}
--card-mod-icon: mdi:led-strip-variant;
{% elif 'Main' in state_attr(config.entity,'friendly_name') %}
--card-mod-icon: mdi:ceiling-light;
{% elif 'Hallway' in state_attr(config.entity,'friendly_name') %}
--card-mod-icon: mdi:lightbulb-spot;
{% elif 'Down' in state_attr(config.entity,'friendly_name') %}
--card-mod-icon: mdi:light-recessed;
{% else %}
--card-mod-icon: mdi:lightbulb;
{% endif %}
}"
}
}
}
}},
{%- endif -%}
{% endfor %}
sort:
method: name
numeric: true
first: 0
count: 100
2 Likes
Great, working perfect and i found my misstakes to adapt mine.
Thank you.
1 Like
I guess itās a question of personal preference but I do like the non overlapping slider.
however Dimitri updated his code due to some issues with non RGB/CT devices.
See reference here:
https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590/8561
Would it be possible to amend your code to reflect the changes?
I am using a workaround by changing width to
width: calc(100% - 185px);
in the original code for all 3 sliders sections but it is not dynamic and requires the creation of 3 different templates/widths.
Kudos to Dimitri for the original code !
Thanks!
Hello,
Any idea what may be causing the value discrepancy between the header and the graph? They point to the same sensors in the code.
type: custom:vertical-stack-in-card
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
entity: climate.my_ecobee
icon: |-
{% if is_state(entity, 'heat') %}
mdi:fire
{% elif is_state(entity, 'heat_cool') %}
mdi:sun-snowflake
{% elif is_state(entity, 'cool') %}
mdi:snowflake
{% elif is_state(entity, 'fan_only') %}
mdi:fan
{% else %}
mdi:radiator-off
{% endif %}
icon_color: |-
{% if is_state_attr(entity,
'hvac_action', 'heating') %}
deep-orange
{% elif is_state_attr(entity,
'hvac_action', 'cooling') %}
var(--blue-color)
{% elif is_state_attr(entity,
'hvac_action', 'fan') %}
turquoise
{% else %}
disabled
{% endif %}
primary: |
{{ states('sensor.my_ecobee_current_temperature') | round(1) }}Ā°F
secondary: |-
{% if is_state(entity, 'heat_cool') %}
Heat/Cool
{% elif is_state_attr(entity,
'hvac_action', 'heating') %}
Heating
{% elif is_state_attr(entity,
'hvac_action', 'cooling') %}
Cooling
{% elif is_state(entity, 'heat') %}
Heat
{% elif is_state(entity, 'cool') %}
Cool
{% elif is_state(entity, 'fan_only') %}
Fan
{% else %}
Off
{% endif %}
- type: custom:mushroom-template-card
entity: sensor.my_ecobee_current_humidity
primary: |
{{ states(entity) | round(1) }}%
secondary: Humidity
icon: mdi:water-percent
icon_color: blue
- type: custom:mini-graph-card
entities:
- entity: sensor.my_ecobee_current_temperature
name: Temperature
- entity: sensor.my_ecobee_current_humidity
name: Humidity
y_axis: secondary
hours_to_show: 12
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
.line--rect,
.fill--rect,
.line--points {
{% set state = states('climate.my_ecobee') %}
{% set states = {'heat_cool':'green',
'heat':'#FF5722',
'cool':'var(--blue-color)',
'dry':'orange',
'fan_only':'turqoise'} %}
{{states.get(state,'grey')}}
fill: {{COLOR}};
stroke: {{COLOR}};
}
.line--rect:last-of-type,
.fill--rect:nth-of-type(2),
.line--points:last-of-type {
fill: var(--blue-color);
stroke: var(--blue-color);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-climate-card
entity: climate.my_ecobee
primary_info: none
secondary_info: none
icon_type: none
show_temperature_control: true
- type: custom:mushroom-climate-card
entity: climate.my_ecobee
primary_info: none
secondary_info: none
icon_type: none
hvac_modes:
- heat
- cool
- heat_cool
- fan_only
- 'off'
3 Likes
Mushroom-inspired Solar Energy Card + Home Consumption Card v2
IĀ“ve reworked my cards to better fit my needs. The cards can display power (in W, actucal use) and energy (in kWh, daily use)-entities.
Made with Button-Card and ApexCharts-Card.
The cards shows
Solar Energy Card v2
- the energy produced by your pv in the left area with a pie-chart
- the produced energy that is used in the house
- the produced energy that is fed to grid
- the produced energy that is used to load the battery
Home Consumption Card v2
- the energy used in your house in the left area with a pie-chart
- the house-used power that is coming from the grid
- the house-used power that is coming from your solar panels
- the house-used power that is coming from your battery
The colors will automaticly match your energy-dashboard-colors.
You just to need to fill in your entities in the āvariables:ā-section.
Some sensors are directly from my integrations, some sensors are template-sensors.
YAML-Code Solar Energy Card v2
type: custom:button-card
variables:
from_solar_entity: sensor.senec_solar_generated_power
from_solar_label: Solar
to_grid_entity: sensor.senec_grid_exported_power
to_grid_label: ins Netz
to_battery_entity: sensor.senec_battery_charge_power
to_battery_label: in Speicher
to_house_entity: sensor.senec_solar_house_used_power
to_house_label: ins Haus
show_name: false
show_state: false
show_icon: false
styles:
card:
- padding: 0px
grid:
- grid-template-areas: '"karte"'
- grid-template-columns: 100%
- grid-template-rows: 100%
custom_fields:
karte:
- filter: opacity(100%)
- overflow: visible
custom_fields:
karte:
card:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding: 0px 0px 0px 0px;
}
mode: vertical
keep:
background: false
border_radius: true
box_shadow: false
margin: false
outer_padding: false
cards:
- type: grid
columns: 4
square: false
cards:
- type: vertical-stack
cards:
- type: custom:apexcharts-card
card_mod:
style: |
ha-card {
background: none;
border: none;
box-shadow: none;
height: 80px;
padding: 0px;
}
stacked: true
chart_type: donut
header:
show: false
floating: true
apex_config:
plotOptions:
pie:
customScale: 1.8
chart:
height: 85px
offsetX: 0
offsetY: 18
animations:
enabled: false
legend:
show: false
series:
- entity: '[[[ return variables.to_house_entity ]]]'
name: Haus
color: grey
show:
datalabels: false
- entity: '[[[ return variables.to_grid_entity ]]]'
name: Netz
color: var(--energy-grid-return-color)
show:
datalabels: false
- entity: '[[[ return variables.to_battery_entity ]]]'
name: Speicher
color: var(--energy-battery-in-color)
show:
datalabels: false
- type: custom:button-card
entity: '[[[ return variables.from_solar_entity ]]]'
layout: vertical
show_name: false
show_state: true
show_icon: true
show_label: true
label: '[[[ return variables.from_solar_label ]]]'
styles:
grid:
- grid-template-areas: '"top" "i" "s" "l" "bottom"'
- grid-template-columns: 100%
- grid-template-rows: 1fr 3fr auto auto 1fr
card:
- height: 80px
- margin-top: '-80px'
- background: none
- border: none
- box-shadow: none
state:
- font-weight: bold
- font-size: 0.7rem
label:
- font-size: 0.7rem
icon:
- height: 1.5rem
- color: var(--energy-solar-color)
- type: custom:button-card
size: 100%
entity: '[[[ return variables.to_house_entity ]]]'
icon: mdi:home-import-outline
show_icon: true
show_name: true
show_state: true
show_label: false
name: >-
[[[ return variables.to_house_label + " (" +
Math.round(states[variables.to_house_entity].state /
states[variables.from_solar_entity].state * 100) + "%)" ]]]
styles:
grid:
- grid-template-areas: '"i" "s" "n"'
- grid-template-rows: 3rem 1fr 1fr
- grid-template-columns: auto
card:
- height: 80px
- box-shadow: none
- border: none
- padding: 0px 0px 0px 0px
icon:
- height: 2.5rem
- color: grey
state:
- font-weight: bold
- font-size: 1rem
- align-self: end
- color: grey
label:
- font-size: 0.7rem
- align-self: center
name:
- font-size: 0.7rem
- align-self: start
- type: custom:button-card
label: '[[[ return variables.to_grid_label ]]]'
size: 100%
entity: '[[[ return variables.to_grid_entity ]]]'
icon: mdi:transmission-tower-import
show_icon: true
show_name: true
show_state: true
show_label: false
name: >-
[[[ return variables.to_grid_label + " (" +
Math.round(states[variables.to_grid_entity].state /
states[variables.from_solar_entity].state * 100) + "%)" ]]]
styles:
grid:
- grid-template-areas: '"i" "s" "n"'
- grid-template-rows: 3rem 1fr 1fr
- grid-template-columns: auto
card:
- height: 80px
- box-shadow: none
- border: none
- padding: 0px 0px 0px 0px
icon:
- height: 2.5rem
- color: var(--energy-grid-return-color)
state:
- font-weight: bold
- font-size: 1rem
- align-self: end
- text-align: center
- color: var(--energy-grid-return-color)
label:
- font-size: 0.7rem
- align-self: center
name:
- font-size: 0.7rem
- align-self: start
- type: custom:button-card
size: 100%
entity: '[[[ return variables.to_battery_entity ]]]'
icon: mdi:home-battery
show_icon: true
show_name: true
show_state: true
show_label: false
name: >-
[[[ return variables.to_battery_label + " (" +
Math.round(states[variables.to_battery_entity].state /
states[variables.from_solar_entity].state * 100) + "%)" ]]]
styles:
grid:
- grid-template-areas: '"i" "s" "n"'
- grid-template-rows: 3rem 1fr 1fr
- grid-template-columns: auto
card:
- height: 80px
- box-shadow: none
- border: none
- padding: 0px 0px 0px 0px
icon:
- height: 2.5rem
- color: var(--energy-battery-in-color)
state:
- font-weight: bold
- font-size: 1rem
- align-self: end
- color: var(--energy-battery-in-color)
label:
- font-size: 0.7rem
- align-self: center
name:
- font-size: 0.7rem
- align-self: start
YAML-Code Home Consumption Card v2
type: custom:button-card
variables:
house_use_entity: sensor.senec_house_power
house_use_label: Haus
from_grid_entity: sensor.senec_grid_house_used_power
from_grid_label: aus Netz
from_solar_entity: sensor.senec_solar_house_used_power
from_solar_label: aus Solar
from_battery_entity: sensor.senec_battery_house_used_power
from_battery_label: aus Speicher
show_name: false
show_state: false
show_icon: false
styles:
card:
- padding: 0px
grid:
- grid-template-areas: '"karte"'
- grid-template-columns: 100%
- grid-template-rows: 100%
custom_fields:
karte:
- filter: opacity(100%)
- overflow: visible
custom_fields:
karte:
card:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
padding: 0px 0px 0px 0px;
}
mode: vertical
keep:
background: false
border_radius: true
box_shadow: false
margin: false
outer_padding: false
cards:
- type: grid
columns: 4
square: false
cards:
- type: vertical-stack
cards:
- type: custom:apexcharts-card
card_mod:
style: |
ha-card {
background: none;
border: none;
box-shadow: none;
height: 80px;
padding: 0px;
}
stacked: true
chart_type: donut
header:
show: false
floating: true
apex_config:
plotOptions:
pie:
customScale: 1.8
chart:
height: 85px
offsetX: 0
offsetY: 18
animations:
enabled: false
legend:
show: false
series:
- entity: '[[[ return variables.from_solar_entity ]]]'
name: Solar
color: var(--energy-solar-color)
show:
datalabels: false
- entity: '[[[ return variables.from_grid_entity ]]]'
name: Netz
color: var(--energy-grid-consumption-color)
show:
datalabels: false
- entity: '[[[ return variables.from_battery_entity ]]]'
name: Speicher
color: var(--energy-battery-out-color)
show:
datalabels: false
- type: custom:button-card
entity: '[[[ return variables.house_use_entity ]]]'
layout: vertical
show_name: false
show_state: true
show_icon: true
show_label: true
label: '[[[ return variables.house_use_label ]]]'
styles:
grid:
- grid-template-areas: '"top" "i" "s" "l" "bottom"'
- grid-template-columns: 100%
- grid-template-rows: 1fr 3fr auto auto 1fr
card:
- height: 80px
- margin-top: '-80px'
- background: none
- border: none
- box-shadow: none
state:
- font-weight: bold
- font-size: 0.7rem
label:
- font-size: 0.7rem
icon:
- height: 1.5rem
- color: grey
- type: custom:button-card
label: '[[[ return variables.from_grid_label ]]]'
size: 100%
entity: '[[[ return variables.from_grid_entity ]]]'
icon: mdi:transmission-tower-export
show_icon: true
show_name: true
show_state: true
show_label: false
name: >-
[[[ return variables.from_grid_label + " (" +
Math.round(states[variables.from_grid_entity].state /
states[variables.house_use_entity].state * 100) + "%)" ]]]
styles:
grid:
- grid-template-areas: '"i" "s" "n"'
- grid-template-rows: 3rem 1fr 1fr
- grid-template-columns: auto
card:
- height: 80px
- box-shadow: none
- border: none
- padding: 0px 0px 0px 0px
icon:
- height: 2.5rem
- color: var(--energy-grid-consumption-color)
state:
- font-weight: bold
- font-size: 1rem
- align-self: end
- text-align: center
- color: var(--energy-grid-consumption-color)
label:
- font-size: 0.7rem
- align-self: center
name:
- font-size: 0.7rem
- align-self: start
- type: custom:button-card
size: 100%
entity: '[[[ return variables.from_solar_entity ]]]'
icon: mdi:solar-power-variant
show_icon: true
show_name: true
show_state: true
show_label: false
name: >-
[[[ return variables.from_solar_label + " (" +
Math.round(states[variables.from_solar_entity].state /
states[variables.house_use_entity].state * 100) + "%)" ]]]
styles:
grid:
- grid-template-areas: '"i" "s" "n"'
- grid-template-rows: 3rem 1fr 1fr
- grid-template-columns: auto
card:
- height: 80px
- box-shadow: none
- border: none
- padding: 0px 0px 0px 0px
icon:
- height: 2.5rem
- color: var(--energy-solar-color)
state:
- font-weight: bold
- font-size: 1rem
- align-self: end
- color: var(--energy-solar-color)
label:
- font-size: 0.7rem
- align-self: center
name:
- font-size: 0.7rem
- align-self: start
- type: custom:button-card
size: 100%
entity: '[[[ return variables.from_battery_entity ]]]'
icon: mdi:home-battery
show_icon: true
show_name: true
show_state: true
show_label: false
name: >-
[[[ return variables.from_battery_label + " (" +
Math.round(states[variables.from_battery_entity].state /
states[variables.house_use_entity].state * 100) + "%)" ]]]
styles:
grid:
- grid-template-areas: '"i" "s" "n"'
- grid-template-rows: 3rem 1fr 1fr
- grid-template-columns: auto
card:
- height: 80px
- box-shadow: none
- border: none
- padding: 0px 0px 0px 0px
icon:
- height: 2.5rem
- color: var(--energy-battery-out-color)
state:
- font-weight: bold
- font-size: 1rem
- align-self: end
- color: var(--energy-battery-out-color)
label:
- font-size: 0.7rem
- align-self: center
name:
- font-size: 0.7rem
- align-self: start
8 Likes
Iāve tried everything to set slider colors.
So far I can set the slider color:
- type: custom:mushroom-light-card
entity: light.wled_controller
show_brightness_control: true
primary_info: none
secondary_info: none
icon_type: none
card_mod:
style:
mushroom-light-brightness-control$: |
mushroom-slider {
--slider-color: red;}
Or the slider background color:
- type: custom:mushroom-light-card
entity: light.wled_controller
show_brightness_control: true
primary_info: none
secondary_info: none
icon_type: none
card_mod:
style:
mushroom-light-brightness-control$:
mushroom-slider$: |
.slider-track-background {
background-color: blue !important;}
Bot not both - how do I combine these:
- type: custom:mushroom-light-card
entity: light.wled_controller
show_brightness_control: true
primary_info: none
secondary_info: none
icon_type: none
card_mod:
style:
mushroom-light-brightness-control$: |
mushroom-slider {
--slider-color: red;}
mushroom-light-brightness-control$:
mushroom-slider$: |
.slider-track-background {
background-color: blue !important;}
Thank you!
I believe I posted the updated card_mod section elsewhere, but not as a complete block. Hereās the full YAML, which should adjust based on the capabilities of the light.
type: custom:mushroom-light-card
entity: light.craft_room_wall_sconce
name: Wall Sconce
icon: mdi:wall-sconce
show_brightness_control: true
show_color_control: >-
{{ state_attr(config.entity, 'supported_color_modes')|contains('rgb') or
state_attr(config.entity, 'supported_color_modes')|contains('xy') }}
show_color_temp_control: >-
{{ state_attr(config.entity, 'supported_color_modes')|contains('color_temp')
}}
use_light_color: true
collapsible_controls: true
fill_container: true
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
layout: horizontal
card_mod:
style:
mushroom-state-info$:
.container: |
.primary {
{% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
flex-shrink: 0;
flex-grow: 0;
{% else %}
flex-shrink: 1;
flex-grow: 1;
{% endif %}
padding-left: 5px;
{% if state_attr(config.entity, 'rgb_color') == none %}
{% if states(config.entity) == 'on' %}
text-shadow: 0px 0px 7px orange;
--primary-text-color: #1a1a1a;
{% else %}
{% endif %}
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
--primary-text-color: #1a1a1a;
{% else %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 1}};
--primary-text-color: #fafafa;
{% endif %}
{% endif %}
}
.secondary {
{% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
{% if states(config.entity) == 'on' %}
position: absolute;
right: 15px;
top: 23px;
{% else %}
{% endif %}
{% else %}
flex-shrink: 1;
{% endif %}
flex-grow: 0;
margin-right: 10px;
padding: 0 5px;
{% if state_attr(config.entity, 'rgb_color') == none %}
{% if states(config.entity) == 'on' %}
text-shadow: 0px 0px 7px orange;
--secondary-text-color: #1a1a1a;
{% else %}
{% endif %}
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
--secondary-text-color: #1a1a1a;
{% else %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}};
--secondary-text-color: #fafafa;
{% endif %}
{% endif %}
}
.: |
.container {
display: flex;
{% if states(config.entity) == 'on' %}
z-index: 1;
flex-direction: row !important;
align-items: baseline;
pointer-events: none !important;
margin-left: 10px;
margin-right: -8px;
{% else %}
{% endif %}
}
mushroom-light-brightness-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
{% set rgb = (state_attr(config.entity, 'supported_color_modes')|contains('rgb') or state_attr(config.entity, 'supported_color_modes')|contains('xy')) and config.show_color_control != false %}
{% set color_temp = state_attr(config.entity, 'supported_color_modes')|contains('color_temp') and config.show_color_temp_control != false %}
{% if (rgb == true and color_temp == true) %}
width: calc(100% - 190px);
{% elif (rgb == false and color_temp == true) %}
width: calc(100% - 136px);
{% elif (rgb == true and color_temp == false) %}
width: calc(100% - 136px);
{% else %}
width: calc(100% - 80px);
{% endif %}
left: 68px;
top: 18.2%;
}
.slider-track-background {
background-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.75, state_attr(config.entity,'rgb_color')[1] * 0.75, state_attr(config.entity,'rgb_color')[2] * 0.75, 0.5}} !important;
}
mushroom-light-color-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
{% if (state_attr(config.entity, 'supported_color_modes')|contains('color_temp') == true and config.show_color_temp_control != false) %}
width: calc(100% - 190px);
{% else %}
width: calc(100% - 136px);
{% endif %}
left: 68px;
top: 18.2%
}
mushroom-light-color-temp-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
{% if ((state_attr(config.entity, 'supported_color_modes')|contains('rgb') or state_attr(config.entity, 'supported_color_modes')|contains('xy') == true) and config.show_color_control != false) %}
width: calc(100% - 190px);
{% else %}
width: calc(100% - 136px);
{% endif %}
left: 68px;
top: 18.2%
}
.: |
.actions {
display: flex;
flex-basis: min-content;
align-items: flex-end !important;
justify-content: flex-end !important;
{% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
flex-grow: 9;
flex-shrink: 1;
{% else %}
flex-grow: 0;
flex-shrink: 0;
{% endif %}
}
mushroom-state-info {
display: flex;
}
Or as a decluttering card:
light:
default:
- icon: lightbulb
- color_control: >-
{{ state_attr(config.entity, 'supported_color_modes')|contains('rgb')
or state_attr(config.entity, 'supported_color_modes')|contains('xy')
}}
- color_temp_control: >-
{{ state_attr(config.entity,
'supported_color_modes')|contains('color_temp') }}
card:
type: custom:mushroom-light-card
entity: light.[[entity]]
name: '[[name]]'
icon: mdi:[[icon]]
show_brightness_control: true
show_color_control: '[[color_control]]'
show_color_temp_control: '[[color_temp_control]]'
use_light_color: true
collapsible_controls: true
fill_container: true
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
layout: horizontal
card_mod:
style:
mushroom-state-info$:
.container: |
.primary {
{% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
flex-shrink: 0;
flex-grow: 0;
{% else %}
flex-shrink: 1;
flex-grow: 1;
{% endif %}
padding-left: 5px;
{% if state_attr(config.entity, 'rgb_color') == none %}
{% if states(config.entity) == 'on' %}
text-shadow: 0px 0px 7px orange;
--primary-text-color: #1a1a1a;
{% else %}
{% endif %}
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
--primary-text-color: #1a1a1a;
{% else %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 1}};
--primary-text-color: #fafafa;
{% endif %}
{% endif %}
}
.secondary {
{% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
{% if states(config.entity) == 'on' %}
position: absolute;
right: 15px;
top: 23px;
{% else %}
{% endif %}
{% else %}
flex-shrink: 1;
{% endif %}
flex-grow: 0;
margin-right: 10px;
padding: 0 5px;
{% if state_attr(config.entity, 'rgb_color') == none %}
{% if states(config.entity) == 'on' %}
text-shadow: 0px 0px 7px orange;
--secondary-text-color: #1a1a1a;
{% else %}
{% endif %}
{% else %}
{% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
--secondary-text-color: #1a1a1a;
{% else %}
text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}};
--secondary-text-color: #fafafa;
{% endif %}
{% endif %}
}
.: |
.container {
display: flex;
{% if states(config.entity) == 'on' %}
z-index: 1;
flex-direction: row !important;
align-items: baseline;
pointer-events: none !important;
margin-left: 10px;
margin-right: -8px;
{% else %}
{% endif %}
}
mushroom-light-brightness-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
{% set rgb = (state_attr(config.entity, 'supported_color_modes')|contains('rgb') or state_attr(config.entity, 'supported_color_modes')|contains('xy')) and config.show_color_control != false %}
{% set color_temp = state_attr(config.entity, 'supported_color_modes')|contains('color_temp') and config.show_color_temp_control != false %}
{% if (rgb == true and color_temp == true) %}
width: calc(100% - 190px);
{% elif (rgb == false and color_temp == true) %}
width: calc(100% - 136px);
{% elif (rgb == true and color_temp == false) %}
width: calc(100% - 136px);
{% else %}
width: calc(100% - 80px);
{% endif %}
left: 68px;
top: 18.2%;
}
.slider-track-background {
background-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.75, state_attr(config.entity,'rgb_color')[1] * 0.75, state_attr(config.entity,'rgb_color')[2] * 0.75, 0.5}} !important;
}
mushroom-light-color-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
{% if (state_attr(config.entity, 'supported_color_modes')|contains('color_temp') == true and config.show_color_temp_control != false) %}
width: calc(100% - 190px);
{% else %}
width: calc(100% - 136px);
{% endif %}
left: 68px;
top: 18.2%
}
mushroom-light-color-temp-control$:
mushroom-slider$: |
.container {
position: absolute;
flex-basis: max-content;
{% if ((state_attr(config.entity, 'supported_color_modes')|contains('rgb') or state_attr(config.entity, 'supported_color_modes')|contains('xy') == true) and config.show_color_control != false) %}
width: calc(100% - 190px);
{% else %}
width: calc(100% - 136px);
{% endif %}
left: 68px;
top: 18.2%
}
.: |
.actions {
display: flex;
flex-basis: min-content;
align-items: flex-end !important;
justify-content: flex-end !important;
{% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
flex-grow: 9;
flex-shrink: 1;
{% else %}
flex-grow: 0;
flex-shrink: 0;
{% endif %}
}
mushroom-state-info {
display: flex;
}
1 Like
Thank you!
however my RGBW lights have a different ācolor_modesā set so I would probably have to add a bunch of āorā in the code to cover āhsā but donāt want to mess with your code. If you have a chance to update it, great, otherwise Iāll give it a try later. Thank you!
min_color_temp_kelvin: 2000
max_color_temp_kelvin: 6535
min_mireds: 153
max_mireds: 500
effect_list:
- Solid
- Wake up
- Cycle up
- Cycle down
- Random
supported_color_modes:
- color_temp
- hs
color_mode: hs
brightness: 158
hs_color:
- 256
- 100
rgb_color:
- 67
- 0
- 255
xy_color:
- 0.16
- 0.051
effect: Solid
friendly_name: BULBRGBWW2
supported_features: 36
1 Like
Try this:
type: custom:mushroom-light-card
entity: light.bulbrgbww2
show_brightness_control: true
primary_info: none
secondary_info: none
icon_type: none
card_mod:
style:
mushroom-light-brightness-control$:
mushroom-slider$: |
.slider-track-background {
background-color: blue !important;}
.: |
mushroom-slider {
--slider-color: red;}
Also possible to just do:
card_mod:
style:
mushroom-light-brightness-control$: |
mushroom-slider {
--slider-bg-color: red !important;
--slider-color: blue !important;
}
or even this:
card_mod:
style:
mushroom-light-brightness-control$:
mushroom-slider$: |
.slider-track-background {
background-color: blue !important;
}
.slider-track-active {
background-color: red !important;
}
@zgadson but FYI. not the right place to ask questions or give answers. its specifically in the first post of the topic. if you want to ask questions regarding the mushroom cards go to the main mushroom thread or feel free to ask them in my guide where i can try and help you out
2 Likes
Hello,
I thought Iād share the 
Solar information in case anyone else needs it.
- Mushroom card 
- Apexcharts card 
- Card mod 
- Layout card
- Custom brand icons 
- More Inverter active power (W) - active and inactive status (pulses blue if active, gray if inverter does not detect sun and is not charging)
- PW Power summary for several inverters (W) ā active and inactive status (orange if active, gray if not charging)
- Inverters with Daily yield display (kWh)
- Accumulator charge level
- Apexcharts - Return to Grid - Grid Consumption - Total Yield 24h. In the middle, current power is indicated with flow direction (the icon and text are green if there is an export and the icon and text are red if there is an import.
- Daily Grid Consumption (kWh)
- Return to grid (kWh)
- Daily Yield (kWh)
type: vertical-stack
cards:
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 1fr 1fr 1fr
cards:
- type: custom:mushroom-template-card
entity: sensor.sun2000_10ktl_active_power
primary: 10KTL Inverter
secondary: '{{(states(''sensor.sun2000_10ktl_active_power''))}} W'
layout: vertical
fill_container: false
icon: |
{% set state=states('sensor.sun2000_10ktl_device_status') %}
{% if state=='On-grid' %}
phu:huawei-solar-inverter
{% elif state!='Standby:no irradiation' %}
phu:huawei-solar-inverter
{% endif %}
icon_color: |
{% set state=states('sensor.sun2000_10ktl_device_status') %}
{% if state=='On-grid' %}
#41bdf5
{% elif state!='Standby:no irradiation' %}
disabled
{% endif %}
secondary_info: state
multiline_secondary: false
badge_icon: ''
badge_color: ''
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none !important;
{% if is_state('sensor.sun2000_10ktl_device_status', 'On-grid') %}
--shape-animation: blink 5s linear infinite;
{% endif %}
}
@keyframes blink {
30% {opacity: 0;}
}
.: |
ha-card {
margin-top: 10px;
--icon-size: 50px;
--icon-symbol-size: 30px;
--card-secondary-font-size: 10px;
--card-primary-font-size: 12px;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
- type: custom:mushroom-template-card
entity: sensor.sun2000_6ktl_active_power
primary: 6KTL Inverter
secondary: '{{(states(''sensor.sun2000_6ktl_active_power''))}} W'
layout: vertical
fill_container: false
icon: |
{% set state=states('sensor.sun2000_6ktl_device_status') %}
{% if state=='On-grid' %}
phu:huawei-solar-inverter
{% elif state!='Standby:no irradiation' %}
phu:huawei-solar-inverter
{% endif %}
icon_color: |
{% set state=states('sensor.sun2000_6ktl_device_status') %}
{% if state=='On-grid' %}
#41bdf5
{% elif state!='Standby:no irradiation' %}
disabled
{% endif %}
secondary_info: state
multiline_secondary: false
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none !important;
{% if is_state('sensor.sun2000_6ktl_device_status', 'On-grid') %}
--shape-animation: blink 5s linear infinite;
{% endif %}
}
@keyframes blink {
30% {opacity: 0;}
}
.: |
ha-card {
margin-top: 10px;
--icon-size: 50px;
--icon-symbol-size: 30px;
--card-secondary-font-size: 10px;
--card-primary-font-size: 12px;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
- type: custom:mushroom-template-card
entity: sensor.solar_inverter_daily_power
primary: PV Power
secondary: |-
{% set state=states('sensor.solar_inverter_daily_power') %}
{% if state | is_number and state | float > 0 %}
{{(states('sensor.solar_inverter_daily_power'))}} W
{% elif state | is_number and state | float < 0 %}
{{(states('sensor.solar_inverter_daily_power'))}} W
{% else %}
{{(states('sensor.solar_inverter_daily_power'))}} W
{% endif %}
layout: vertical
fill_container: false
icon: |-
{% set state=states('sensor.solar_inverter_daily_power') %}
{% if state | is_number and state | float > 5 %}
mdi:solar-panel-large
{% elif state | is_number and state | float < 0 %}
mdi:solar-panel-large
{% else %}
mdi:grid-off
{% endif %}
icon_color: |-
{% set state=states('sensor.solar_inverter_daily_power') %}
{% if state | is_number and state | float > 0 %}
#FFA500
{% elif state | is_number and state | float < 0 %}
#9ACD32
{% else %}
disabled
{% endif %}
secondary_info: state
multiline_secondary: true
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none !important;
.: |
ha-card {
margin-top: 10px;
--icon-size: 50px;
--icon-symbol-size: 30px;
--card-secondary-font-size: 10px;
--card-primary-font-size: 12px;
padding-top: 5px !important;
padding-bottom: 5px !important;
--secondary-text-color: {% set state=states('sensor.solar_inverter_daily_power') %} {% if state | is_number
and state | float > 100 %}
#9ACD32
{% elif state | is_number and state | float < 0 %}
#f77c7c
{% else %}
#A9A9A9
{% endif %};
}
}
card_mod:
style: |
ha-card {
height: 150px;
}
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 1fr 2fr
grid-template-rows: auto
margin: 0px
padding: 0px
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: sensor.sun2000_10ktl_daily_yield
icon: mdi:solar-power-variant
icon_color: '#FFA500'
hold_action:
action: none
primary_info: name
secondary_info: state
name: 10KTL
card_mod:
style: |
:host {
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 10px;
}
ha-card {
margin-top: -10px;
margin-right: -8px;
}
- type: custom:mushroom-entity-card
entity: sensor.sun2000_6ktl_daily_yield
icon_color: '#FFA500'
icon: mdi:solar-power-variant
hold_action:
action: none
primary_info: name
secondary_info: state
name: 6KTL
card_mod:
style: |
:host {
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 10px;
}
ha-card {
margin-top: -10px;
margin-right: -8px;
}
- type: custom:mushroom-entity-card
entity: sensor.luna2000_battery_state_of_capacity
icon_color: '#9ACD32'
hold_action:
action: none
primary_info: name
secondary_info: state
name: Battery
card_mod:
style: |
:host {
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 10px;
}
ha-card {
margin-top: -10px;
margin-right: -8px;
}
card_mod:
style: |
ha-card {
--ha-card-box-shadow: 0px;
}
- type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
experimental:
color_threshold: true
chart_type: radialBar
graph_span: 5day1s
span:
end: day
show:
loading: false
cache: true
update_interval: 10min
apex_config:
chart:
height: 250px
plotOptions:
radialBar:
offsetY: -20
startAngle: -135
endAngle: 135
hollow:
size: 45%
dataLabels:
name:
show: false
value:
show: false
legend:
show: false
stroke:
dashArray: 0
lineCap: flat
series:
- entity: sensor.p1_teljes_energia_visszataplalas
type: area
name: CPU
color_threshold:
- value: 0
color: rgb(183, 201, 145)
- value: 10
color: rgb(173, 199, 117)
- value: 30
color: rgb(154, 205, 50)
group_by:
func: diff
duration: 1d
- entity: sensor.p1_teljes_energia_vetelezes
type: area
name: RAM
color_threshold:
- value: 0
color: rgb(245, 201, 201)
- value: 25
color: rgb(245, 154, 154)
- value: 35
color: rgb(247, 124, 124)
group_by:
func: diff
duration: 1d
- entity: sensor.solar_panel_total_yield
type: area
name: SSD
color_threshold:
- value: 0
color: rgb(247, 210, 141)
- value: 15
color: rgb(247, 197, 104)
- value: 30
color: rgb(255, 165, 0)
group_by:
func: diff
duration: 1d
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:mushroom-template-card
entity: sensor.p1_aktiv_teljesitmeny
tap_action:
action: more-info
primary: |-
{% set state=states('sensor.p1_aktiv_teljesitmeny') %}
{% if state | is_number and state | float > 0 %}
- {{(states('sensor.p1_aktiv_teljesitmeny'))}} kWh
{% elif state | is_number and state | float < 0 %}
{{(states('sensor.p1_aktiv_teljesitmeny'))}} kWh
{% else %}
No data
{% endif %}
icon_color: |-
{% set state=states('sensor.p1_aktiv_teljesitmeny') %}
{% if state | is_number and state | float > 0 %}
#f77c7c
{% elif state | is_number and state | float < 0 %}
#9ACD32
{% else %}
disabled
{% endif %}
icon: |-
{% set state=states('sensor.p1_aktiv_teljesitmeny') %}
{% if state | is_number and state | float > 0 %}
mdi:transmission-tower-export
{% elif state | is_number and state | float < 0 %}
mdi:transmission-tower-import
{% else %}
mdi:transmission-tower-off
{% endif %}
layout: vertical
card_mod:
style: |
:host {
--mush-card-primary-font-size: 12px;
--mush-icon-border-radius: 50%;
--mush-icon-size: 72px;
--primary-text-color: {% set state=states('sensor.p1_aktiv_teljesitmeny') %} {% if state | is_number
and state | float > 0 %}
#f77c7c
{% elif state | is_number and state | float < 0 %}
#32CD32
{% else %}
black
{% endif %};
}
ha-card {
background: transparent;
margin-top: -112px;
width: 120px;
margin-left: auto;
margin-right: auto;
}
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 1fr 1fr 1fr
grid-template-rows: auto
margin: 0px
padding: 0px
cards:
- type: custom:mushroom-template-card
icon: mdi:transmission-tower-export
layout: vertical
primary: Grid Consumption
icon_color: '#f77c7c'
secondary: '{{(states(''sensor.energia_vetelezes_napi''))}} kWh'
entity: sensor.energia_vetelezes_napi
tap_action:
action: more-info
card_mod:
style: |
:host {
margin-top: -10px;
--mush-icon-size: 60px;
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 10px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
badge_icon: ''
badge_color: ''
- type: custom:mushroom-template-card
icon: mdi:transmission-tower-import
layout: vertical
primary: Return to grid
icon_color: '#9ACD32'
tap_action:
action: more-info
secondary: '{{(states(''sensor.energia_visszataplalas_napi''))}} kWh'
entity: sensor.energia_visszataplalas_napi
card_mod:
style: |
:host {
margin-top: -10px;
--mush-icon-size: 60px;
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 10px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
- type: custom:mushroom-template-card
icon: mdi:sun-wireless
layout: vertical
primary: Daily Yield
icon_color: '#FFA500'
tap_action:
action: more-info
secondary: '{{(states(''sensor.solar_panel_daily_yield''))}} kWh'
entity: sensor.solar_panel_daily_yield
card_mod:
style: |
:host {
margin-top: -10px;
--mush-icon-size: 60px;
--mush-card-primary-font-size: 12px;
--mush-card-secondary-font-size: 10px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
22 Likes
