Hello I have this card:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.pupetti
content_info: none
use_entity_picture: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Federico
content:
type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: person.pupetti
layout: horizontal
icon_type: entity-picture
primary_info: state
secondary_info: last-changed
tap_action:
action: none
hold_action:
action: none
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
/* Style shadow ring around person avatar */
box-shadow: 0px 0px 4px 2px var(--state-person);
margin-right: var(--mush-title-spacing, 12px);
}
.: |
ha-card {
/* Remove default card styling */
--ha-card-background: none;
box-shadow: none;
--ha-card-border-width: 0;
/* Increase icon size */
--icon-size: 72px;
/* Center card */
margin: auto;
width: fit-content;
/* Add padding to bottom of card */
padding: 0px 0px var(--mush-title-spacing, 12px) 0px !important;
/* Make card non-responsive to select and pointer */
user-select: none;
pointer-events: none;
transition: all 0s;
}
:host {
/* Define Person State colors. Can be added to theme */
--state-person-home: var(--green-color);
--state-person-not-home: var(--red-color);
--state-person-zone: var(--blue-color);
--state-person-unknown: var(--grey-color);
/* Set Person State color */
--state-person:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
var(--state-person-{{ states(config.entity) | replace('_', '-') }})
{% else %}
var(--state-person-zone)
{% endif %};
/* Match styling to Mushroom Title */
--mush-card-primary-font-size: var(--mush-title-font-size, 24px);
--mush-card-primary-font-weight: var(--mush-title-font-weight, normal);
--mush-card-primary-line-height: var(--ush-title-line-height, 1.2);
--mush-card-secondary-font-size: var(--mush-title-font-size, 16px);
--mush-card-secondary-font-weight: var(--mush-title-font-weight, normal);
--mush-card-secondary-line-height: var(--ush-title-line-height, 1.2);
}
- type: history-graph
entities:
- entity: person.pupetti
name: ' '
hours_to_show: 24
title: Timeline
card_mod:
style:
$: |
.card-header {
/* Style timeline title */
padding: 0px 24px !important;
font-size: var(--mush-card-primary-font-size, 14px) !important;
font-weight: var(--mush-card-primary-font-weight, bold) !important;
line-height: var(--mush-card-primary-line-height, 1.5) !important;
color: var(--primary-text-color) !important;
}
.: |
ha-card {
/* Remove default card styling */
--ha-card-box-shadow: none;
--ha-card-background: none;
--ha-card-border-width: 0;
user-select: none;
}
.content {
/* Add padding on right */
padding: 0px 24px !important;
}
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: sensor.fede_l_16_average_active_pace_3
state_not: '0'
card:
type: custom:mushroom-template-card
primary: >-
{{ states(entity) }} {{ state_attr(entity,
'unit_of_measurement') }}
secondary: '{{ state_attr(entity, ''distance'') | round(1) }} km'
icon: mdi:map-marker-path
entity: sensor.fede_l_16_distance_3
layout: vertical
icon_color: purple
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-state-info$: |
.primary:after {
/* Add destination details */
content: "\Ato Home";
white-space: pre;
text-overflow: ellipsis;
}
.: |
ha-card {
/* Remove default card styling */
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
/* Center card on row */
width: fit-content;
margin: auto;
/* Make card non-responsive to select and pointer */
user-select: none;
pointer-events: none;
}
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: sensor.fede_l_16_geocoded_location_3
state_not: '0'
card:
type: custom:mushroom-template-card
primary: >-
{{ states(entity) }} {{ state_attr(entity,
'unit_of_measurement') }}
secondary: '{{ state_attr(entity, ''distance'') | round(1) }} km'
icon: mdi:map-marker-path
entity: sensor.fede_l_16_distance_3
layout: vertical
icon_color: purple
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-state-info$: |
.primary:after {
/* Add destination details */
content: "\Ato Work";
white-space: pre;
text-overflow: ellipsis;
}
.: |
ha-card {
/* Remove default card styling */
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
/* Center card on row */
width: fit-content;
margin: auto;
/* Make card non-responsive to select and pointer */
user-select: none;
pointer-events: none;
}
- type: custom:mushroom-template-card
primary: '{{ states(entity) }}%'
secondary: >
{{ 'charging' if
is_state('sensor.fede_l_16_battery_state', 'on' ) else
'discharging' }}
icon: >
{% set battery_level = (states(entity) | int / 10) |
round(0) | int * 10 %}
{% if battery_level == 100 %}
mdi:battery
{% elif battery_level > 0 %}
mdi:battery-{{ battery_level }}
{% else %}
mdi:battery-alert-variant-outline
{% endif %}
icon_color: |-
{% set battery_level = states(entity) | int %}
{% if battery_level > 90 %}
green
{% elif battery_level > 60 %}
light-green
{% elif battery_level > 50 %}
lime
{% elif battery_level > 40 %}
yellow
{% elif battery_level > 30 %}
amber
{% elif battery_level > 20 %}
orange
{% elif battery_level > 10 %}
deep-orange
{% else %}
red
{% endif %}
entity: sensor.fede_l_16_battery_level_3
layout: vertical
badge_icon: >-
{% if is_state('sensor.fede_l_16_battery_state_3', 'on')
%}
mdi:lightning-bolt
{% elif states(entity) | int < 10 %}
mdi:exclamation-thick
{% endif %}
badge_color: '{{ ''red'' if states(entity) | int < 10 else ''light-blue'' }}'
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
/* Radial progress bar */
background: radial-gradient(var(--card-background-color) 60%,
transparent calc(60% + 1px)),
conic-gradient(var(--icon-color) {{ states(config.entity) }}% 0%,
var(--card-background-color) 0% 100%);
}
.shape:after {
/* Add back icon shape */
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: var(--shape-color);
}
ha-icon {
/* Icon charging animation */
{{ '--icon-animation: charge 3s linear infinite;' if is_state('binary_sensor.rhys_phone_is_charging', 'on') }}
}
@keyframes charge {
0%, 80% { clip-path: inset(0 0 0 0); }
10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 74%, 34% 74%, 34% 100%, 100% 100%, 100% 0%); }
30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 34%, 34% 34%, 34% 100%, 100% 100%, 100% 0%); }
70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
}
.: |
ha-card {
/* Remove default card styling */
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
/* Center card on row */
width: fit-content;
margin: auto;
/* Make card non-responsive to select and pointer */
user-select: none;
pointer-events: none;
}
- type: conditional
conditions:
- entity: sensor.fede_l_16_connection_type_3
state_not: <not connected>
card:
type: custom:mushroom-template-card
primary: '{{ states(''sensor.fede_l_16_connection_type_3'') }}'
secondary: >-
{% set signal_level = states(entity) | int %} {% if
signal_level != -1 %}
{{ signal_level }} dBm
{% endif %}
icon: >-
{% set signal_level = states(entity) | int | abs %} {%
if signal_level > 90 %}
mdi:wifi-strength-outline
{% elif signal_level > 80 %}
mdi:wifi-strength-1
{% elif signal_level > 70 %}
mdi:wifi-strength-2
{% elif signal_level > 60 %}
mdi:wifi-strength-3
{% elif signal_level > 1 %}
mdi:wifi-strength-4
{% else %}
mdi:wifi-strength-off
{% endif %}
entity: sensor.fede_l_16_connection_type
layout: vertical
fill_container: false
icon_color: cyan
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
/* Remove default card styling */
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
/* Center card on row */
width: fit-content;
margin: auto;
/* Make card non-responsive to select and pointer */
user-select: none;
pointer-events: none;
}
- type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: none;
hold_action:
action: call-service
service: notify.mobile_app_fede_l_16
data:
message: Ringing phone...
title: Find Phone
data:
ttl: 0
importance: high
priority: high
tag: Find
channel: alarm_stream
icon: mdi:target
icon_color: red
content: Find Phone
alignment: center
card_mod:
style: |
ha-card {
/* Style Chip like Mushroom button */
--chip-background: rgba(var(--rgb-red), 0.2);
--chip-border-radius: var(--mush-control-border-radius, 12px);
--chip-height: var(--mush-control-height, 42px);
--chip-box-shadow: none;
user-select: none;
}
ha-card:active {
/* Add effect to give feedback on button press */
--chip-background: rgba(var(--rgb-red), 0.4);
}
- type: map
entities:
- entity: person.pupetti
dark_mode: false
hours_to_show: 24
aspect_ratio: '4:3'
card_mod:
style:
ha-map $ ha-entity-marker $: |
.marker {
/* Style person marker & adjust position to avoid blocking waypoints */
border: 3px solid var(--state-person) !important;
border-radius: 50% 50% 50% 0px !important;
transform: rotate(-45deg) translate(50%, -50%);
overflow: visible !important;
background: var(--state-person) !important;
}
.entity-picture {
/* Correct orientation of person avatar */
transform: rotate(45deg);
border-radius: 50%;
}
ha-map $: |
path:first-child {
/* Style accuracy radius */
stroke: var(--state-person);
fill: color-mix(in srgb, var(--state-person) 50%, transparent);
stroke-width: 0px;
}
path:nth-child(even) {
/* Styling for waypoints */
stroke: var(--purple-color);
stroke-width: 4px;
}
path:nth-child(odd):not(:first-child) {
/* Styling for lines */
stroke: var(--purple-color);
stroke-width: 4px;
}
.leaflet-control-attribution {
/* Style attribution text */
background: rgba(var(--rgb-card-background-color), 0.4) !important;
font-size: 10px;
}
.leaflet-container a {
/* Set color of zoom icons & attribution text */
color: var(--secondary-text-color);
}
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
/* Style zoom buttons like Chips */
border-radius: var(--mush-chip-border-radius, 19px) !important;
padding: 3px;
background: rgb(var(--rgb-secondary-text-color), 0.2) !important;
margin: 8px 12px 0px;
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
.leaflet-top {
/* Move zoom buttons to bottom of map */
bottom: 0px !important;
}
.leaflet-control-zoom {
/* Allow buttons to be moved */
position: absolute !important;
/* Adjust spacing for border */
bottom: calc(2 * var(--ha-card-border-width, 1px) + 56px);
/* Remove extra margin */
margin: 0px !important;
/* Remove zoom control border */
border: none !important;
}
.leaflet-container:after {
/* Fade out map at top */
content: "";
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(to top, transparent 65%, var(--card-background-color));
}
ha-icon-button $ mwc-icon-button $: |
button {
/* Size center button to match Chip */
height: var(--mush-chip-height, 36px) !important;
width: var(--mush-chip-height, 36px) !important;
--mdc-icon-size: 22px;
}
.: |
ha-card {
/* Remove default card styling without affecting child elements */
box-shadow: none;
border-width: 0;
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
transition: all 0s;
}
:host {
/* Define Person State colors. Can be added to theme */
--state-person-home: var(--green-color);
--state-person-not-home: var(--red-color);
--state-person-zone: var(--blue-color);
--state-person-unknown: var(--grey-color);
/* Set person state color */
--state-person:
{% if is_state(config.entities[0].entity, ['home', 'not_home', 'unknown']) %}
var(--state-person-{{ states(config.entities[0].entity) | replace('_', '-') }})
{% else %}
var(--state-person-zone)
{% endif %};
}
ha-icon-button {
/* Position center button */
bottom: 12px;
left: 12px !important;
top: auto !important;
/* Style center button to match Chip */
color: var(--deep-orange-color) !important;
background: color-mix(in srgb, var(--deep-orange-color) 20%, transparent);
border-radius: var(--mush-chip-border-radius, 19px);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
card_mod:
style: |
:host {
/* Remove border from poup */
--popup-padding-x: 0px;
--popup-padding-y: 0px;
--popup-min-width: 450px;
}
.content {
/* Remove extra bottom border */
margin: -18px -24px -24px !important;
}
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
But the problem is when im in my office. My zone.work creates this situation in my pop up:
I have both conditions home/not_home by my iPhone device tracker …. Could you help me to solve it? Thank you
