Guys, please tell me how to place the chip cards all in a row, how to reduce the distance between icons? I tried a couple of settings, but it doesn’t work.
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-font-size: 0.3em;
--chip-icon-size: 0.6em;
--chip-border-width: 0;
--chip-box-shadow: none;
--chip-background: none;
--chip-border: none;
--chip-font-weight: normal;
}
alignment: justify
- type: custom:mushroom-light-card
entity: light.kitchen_downlights_group
icon: phu:bulb-group-centura-round
name: Потолочные
secondary_info: none
#show_brightness_control: true
#show_color_temp_control: true
tap_action:
action: toggle
double_action:
action: none
hold_action:
action: more-info
vertical: true
card_mod:
style: |
ha-card {
border: none !important;
}
ha-state-icon {
{% if is_state('light.kitchen_downlights_group','on') %}
animation: beat 1.3s ease-out infinite both;
transform-origin: 50% 80%;
{%- else -%}
{%- endif %}
}
@keyframes beat {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
:host {
--icon-size: 80px !important;
perspective: 900px;
}
ha-card:active {
transform: rotateX(25deg);
transform-origin: center bottom;
transition: 0s;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.kitchen_downlights_group_normal
content_info: none
icon: mdi:weather-sunny
icon_color: |-
{% if is_state('light.kitchen_downlights_group_normal', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none
}
alignment: center
- type: template
entity: light.kitchen_downlights_group_tv
content_info: none
icon: mdi:television
icon_color: |-
{% if is_state('light.kitchen_downlights_group_tv', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none
}
alignment: center
- type: template
entity: light.kitchen_downlights_group_warm
content_info: none
icon: mdi:weather-sunset
icon_color: |-
{% if is_state('light.kitchen_downlights_group_warm', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none
}
alignment: center
- type: template
entity: light.kitchen_downlights_group_midnight
content_info: none
icon: mdi:weather-night
icon_color: |-
{% if is_state('light.kitchen_downlights_group_midnight', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none
}
alignment: center
card_mod:
style: |
ha-card {
border: none !important;
}
Ensure you’re border: none entries have a semi colon after them and add a negative margin to the last 3 chips.
-17px appears to be the max with over lapping the other chip.
card_mod:
style: |
ha-card {
border: none;
margin-left: -17px;
}
2 Likes
berkans
February 24, 2024, 6:43am
27
Finally, I finished and published the user manual for the television card. By the way, I’ve also opened a new YouTube channel. Soon, I’ll start posting videos on all topics related to smart homes, Home Assistant, smart living, and dashboards. You’ll be able to easily implement all the projects I’ve done.
To follow my channel click below:Teach me Smart Life
I don’t actually know from where to start. This card has tons of features.
Ability to control both TV and the Android TV at the same time
Live view. See what is playing on your Android TV screen with pictures. (Streaming services like Netflix don’t allow passthrough images due to copyrights)
Remote controls for Samsung TV and Android TV
Ability to start Hue light integration with a single click. Even the official hue integration of HA does not have this future.
Start Apps directly from the card (Works both on Samsung and Android TV apps)
See which apps are currently on
Media Controls for Samsung TV, Change HDMI, Switch sound between soundbar and TV, Turn on Ambient Mode and change Picture Mode
Show you cameras on Android TV with a click to a button
Switch between Android Tv and Samsung TV remotes with a single click
Information area about what is happening on your Android TV or Samsung TV
Turn on your Samsung or Android TV with a single click
Browse and start your favorite Netflix show straight from the card
All Multimedia files are included.
Start listening your favorite radio stations on your Android TV
Whatever device is active on the television screen, the remote control of that device is shown on the card. If the input on the TV screen changes, your card will also automatically switch to that card.
You can also launch some apps from your Android TV remote.
Remotes are fully customizable you can assign your own remote controls via scripts.
The card will show you which device is being shown on your TV screen at that exact momemnt.
Full installation manual available
Dark and White theme compatible
You can use your Own IR device and bring any button to your remote control. You are not only tied to the Samsung integration.
Link:
8 Likes
LiQuid_cOOled:
margin-left: -17px;
Amazing! Thanks! How to correctly move the entire line relative to the center? Can it move all over or spread out evenly?
I wanted to achieve a result with these chips so that the outer ones would be located at the edges (where the beginning and end of the line are), and in the middle two icons would be evenly spaced with the same distance between each other, and between the icon on the left and right, i.e. first and fourth.
UPD:
It looks like I was able to implement this for desktop by adding an offset to the first icon.
- type: template
entity: light.kitchen_downlights_group_normal
content_info: none
icon: mdi:weather-sunny
icon_color: |-
{% if is_state('light.kitchen_downlights_group_normal', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
margin-left: 10px;
}
alignment: center
- type: template
entity: light.kitchen_downlights_group_tv
content_info: none
icon: mdi:television
icon_color: |-
{% if is_state('light.kitchen_downlights_group_tv', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
margin-left: -10px;
}
alignment: center
- type: template
entity: light.kitchen_downlights_group_warm
content_info: none
icon: mdi:weather-sunset
icon_color: |-
{% if is_state('light.kitchen_downlights_group_warm', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
margin-left: -10px;
}
alignment: center
- type: template
entity: light.kitchen_downlights_group_midnight
content_info: none
icon: mdi:weather-night
icon_color: |-
{% if is_state('light.kitchen_downlights_group_midnight', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
margin-left: -10px;
}
alignment: center
card_mod:
style: |
ha-card {
border: none !important;
}
Now I need to figure out how to implement a narrower design between icons for a mobile application:
As far as I remember, this can be implemented using screen media settings.
iona
February 24, 2024, 3:56pm
29
Anyone know? Also, how is the variable to change mushroom icon background?
Thanks
Guys, I playing with @media screen and (max-width: 400px) settings, and got question, how to get smaller radius of this chips borders? At screenshot below the third icon overlaps slightly with the fourth icon, and I can’t do anything about it, since the slightest shift to the right already sends the last icon to the second line.
I just add to these four chips the next:
@media screen and (max-width: 400px) {
ha-card {
border: none;
margin-left: -21px;
}
}
…with different value from 0 at first icon to -21 at four icon.
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.kitchen_downlights_group_normal
content_info: none
icon: mdi:weather-sunny
icon_color: |-
{% if is_state('light.kitchen_downlights_group_normal', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
margin-left: 10px;
}
@media screen and (max-width: 400px) {
ha-card {
border: none;
margin-left: -5px;
}
}
alignment: center
- type: template
entity: light.kitchen_downlights_group_tv
content_info: none
icon: mdi:television
icon_color: |-
{% if is_state('light.kitchen_downlights_group_tv', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
margin-left: -10px;
}
@media screen and (max-width: 400px) {
ha-card {
border: none;
margin-left: -17px;
}
}
alignment: center
- type: template
entity: light.kitchen_downlights_group_warm
content_info: none
icon: mdi:weather-sunset
icon_color: |-
{% if is_state('light.kitchen_downlights_group_warm', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
margin-left: -10px;
}
@media screen and (max-width: 400px) {
ha-card {
border: none;
margin-left: -17px;
}
}
alignment: center
- type: template
entity: light.kitchen_downlights_group_midnight
content_info: none
icon: mdi:weather-night
icon_color: |-
{% if is_state('light.kitchen_downlights_group_midnight', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
margin-left: -10px;
}
@media screen and (max-width: 400px) {
ha-card {
border: none;
margin-left: -17px;
}
}
alignment: center
card_mod:
style: |
ha-card {
border: none !important;
}
Question is removed, moved the first icon a little to the left, I hope I do everything right.
@SoulAssassin I found a simpler solution you can play around with and eliminates the need to add card mod to every chip.
type: custom:mushroom-chips-card
chips:
- type: template
entity: light.kitchen_downlights_group_normal
content_info: none
icon: mdi:weather-sunny
icon_color: |-
{% if is_state('light.kitchen_downlights_group_normal', 'on') %}
amber
{% else %}
#44739e
{% endif %}
alignment: center
- type: template
entity: light.kitchen_downlights_group_tv
content_info: none
icon: mdi:television
icon_color: |-
{% if is_state('light.kitchen_downlights_group_tv', 'on') %}
amber
{% else %}
#44739e
{% endif %}
alignment: center
- type: template
entity: light.kitchen_downlights_group_warm
content_info: none
icon: mdi:weather-sunset
icon_color: |-
{% if is_state('light.kitchen_downlights_group_warm', 'on') %}
amber
{% else %}
#44739e
{% endif %}
- type: template
entity: light.kitchen_downlights_group_midnight
content_info: none
icon: mdi:weather-night
icon_color: |-
{% if is_state('light.kitchen_downlights_group_midnight', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none !important;
--chip-spacing: -10px;
left: 180px;
}
}
@media screen and (max-width: 400px) {
ha-card {
border: none !important;
--chip-spacing: -10px;
left: 140px;
}
}
1 Like
Not works for me. All chips is gone, maybe it’s affiliated with my main card of templating light.
Full card looks like this:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
layout: vertical
entity: light.kitchen_downlights_group
icon: phu:bulb-group-centura-round
icon_color: |-
{% if is_state('light.kitchen_downlights_group', 'on') %}
orange
{% else %}
{% endif %}
primary: Потолочные
secondary: |-
{% if is_state('light.kitchen_downlights_group_normal', 'on') %}
Яркий
{% elif is_state('light.kitchen_downlights_group_tv', 'on') %}
ТВ
{% elif is_state('light.kitchen_downlights_group_warm', 'on') %}
Тёплый
{% elif is_state('light.kitchen_downlights_group_midnight', 'on') %}
Ночник
{% elif is_state('light.kitchen_downlights_group', 'on')
and is_state('light.kitchen_downlights_group_normal', 'off')
and is_state('light.kitchen_downlights_group_tv', 'off')
and is_state('light.kitchen_downlights_group_warm', 'off')
and is_state('light.kitchen_downlights_group_midnight', 'off') %}
Произвольный
{% else %}
{% endif %}
tap_action:
action: toggle
double_action:
action: none
hold_action:
action: more-info
vertical: true
card_mod:
style: |
ha-card {
border: none !important;
}
ha-state-icon {
{% if is_state('light.kitchen_downlights_group','on') %}
animation: beat 1.3s ease-out infinite both;
transform-origin: 50% 80%;
{%- else -%}
{%- endif %}
}
@keyframes beat {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
:host {
--icon-size: 80px !important;
perspective: 900px;
}
ha-card:active {
transform: rotateX(25deg);
transform-origin: center bottom;
transition: 0s;
}
ha-card:after {
{% if is_state('light.kitchen_downlights_group', 'on') %}
content: "{{ expand('light.kitchen_downlights_group') | selectattr('state','eq','on') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: +15px;
right: +45px;
width: 16px;
height: 16px;
font-size: 11px;
{% endif %}
}
@media screen and (max-width: 400px) {
ha-card:after {
{% if is_state('light.kitchen_downlights_group', 'on') %}
content: "{{ expand('light.kitchen_downlights_group') | selectattr('state','eq','on') | list | count }}";
position: absolute;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: +15px;
right: +20px;
width: 16px;
height: 16px;
font-size: 11px;
}
{% endif %}
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: light.kitchen_downlights_group
state: 'on'
chip:
type: template
entity: light.kitchen_downlights_group_normal
content_info: none
icon: mdi:weather-sunny
icon_color: |-
{% if is_state('light.kitchen_downlights_group_normal', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
margin-left: 10px;
}
@media screen and (max-width: 400px) {
ha-card {
border: none;
margin-left: -5px;
}
}
alignment: center
- type: conditional
conditions:
- entity: light.kitchen_downlights_group
state: 'on'
chip:
type: template
entity: light.kitchen_downlights_group_tv
content_info: none
icon: mdi:television
icon_color: |-
{% if is_state('light.kitchen_downlights_group_tv', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
margin-left: -10px;
}
@media screen and (max-width: 400px) {
ha-card {
border: none;
margin-left: -17px;
}
}
alignment: center
- type: conditional
conditions:
- entity: light.kitchen_downlights_group
state: 'on'
chip:
type: template
entity: light.kitchen_downlights_group_warm
content_info: none
icon: mdi:weather-sunset
icon_color: |-
{% if is_state('light.kitchen_downlights_group_warm', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
margin-left: -10px;
}
@media screen and (max-width: 400px) {
ha-card {
border: none;
margin-left: -17px;
}
}
alignment: center
- type: conditional
conditions:
- entity: light.kitchen_downlights_group
state: 'on'
chip:
type: template
entity: light.kitchen_downlights_group_midnight
content_info: none
icon: mdi:weather-night
icon_color: |-
{% if is_state('light.kitchen_downlights_group_midnight', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
margin-left: -10px;
}
@media screen and (max-width: 400px) {
ha-card {
border: none;
margin-left: -17px;
}
}
alignment: center
card_mod:
style: |
ha-card {
border: none !important;
}
This worked well for me…Let me know
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
layout: vertical
entity: light.kitchen_downlights_group
icon: phu:bulb-group-centura-round
icon_color: |-
{% if is_state('light.kitchen_downlights_group', 'on') %}
orange
{% else %}
{% endif %}
primary: Потолочные
secondary: |-
{% if is_state('light.kitchen_downlights_group_normal', 'on') %}
Яркий
{% elif is_state('light.kitchen_downlights_group_tv', 'on') %}
ТВ
{% elif is_state('light.kitchen_downlights_group_warm', 'on') %}
Тёплый
{% elif is_state('light.kitchen_downlights_group_midnight', 'on') %}
Ночник
{% elif is_state('light.kitchen_downlights_group', 'on')
and is_state('light.kitchen_downlights_group_normal', 'off')
and is_state('light.kitchen_downlights_group_tv', 'off')
and is_state('light.kitchen_downlights_group_warm', 'off')
and is_state('light.kitchen_downlights_group_midnight', 'off') %}
Произвольный
{% else %}
{% endif %}
tap_action:
action: toggle
double_action:
action: none
hold_action:
action: more-info
vertical: true
card_mod:
style: |
ha-card {
border: none !important;
}
ha-state-icon {
{% if is_state('light.kitchen_downlights_group','on') %}
animation: beat 1.3s ease-out infinite both;
transform-origin: 50% 80%;
{%- else -%}
{%- endif %}
}
@keyframes beat {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
:host {
--icon-size: 80px !important;
perspective: 900px;
}
ha-card:active {
transform: rotateX(25deg);
transform-origin: center bottom;
transition: 0s;
}
ha-card:after {
{% if is_state('light.kitchen_downlights_group', 'on') %}
content: "{{ expand('light.kitchen_downlights_group') | selectattr('state','eq','on') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: +15px;
right: +45px;
width: 16px;
height: 16px;
font-size: 11px;
{% endif %}
}
@media screen and (max-width: 400px) {
ha-card:after {
{% if is_state('light.kitchen_downlights_group', 'on') %}
content: "{{ expand('light.kitchen_downlights_group') | selectattr('state','eq','on') | list | count }}";
position: absolute;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: +15px;
right: +20px;
width: 16px;
height: 16px;
font-size: 11px;
}
{% endif %}
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: light.kitchen_downlights_group
state: 'on'
chip:
type: template
entity: light.kitchen_downlights_group_normal
content_info: none
icon: mdi:weather-sunny
icon_color: |-
{% if is_state('light.kitchen_downlights_group_normal', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
margin-left: 10px;
}
@media screen and (max-width: 400px) {
ha-card {
border: none;
margin-left: -5px;
}
}
alignment: center
- type: conditional
conditions:
- entity: light.kitchen_downlights_group
state: 'on'
chip:
type: template
entity: light.kitchen_downlights_group_tv
content_info: none
icon: mdi:television
icon_color: |-
{% if is_state('light.kitchen_downlights_group_tv', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
margin-left: -10px;
}
@media screen and (max-width: 400px) {
ha-card {
border: none;
margin-left: -17px;
}
}
alignment: center
- type: conditional
conditions:
- entity: light.kitchen_downlights_group
state: 'on'
chip:
type: template
entity: light.kitchen_downlights_group_warm
content_info: none
icon: mdi:weather-sunset
icon_color: |-
{% if is_state('light.kitchen_downlights_group_warm', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
margin-left: -10px;
}
@media screen and (max-width: 400px) {
ha-card {
border: none;
margin-left: -17px;
}
}
alignment: center
- type: conditional
conditions:
- entity: light.kitchen_downlights_group
state: 'on'
chip:
type: template
entity: light.kitchen_downlights_group_midnight
content_info: none
icon: mdi:weather-night
icon_color: |-
{% if is_state('light.kitchen_downlights_group_midnight', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
margin-left: -10px;
}
@media screen and (max-width: 400px) {
ha-card {
border: none;
margin-left: -17px;
}
}
alignment: center
card_mod:
style: |
ha-card {
border: none !important;
--chip-spacing: 1px;
left: 152px;
}
card_mod:
style: |
ha-card {
border: none !important;
}
1 Like
Still, the result is the same, the chips disappear. I believe that this is due to the fact that there is too much shift to the left, since the card works as part of other cards, or there is not enough space, or something else is happening that I cannot explain. Perhaps an independent card will be displayed normally, but I am solving a slightly different problem, where this card is included in a stack along with others…
That is the issue. I’m working with just the single card you shared so my margins are completely different.
If the original solution works, stick with it!
1 Like
card_mod:
style: |
ha-card {
border: none !important;
--chip-spacing: 1px;
left: 12px;
}
My experiments seem to be ok thanks. 12px. Let’s see what happens at mobile app side…
1 Like
At mobile app I set:
@media screen and (max-width: 400px) {
ha-card {
border: none;
margin-left: -15px;
}
}
Only at the first chip, and it’s looks better
Again thanks u
Looks really good, happy to assist!!
1 Like
Btw, yesterday I start to do similar at the second row with additional cooker hood lights, but in mobile app is to hard, 'coz I set the main card size is --icon-size: 64px (first row I’ve is 80px), and set chip --chip-icon-size: 16px; and for mobile media is 12px, but in mobile app I’ve icons overlap. Think I need to try with ya suggestion in second row too…
If you get stuck, just message me the entire card and I’ll see if I can help.
1 Like
On desktop it looks so good:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
layout: vertical
entity: light.kitchen_cooker_hood_group
icon: phu:bulb-group-centura-round
icon_color: |-
{% if is_state('light.kitchen_cooker_hood_group', 'on') %}
orange
{% else %}
{% endif %}
primary: Вытяжка
secondary: |-
{% if is_state('light.kitchen_cooker_hood_group_cold', 'on') %}
Холодный
{% elif is_state('light.kitchen_cooker_hood_group_neutral', 'on') %}
Нейтральный
{% elif is_state('light.kitchen_cooker_hood_group_warm', 'on') %}
Тёплый
{% elif is_state('light.kitchen_cooker_hood_group_midnight', 'on') %}
Ночник
{% elif is_state('light.kitchen_cooker_hood_group', 'on')
and is_state('light.kitchen_cooker_hood_group_cold', 'off')
and is_state('light.kitchen_cooker_hood_group_neutral', 'off')
and is_state('light.kitchen_cooker_hood_group_warm', 'off')
and is_state('light.kitchen_cooker_hood_group_midnight', 'off') %}
Произвольный
{% else %}
{% endif %}
tap_action:
action: toggle
double_action:
action: none
hold_action:
action: more-info
vertical: true
card_mod:
style: |
ha-card {
border: none !important;
}
ha-state-icon {
{% if is_state('light.kitchen_cooker_hood_group','on') %}
animation: beat 1.3s ease-out infinite both;
transform-origin: 50% 80%;
{%- else -%}
{%- endif %}
}
@keyframes beat {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
:host {
--icon-size: 64px !important;
perspective: 900px;
}
ha-card:active {
transform: rotateX(25deg);
transform-origin: center bottom;
transition: 0s;
}
ha-card:after {
{% if is_state('light.kitchen_cooker_hood_group', 'on') %}
content: "{{ expand('light.kitchen_cooker_hood_group') | selectattr('state','eq','on') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: +15px;
right: +25px;
width: 16px;
height: 16px;
font-size: 11px;
{% endif %}
}
@media screen and (max-width: 400px) {
ha-card:after {
{% if is_state('light.kitchen_cooker_hood_group', 'on') %}
content: "{{ expand('light.kitchen_cooker_hood_group') | selectattr('state','eq','on') | list | count }}";
position: absolute;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: +15px;
right: +10px;
width: 16px;
height: 16px;
font-size: 11px;
}
{% endif %}
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: light.kitchen_cooker_hood_group
state: 'on'
chip:
type: template
entity: light.kitchen_cooker_hood_group_cold
content_info: none
icon: mdi:sun-snowflake-variant
icon_color: |-
{% if is_state('light.kitchen_cooker_hood_group_cold', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
}
@media screen and (max-width: 400px) {
ha-card {
border: none;
margin-left: -10px;
--chip-icon-size: 12px;
}
}
alignment: center
- type: conditional
conditions:
- entity: light.kitchen_cooker_hood_group
state: 'on'
chip:
type: template
entity: light.kitchen_cooker_hood_group_neutral
content_info: none
icon: mdi:theme-light-dark
icon_color: |-
{% if is_state('light.kitchen_cooker_hood_group_neutral', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
margin-left: -10px;
}
@media screen and (max-width: 400px) {
ha-card {
border: none;
margin-left: -18px;
--chip-icon-size: 12px;
}
}
alignment: center
- type: conditional
conditions:
- entity: light.kitchen_cooker_hood_group
state: 'on'
chip:
type: template
entity: light.kitchen_cooker_hood_group_warm
content_info: none
icon: mdi:fire
icon_color: |-
{% if is_state('light.kitchen_cooker_hood_group_warm', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
margin-left: -10px;
}
@media screen and (max-width: 400px) {
ha-card {
border: none;
margin-left: -18px;
--chip-icon-size: 12px;
}
}
alignment: center
- type: conditional
conditions:
- entity: light.kitchen_cooker_hood_group
state: 'on'
chip:
type: template
entity: light.kitchen_cooker_hood_group_midnight
content_info: none
icon: mdi:weather-night-partly-cloudy
icon_color: |-
{% if is_state('light.kitchen_cooker_hood_group_midnight', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
margin-left: -10px;
}
@media screen and (max-width: 400px) {
ha-card {
border: none;
margin-left: -20px;
--chip-icon-size: 12px;
}
}
alignment: center
card_mod:
style: |
ha-card {
border: none !important;
--chip-spacing: 1px;
left: 0px;
}
card_mod:
style: |
ha-card {
border: none !important;
}
But in mobile space between chips is so short, even if set up icon size 12px is not resolving this:
It’s possible to hide one icon on mobile app?
