Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
HA border/shadow conflic
See original GitHub issueHere the requested example: With the problem:
title: Temperatures
icon: mdi:thermometer
panel: true
theme: darkblue
path: temperatures
cards:
- type: vertical-stack
cards:
- !include ../cards/compact_custom_header_main.yaml
- type: custom:layout-card
layout: vertical
cards:
- type: vertical-stack
cards:
- type: custom:card-modder
style:
--paper-card-background-color: 'rgba(11, 11, 11, 0.40)'
text-align: center
color: silver
font-size: 25px
border-radius: 20px
border: solid 1px rgba(100,100,100,0.3)
box-shadow: 3px 3px rgba(0,0,0,0.4)
background-image: url("/local/cardbackK.png")
background-repeat: no-repeat
background-color: rgba(50,50,50,0.3)
background-size: 100% 48px
card:
content: Temperatures
type: markdown
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:config-template-card
entities:
- sensor.dark_sky_temperature
config:
type: custom:mini-graph-card
name: Outside
icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.50
group: false
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: true
icon: true
state: true
graph: false
fill: false
points: false
legend: false
extrema: true
labels: false
entities:
- entity: sensor.dark_sky_temperature
color: '#FF8000'
show_indicator: true
- type: custom:config-template-card
entities:
- sensor.dark_sky_temperature
config:
type: custom:mini-graph-card
name: Outside
icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.50
group: false
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: true
icon: true
state: true
graph: false
fill: false
points: false
legend: false
extrema: true
labels: false
entities:
- entity: sensor.dark_sky_temperature
color: '#FF8000'
show_indicator: true
- type: custom:config-template-card
entities:
- sensor.dark_sky_temperature
config:
type: custom:mini-graph-card
name: Outside
icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.50
group: false
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: true
icon: true
state: true
graph: false
fill: false
points: false
legend: false
extrema: true
labels: false
entities:
- entity: sensor.dark_sky_temperature
color: '#FF8000'
show_indicator: true
- type: horizontal-stack
cards:
- type: custom:config-template-card
entities:
- sensor.dark_sky_temperature
config:
type: custom:mini-graph-card
name: Outside
icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.50
group: false
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: true
icon: true
state: true
graph: false
fill: false
points: false
legend: false
extrema: true
labels: false
entities:
- entity: sensor.dark_sky_temperature
color: '#FF8000'
show_indicator: true
- type: horizontal-stack
cards:
- type: custom:config-template-card
entities:
- sensor.dark_sky_temperature
config:
type: custom:mini-graph-card
name: Outside
icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.50
group: false
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: true
icon: true
state: true
graph: false
fill: false
points: false
legend: false
extrema: true
labels: false
entities:
- entity: sensor.dark_sky_temperature
color: '#FF8000'
show_indicator: true
- type: custom:config-template-card
entities:
- sensor.dark_sky_temperature
config:
type: custom:mini-graph-card
name: Outside
icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.50
group: false
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: true
icon: true
state: true
graph: false
fill: false
points: false
legend: false
extrema: true
labels: false
entities:
- entity: sensor.dark_sky_temperature
color: '#FF8000'
show_indicator: true
- type: custom:config-template-card
entities:
- sensor.dark_sky_temperature
config:
type: custom:mini-graph-card
name: Outside
icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.50
group: false
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: true
icon: true
state: true
graph: false
fill: false
points: false
legend: false
extrema: true
labels: false
entities:
- entity: sensor.dark_sky_temperature
color: '#FF8000'
show_indicator: true
- type: custom:mini-graph-card
name: Temperature 48h
icon: fas:thermometer-half
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
group: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.5
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: false
icon: false
state: false
graph: line
fill: false
points: false
legend: true
extrema: false
labels: false
entities:
- entity: sensor.dark_sky_temperature
name: Outside
color: '#FF8000'
- entity: sensor.dark_sky_temperature
name: Master Bedroom
color: '#0080FF'
- entity: sensor.dark_sky_temperature
name: Living Room
color: '#FF3333'
- entity: sensor.dark_sky_temperature
name: Office
color: '#7F00FF'
- entity: sensor.dark_sky_temperature
name: Bedroom
color: '#00FF00'
- entity: sensor.dark_sky_temperature
name: Bathroom
color: '#33FF99'
Without the problem:
title: Temperatures
icon: mdi:thermometer
panel: true
theme: darkblue
path: temperatures_old
cards:
- type: vertical-stack
cards:
- !include ../cards/compact_custom_header_main.yaml
- type: custom:layout-card
layout: vertical
cards:
- type: vertical-stack
cards:
- type: custom:card-modder
style:
--paper-card-background-color: 'rgba(11, 11, 11, 0.40)'
text-align: center
color: silver
font-size: 25px
border-radius: 20px
border: solid 1px rgba(100,100,100,0.3)
box-shadow: 3px 3px rgba(0,0,0,0.4)
background-image: url("/local/cardbackK.png")
background-repeat: no-repeat
background-color: rgba(50,50,50,0.3)
background-size: 100% 48px
card:
content: Temperatures
type: markdown
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
name: Outside
icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.50
group: false
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: true
icon: true
state: true
graph: false
fill: false
points: false
legend: false
extrema: true
labels: false
entities:
- entity: sensor.dark_sky_temperature
color: '#FF8000'
show_indicator: true
- type: custom:mini-graph-card
name: Outside
icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.50
group: false
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: true
icon: true
state: true
graph: false
fill: false
points: false
legend: false
extrema: true
labels: false
entities:
- entity: sensor.dark_sky_temperature
color: '#FF8000'
show_indicator: true
- type: custom:mini-graph-card
name: Outside
icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.50
group: false
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: true
icon: true
state: true
graph: false
fill: false
points: false
legend: false
extrema: true
labels: false
entities:
- entity: sensor.dark_sky_temperature
color: '#FF8000'
show_indicator: true
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
name: Outside
icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.50
group: false
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: true
icon: true
state: true
graph: false
fill: false
points: false
legend: false
extrema: true
labels: false
entities:
- entity: sensor.dark_sky_temperature
color: '#FF8000'
show_indicator: true
- type: custom:mini-graph-card
name: Outside
icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.50
group: false
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: true
icon: true
state: true
graph: false
fill: false
points: false
legend: false
extrema: true
labels: false
entities:
- entity: sensor.dark_sky_temperature
color: '#FF8000'
show_indicator: true
- type: custom:mini-graph-card
name: Outside
icon: "${states['sensor.dark_sky_temperature'].state > 15 ? 'fas:thermometer-half' : 'fas:thermometer-quarter'}"
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.50
group: false
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: true
icon: true
state: true
graph: false
fill: false
points: false
legend: false
extrema: true
labels: false
entities:
- entity: sensor.dark_sky_temperature
color: '#FF8000'
show_indicator: true
- type: custom:mini-graph-card
name: Temperature 48h
icon: fas:thermometer-half
name_adaptive_color: true
icon_adaptive_color: true
more_info: false
group: false
height: 150
line_width: 4
hours_to_show: 24
points_per_hour: 0.5
hour24: true
animate: true
decimals: 1
align_state: center
show:
name: false
icon: false
state: false
graph: line
fill: false
points: false
legend: true
extrema: false
labels: false
entities:
- entity: sensor.dark_sky_temperature
name: Outside
color: '#FF8000'
- entity: sensor.dark_sky_temperature
name: Master Bedroom
color: '#0080FF'
- entity: sensor.dark_sky_temperature
name: Living Room
color: '#FF3333'
- entity: sensor.dark_sky_temperature
name: Office
color: '#7F00FF'
- entity: sensor.dark_sky_temperature
name: Bedroom
color: '#00FF00'
- entity: sensor.dark_sky_temperature
name: Bathroom
color: '#33FF99'
Screenshot with the problem:
Screenshot without the problem:
Let me know if you need further info 😃
Issue Analytics
- State:
- Created 5 years ago
- Comments:11 (2 by maintainers)
Top Results From Across the Web
Breaking down CSS Box Shadow vs. Drop Shadow - CSS-Tricks
Here's a side-by-side comparison to help distinguish the two and when it might be best to choose one over the other. Box Shadow,...
Read more >Box-shadow and border styles conflicting in Wordpress CSS
I'm having trouble applying an outline and drop shadow to some images in a Wordpress widget. The '2017 ...
Read more >box-shadow - CSS: Cascading Style Sheets - MDN Web Docs
The box-shadow property enables you to cast a drop shadow from the frame of almost any element. If a border-radius is specified on...
Read more >War within a War - Israel and Hezbollah's shadow conflict in ...
When low-level violence between Arabs and Israelis boils over into open conflict, the wars are swift, brutal, and bloody.
Read more >ha-card-border and ha-card-box-shadow · Issue #53 - GitHub
What I have noticed is that whenever I used this card, the corners and the shadows are not showed, it doesn't happen with...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
After looking at the code of the
vertical-stack-in-card, this seems to be the reason behind this box-shadow behavior:https://github.com/custom-cards/vertical-stack-in-card/blob/0beaa57ae14f2352dcee45d9f29019c5f64a0926/vertical-stack-in-card.js#L150
Well, I had to remove the icon for the name lenght issue, so there is no real need anymore to use the template plugin on this ^^
Thanks for your time guys 😃
Andrea