kongo09
January 30, 2021, 12:41pm
1359
I would like to modify the standard light card for a dimmer with three goals:
eliminate the three dots for the more-info menu
make the background transparent
let the icon keep its color instead of changing with dim level / brightness
I managed to achieve the first two but I’m stuck with the third. Any advice?
type: light
entity: light.shelly_leo_dimmer
style: |
mwc-icon-button.more-info {
display: none;
}
ha-card {
background: none;
}
Inspecting the document, I can see that a filter: on ha-icon-button is responsible for the changing color. However, setting it to none doesn’t seem to have an effect:
type: light
entity: light.shelly_leo_dimmer
style: |
mwc-icon-button.more-info {
display: none;
}
ha-card {
background: none;
}
ha-icon-button {
filter: none;
}
I feel like missing something obvious.
KTibow
January 30, 2021, 2:50pm
1360
The filter is responsible for the brightness; you also need to set color.
kongo09
January 30, 2021, 2:59pm
1361
I don’t think it is that easy. The following has no effect:
type: light
entity: light.shelly_leo_dimmer
style: |
mwc-icon-button.more-info {
display: none;
}
ha-card {
background: none;
}
ha-icon-button {
filter: none;
color: green;
}
kongo09
January 30, 2021, 3:25pm
1363
Thanks, yes, that was it!
type: light
entity: light.shelly_leo_dimmer
style: |
mwc-icon-button.more-info {
display: none;
}
ha-card {
background: none;
}
ha-icon-button {
filter: none !important;
}
Thank you very much! I am wondering where I can put the Variable so that I can reuse it in other cards.
petro
February 3, 2021, 7:42pm
1366
Can you break down how you got to this selector? I tried to apply my selector knowledge this morning and did not get the same result (or a working result).
KTibow
February 4, 2021, 8:18pm
1367
Oh, that was an old post. Could you share what you came down to?
petro
February 4, 2021, 8:20pm
1368
I don’t remember what I originally had. But I’m wondering how you get the initial selector point. How did you know to use layout-card$?
KTibow
February 4, 2021, 8:21pm
1369
That was the name of the card’s element.
petro
February 4, 2021, 8:23pm
1370
So where’s the $ come from, why is it at the end? Is that something new in the custom card?
KTibow
February 4, 2021, 8:25pm
1371
This was the old syntax:
style:
element-card:
$:
another-thing:
$: |
This is the new syntax:
style:
element-card$another-thing$: |
1 Like
Could you explain what means “the new syntax”, shall we use it from now, will it work everywhere?
parautenbach
February 5, 2021, 8:37pm
1374
And to add to that: Will the old syntax stop working, or is the new syntax more like syntactic sugar?
KTibow
February 5, 2021, 8:51pm
1375
Could you explain your question more?
Ildar_Gabdullin:
shall we use it from now
If you want.
Ildar_Gabdullin:
will it work everywhere?
I don’t know, but in all of my uses so far it’s worked.
I think it will still work.
It does fix a problem with the old syntax that stopped you from shadow-rooting into an element inside of a shadow-root
1 Like
Please give me an example of this, I did not get the point, thank you!
KTibow
February 6, 2021, 1:59am
1377
This originally worked, then stopped working:
style:
element-card:
$:
another-thing:
$: |
When the new syntax came out, it worked.
maxym
February 6, 2021, 11:11am
1378
Sorry being late:
type: entities
title: Kitchen
entities:
- entity: light.kitchen
icon: 'mdi:dome-light'
- entity: light.kitchen_worktop
type: 'custom:multiple-entity-row'
state_header: Main
toggle: true
state_color: true
style:
ha-entity-toggle:
$: |
ha-switch {
padding: 0px;
}
I have also another example this time multi entity is embeded into restriction-card
entities:
- type: 'custom:restriction-card'
action: double_tap
style:
multiple-entity-row$:
ha-entity-toggle$: |
ha-switch {
padding-top: 0;
}
.: |
state-badge {
line-height: 20px;
height: 30px;
}
.: |
ha-icon {margin-top: 5px}
before
after
