Hi,
can someone help with card_mod? I want to remove the button and I also want to modify the second_info.
- green color
- smaller font
current status:
should look like this which is done with a mushroom-template-card. But the issue with the mushroom-template card is, that the tab-actions are not working together with card_mod.
type: entities
entities:
- entity: light.ikea_tischleuchte_kellerflur
name: Tischleuchte
icon: mdi:lightbulb
secondary_info: last-changed
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style:
hui-generic-entity-row:
$: |
state-badge {
--ring-outer: 40px;
--ring-thickness: 2px;
--mdc-icon-size: 16px;
width: var(--ring-outer);
height: var(--ring-outer);
aspect-ratio: 1 / 1;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-sizing: content-box;
overflow: visible;
line-height: 0;
}
ha-state-icon {
width: var(--mdc-icon-size);
height: var(--mdc-icon-size);
transform: translate(var(--icon-nudge-x, 0px), var(--icon-nudge-y, 0px));
display: block;
}
ha-state-icon svg {
display: block;
width: 100%;
height: 100%;
transform-box: fill-box;
transform-origin: center;
}
state-badge::after {
content: "";
position: absolute;
width: var(--ring-outer);
height: var(--ring-outer);
top: 0;
left: 0;
border-radius: 50%;
pointer-events: none;
-webkit-mask: radial-gradient(
circle at center,
transparent calc((var(--ring-outer) / 2) - var(--ring-thickness)),
#000 0
);
mask: radial-gradient(
circle at center,
transparent calc((var(--ring-outer) / 2) - var(--ring-thickness)),
#000 0
);
{% set bri = state_attr(config.entity, 'brightness') | float(0) %}
{% set angle = (bri / 255 * 360) | int %}
{% if is_state(config.entity, 'on') %}
background: conic-gradient(
rgba(255,191,0, 0.1) 0deg,
rgba(255,191,0, 0.3) 25deg,
rgba(255,191,0, 0.6) 50deg,
rgba(255,191,0, 0.9) {{ angle }}deg,
rgba(255,191,0, 0.12) 0deg
);
{% else %}
background: conic-gradient(
rgba(255,191,0, 0.3) 0deg,
transparent 0deg
);
{% endif %}
}
.secondary {
color: limegreen;
font-size: 11px;
line-height: 1.2;
}
ha-switch {
display: none !important;
}
":host": |
display: block;
border: 1px solid #ccc;
border-radius: 4px;
padding: 6px 10px;
margin: 4px 0;