hey rhysb, how can you make picture and icon bigger.
Hey,
within a template card it should work like this
type: custom:mushroom-template-card
primary: Info/Aktuelles
icon: mdi:information-outline
icon_color: '#FF8C00'
card_mod:
style: |
ha-card {
--icon-size: 48px;
}
1 Like
more of a design question.
What default colours do people use in dark mode for
Off
On
Heating Off
Auto/Idle
Heating ON
Trying to be consistent but not found anything that works and its the Auto/Idle thats throwing me as, its technically off as not using anything but cant keep it Grey as its in a different state
I was using
Off Grey
On Green
Heating Off Grey
Auto/Idle Amber
Heating On Red
Just wanting other peoples thoughts ?
Thanks
Hint: try padding-bottom: 0px !important; 
1 Like
Yes:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:mushroom
icon_color: red
- type: template
icon: mdi:mushroom
icon_color: red
- type: conditional
conditions:
- entity: switch.fungi
state: 'on'
chip:
type: template
icon: mdi:mushroom
icon_color: red
card_mod:
style: |
.content {
animation: spin 1s linear infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
card_mod:
style:
mushroom-conditional-chip:nth-child(3):
mushroom-template-chip$: |
ha-icon {
animation: beat 1.3s ease-out infinite both;
transform-origin: 50% 60%;
}
@keyframes beat {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.75); }
60% { transform: scale(1); }
}
Iāve re-done my Mushroom Welcome Card to add a collapsible sticky header. Iām still working on the Person and weather popups, so have just put in placeholders for now.
Mushroom Collapsible Welcome Card:
Top Sticky Card - Part 1:
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.group.all_lights) | selectattr('state', 'eq', 'on') | list | count)
+ (expand(states.group.all_windows) | selectattr( 'state', 'eq', 'on') | list | count)
+ (expand(states.group.external_doors) | 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: template
entity: alarm_control_panel.home_alarm
icon: mdi:shield-home
icon_color: |-
{% set alarm_status = states(entity) %}
{% if alarm_status == 'armed_home' %}
green
{% elif alarm_status == 'disarmed' %}
blue
{% elif alarm_status == 'arming' %}
yellow
{% elif alarm_status == 'triggered' %}
red
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Alarm
content:
type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.home_alarm
states:
- armed_home
- armed_away
hold_action:
action: none
- type: template
entity: lock.front_door
icon: '{{ ''mdi:lock'' if is_state(entity, ''locked'') else ''mdi:lock-open'' }}'
icon_color: '{{ ''green'' if is_state(entity, ''locked'') else ''red'' }}'
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Front Door
content:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:frigate-card
cameras:
- camera_entity: camera.doorbell
live_provider: webrtc-card
webrtc_card:
url: >-
rtsp://10.10.90.10/Streaming/Channels/501/
dimensions:
aspect_ratio_mode: dynamic
- type: custom:mushroom-lock-card
entity: lock.front_door
card_mod:
style: |
.content {
}
- type: conditional
conditions:
- entity: group.all_lights
state: 'on'
chip:
type: template
icon: mdi:lightbulb
entity: group.all_lights
content: >
{{ expand(states.group.all_lights) | 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: group.all_lights
state: 'on'
options:
type: custom:mushroom-light-card
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
- entity_id: group.all_lights
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.all_windows
state: 'on'
chip:
type: template
icon_color: blue
icon: mdi:window-open
entity: group.all_windows
content: >
{{ expand(states.group.all_windows) | selectattr('state', 'eq',
'on') | list | count }}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Windows Open
content:
type: custom:auto-entities
filter:
include:
- group: group.all_windows
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.external_doors
state: 'on'
chip:
type: template
entity: group.external_doors
content: >
{{ expand(states.group.external_doors) | 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: Windows Open
content:
type: custom:auto-entities
filter:
include:
- group: group.external_doors
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: conditional
conditions:
- entity: group.water_leak
state: 'on'
chip:
type: template
icon_color: light-blue
icon: mdi:water-alert
tap_action:
action: more-info
entity: group.water_leak
card_mod:
style: |
.content {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: group.smoke_alarm
state: 'on'
chip:
type: template
icon_color: red
icon: mdi:fire-alert
tap_action:
action: more-info
entity: group.smoke_alarm
card_mod:
style: |
.content {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
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;
}
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: 0px;
}
/* Pseudo element to hide card styling when at top */
ha-card:after {
content: "";
/* Make fixed so element scrolls up */
position: fixed;
top: 0px;
/* 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));
}
Cont. in next postā¦
78 Likes
Bottom Collapsible Card - Part 2:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto auto
margin: 8px 4px 4px 4px;
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.rhys
content_info: none
use_entity_picture: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Rhys
content:
type: vertical-stack
cards:
- type: custom:mushroom-person-card
entity: person.rhys
icon_type: entity-picture
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;
}
- type: entity
entity: person.sarah
content_info: none
use_entity_picture: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Sarah
content:
type: vertical-stack
cards:
- type: custom:mushroom-person-card
entity: person.sarah
icon_type: entity-picture
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;
}
- type: entity
entity: person.elijah
content_info: none
use_entity_picture: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Elijah
content:
type: vertical-stack
cards:
- type: custom:mushroom-person-card
entity: person.elijah
icon_type: entity-picture
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;
}
- type: entity
entity: person.michaela
content_info: none
use_entity_picture: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Michaela
content:
type: vertical-stack
cards:
- type: custom:mushroom-person-card
entity: person.michaela
icon_type: entity-picture
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;
}
alignment: end
card_mod:
style: |
ha-card {
/* Overlap avatar Chips */
--chip-spacing: calc(-1 * var(--mush-chip-spacing, 8px));
/* Set size of border around Chips */
--chip-avatar-padding: 2px;
/* Reduce width to fit Chips & allow max space for weather */
width: fit-content;
transition: all 0s;
}
- type: custom:mushroom-template-card
primary: '{{ state_attr(entity, ''temperature'') | round(1) }} Ā°C'
secondary: >-
{% set condition = state_attr(entity, 'forecast')[0]['conditions'] %}
{% set intensity = states('sensor.unsworth_heights_rain_intensity') %}
{% if intensity != 'None' %}
{% set condition = intensity + ' Rain' %}
{% endif %}
{{ condition }}
icon: ' '
entity: weather.weatherflow_weather_hourly
picture: >-
{% set condition = states(entity) %}
{% set intensity = states('sensor.weatherflow_rain_intensity') |
replace(" ", "-") | lower %}
{% if condition == 'partlycloudy' and is_state('sun.sun',
'below_horizon') %}
{% set condition = condition + '-night' %}
{% endif %}
{% if intensity != 'none' and condition != 'lightning' %}
{% set condition = intensity %}
{% endif %}
/local/weather_icons/anim/{{ condition }}.svg
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Weather
content:
type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:weather-card
entity: weather.weatherflow_day_based_forecast
number_of_forecasts: '5'
card_mod:
style:
mushroom-state-info$: |
/* Align text on the right */
.container {
transform: scaleX(-1);
text-align: right;
width: fit-content;
}
.: |
ha-card {
/* Move icon to the right */
transform: scaleX(-1);
/* Enlarge icon & remove circular shape */
--icon-size: 42px;
--icon-border-radius: 0;
/* Style secondary text */
--card-secondary-font-weight: normal;
/* Remove styling from card */
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
padding: 0px !important;
transition: all 0s;
}
- type: horizontal-stack
cards:
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: |-
{% set time = now().hour %}
{% if (time >= 18) %}
Good Evening,
{% elif (time >= 12) %}
Good Afternoon,
{% elif (time >= 5) %}
Good Morning,
{% else %}
Welcome,
{% endif %}
subtitle: |
{{ user }}!
alignment: start
card_mod:
style:
mushroom-title-card$: |
/* Style greeting */
.title {
--title-font-size: var(--mush-title-font-size, 16px);
--title-font-weight: var(--mush-subtitle-font-weight, light);
color: var(--secondary-text-color) !important;
}
/* Style name */
.subtitle {
--subtitle-font-size: var(--mush-title-font-size, 24px);
--subtitle-font-weight: var(--mush-title-font-weight, bold);
color: var(--primary-text-color) !important;
padding-left: 12px;
}
/* Set spacing around greeting */
.header {
--title-padding: 0px 12px 24px;
--title-spacing: 8px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
secondary: House
icon: mdi:home
layout: vertical
icon_color: blue
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
/* Set size and spacing of button */
width: 58px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.618) !important;
/* Styling of button */
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Lights
icon: mdi:lightbulb
icon_color: amber
layout: vertical
tap_action:
action: navigate
navigation_path: lights
card_mod:
style: |
ha-card {
/* Set size and spacing of button */
width: 58px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.618) !important;
/* Styling of button */
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
}
- type: custom:mushroom-template-card
secondary: Secure
icon: mdi:shield
icon_color: green
layout: vertical
tap_action:
action: navigate
navigation_path: security
card_mod:
style: |
ha-card {
/* Set size and spacing of button */
width: 58px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.618) !important;
/* Styling of button */
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
}
- type: custom:mushroom-template-card
secondary: Media
icon: mdi:speaker
layout: vertical
icon_color: red
tap_action:
action: navigate
navigation_path: media
card_mod:
style: |
ha-card {
/* Set size and spacing of button */
width: 58px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.618) !important;
/* Styling of button */
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
}
- type: custom:mushroom-template-card
secondary: Net
icon: mdi:lan
layout: vertical
icon_color: cyan
tap_action:
action: navigate
navigation_path: net
card_mod:
style: |
ha-card {
/* Set size and spacing of button */
width: 58px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.618) !important;
/* Styling of button */
background: var(--card-background-color) !important;
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 5%, var(--card-background-color)) !important;
}
card_mod:
style: |
ha-card {
/* Set padding of card */
padding: 8px 8px 12px;
/* Move card up to match header card */
margin-top: -20px;
/* Styling of card background */
background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color)) !important;
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
transition: all 0s;
}
Iāve used the new color-mix command, which is supported in Chrome and Edge.
Here are the Animated Weather Icons I have used. Based on amCharts free weather icons.
35 Likes
but if you increase the icon size, the battery indicator ring doesnt resize.
Try something like this:
type: custom:mushroom-person-card
entity: person.rhys
icon_type: entity-picture
card_mod:
style:
mushroom-shape-avatar$: |
.container:before {
content: "";
height: 100%;
width: 100%;
background: radial-gradient(rgb(var(--rgb-white)) 60%, transparent calc(60% + 1px)), conic-gradient(rgb(var(--rgb-green)) {{ states('sensor.rhys_phone_battery_level') }}% 0%, transparent 0% 100%);
border-radius: var(--icon-border-radius);
position: absolute;
-webkit-mask-image: radial-gradient(circle calc(var(--icon-size) / 2 - 0.3em) at 50% 50%, transparent 100%, black 0);
}
.: |
ha-card {
--icon-size: 72px;
}
1 Like
Brilliantā¦THX.
1 Like
Exactly what i searched for .
Thanks.
1 Like
Hi,
iĀ“m a bit confused why the borders of the cards are visible:
Can anyone let me know how to remove them?
change the theme to Mushroom Shadow and that will fix it on the device
1 Like
Many thanks for your help
1 Like
is it possible to share the SVG files you use as part of this? Thanks in advance and awesome work!!!
/local/weather_icons/anim/{{ condition }}.svg
1 Like
Is there something like a āblankā card with the dimensions of a mushroom card that can be used as a āfillerā guys?
Knew I would forget something 
.
Added.
1 Like
Whats the full path to put the files?
Use the Gap card from Layout Card.
2 Likes