I have it absolutely same. Did you solve it?
Yeah that’s my issue is it works on my tablet but not my phone so I’ll have to play with it. I think I may just remake it with button card as it’s a bit glitchy at times. Editing so much of the mushroom card probably doesn’t help. Icons flash from default to the ones I want, doesn’t always change color correctly etc. Shall see how that goes!
Thanks again for the help.
1 Like
Sorry to say I haven’t solved it yet
Hi together,
today is day to jump out of the window 
At the moment i cant find a solution, for i think a very simple task…
i have a mushroom template card and want to call a popup with browser_mod and change the background-color of the popup.
type: custom:mushroom-template-card
primary: Test Template Card
secondary: ''
icon: mdi:home
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
deviceID:
- this
dismissable: true
title: ' '
content:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Dummy
alignment: left
title_tap_action:
action: none
subtitle_tap_action:
action: none
card_mod:
style: |
:host {
--popup-background-color: red !important;
--popup-min-width: 450px;
}
ha-dialog$: |
div.mdc-dialog__scrim {
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(10px) !important;
background-color: rgba(0,0,0,0.1) !important;
}
i post it here, because i use only mushroom card and mushroom tempalte.
is there anything, what block’s the background-change in mushroom?
thx in advance
Think i got it now. use this instead of the margin i suggested
position: absolute;
top: 30px;
right: 10px;
width: fit-content;
border-radius: 100px !important;
1 Like
That worked for me. Thanks!
Hi everybody. Please tell me, I want there to be a key in this panel that opens additional information in which there will be detailed graphs. Either popup, but then on the whole map
card:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: grid
layout:
width: 100%
grid-template-columns: 10% 10% 10% 10%
grid-template-rows: auto
cards: null
- square: false
columns: 5
type: grid
cards:
- type: custom:mushroom-template-card
primary: ''
alignment: center
secondary: ''
icon: mdi:home
icon_color: blue
tap_action:
action: navigate
navigation_path: /lovelace
layout: vertical
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
margin-top: -3px;
width: auto;
margin-left: px;
margin-right: auto;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
- type: custom:mushroom-entity-card
entity: sensor.processor_use
primary_info: state
secondary_info: name
name: CPU
icon_type: none
layout: vertical
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
margin-top: px;
width: auto;
margin-left: -25px;
margin-right: auto;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
browser_id: THIS
large: false
size: normal
content:
type: custom:stack-in-card
title: null
mode: vertical
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: sensor.memory_use_percent
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
ha-dialog {
--dialog-surface-position: static;
--dialog-content-position: static;
--dialog-surface-margin-top: 40px;
--mdc-dialog-min-width: 97vw;
--mdc-dialog-max-width: 97vw;
--ha-dialog-border-radius: var(--popup-border-radius, 28px);
}
:host([wide]) .content {
width: 100vw;
}
primary: >-
Использование ОЗУ: {{
states('sensor.memory_use_percent') | round(0) }}%
secondary: ''
icon: mdi:memory
icon_color: gray
tap_action:
action: more-info
- type: custom:layout-card
layout_type: masonry
layout:
width: 300
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
cards:
- type: custom:mini-graph-card
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
color_thresholds:
- value: 90
color: '#f53639'
- FF6600
- value: 60
color: '#25cc49'
entities:
- entity: sensor.memory_use_percent
name: Temperature
hours_to_show: 3
points_per_hour: 16
line_width: 3
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
- type: custom:mushroom-template-card
entity: sensor.processor_use
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
primary: >-
Использование процессора: {{
states('sensor.processor_use') | round(0) }}%
icon: mdi:cpu-64-bit
icon_color: gray
tap_action:
action: more-info
- type: custom:layout-card
layout_type: masonry
layout:
width: 300
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.processor_use
hours_to_show: 3
points_per_hour: 16
line_width: 3
color_thresholds:
- value: 90
color: '#f53639'
- FF6600
- value: 60
color: '#25cc49'
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: sensor.cpu_temperature
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
primary: >-
Температура процессора: {{
states('sensor.cpu_temperature') | round(0) }} °C
icon: mdi:cpu-64-bit
icon_color: gray
tap_action:
action: more-info
- type: custom:layout-card
layout_type: masonry
layout:
width: 300
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.cpu_temperature
name: temperature
hours_to_show: 3
points_per_hour: 16
line_width: 3
lower_bound: 20
upper_bound: 80
color_thresholds:
- value: 80
color: '#f53639'
- FF6600
- value: 60
color: '#25cc49'
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
- type: custom:mushroom-entity-card
entity: sensor.memory_use_percent
primary_info: state
secondary_info: name
name: Memory
icon_type: none
layout: vertical
card_mod:
style: |
ha-card {
margin-top: px;
width: auto;
margin-left: -25px;
margin-right: auto;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
- type: custom:mushroom-entity-card
entity: sensor.cpu_temperature
primary_info: state
secondary_info: name
name: CPU
icon_type: none
layout: vertical
card_mod:
style: |
ha-card {
margin-top: px;
width: auto;
margin-left: -25px;
margin-right: auto;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
- type: custom:mushroom-entity-card
entity: sensor.disk_use_percent_config
primary_info: state
secondary_info: name
name: Storage
icon_type: none
layout: vertical
card_mod:
style: |
ha-card {
margin-top: px;
width: auto;
margin-left: -25px;
margin-right: auto;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
graph:
type: custom:stack-in-card
title: null
mode: vertical
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: sensor.memory_use_percent
primary: >-
Использование ОЗУ: {{ states('sensor.memory_use_percent') | round(0)
}}%
secondary: ''
icon: mdi:memory
icon_color: gray
tap_action:
action: more-info
- type: custom:layout-card
layout_type: masonry
layout:
width: 300
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
cards:
- type: custom:mini-graph-card
color_thresholds:
- value: 90
color: '#f53639'
- FF6600
- value: 60
color: '#25cc49'
entities:
- entity: sensor.memory_use_percent
name: Temperature
hours_to_show: 3
points_per_hour: 16
line_width: 3
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: sensor.processor_use
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
primary: >-
Использование процессора: {{ states('sensor.processor_use') |
round(0) }}%
icon: mdi:cpu-64-bit
icon_color: gray
tap_action:
action: more-info
- type: custom:layout-card
layout_type: masonry
layout:
width: 300
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.processor_use
hours_to_show: 3
points_per_hour: 16
line_width: 3
color_thresholds:
- value: 90
color: '#f53639'
- FF6600
- value: 60
color: '#25cc49'
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: sensor.cpu_temperature
primary: >-
Температура процессора: {{ states('sensor.cpu_temperature') |
round(0) }} °C
icon: mdi:cpu-64-bit
icon_color: gray
tap_action:
action: more-info
- type: custom:layout-card
layout_type: masonry
layout:
width: 300
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.cpu_temperature
name: temperature
hours_to_show: 3
points_per_hour: 16
line_width: 3
lower_bound: 20
upper_bound: 80
color_thresholds:
- value: 80
color: '#f53639'
- FF6600
- value: 60
color: '#25cc49'
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
--ha-card-border-width: 0;
}
1 Like
Based on what you have made i have made the below:
type: custom:stack-in-card
cards:
- square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-light-card
entity: light.office_lights_toggle
name: All Lights
show_brightness_control: true
layout: horizontal
use_light_color: true
show_color_temp_control: true
show_color_control: true
card_mod:
style:
mushroom-shape-icon$: |
.shape:active {
transform: scale(1.2);
}
.: |
mushroom-light-brightness-control,
mushroom-light-color-temp-control, mushroom-light-color-control
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
opacity: 1;
--control-height: 102px;
--control-border-radius: var(--ha-card-border-radius, 12px);
--rgb-disabled: var(--rgb-card-background-color);
}
mushroom-state-item {
z-index: 1;
max-width: fit-content;
margin-bottom: 0px;
pointer-events: none;
}
mushroom-shape-icon {
pointer-events: auto;
--shape-color: transparent !important;
--icon-color: black !important;
--icon-symbol-size: 0.7em;
}
mushroom-button {
position: absolute;
width: calc(var(--control-height) * var(--control-button-ratio)) !important;
height: var(--control-height) !important;
right: var(--spacing);
border-radius: 100px;
--icon-color: black;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.46);
}
mushroom-button:nth-child(3) {
right: calc(5.2 *var(--spacing) + var(--control-height) * var(--control-button-ratio));
background: white !important;
}
mushroom-button:nth-child(2) {
background: white !important;
}
.actions :not(:last-child) {
margin-right: 45px !important;
}
ha-card {
padding: 30px 10px !important;
--primary-text-color: black;
--secondary-text-color: black;
width: 204% !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state(entity, 'off') %}
mdi:chevron-down
{% elif is_state(entity, 'on') %}
mdi:chevron-up
{% endif %}
tap_action:
action: toggle
entity: input_boolean.thermostat_dropdown
icon_color: 31,31,31
card_mod:
style: |
ha-card {
--chip-icon-size: 0.7em;
--chip-padding: 0px 6px;
--chip-height: 40px;
--chip-border-radius: 100px;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.46) !important;
}
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: white;
position: absolute;
top: 30px;
right: 10px;
width: fit-content;
border-radius: 100px !important;
}
- type: conditional
conditions:
- entity: input_boolean.thermostat_dropdown
state: 'on'
card:
type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.office_main_light
name: Main Light
show_brightness_control: true
tap_action:
action: toggle
use_light_color: true
show_color_temp_control: true
show_color_control: true
icon_color: none
card_mod:
style:
mushroom-shape-icon$: |
.shape:active {
transform: scale(1.2);
}
.: |
mushroom-light-brightness-control,
mushroom-light-color-temp-control,
mushroom-light-color-control {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
opacity: 1;
--control-height: 102px;
--control-border-radius: var(--ha-card-border-radius, 12px);
--rgb-disabled: var(--rgb-card-background-color);
}
mushroom-state-item {
z-index: 1;
max-width: fit-content;
margin-bottom: 0px;
pointer-events: none;
}
mushroom-shape-icon {
pointer-events: auto;
--shape-color: transparent !important;
--icon-color: black !important;
--icon-symbol-size: 0.7em;
}
ha-card {
padding: 30px 10px !important;
--primary-text-color: black;
--secondary-text-color: black;
margin: 10px 0px 0px 0px !important;
width: 98% !important;
}
mushroom-button {
border-radius: 100px !important;
width: 30px;
height: 30px;
--control-icon-size: 15px;
--icon-color: black;
background: white !important;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.46) !important;
}
mushroom-button:nth-child(3) {
position: absolute;
top: 62px;
right: 52px;
background: white !important;
}
mushroom-button:nth-child(2) {
position: absolute;
top: 62px;
right: 5px;
margin-left: 35px !important;
background: white !important;
}
- type: custom:mushroom-light-card
entity: light.office_desk_lamp
name: Desk Lamp
show_brightness_control: true
tap_action:
action: toggle
use_light_color: true
show_color_temp_control: true
show_color_control: true
icon_color: none
card_mod:
style:
mushroom-shape-icon$: |
.shape:active {
transform: scale(1.2);
}
.: |
mushroom-light-brightness-control,
mushroom-light-color-temp-control,
mushroom-light-color-control {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
opacity: 1;
--control-height: 102px;
--control-border-radius: var(--ha-card-border-radius, 12px);
--rgb-disabled: var(--rgb-card-background-color);
}
mushroom-state-item {
z-index: 1;
max-width: fit-content;
margin-bottom: 0px;
pointer-events: none;
}
mushroom-shape-icon {
pointer-events: auto;
--shape-color: transparent !important;
--icon-color: black !important;
--icon-symbol-size: 0.7em;
}
ha-card {
padding: 30px 10px !important;
--primary-text-color: black;
--secondary-text-color: black;
margin: 10px 0px 0px 0px !important;
width: 100% !important;
}
mushroom-button {
border-radius: 100px !important;
width: 30px;
height: 30px;
--control-icon-size: 15px;
--icon-color: black;
background: white !important;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.46) !important;
}
mushroom-button:nth-child(3) {
position: absolute;
top: 62px;
right: 52px;
background: white !important;
}
mushroom-button:nth-child(2) {
position: absolute;
top: 62px;
right: 5px;
margin-left: 35px !important;
background: white !important;
}
Only thing left to do now is get rid of those pesky lines from the grid card
6 Likes
Please read this and try and post your question formatted correctly 
1 Like
i havent fixed everything you wanted for based on the card mod css that i see in your post.
but this should get you on the right track
type: custom:mushroom-template-card
primary: Test Template Card
secondary: ''
icon: mdi:home
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
deviceID:
- this
dismissable: true
title: ' '
content:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Dummy
alignment: left
title_tap_action:
action: none
subtitle_tap_action:
action: none
card_mod:
style: |
:host {
background: red !important;
width: 450px;
}
ha-dialog$: |
div.mdc-dialog__scrim {
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(10px) !important;
background-color: rgba(0,0,0,0.1) !important;
}
What exactly do I need to change?)
Read the post i linked to you. you have posted your code in a pastebin. no one is going help you unless you format your post correctly.
post your code like this example:
type: custom:mushroom-entity-card
entity: script.bathroom_fan_timer
primary_info: none
secondary_info: none
icon: mdi:power
card_mod:
style: |
ha-card {
position: absolute;
}
1 Like
Thx a lot, sometimes its so easy
Looks awesome! If you’re interested I remade it with button card and slider v2. Seems to behave nicer for me vs heavily modifying mushroom. Still need to fix the width problem on this one yet and edit the ripple effect.
type: custom:button-card
entity: light.living_room_lights
name: Living room
label: |
[[[ if (entity.state == 'on')
return (states['sensor.livingroom_count'].state) + ' On • ' + Math.round(entity.attributes.brightness/2.55) + '%';
return entity.state;
]]]
icon: |
[[[
if (entity.state == 'on')
return "fapro:light-group-fill";
return "fapro:light-group";
]]]
size: 28px
show_name: true
show_label: true
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: light.living_room_lights
allowTapping: true
styles:
card:
- height: 100%
container:
- width: 100%
- height: 100%
- position: relative
- overflow: hidden
- border-radius: 35px
track:
- width: 100%
- height: 100%
- position: relative
- background: |
[[[
if (entity.state == "on") return "#ffefc9";
else return "#f2f6fc";
]]]
progress:
- height: 100%
- background: '#ffe082'
- position: absolute
thumb:
- background: none
button:
card:
type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state(entity, 'off') %}
mdi:chevron-down
{% elif is_state(entity, 'on') %}
mdi:chevron-up
{% endif %}
tap_action:
action: toggle
entity: input_boolean.living_room_toggle
icon_color: |-
{% if is_state('light.living_room_lights', 'off') %}
31,31,31
{% elif is_state('light.living_room_lights', 'on') %}
115,92,0
{% endif %}
card_mod:
style: |
ha-card {
--chip-icon-size: 0.7em;
--chip-padding: 0px 6px;
--chip-height: 40px;
--chip-border-radius: 100px;
}
styles:
grid:
- grid-template-areas: |
"i n button"
"i l button"
- grid-template-rows: 1fr 1fr
- grid-template-columns: 68px min-content 2fr
card:
- height: 100%
- border-radius: 35px
- background-color: |
[[[
if (entity.state == 'on')
return "#ffefc9";
return "#f2f6fc";
]]]
icon:
- z-index: 1
- color: |
[[[
if (entity.state == 'on')
return "#735c00";
return "#1f1f1f";
]]]
name:
- z-index: 1
- pointer-events: none
- justify-self: start
- font-weight: 600
- font-size: 15px
- margin: 18% 0% 0% 0%
- color: |
[[[
if (entity.state == 'on')
return "#735c00";
return "#1f1f1f";
]]]
label:
- z-index: 1
- pointer-events: none
- justify-self: start
- text-transform: capitalize
- font-weight: 500
- font-size: 14px
- margin: 0% 0% 16% 0%
- color: |
[[[
if (entity.state == 'on')
return "#735c00";
return "#1f1f1f";
]]]
custom_fields:
button:
- z-index: 1
- justify-self: end
- padding-right: 24px
slider:
- z-index: 0
- position: absolute
- width: 100%
- height: 100%
25 Likes
I’m sure it has been dealt with many times before, but how did you create the counter of lights per room?
Here’s a version with a temperature and hue slider, now that you made it with button card Im for sure gonna combine that and replace the mushroom version. Nice!
type: custom:expander-card
gap: 0.6em
padding: 0em
clear: true
title: Expander
overlay-margin: 2em
child-padding: 0.5em
button-background: var(--hki-secondary-text-color)
title-card:
type: custom:mushroom-light-card
entity: light.basement_lights
show_brightness_control: true
tap_action:
action: toggle
icon_color: none
use_light_color: true
card_mod:
style:
mushroom-light-brightness-control$: |
mushroom-slider {
opacity: 0.6;
}
.: |
mushroom-light-brightness-control {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
opacity: 0.6;
--control-height: 102px;
--control-border-radius: 35px;
--rgb-disabled: var(--card-background-color);
}
mushroom-state-item {
z-index: 1;
max-width: fit-content;
margin-bottom: 0px;
pointer-events: none;
}
mushroom-shape-icon {
pointer-events: auto;
--shape-color: transparent !important;
--shape-color-disabled: transparent !important;
}
ha-card {
--icon-symbol-size: 0.6em;
padding: 30px 10px !important;
--card-primary-font-weight: 700;
--card-secondary-font-weight: 700;
--keep-background: true;
{% if is_state(config.entity, 'on') %}
border-radius: 35px !important;
{% else %}
background: rgba(238, 238, 238, 0.5);
{% endif %}
}
ha-card:active {
transform: scale(0.975);
transition: 0s;
}
expanded: false
title-card-button-overlay: true
cards:
- type: custom:my-slider-v2
entity: light.basement_lights
colorMode: hue
intermediate: false
disableScroll: true
styles:
card:
- height: 50px
- border-radius: 24px
container:
- width: 100%
- height: 100%
- position: relative
- overflow: hidden
- border-radius: 24px
track:
- width: 100%
- height: 100%
- position: relative
- background: >-
linear-gradient(to left, #f00 0%, #ff0 17%, #0f0 33%,
#0ff 50%, #00f 66%, #f0f 83%, #f00 100%)
progress:
- height: 100%
- background: >-
linear-gradient(to left, #f00 0%, #ff0 17%, #0f0 33%,
#0ff 50%, #00f 66%, #f0f 83%, #f00 100%)
- position: absolute
- width: 0.00%
thumb:
- height: 100%
- background: black
- position: absolute
- right: '-5px'
- width: 10px
- type: custom:my-slider-v2
entity: light.basement_lights
colorMode: temperature
intermediate: false
disableScroll: true
styles:
card:
- height: 50px
- border-radius: 24px
container:
- width: 100%
- height: 100%
- position: relative
- overflow: hidden
- border-radius: 24px
track:
- width: 100%
- height: 100%
- position: relative
- background: >-
linear-gradient(to right, rgb(255, 160, 0) 0%, white
100%)
progress:
- height: 100%
- background: >-
linear-gradient(to right, rgb(255, 160, 0) 0%, white
100%)
- position: absolute
- width: 0.00%
thumb:
- height: 100%
- background: black
- position: absolute
- right: '-5px'
- width: 10px
2 Likes
Made it again with your button-card, thanks!:
Still working on the spacing as you can see though, weird…
type: custom:stack-in-card
cards:
- type: custom:button-card
entity: light.basement_lights
name: Basement
label: |
[[[ if (entity.state == 'on')
return (states['light.basement_lights'].state) + ' On • ' + Math.round(entity.attributes.brightness/2.55) + '%';
return entity.state;
]]]
icon: |
[[[
if (entity.state == 'on')
return "mdi:lightbulb-group-outline";
return "mdi:lightbulb-group";
]]]
size: 28px
show_name: true
show_label: true
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: light.basement_lights
allowTapping: true
styles:
card:
- height: 100%
container:
- width: 100%
- height: 100%
- position: relative
- overflow: hidden
- border-radius: 35px
track:
- width: 100%
- height: 100%
- position: relative
- background: |
[[[
if (entity.state == 'on')
return "#ffefc9";
else return "#f2f6fc";
]]]
progress:
- height: 100%
- background: '#ffe082'
- position: absolute
thumb:
- background: none
button:
card:
type: custom:mushroom-chips-card
chips:
- type: template
icon: |-
{% if is_state(entity, 'off') %}
mdi:chevron-down
{% elif is_state(entity, 'on') %}
mdi:chevron-up
{% endif %}
tap_action:
action: toggle
entity: input_boolean.basement_light_toggle
icon_color: |-
{% if is_state('light.basement_lights', 'off') %}
31,31,31
{% elif is_state('light.basement_lights', 'on') %}
115,92,0
{% endif %}
card_mod:
style: |
ha-card {
--chip-icon-size: 0.7em;
--chip-padding: 0px 6px;
--chip-height: 40px;
--chip-border-radius: 100px;
}
styles:
grid:
- grid-template-areas: |
"i n button"
"i l button"
- grid-template-rows: 1fr 1fr
- grid-template-columns: 68px min-content 2fr
card:
- height: 100%
- border-radius: 35px
- background-color: |
[[[
if (entity.state == 'on')
return "#ffefc9";
return "#f2f6fc";
]]]
icon:
- z-index: 1
- color: |
[[[
if (entity.state == 'on')
return "#735c00";
return "#1f1f1f";
]]]
name:
- z-index: 1
- pointer-events: none
- justify-self: start
- font-weight: 600
- font-size: 15px
- margin: 18% 0% 0% 0%
- color: |
[[[
if (entity.state == 'on')
return "#735c00";
return "#1f1f1f";
]]]
label:
- z-index: 1
- pointer-events: none
- justify-self: start
- text-transform: capitalize
- font-weight: 500
- font-size: 14px
- margin: 0% 0% 16% 0%
- color: |
[[[
if (entity.state == 'on')
return "#735c00";
return "#1f1f1f";
]]]
custom_fields:
button:
- z-index: 1
- justify-self: end
- padding-right: 24px
slider:
- z-index: 0
- position: absolute
- width: 100%
- height: 100%
- type: conditional
conditions:
- entity: input_boolean.basement_light_toggle
state: 'on'
card:
type: grid
square: false
cards:
- type: custom:my-slider-v2
entity: light.basement_lights
colorMode: hue
intermediate: false
disableScroll: true
styles:
card:
- height: 50px
- border-radius: 24px
container:
- width: 100%
- height: 100%
- position: relative
- overflow: hidden
- border-radius: 24px
track:
- width: 100%
- height: 100%
- position: relative
- background: >-
linear-gradient(to left, #f00 0%, #ff0 17%, #0f0 33%, #0ff
50%, #00f 66%, #f0f 83%, #f00 100%)
progress:
- height: 100%
- background: >-
linear-gradient(to left, #f00 0%, #ff0 17%, #0f0 33%, #0ff
50%, #00f 66%, #f0f 83%, #f00 100%)
- position: absolute
- width: 0.00%
thumb:
- height: 100%
- background: black
- position: absolute
- right: '-5px'
- width: 10px
- type: custom:my-slider-v2
entity: light.basement_lights
colorMode: temperature
intermediate: false
disableScroll: true
styles:
card:
- height: 50px
- border-radius: 24px
container:
- width: 100%
- height: 100%
- position: relative
- overflow: hidden
- border-radius: 24px
track:
- width: 100%
- height: 100%
- position: relative
- background: linear-gradient(to right, rgb(255, 160, 0) 0%, white 100%)
progress:
- height: 100%
- background: linear-gradient(to right, rgb(255, 160, 0) 0%, white 100%)
- position: absolute
- width: 0.00%
thumb:
- height: 100%
- background: black
- position: absolute
- right: '-5px'
- width: 10px
columns: 2
card_mod:
style: |
ha-card {
padding: 30px 10px !important;
margin: 10px 0px 0px 5px !important;
}
1 Like
Yeah the spacing is a pain. I’m still messing with mine. I did a separate horizontal stack card with two conditional cards for now.
1 Like
I made a yaml called sensors in my config directory. Inside that is a template that counts the lights. I’ll post the code when I get a chance.
1 Like
Hello there
i have Shelly pro 3em with 3 phase CT.
i installed the device and integrated to HA perfectly.
in our country if monthly consumption was 450 Kwh/Month the tariff will be 18 IQD/Kwh, but if exceeded that range next 450kwh will be 24 IQD/month,
My question how we can calculate that ??
thanks for help
