Wow @WebPower , very well done! 
1 Like
Mushroom-inspired Room Light Card
Made with Button-Card, Mushroom-Cards, Auto-Entities-Card and Timer Bar Card.
This is a light-card for a “Room” (which really is just a group of lights).
- Image You need to give it an path or url to an image to display. The image will be greyscale if all lights in the group are off an normal if one or more lights of the group are on
- Timer If you have set up an timer for an automation you can define your timer-entity in variables. If you do so, there will be a timer-icon. If you click on the Icon, the more-info-dialog of the timer-entity will be shown
- Automation If you have set up an automation to control your lights in this group (e.g. based on motion) you can define an automation-entity in the variables. The card will then show an automation on/off icon. If you click the icon, the automation will toggle between on and off
- Room Toggle The toggle on the upper right side toggle all the lights in the group (on / off).
- Light-Chips for each light-entity in the light-group there will be a chip-card with icon and name. Click on the chip to toggle the light-state. Long tap will leed to the more-info-dialog.
- Timer-Bar If you defined a timer-entity and the timer is running, it will display a small bar shrinking as the times goes down.
What you need to to:
- Copy the YAML-Code below
- Change the following things:
type: custom:button-card
entity: light.waschekeller_alle
variables:
automation_entity: none
timer_entity: none
picture: /local/img/wäschekeller.jpg
show_name: false
show_state: false
show_icon: false
styles:
card:
- padding: 0px
- background: |
[[[
if (entity.state === "on")
return "rgba(255,255,0,0.05)";
]]]
grid:
- grid-template-areas: '"karte"'
- grid-template-columns: 100%
- grid-template-rows: 100%
custom_fields:
mush:
- filter: opacity(100%)
- overflow: visible
custom_fields:
karte:
card:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: none;
}
mode: horizontal
keep:
background: true
border_radius: true
box_shadow: true
margin: true
outer_padding: false
cards:
- type: custom:button-card
entity: '[[[ return entity.entity_id ]]]'
show_name: false
styles:
card:
- width: 5rem
- padding: 0px
- border: none
- border-radius: 0px
- height: 10rem
entity_picture:
- width: 5rem
- height: 10rem
- object-fit: cover
- filter: |
[[[
if (entity.state === "off")
return "grayscale(100%)";
else
return "none";
]]]
entity_picture: '[[[ return variables.picture ]]]'
show_entity_picture: true
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
alignment: start
chips:
- type: template
entity: '[[[ return entity.entity_id ]]]'
tap_action:
action: none
hold_action:
action: more-info
double_tap_action:
action: none
icon: '{{ state_attr(entity,"icon") }}'
content: '{{ state_attr(entity,"friendly_name") }}'
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
background: none !important;
font-size: 3rem !important;
}
- type: custom:mushroom-chips-card
card_mod:
style: |
.chip-container {
--chip-spacing: -10px !important;
}
alignment: end
chips:
- type: conditional
conditions:
- condition: state
entity: '[[[ return variables.timer_entity ]]]'
state_not: unknown
chip:
type: template
entity: '[[[ return variables.timer_entity ]]]'
icon: '{{ state_attr(entity,"icon") }}'
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
background: none !important;
font-size: 3rem !important;
}
.content {
padding: 0px !important;
}
- type: conditional
conditions:
- condition: state
entity: '[[[ return variables.automation_entity ]]]'
state_not: unknown
chip:
type: template
entity: '[[[ return variables.automation_entity ]]]'
icon: |-
{% if states(entity) == "on" %}
mdi:motion-sensor
{% elif states(entity) == "off" %}
mdi:motion-sensor-off
{% endif %}
icon_color: |-
{% if states(entity) == "on" %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
background: none !important;
font-size: 3rem !important;
}
- type: template
entity: '[[[ return entity.entity_id ]]]'
tap_action:
action: toggle
hold_action:
action: more-info
icon: |-
{% if states(entity) == "on" %}
mdi:toggle-switch
{% else %}
mdi:toggle-switch-off
{% endif %}
icon_color: |-
{% if states(entity) == "on" %}
orange
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
background: none !important;
font-size: 4rem !important;
}
- type: custom:button-card
show_name: false
show_state: false
show_icon: false
show_label: false
styles:
card:
- height: 5px
- box-shadow: none
- border-bottom: 1px solid rgb(50,50,50,0.2)
- border-radius: 0px
- padding: 0px
- margin-top: '-0.5rem'
- background: none
- type: custom:auto-entities
show_empty: true
sort:
method: name
card:
type: custom:mushroom-chips-card
alignment: center
card_param: chips
filter:
include:
- group: '[[[ return entity.entity_id ]]]'
options:
type: template
content: '{{ state_attr(entity,"friendly_name") }}'
icon: '{{ state_attr(entity,"icon") }}'
icon_color: |-
{% if states(entity) == "on" %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
ha-card {
background: var(--secondary-background-color) !important;
}
- type: conditional
conditions:
- condition: state
entity: '[[[ return variables.timer_entity ]]]'
state: active
card:
type: custom:timer-bar-card
entity: '[[[ return variables.timer_entity ]]]'
invert: true
bar_direction: ltr
name: aus in
bar_foreground: darkorange
bar_background: none
bar_height: 0.1rem
layout: full_row
text_width: 0px
10 Likes
Any idea what may be causing the value discrepancy between the header and the graph? They point to the same sensors in the code.
The top temperature is pulled from sensor.my_ecobee_current_temperature and rounded to 1 digit. What you’re seeing on the bottom are the controls for climate.my_ecobee. It looks like you have it in auto mode, and while I’m not familiar with the ecobee I’m assuming when you have it in auto mode there are separate targets for heating and cooling and what you are seeing there are those target temps.
Thank you for the response. I knew what the footer area values were, my question was the descrepency between the graph values and the header values for temp and humidity when they are supposed to represent the same sensors. I now see that it is just a rounding difference. Also, why do both graph lines show the temp value on the left and humidity on the right? I would think the left end of the orange line would show starting temp value for the timeframe and the right end of the orange line would show current temp value. Same for the blue line but for humidity. My graph seems to switch values from left to right.
3 Likes
Ya that’s just how that card works. You could swap it out with the apexcharts card. When there are multiple lines on the graph, that one gives you a little popup box to show the actual recorded number at that point as you drag your curser over the graph.
Kind of like this:
More button-card than Mushroom but still thought I’d share here: a minimalistic card for controlling Chromecast with Google TV (kind of like the remote that comes with it), using the Android TV Remote integration. On that page they show a dashboard example, but I thought it looked terrible. I prefer my iteration 
The logos in the bottom row are shortcuts to open apps, and will highlight when the app is currently active. To add your own shortcuts to open apps, have a look at this thread.
Code
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-entity-card
name: Chromecast 4K • Remote
icon: mdi:remote-tv
entity: remote.chromecast_4k
tap_action:
action: more-info
icon_color: red
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:button-card
icon: mdi:arrow-left-bottom
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: BACK
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 20px
view_layout:
grid-area: item1
- type: custom:button-card
icon: mdi:arrow-up
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_UP
hold_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_UP
num_repeats: 1
delay_secs: 0.5
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 20px
view_layout:
grid-area: item2
- type: custom:button-card
icon: mdi:home
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: HOME
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 20px
view_layout:
grid-area: item3
- type: custom:button-card
icon: mdi:arrow-left
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_LEFT
hold_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_LEFT
num_repeats: 1
delay_secs: 0.5
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 20px
view_layout:
grid-area: item4
- type: custom:button-card
icon: mdi:cursor-pointer
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_CENTER
hold_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_CENTER
num_repeats: 1
delay_secs: 0.5
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 20px
view_layout:
grid-area: item5
- type: custom:button-card
icon: mdi:arrow-right
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_RIGHT
hold_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_RIGHT
num_repeats: 1
delay_secs: 0.5
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 20px
view_layout:
grid-area: item6
- type: custom:button-card
entity: media_player.tv
icon: |
[[[ if (entity.attributes.is_volume_muted) {
return 'mdi:volume-off'
} else {
return 'mdi:volume-high'
}
]]]
tap_action:
action: call-service
service: script.samsung_tv_volume_mute
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 20px
view_layout:
grid-area: item7
- type: custom:button-card
icon: mdi:arrow-down
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_DOWN
hold_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_DOWN
num_repeats: 1
delay_secs: 0.5
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 20px
view_layout:
grid-area: item8
- type: custom:button-card
entity: remote.chromecast_4k
icon: mdi:youtube
tap_action:
action: call-service
service: remote.turn_on
service_data:
entity_id: remote.chromecast_4k
activity: https://www.youtube.com
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: |
[[[ if (entity.attributes.current_activity == 'com.youtube') {
return 'rgba(var(--mush-rgb-red),0.3)'
} else {
return 'rgba(var(--cstm-rgb-on-secondary),0.05)'
} ]]]
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--mush-rgb-red),0.9)
size: 20px
view_layout:
grid-area: item9
- type: custom:button-card
entity: remote.chromecast_4k
icon: mdi:netflix
tap_action:
action: call-service
service: remote.turn_on
service_data:
entity_id: remote.chromecast_4k
activity: netflix://
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: >
[[[ if (entity.attributes.current_activity ==
'com.netflix.ninja') {
return 'rgba(var(--mush-rgb-red),0.3)'
} else {
return 'rgba(var(--cstm-rgb-on-secondary),0.05)'
} ]]]
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--mush-rgb-red),0.9)
size: 20px
view_layout:
grid-area: item10
- type: custom:button-card
entity: remote.chromecast_4k
entity_picture: https://upload.wikimedia.org/wikipedia/commons/a/ad/AppleTVLogo.svg
show_entity_picture: true
tap_action:
action: call-service
service: remote.turn_on
service_data:
entity_id: remote.chromecast_4k
activity: https://tv.apple.com
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: >
[[[ if (entity.attributes.current_activity ==
'com.apple.atve.androidtv.appletv') {
return 'rgba(var(--cstm-rgb-on-secondary),0.2)'
} else {
return 'rgba(var(--cstm-rgb-on-secondary),0.05)'
} ]]]
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 22px
view_layout:
grid-area: item11
- type: custom:button-card
entity: remote.chromecast_4k
icon: mdi:spotify
tap_action:
action: call-service
service: remote.turn_on
service_data:
entity_id: remote.chromecast_4k
activity: spotify://
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: >
[[[ if (entity.attributes.current_activity ==
'com.spotify.tv.android') {
return 'rgba(var(--mush-rgb-green),0.2)'
} else {
return 'rgba(var(--cstm-rgb-on-secondary),0.05)'
} ]]]
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--mush-rgb-green),0.9)
size: 20px
view_layout:
grid-area: item12
layout:
grid-template-columns: 1fr 1fr 1fr 1fr
grid-template-rows: min-content
grid-template-areas: |
". item2 . item1"
"item4 item5 item6 item3"
". item8 . item7"
"item9 item10 item11 item12"
gap: 0px
margin: '-4px 8px 4px'
You’ll see I use a custom variable, var(--cstm-rgb-on-secondary). You can set it in your theme:
mode:
light:
cstm-rgb-on-secondary: 51, 51, 51
dark:
cstm-rgb-on-secondary: 221, 221, 221
13 Likes
That remote looks very good.
But it’s not working with me, this is what is get:
Repaced all the remote.yourremote with my remote.
Thanks
Looks like the buttons are there but with 1px height or something. Please check your values for var(--mush-control-height) and the other mushroom theme variables, or replace them with e.g. 14 px in the button-cards.
You should check out the Firemote Card. Instead of having a card that’s “Kind of like the remote that comes with it”, you can have a card that actually IS the remote that comes with it. Also supports Shield, Fire TV and Apple TV. It’s great combined with a popup card to save space on the dashboard.
1 Like
This is what it looks like, copied it from your code.
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:button-card
icon: mdi:arrow-left-bottom
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.mibox4
command: BACK
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 20px
view_layout:
grid-area: item1
The problem above what fixed by changing the following:
- border-radius: 14px - height: 42px
Solutions mentioned by ArenaCloser in a PB, thanks again! 
There is only one thing that is not working with me.
When i open Netflix and start watchting, the netflix logo on the remote does not get colored or something, any idea why is that?
1 Like
When Netflix is running, check the value of the current_activity attribute of your remote. For me it’s com.netflix.ninja, maybe for you it’s different. You can get the button to light up by editing the if-statement:
Continuing the fun with more cards. Some printer cards have already been shared here, but I’ll just add to the variety with another one. Largely inspired by this post, it uses the custom bar-card.
Version with vertical bars
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Epson WF2540
entity: sensor.epson_wf_2540_series
secondary: |-
{% if is_state('sensor.epson_wf_2540_series', 'idle') %}
Aan • Inactief
{% elif is_state('sensor.epson_wf_2540_series', 'printing') %}
Aan • Printen...
{% elif is_state('sensor.epson_wf_2540_series', 'stopped') %}
Aan • Gestopt
{% else %}
Uit
{% endif %}
icon: mdi:printer
icon_color: >-
{{ "teal" if is_state(entity, "idle") or is_state(entity, "printing") else
"disabled" }}
tap_action:
action: more-info
hold_action:
action: none
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:bar-card
direction: up
entities:
- color: MediumTurquoise
entity: sensor.epson_wf_2540_series_cyan_ink
name: C
- color: Gold
entity: sensor.epson_wf_2540_series_yellow_ink
name: 'Y'
- color: MediumOrchid
entity: sensor.epson_wf_2540_series_magenta_ink
name: M
- color: rgb(var(--cstm-rgb-on))
entity: sensor.epson_wf_2540_series_black_ink
name: B
height: 120px
positions:
icon: 'off'
value: outside
name: outside
target: 0
stack: horizontal
card_mod:
style: |
ha-card {
--bar-card-border-radius: 14px;
margin: -12px -2px -24px -2px;
box-shadow: none;
}
bar-card-name {
font-size: 12px;
}
bar-card-value {
font-size: 12px
}I’m not such a big fan of the thick bars though. After playing around I came up with this compact version with thin horizontal lines, I love it.
Version with horizontal bars
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Epson WF2540
entity: sensor.epson_wf_2540_series
secondary: |-
{% if is_state('sensor.epson_wf_2540_series', 'idle') %}
Aan • Inactief
{% elif is_state('sensor.epson_wf_2540_series', 'printing') %}
Aan • Printen...
{% elif is_state('sensor.epson_wf_2540_series', 'stopped') %}
Aan • Gestopt
{% else %}
Uit
{% endif %}
icon: mdi:printer
icon_color: >-
{{ "teal" if is_state(entity, "idle") or is_state(entity, "printing") else
"disabled" }}
tap_action:
action: more-info
hold_action:
action: none
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:bar-card
direction: right
entities:
- color: MediumTurquoise
entity: sensor.epson_wf_2540_series_cyan_ink
name: C
- color: Gold
entity: sensor.epson_wf_2540_series_yellow_ink
name: 'Y'
- color: MediumOrchid
entity: sensor.epson_wf_2540_series_magenta_ink
name: M
- color: rgb(var(--cstm-rgb-on))
entity: sensor.epson_wf_2540_series_black_ink
name: B
height: 8px
positions:
icon: 'off'
value: 'off'
name: 'off'
target: 0
stack: vertical
card_mod:
style: |
ha-card {
--bar-card-border-radius: 30px;
margin: -12px -2px -8px -2px;
box-shadow: none;
}For the black ink, I’m using a custom theme variable again that returns white color in dark mode, var(--cstm-rgb-on):
mode:
light:
cstm-rgb-on: 30, 30, 30
dark:
cstm-rgb-on: 255, 255, 255
11 Likes
hi, which font did you use?
Would you like to share how this card ended upp in your setup. I guess your version might be better than mine hacked up thing ofacard.
And would you like to describe what values/sensors you are using.
It is easy to mix and choose the wrong sensor, since there are
Watt, watthours, daily, etc… for all enteties…
Below is how my homepage dash on mobile looks like. It just has the bare essentials. All rooms etc (except few exceptions) are on other views (0 for floor 0 etc)
What sensors to use is difficult to say an up to you. In some cases I just want to see current power consumption in watt and sometimes (for instance counting solar power for that day) I use KwH. Generally you will have current power consumption available but KwH not. You will have to create a custom sensor in that case
A thousand thanks! What did you use for the icons instead? I can’t find these here like for example “fapro:fork-knife-duotone”
Don’t you use the play/pause and volume buttons with this remote?
Make default Lovelace card to Mushroom design
Using card mod theme.
- Define default color variable in your theme
mush-rgb-red: 244, 67, 54
mush-rgb-pink: 233, 30, 99
mush-rgb-purple: 156, 39, 176
mush-rgb-deep-purple: 103, 58, 183
mush-rgb-indigo: 63, 81, 181
mush-rgb-blue: 33, 150, 243
mush-rgb-light-blue: 3, 169, 244
mush-rgb-cyan: 0, 188, 212
mush-rgb-teal: 0, 150, 136
mush-rgb-green: 76, 175, 80
mush-rgb-light-green: 139, 195, 74
mush-rgb-lime: 205, 220, 57
mush-rgb-yellow: 255, 235, 59
mush-rgb-amber: 255, 193, 7
mush-rgb-orange: 255, 152, 0
mush-rgb-deep-orange: 255, 87, 34
mush-rgb-brown: 121, 85, 72
mush-rgb-grey: 158, 158, 158
mush-rgb-blue-grey: 96, 125, 139
mush-rgb-black: 0, 0, 0
mush-rgb-white: 255, 255, 255
Default lovelace glance card
card-mod-glance-yaml: |
state-badge:
$:
ha-state-icon:
$: |
ha-icon {
display: block;
}
ha-icon, ha-svg-icon {
height: 22px !important;
position: relative;
top: -1px;
}
@media screen and (max-width: 800px) {
ha-icon, ha-svg-icon {
top: 2px !important;
}
}
.: |
.name {
font-weight: bold;
}
state-badge {
{% if is_state(config.entity, 'on') %}
color: rgba(var(--mush-rgb-green), 1);
background: rgba(var(--mush-rgb-green), .2);
{% elif is_state(config.entity, 'off') %}
color: rgba(var(--mush-rgb-red), 1);
background: rgba(var(--mush-rgb-red), .2);
{% else %}
color: rgba(var(--mush-rgb-blue), 1);
background: rgba(var(--mush-rgb-blue), .2);
{% endif %}
margin: 15px 0px;
--mdc-icon-size: 22px;
}
state-badge + div {
font-weight: bold;
font-size: 12px;
color: var(--secondary-text-color)
}
Default lovelace entities card
card-mod-row-yaml: |
hui-generic-entity-row:
$:
state-badge:
$:
ha-state-icon:
$: |
ha-icon {
display: block;
}
ha-icon, ha-svg-icon {
height: 22px !important;
position: relative;
top: -1px;
}
@media screen and (max-width: 800px) {
ha-icon, ha-svg-icon {
top: 2px !important;
}
}
.: |
state-badge {
{% if is_state(config.entity, 'on') %}
color: rgba(var(--mush-rgb-green), 1);
background: rgba(var(--mush-rgb-green), .2);
{% elif is_state(config.entity, 'off') %}
color: rgba(var(--mush-rgb-red), 1);
background: rgba(var(--mush-rgb-red), .2);
{% else %}
color: rgba(var(--mush-rgb-blue), 1);
background: rgba(var(--mush-rgb-blue), .2);
{% endif %}
background-size: cover;
background-position: center;
border-radius: 100% !important;
margin: 0 15px 0 0;
--mdc-icon-size: 22px;
}
.secondary {
overflow: unset !important;
white-space: normal !important;
font-weight:400 !important;
font-size: 12px !important;
font-weight: bold !important;
}
.info, .value {
margin-left: 0px !important;
font-weight: bold;
padding: 16px 0;
position: relative;
}
Default HA more info dialog
card-mod-more-info-yaml: |
ha-more-info-info:
$:
state-card-display,state-card-button,state-card-input_button,state-card-input_number,state-card-media_player,state-card-input_select:
$:
.: |
.state {
font-weight: bold;
}
state-info:
$:
state-badge:
$:
ha-state-icon:
$: |
ha-icon {
display: block;
}
ha-icon, ha-svg-icon {
height: 22px !important;
position: relative;
top: -1px;
color: rgba(var(--mush-rgb-blue), 1) !important;
}
@media screen and (max-width: 800px) {
ha-icon, ha-svg-icon {
top: 2px !important;
}
}
.: |
state-badge {
color: rgba(var(--mush-rgb-blue), 1) !important;
background: rgba(var(--mush-rgb-blue), .2);
margin: 0 15px 0 0;
background-size: contain;
border-radius: 100% !important;
--mdc-icon-size: 22px;
}
.time-ago {
overflow: unset !important;
white-space: normal !important;
font-weight:400 !important;
font-size: 12px !important;
font-weight: bold !important;
}
.info, .state {
margin-left: 0px !important;
font-weight: bold;
padding: 8px 0;
position: relative;
}
7 Likes