this could be posted in a tile card or custom:button-card thread too, but since I am trying to find the right card-mod, Iāll start hereā¦
I have this tile card mod
type: tile
icon: mdi:water
name: ' '
vertical: true
tap_action:
action: more-info
card_mod:
style: |
.icon-container {
border-radius: 24px;
background: radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
conic-gradient(var(--tile-color) {{states(config.entity)}}% 0%,
var(--card-background-color) 0% 100%);
}
which draws a perfect border according to the percentage of the entity:
Iād love to do the same with my light buttons, but cant find the right mod to do so:
I have some of these on a custom field:
custom_fields:
info: &info_light
>
[[[ if (entity.state === 'on' && entity.attributes.brightness) {
var brightness = Math.round(entity.attributes.brightness/2.54);
const radius = 20.5;
const circumference = radius * 2 * Math.PI;
return `
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="${radius}"
stroke="var(--button-card-light-color,var(--active-color))" stroke-width="2" fill="none"
style="transform: rotate(-90deg);transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - brightness / 100 * circumference};" />
<text x="50%" y="54%" fill="black" font-size="16" font-weight= "bold"
text-anchor="middle" alignment-baseline="middle">
${brightness}<tspan font-size="10">%</tspan>
</text>
</svg>
`;
}
]]]
and that works fine:
. but in this case I want the border to be drawn on the img_cell of the button-card, or, checking the element in the dom, the .img-cell
so I copied that tile card mod over to
card_mod:
style: |
.img-cell {
border-radius: 24px;
background: radial-gradient(var(--card-background-color) 60%,transparent calc(60% + 1px)),
conic-gradient(var(--button-card-light-color) {{states(config.entity)}}% 0%,
var(--card-background-color) 0% 100%);
}
note I did change to the button-card-light-color, but nothing is happeningā¦
this is the original button with a regular style section on the image_cell:
img_cell:
- justify-content: center
- background: >
[[[ var rgb = (entity.state === 'on')
? entity.attributes.rgb_color : '211,211,211';
return 'rgba(' + rgb + ',0.2)'; ]]]
- border-radius: 24px
- place-self: start
- width: 42px
- height: 42px
but when I take that out, and change to the card-mod there is nothing:
tbh, I wouldnāt yet know how to write the background in styles syntax native to the custom:button-card, thats why I tried it with card-mod
please have a look what could be done to fix this?
