⚪ Bubble Card - A minimalist card collection for Home Assistant with a nice pop-up touch

Share your Projects! Dashboards & Frontend
,
2566 
styles: |-
  .bubble-button-card {
    animation: ${hass.states['sensor.sensor_test'].state === 'on' ? 'pulse 2.5s ease-in-out infinite' : 'none'};
  }
  @keyframes pulse {
    60% { background-color: red !important; }
  }
  .bubble-button-card-container {
    background: blue !important;
  }
  .bubble-button-card {
    background-color: blue !important;
  }

Can someone here help me?

I need to use these variables:

.bubble-button-card-container {
  background: blue !important;
}
.bubble-button-card {
  background-color: blue !important;
}

but the animation only works when I don’t use these variables.

2567

Hi, wondering if it’s possible to have this card fully on one row, and maybe if it’s possible to have the graphs in one single card, seems pretty complex to figure out that code.
thank you

2568

still looking for a answer :frowning:

2569

May I ask how did you create the media cards for the TV? Looks absolutely great!

image
image363×276 31.2 KB

2570

That’s the upcoming media card.

Take a look at:

1 Like
2571

Can someone please help me understand how I change the background of the icon? I want to change the circular light grey background behind the icon to another color:

image
image511×135 5.04 KB

2572

ha-card {
–bubble-icon-background-color: blue !important;
}

1 Like
2573

Thank you. Is that supposed to be placed in the “Custom styles / templates” in the Bubble Crd or via card_mod? I wasn’t able to make it work unfortunately.

2574

You’re welcome. Exactly, I have it in Custom Styles/Templates.

1 Like
2575

No matter how I try I get no change, would you mind posting how you exactly put it?

image
image924×731 47.4 KB

2576

There should be two dashes in front of bubble-icon-...:

--bubble-icon-background-color: blue !important;
2577

Still not working, super strange…

2578

Are there any plans or an indication if it would be even remotely possible to get the popup not with an “vertical stack” but with an popup section since they are much easier to create nice looking layouts with?

2579

Try:

  .bubble-icon-container {
       background-color: blue !important;
    }

and please post (full styling) code as quote, not as image.

Check out styling section on https://github.com/Clooos/Bubble-Card

1 Like
2580

Yes, that worked! Thanks a million :grinning:

Any chance you know how to do the same for the sub-buttons background color?

2581

Is there any way to conditionally change the icon of a button on the horizontal buttons stack card?

2582

As far as I known it is not possible to change the icon background of a sub-button, only the background of the sub-button itself:

.bubble-sub-button-1 {
background: blue !important;
}

1 Like
2583

That was actually exactly what I wanted, thanks for helping me out.

2584

Hi all!

Big bubble card fan here, building my entire dashboard in popups and color themes per ‘area of domotics’. However, I’m running into issues with the selector button. I’ve been reading the git and doing my F12 selector research, but I can’t seem to find proper classes to set.

As you can see in the picture, I would like to turn all orange properties to purple’ish, imho I would need:

  • selected item
  • icon
  • arrow
  • border edge color

afbeelding
afbeelding326×380 19.1 KB

Modding the rest of the cards with the built-in style editor was no issue whatsoever. Would anyone please be able to help me? Oh by the way: I’m on the latest beta release: 2.5.0 b9

Thanks!

2585

There seems to be a light shadow behind the header and the close button at the top right corner, no matter how I try to tweak the colour the background color / shadow is still there. Any tips or tricks to get red of it?

IMG_6010
IMG_60101179×771 49.1 KB