Hi there
I’m using home assistant very recently and I’m learning to use it. It’s a little hard for me since I’m not a developer, but I see like a challenge.
So, I’m configuring my first cards and for one of theme I have this code:
`- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: 'custom:mini-graph-card'
show:
icon: true
name: true
state: true
fill: fade
extrema: false
style: |
ha-card {
transform: scale(1,1);
height: 50%;
width: 100%;
margin: -0px;
border: solid 1.15px rgba(50,50,50,0.9);
box-shadow: 0px 0px 3px 0.5px #2D2F32;
border-radius: 10px;
}
ha-card .header.flex .name.flex {
margin-left: 0px;
margin-top: -10px;
font-family: Helvetica;
font-size: 15px;
}
ha-card .header.flex .icon {
--mdc-icon-size: 15px;
margin-top: -10px;
color: rgb(169, 169, 169);
}
icon: 'mdi:download'
smoothing: true
font_size: 50
font_size_header: 10
height: 200
entities:
- entity: sensor.speedtest_download
name: Download
color: green
show_points: false`
Thanks to the code above I get this card:
Well, I’m trying to apply same formatting, but little different, for another card for which I use the following code:
styles:
card:
- height: 100px
- box-shadow: 0px 0px 3px 0.5px #2D2F32;
- border: solid 1.15px rgba(10,10,10,1);
state:
- font-size: 120%
name:
- font-size: 14px
- font-weight: 500
- color: var(--secondary-text-color)
label:
- margin-top: 8px
- color: var(--secondary-text-color)
- font-size: 80%
entity_picture:
- border-radius: 50%
- width: 55px
state:
- value: home
operator: '!='
styles:
state:
- color: var(--paper-item-icon-active-color)
But I’d like to get same box shadow and border as above card, instead I get a border and a shadow like this:
I know it’s two code styles very different, but could you help me to understand where I’m wrong?