Clooos / Bubble-Card

Bubble Card is a minimalist card collection for Home Assistant with a nice pop-up touch.
MIT License
1.45k stars 39 forks source link

Black background on slider button and inability to add style #449

Closed c625v12 closed 2 months ago

c625v12 commented 2 months ago

Describe the bug I have added a few slider buttons for some lights and the background of these sliders are black with 100% opacity. I have tried to add styles and change the opacity but every time I add any style to either the UI options or the yaml, it seems to break.

It doesn't matter what I put into the style option, it will always make everything disappear and have no affect on anything else.

Steps to reproduce the behavior: Add a horizontal stack Add a vertical stack in the horizontal stack Add a bubble button or switch Try to change the opacity style

Expected behavior I expect to be able to change the opacity of the button

Screenshots

Screenshot 2024-04-14 at 10 22 06 AM

To Reproduce

Screenshot 2024-04-14 at 10 22 38 AM

Desktop (please complete the following information):

Additional context I have tried versions 1.7 to the 2.0 beta. All have the same behavior.

Thank you! 🍻

Clooos commented 2 months ago

Hi, to use the custom styles you need to target the elements you wants to change, here is for example how you can change the color of the background and its opacity:

.bubble-button-card-container {
  background-color: rgba(92, 83, 103, .5);
}
c625v12 commented 2 months ago

Looks like it is actually related to my CSP on my reverse proxy. For some reason, when I try to change the style, it triggers a CSP violation. Not exactly sure why but wanted to let you know incase someone else comes across this issue.