Team logos don't respect corner radius

vasqued2 / ha-teamtracker-card

A Home Assistant frontend custom card that will display real-time updates for teams tracked with the ha-teamtracker integration. Has custom in-game layouts for football, baseball, basketball, hockey, soccer, golf, tennis, racing, and mma.

GNU General Public License v3.0

75 stars 16 forks source link

Team logos don't respect corner radius #30

Closed m1ke-hub closed 1 year ago

m1ke-hub commented 1 year ago

First of all, thanks a lot for this cool card and integration! I've been looking for something like that for ages.

I noticed that the big faded logos do not respect the corner-radius set in the theme, as seen in the screenshot below:

Would that somehow be possible to include?

Thanks in advance :)

vasqued2 commented 1 year ago

I honestly never noticed. Do you have any example cards that behave correctly? If so, I can take a look and see how they are handling it.

m1ke-hub commented 1 year ago

The only card I currently use, that kind of has a similarity is the mini-media-player by kalkih - where the album cover can be compared to the logos. Maybe that helps?

m1ke-hub commented 1 year ago

I just tried some things in the inspector.. When I add border-radius: var(--ha-card-border-radius); to div class="card" (see screenshot), it looks as expected.

Bildschirmfoto 2022-12-20 um 18 26 51

vasqued2 commented 1 year ago

Thanks! I'll make the change.

vasqued2 commented 1 year ago

What browser and theme are you using? For some reason it's not picking up a value for var(--ha-card-border-radius). Or maybe I'm inserting it in the wrong spot. Can you show me what the code looks like after you made the change? It seems to be working if I just hardcode in a set value but that isn't going to work across the different themes.

vasqued2 commented 1 year ago

It appears that not all themes define ha-card-border-radius. It's working if I default to 10px if it's not defined, but I'd like to confirm it's picking up the value if it is. Let me know what theme you are using and I'll confirm it's picking it up correctly.

vasqued2 commented 1 year ago

I'm good. I added ha-card-border-radius to my theme and it picked it up so if a theme defines it, it will use it. If not, it will default to 10px, which appears to be what the default theme uses.

Thanks for you help w/ this. I'll include the fix in the next release of the card.

vasqued2 commented 1 year ago

Resolved in v0.6.0

m1ke-hub commented 1 year ago

Hey man, sorry for not responding earlier. Glad, you got that working without my answer! Just updated to the newest version - it's working perfectly!! 👍 Thank you so much for your work and have a wunderful christmas!