hallo @rhysb I was working on your nice card, but the problem is that if I scroll through the page, it will go along nicely, but if I click on the bell, my chips card will become clear? what did I do wrong & I have the mushroom shadow theme on with dark on? thanks in advance!
here screenshots
type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: template
content: '{{ now().strftime("%A, %-d %B") }}'
card_mod:
style: |
/* Style date & time */
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-border-width: 0;
}
- type: template
entity: input_boolean.notifications
icon: mdi:bell
tap_action:
action: toggle
hold_action:
action: none
card_mod:
style: |
/* Notification indicator */
ha-card:after {
/* Turn on indicator if there is a notification */
{% set notifications = (expand(states.light.lampen_nu) | selectattr('state', 'eq', 'on') | list | count)
+ (expand(states.group.ramen) | selectattr( 'state', 'eq', 'on') | list | count)
+ (expand(states.group.deuren) | selectattr( 'state', 'eq', 'on') | list | count)
+ states('sensor.devices_with_low_battery') | int %}
{% if notifications > 0 %}
content: "";
{% endif %}
/* Position & style notification */
position: absolute;
background: rgb(var(--rgb-red));
border-radius: 50%;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
}
alignment: justify
- type: conditional
conditions:
- entity: input_boolean.notifications
state: 'on'
card:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_boolean.hide_header_mobile
icon_color: blue
icon: mdi:page-layout-header
name: null
content_info: none
tap_action:
action: toggle
- type: entity
entity: camera.kooi_noucky
icon_color: blue
name: 'Camera '
content_info: name
icon: phu:arlo-essential-indoor
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: '--popup-background-color: black;'
content:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Camera
secondary: null
icon: phu:arlo-essential-indoor
icon_color: blue
- type: custom:layout-card
layout_type: masonry
layout:
width: 300
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, 0px 8px 14px)
cards:
- show_state: false
show_name: false
camera_view: live
type: picture-entity
entity: camera.kooi_noucky
camera_image: camera.kooi_noucky
theme: Mushroom
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
- type: conditional
conditions:
- entity: light.lampen_nu
state: 'on'
chip:
type: template
icon: mdi:lightbulb
entity: light.lampen_nu
content: >
{{ expand(states.light.lampen_nu) | selectattr('state', 'eq',
'on') | list | count }}
icon_color: amber
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lights On
content:
type: custom:auto-entities
filter:
include:
- group: light.lampen_nu
state: 'on'
options:
type: custom:mushroom-light-card
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
- entity_id: light.lampen_nu
state: 'on'
options:
type: custom:mushroom-light-card
layout: horizontal
secondary_info: none
tap_action:
action: toggle
card_mod:
style: |
/* Style & position All Lights button */
ha-card {
background: color-mix(in srgb, rgb(var(--rgb-state-light)) 10%, var(--card-background-color));
}
:host {
margin: 0px 0px 12px !important;
}
exclude: []
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
card_mod:
style: |
/* Position & style buttons */
.content {
margin: -24px -16px -24px -16px !important;
--ha-card-border-width: 0;
--ha-card-background: none;
--ha-card-box-shadow: 0;
--masonry-view-card-margin: -12px 0px 0px 0px;
}
- type: conditional
conditions:
- entity: group.ramen
state: 'on'
chip:
type: template
icon_color: blue
icon: mdi:window-open
entity: group.ramen
content: >
{{ expand(states.group.ramen) | selectattr('state', 'eq', 'on') |
list | count }}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Ramen Open
content:
type: custom:auto-entities
filter:
include:
- group: group.ramen
state: 'on'
options:
type: custom:mushroom-entity-card
layout: horizontal
secondary_info: last-changed
tap_action:
action: none
hold_action:
action: none
exclude: []
show_empty: false
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
card_mod:
style: |
/* Position & style buttons */
.content {
margin: -24px -16px -24px -16px !important;
--ha-card-border-width: 0;
--ha-card-background: none;
--ha-card-box-shadow: 0;
--masonry-view-card-margin: -12px 0px 0px 0px;
}
- type: conditional
conditions:
- entity: group.deuren
state: 'on'
chip:
type: template
entity: group.deuren
content: >
{{ expand(states.group.deuren) | selectattr('state', 'eq', 'on') |
list | count }}
icon_color: brown
icon: mdi:door-open
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Deuren Open
content:
type: custom:auto-entities
filter:
include:
- group: group.deuren
state: 'on'
options:
type: custom:mushroom-entity-card
layout: horizontal
secondary_info: last-changed
icon_color: brown
tap_action:
action: none
hold_action:
action: none
exclude: []
show_empty: false
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
card_mod:
style: |
/* Position & style buttons */
.content {
margin: -24px -16px -24px -16px !important;
--ha-card-border-width: 0;
--ha-card-background: none;
--ha-card-box-shadow: 0;
--masonry-view-card-margin: -12px 0px 0px 0px;
}
- type: conditional
conditions:
- entity: sensor.devices_with_low_battery
state_not: '0'
chip:
type: template
entity: sensor.devices_with_low_battery
content: |
{{ states(config.entity) | int }}
icon_color: red
icon: mdi:battery-alert
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Low Batteries
content:
type: custom:auto-entities
filter:
include:
- attributes:
device_class: battery
state: < 30
options:
type: custom:mushroom-template-card
primary: '{{ states(entity) }}%'
secondary: '{{ state_attr(entity, ''friendly_name'') | title }}'
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-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 %}
layout: horizontal
tap_action:
action: none
badge_icon: >-
{{ 'mdi:exclamation-thick' if states(entity) | int
< 10 }}
badge_color: red
exclude: null
show_empty: false
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
card_mod:
style: |
/* Position & style buttons */
.content {
margin: -24px -16px -24px -16px !important;
--ha-card-border-width: 0;
--ha-card-background: none;
--ha-card-box-shadow: 0;
--masonry-view-card-margin: -12px 0px 0px 0px;
}
- type: entity
entity: sensor.lights_on_lampen_nu
icon: hue:bulb-group-sultan-lightstrip
- type: entity
entity: sensor.lights_off_lampen_nu
use_entity_picture: false
icon: hue:bulb-group-sultan-lightstrip-off
- type: template
content: |-
{{ states('sensor.openweathermap_temperature') }} /
{{ states('sensor.multi_sensor_tarras_temperature') }} Ā°C
icon: |-
{% if is_state('weather.openweathermap', 'sunny') %}
mdi:weather-sunny
{% elif is_state('weather.openweathermap', 'partlycloudy') %}
mdi:weather-partly-cloudy
{% elif is_state('weather.openweathermap', 'cloudy') %}
mdi:weather-cloudy
{% elif is_state('weather.openweathermap', 'rainy') %}
mdi:weather-rainy
{% elif is_state('weather.openweathermap', 'partly-rainy') %}
mdi:weather-partly-rainy
{% elif is_state('weather.openweathermap', 'pouring') %}
mdi:weather-pouring
{% elif is_state('weather.openweathermap', 'fog') %}
mdi:weather-fog
{% elif is_state('weather.openweathermap', 'hail') %}
mdi:weather-hail
{% elif is_state('weather.openweathermap', 'hazy') %}
mdi:weather-hazy
{% elif is_state('weather.openweathermap', 'lightning') %}
mdi:weather-lightning
{% elif is_state('weather.openweathermap', 'lightning-rainy') %}
mdi:weather-lightning-rainy
{% elif is_state('weather.openweathermap', 'partly-lightning') %}
mdi:weather-partly-lightning
{% elif is_state('weather.openweathermap', 'snowy') %}
mdi:weather-snowy
{% elif is_state('weather.openweathermap', 'snowy-heavy') %}
mdi:weather-snowy-heavy
{% elif is_state('weather.openweathermap', 'snowy-rainy') %}
mdi:weather-snowy-rainy
{% elif is_state('weather.openweathermap', 'partly-snowy') %}
mdi:weather-partly-snowy
{% elif is_state('weather.openweathermap', 'partly-snowy-rainy') %}
mdi:weather-partly-snowy-rainy
{% elif is_state('weather.openweathermap', 'clear-night') %}
mdi:weather-night
{% elif is_state('weather.openweathermap', 'night-partly-cloudy') %}
mdi:weather-night-partly-cloudy
{% endif %}
icon_color: >-
{% if is_state('weather.openweathermap', 'sunny') %} #FFF900 {%
elif is_state('weather.openweathermap', 'partlycloudy') %} #B3B6B7
{% elif is_state('weather.openweathermap', 'cloudy') %} #626567 {%
elif is_state('weather.openweathermap', 'rainy') %} #5757BE {% elif
is_state('weather.openweathermap', 'partly-rainy') %} #4E4DD8 {%
elif is_state('weather.openweathermap', 'pouring') %} #2E9AFE {%
elif is_state('weather.openweathermap', 'fog') %} #C0C0C0 {% elif
is_state('weather.openweathermap', 'hail') %} white {% elif
is_state('weather.openweathermap', 'hazy') %} grey {% elif
is_state('weather.openweathermap', 'lightning') %} #D9D401 {% elif
is_state('weather.openweathermap', 'lightning-rainy') %} #D9D401 {%
elif is_state('weather.openweathermap', 'partly-lightning') %}
#D9D401 {% elif is_state('weather.openweathermap', 'snowy') %}
#FFFFFF {% elif is_state('weather.openweathermap', 'snowy-heavy') %}
#FFFFFF {% elif is_state('weather.openweathermap', 'snowy-rainy') %}
#FFFFFF {% elif is_state('weather.openweathermap', 'partly-snowy')
%} #FFFFFF {% elif is_state('weather.openweathermap',
'partly-snowy-rainy') %} #FFFFFF {% elif
is_state('weather.openweathermap', 'clear-night') %} #FFF900 {% elif
is_state('weather.openweathermap', 'night-partly-cloudy') %} #B3B6B7
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
style: '--popup-background-color: black;'
content:
type: custom:weather-card
entity: weather.openweathermap
name: Weer
current: true
details: true
forecast: true
hourly_forecast: true
number_of_forecasts: 5
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-icon {
{%- set sensor = states('weather.openweathermap') %}
{%- if sensor == 'sunny' %}
animation: sunny 8s ease-in-out infinite alternate;
{%- elif sensor == 'partly-cloudy' %}
animation: cloudy 10s ease-in-out infinite, sun 2s infinite;
{%- elif sensor == 'cloudy' %}
animation: cloudy 10s ease-in-out infinite;
{%- elif sensor == 'rainy' %}
animation: cloudy 10s ease-in-out infinite, rain 1.5s infinite;
{%- elif sensor == 'pouring' %}
animation: cloudy 10s ease-in-out infinite, pouring 1s infinite;
{%- elif sensor == 'fog' %}
animation: cloudy 10s ease-in-out infinite, fog 4s infinite;
{%- elif sensor == 'hail' %}
animation: cloudy 10s ease-in-out infinite, hail 2s infinite;
{%- elif sensor == 'lightning' %}
animation: cloudy 10s ease-in-out infinite, lightning 4s infinite;
{%- elif sensor == 'snow' %}
animation: cloudy 10s ease-in-out infinite, snow 4s infinite;
{%- elif sensor == 'clear-night' %}
animation: moon 10s linear infinite, stars 5s linear infinite;
{%- endif %}
}
@keyframes cloudy {
0%, 100% { transform: translateX(3px); }
30% { transform: translateX(-1px); }
45% { transform: translateX(1.5px); }
75% { transform: translateX(-3.2px); }
}
@keyframes sun {
50% { clip-path: polygon(0 67%, 18% 55%, 16% 31%, 41% 12%, 67% 24%, 77% 59%, 100% 64%, 100% 100%, 0 100%); }
}
@keyframes sunny {
70% { transform: rotate(360deg) scale(1); }
80% { transform: scale(1); }
90% { transform: scale(1.15); }
100% { transform: scale(1); }
}
@keyframes rain {
50% { clip-path: polygon(0 0, 100% 0, 100% 73%, 71% 73%, 50% 39%, 29% 73%, 0 73%); }
}
@keyframes pouring {
0%, 50%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 100% 0, 100% 83%, 54% 83%, 62% 47%, 47% 46%, 38% 83%, 0 83%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 70%, 75% 70%, 80% 48%, 63% 48%, 54% 94%, 32% 94%, 46% 46%, 30% 46%, 23% 72%, 0 72%); }
}
@keyframes fog {
0%, 26%, 76%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 100% 0, 100% 59%, 60% 59%, 60% 74%, 100% 74%, 100% 100%, 0 100%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 26% 100%, 26% 76%, 0 76%); }
}
@keyframes hail {
0%, 26%, 51%, 76%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 100%, 47% 69%, 56% 55%, 43% 43%, 31% 58%, 48% 68%, 63% 100%, 0 100%); }
50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 100%, 61% 86%, 74% 74%, 61% 60%, 46% 69%, 60% 87%, 63% 100%, 0 100%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 47% 100%, 56% 83%, 42% 68%, 27% 81%, 37% 100%, 0 100%); }
}
@keyframes lightning {
10%, 15% { clip-path: polygon(0 0, 100% 0, 100% 100%, 47% 100%, 69% 55%, 66% 40%, 48% 39%, 24% 100%, 0 100%); transform: scale(1.1); }
10.1%, 15.1% { clip-path: inset(0 0 0 0); transform: scale(1); }
}
@keyframes snow {
50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 65% 100%, 76% 73%, 57% 49%, 34% 56%, 26% 79%, 37% 100%, 0 100%); }
51% { clip-path: inset(0 0 0 0); }
}
@keyframes moon {
0%, 100% { transform: rotate(12deg); }
30% { transform: rotate(-6deg); }
45% { transform: rotate(8deg); }
75% { transform: rotate(-10deg); }
}
@keyframes stars {
0%, 3.1%, 14.1% { clip-path: inset(0 0 0 0); }
3% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 99% 62%, 68% 62%, 62% 44%, 76% 34%, 100% 34%, 99% 0%); }
14% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 100% 25%, 51% 45%, 38% 34%, 36% 0); }
}
- type: entity
entity: binary_sensor.meteoalarm
use_entity_picture: false
- type: entity
entity: sensor.multi_sensor_slaapkamer_jarne_temperature
- type: entity
entity: sensor.multi_sensor_tarras_temperature
- type: entity
entity: sensor.deur_open
icon: mdi:door-open
use_entity_picture: false
- type: entity
entity: sensor.deur_gesloten
icon: mdi:door-closed-lock
use_entity_picture: false
- type: entity
entity: sensor.raam_open
icon: mdi:window-open-variant
- type: entity
entity: sensor.raam_gesloten
icon: mdi:window-closed-variant
- type: entity
entity: sensor.covers_open
icon: mdi:window-shutter-open
- type: entity
entity: sensor.covers_closed
icon: mdi:window-shutter
- type: entity
entity: media_player.spotify_jarne_roussard
- type: entity
entity: calendar.onze_agenda
tap_action:
action: navigate
navigation_path: agenda
- type: entity
entity: switch.rituals_parfum
icon: phu:rituals
icon_color: blue
tap_action:
action: navigate
navigation_path: rituals-parfum
- type: entity
entity: sensor.jupiler_pro_league
icon: mdi:soccer
icon_color: blue
tap_action:
action: navigate
navigation_path: voetbal
- type: entity
entity: switch.stopcontact_printer_living
icon: mdi:printer
icon_color: blue
tap_action:
action: toggle
alignment: end
card_mod:
style: |
/* Set margins on notification chips */
ha-card {
margin: var(--chip-spacing) calc(-1 * var(--chip-spacing)) 0px;
transition: all 0s;
}
- type: entity
entity: binary_sensor.update
icon: mdi:update
icon_color: blue
tap_action:
action: navigate
navigation_path: update
- type: entity
entity: sensor.plex_server_jarne
icon: mdi:plex
icon_color: blue
tap_action:
action: navigate
navigation_path: plex
card_mod:
style: |
/* Remove styling from top card with chips */
ha-card {
/* Allow pseudo elements to display outside card */
overflow: visible !important;
/* Remove gap at top of card */
margin-top: calc(-1 * var(--mush-chip-spacing, 8px));
/* Remove styling from card */
box-shadow: none;
border: none;
background: none;
padding: var(--mush-chip-spacing, 8px);
transition: all 0s;
}
/* Make card sticky at top of page */
:host {
position: sticky;
z-index: 9;
top: var(--header-height);
}
/* Pseudo element to hide card styling when at top */
ha-card:after {
content: "";
/* Make fixed so element scrolls up */
position: fixed;
top: var(--header-height);
/* Adjust height when notifications visible */
height: {{ '104px' if is_state('input_boolean.notifications', 'on') else '60px' }};
/* Set width to match */
width: calc(100% - var(--mush-chip-spacing, 8px));
max-width: calc(var(--column-max-width) - 2 * var(--ha-card-border-width, 1px) - var(--mush-chip-spacing, 8px));
/* Center element on page */
left: 50%;
transform: translateX(-50%);
/* Position between chips and background pseudo elemnt */
z-index: -1;
/* Match background to main card */
background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color));
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
}
/* Pseudo element for background & other card styling */
ha-card:before {
content: "";
/* Position & size card behind chips */
position: absolute;
top: 0px;
left: 0px;
height: 100%;
/* Adjust width to account for border */
width: calc(100% - 2 * var(--ha-card-border-width, 1px));
/* Position card at back */
z-index: -1;
/* Blur content behind card */
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
/* Adjust opacity of card */
background: rgba(var(--rgb-card-background-color), 0.8);
/* Set styling of card */
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
box-shadow: var(--ha-card-box-shadow);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
}