vmonkey
February 22, 2024, 1:30pm
19
Hello all. I have designed a media player card for my soundbar using a mushroom template card, showing different content (buttons, etc…) based on the media source. Now, if I play from Spotify, I would like a button to browse the Spotify library.
At the more-info dialog of the Spotify media_player, there is a nice Browse button that shows a Media Library popup, which is exactly what I want. However, I do not know if this can be called somehow; I did not find a specific service.
Another option I was thinking about is using browser_mod. Then, I can have something like
type: custom:button-card
entity: media_player.spotify_playername
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Media Library
content:
type: iframe
url: /media-browser/media_player.spotify_playername
aspect_ratio: 200%
This works great on a PC browser. Unfortunately, the iframe does not load on Android companion app (there is an infinite “Loading data” screen
Does anyone have an idea how to do it in a way that works?
Hi vmonkey
Discussion of Home Assistant mobile apps, both official (Home Assistant Companion) and third party
PS: Maybe the “webview” in Android-APP don’t have proper support for iframe
1 Like
vmonkey
February 22, 2024, 2:46pm
21
Thanks for reply and sorry for not being accurate enough.
I agree this is not 100% related to mushroom, for some reasons, I combined mushroom with button card. But the question is not coupled with the button card, that is just an example. The browser_mod trick I listed does not work on companion app, and there are several existing discussions/GitHub issues for this without any solution. Basically, I think that this is a dead end, so I just posted the ways that I tried but that do not work. Because mushroom has its own media card and there are very nice template media cards in this discussion (I actually started with them and my yaml is based on them), I thought it is reasonable to ask here if there is anyone who knows how to approach this. Of course, I am free to delete my question if this is not relevant for other people.
OK, no don’t delete it, i think maybe you just “phrased” your question a bit “off Topic”
iona
February 22, 2024, 10:30pm
23
Is it possible to use mdi/hass icons in the Title card for primary and secondary titles?
This is where landed with a design…
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 80% 20%
margin: 0px 0px 0px 0px
cards:
- type: custom:mushroom-number-card
entity: input_number.pi_hole_timer
icon: mdi:power
icon_color: blue
tap_action:
action: call-service
confirmation:
text: Are you sure you want to start the timer?
service: script.timer_on
hold_action:
action: call-service
confirmation:
text: Are you sure you want to canel?
service: script.piehole_cancel
layout: horizontal
display_mode: slider
card_mod:
style:
mushroom-number-value-control$:
mushroom-slider$: |
.slider {
position: absolute !important;
width: calc(100% - 76px) !important;
right: 12px;
height: 44px !important;
--bg-color: background: #434954 !important;
}
.: |
mushroom-slider:before {
content: "";
width: calc(100% - 68px) !important;
position: absolute !important;
height: 50px !important;
background: #434954 !important;
top: 8px;
left: 60px;
border-radius: 14px;
border: #5b616b solid .9px;
box-shadow: -1px 1px 6px rgba(0,0,0, .5) inset;
}
.: |
ha-card {
border: none !important;
background: #434954
}
ha-state-icon {
{% if states('input_boolean.pi_hole_timer') == 'on' %}
color: pink !important;
{% else %}
color: lime !important;
{% endif %}
}
mushroom-state-info$: |
.container {
flex-direction: row !important;
position: absolute;
width: 79%;
top: 17px;
align-items: baseline;
}
.primary {
color: transparent !important;
position: relative;
flex-shrink: 1;
flex-grow: 1;
}
.primary:after {
content: "{{states('input_number.pi_hole_timer')| int()}} Min ";
position: absolute;
color: var(--primary-text-color);
left: 15px;
top: 4px;
width: max-content !important;
z-index: 2
}
.secondary {
color: transparent !important;
position: relative;
flex-shrink: 1;
flex-grow: 0;
}
.secondary:after {
content: " PiHole {{ 'OFF' if is_state('input_boolean.pi_hole_timer', 'on') else 'ON' }} " ;
position: relative;
color: {{ 'red' if is_state('input_boolean.pi_hole_timer', 'on') else 'lime' }} ;
font-weight: 600;
font-size: 13px;
right: 0px;
top: 4px;
padding-right: 10px;
z-index: 2
}
mushroom-shape-icon$: |
.shape {
{% if states('input_boolean.pi_hole_timer') == 'on' %}
--shape-color: red !important;
{% else %}
--shape-color: green !important;
{% endif %}
}
- type: custom:button-card
entity: timer.pi_hole_timer
name: Time Left
show_state: true
show_label: true
show_icon: false
height: 40px
styles:
img_cell:
- background-color: rgba(var(--color-theme),0,05)
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
card:
- background-color: '#3d5afe02'
- border: none
- border-radius: 14px
- font-size: 15px
- font-weight: bold
- height: 70px
- color: |
[[[
if(states['input_boolean.pi_hole_timer'].state == 'on') return 'red'
else return 'lime';
]]]
- align_self: middle
name:
- font-size: 16px
- color: '#DDDDDD'
- font-weight: normal
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr
margin: 0px 0px 0px 0px
card_mod:
style: |
ha-card {
border: none !important;
background: #434954;
}
I made some slight changes to your automation and added scripts to start and cancel.
I’ll DM you those adjustments.
5 Likes
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
).
