I have been working on my interface for some time, I’ve gotten it to the layout I like, but I have having a few issues with shadows as seen below
Everything looks fine, except for each item/card has a very faint shadow and I can’t figure out what is causing it, below is an example of the card
type: custom:stack-in-card
title: Living Room
mode: vertical
cards:
- type: custom:layout-card
layout_type: masonry
layout:
width: 285
max_cols: 10
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:gap-card
height: 5
- type: horizontal-stack
cards:
- type: picture
image: /local/images/living_iso.png
- type: custom:button-card
layout: icon_name_state2nd
show_icon: true
show_state: true
styles:
grid:
- grid-template-columns: 50px auto
icon:
- padding: 15px 10px
- height: 30px
- width: 30px
card:
- '--ha-card-background': rgba(0, 0, 0, 0.0)
- '--ha-card-box-shadow': none
state:
- padding: 0px 0px
- justify-self: start
- font-family: Roboto, sans-serif
- font-size: 15px
name:
- padding: 0px 0px
- justify-self: start
- color: var(--secondary-text-color)
entity: sensor.room_1_temperature
name: Temperature
- type: custom:gap-card
height: 10
- type: custom:layout-card
layout_type: masonry
layout:
width: 230
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.living_room_ceiling_bulb_native
icon_color: cyan
icon: mdi:ceiling-light
fill_container: false
layout: vertical
name: Ceiling
show_brightness_control: true
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.mood_1
icon_color: cyan
icon: mdi:car-parking-lights
fill_container: false
layout: vertical
name: Mood
show_brightness_control: true
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.media_unit
icon_color: cyan
icon: mdi:car-parking-lights
fill_container: false
layout: vertical
name: Media
show_brightness_control: true
collapsible_controls: true
- type: entities
entities:
- type: section
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: binary_sensor.living_room_motion_occupancy
icon_color: cyan
fill_container: false
layout: vertical
name: Motion
- type: custom:mushroom-entity-card
entity: input_boolean.lr_ignore_sensor
icon_color: cyan
fill_container: false
layout: vertical
name: Disable Motion
tap_action:
action: call-service
service: input_boolean.toggle
data: {}
target:
entity_id: input_boolean.lr_ignore_sensor
- type: horizontal-stack
cards:
- type: custom:mushroom-media-player-card
entity: media_player.living_room_tv
icon_color: cyan
icon: mdi:television-classic
name: TV
layout: vertical
use_media_info: true
media_controls:
- on_off
- play_pause_stop
collapsible_controls: true
- type: custom:mushroom-media-player-card
entity: media_player.emby_55oled705_12
icon_color: cyan
icon: mdi:movie-open-outline
name: TV
layout: vertical
use_media_info: true
media_controls:
- on_off
- play_pause_stop
collapsible_controls: true
- type: entities
entities:
- type: section
- type: custom:layout-card
layout_type: masonry
layout:
width: 230
cards:
- type: custom:mushroom-climate-card
entity: climate.room_1
layout: vertical
fill_container: false
show_temperature_control: true
collapsible_controls: true
name: Heating
- type: horizontal-stack
margin: true
cards:
- type: custom:mini-graph-card
entities:
- sensor.room_1_temperature
name: Temperature
icon: mdi:home-thermometer
line_width: 8
font_size: 50
hours_to_show: 48
color_thresholds:
- value: 10
color: '#9e1f1c'
- value: 15
color: '#914516'
- value: 22
color: '#0c8241'
- value: 26
color: '#9e1f1c'
- type: custom:mini-graph-card
entities:
- sensor.room_1_humidity
name: Humidity
line_width: 8
font_size: 50
hours_to_show: 48
color_thresholds:
- value: 10
color: '#a62317'
- value: 35
color: '#a62317'
- value: 50
color: '#0c8241'
- value: 60
color: '#9e1f1c'
- type: horizontal-stack
margin: true
cards:
- type: custom:slider-button-card
entity: cover.living_room_main_blind
slider:
direction: left-right
background: gradient
use_state_color: true
use_percentage_bg_opacity: false
show_track: false
toggle_on_click: false
force_square: false
name: Main Blind
show_state: true
compact: true
icon:
show: true
use_state_color: true
tap_action:
action: more-info
action_button:
mode: toggle
icon: mdi:power
show: true
show_spinner: true
tap_action:
action: toggle
I’ve tried messing around with the card-mod setting background styles to transparent but doesn’t seem to work.
Does anyone have any ideas?
BTW I am using the theme synthwave