Hello there,
As much as I like the minimalist new badge style, I don’t like that I can’t customize them with card-mod as I used to.
So it is now 2 days that I’m recreating a kind of custom:badge-card using stack-in-card, entities and custom:hui-state-badge-element and a lot of card-mod instructions
type: custom:stack-in-card
mode: horizontal
keep:
background: true
cards:
- type: entities
entities:
- type: custom:hui-state-badge-element
entity: sensor.uptime_television_human
name: Télé
tap_action:
action: call-service
confirmation:
text: Voulez remettre le temps de télévision à zéro ?
service: script.raz_de_television
card_mod:
style: |
:host {
--label-badge-red: {% if is_state('input_boolean.stop_tele', 'off') %} green {% else %} red {% endif %} !important;
{% if is_state('input_boolean.stop_tele', 'off') %}
--label-badge-background-color: rgba(0,255,0,0.1) !important;
{% else %}
--label-badge-background-color: rgba(255,0,0,0.1) !important;
{% endif %}
}
- type: entities
entities:
- type: custom:hui-state-badge-element
entity: sensor.uptime_ipad_human
name: iPad
display_type: complete
tap_action:
action: call-service
confirmation:
text: Voulez remettre le temps d'iPad à zéro ?
service: script.raz_de_ipad
card_mod:
style: |
:host {
--label-badge-red: {% if is_state('input_boolean.stop_ipad', 'off') %} green {% else %} red {% endif %};
{% if is_state('input_boolean.stop_ipad', 'off') %}
--label-badge-background-color: rgba(0,255,0,0.1) !important;
{% else %}
--label-badge-background-color: rgba(255,0,0,0.1) !important;
{% endif %}
}
- type: entities
entities:
- type: custom:hui-state-badge-element
entity: sensor.uptime_laptop_human
name: Ordi
display_type: complete
tap_action:
action: call-service
confirmation:
text: Voulez remettre le temps d'ordinateur à zéro ?
service: script.raz_de_laptop
card_mod:
style: |
:host {
--label-badge-red: {% if is_state('input_boolean.stop_ordi', 'off') %} green {% else %} red {% endif %};;
{% if is_state('input_boolean.stop_ordi', 'off') %}
--label-badge-background-color: rgba(0,255,0,0.1) !important;
{% else %}
--label-badge-background-color: rgba(255,0,0,0.1) !important;
{% endif %}
}
card_mod:
style: |
:host {
display: flex;
justify-content: center;
align-items: center;
}
ha-card {
border-style: none;
background-color: none !important;
--ha-card-background: none;
}
Result:
I’m not posting that in the card-mod thread as it will be lost in all the replies.
Feel free to inspire yourself from this code, enhance it and do kind and positive comments on my starting code
As post was splitted and closed, here is the re-creation