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

[cpo]

@tluethi71 These are all ways to define how multiline strings will be interpreted.

1. styles: |:

• The text block is interpreted/displayed exactly as it is entered, including spaces and line breaks.

2. styles: >-:

• line breaks in the text block are replaced with spaces, so the text is interpreted/displayed on a single line.

3. styles: |-:

• Line breaks in the text block are preserved, but no additional line break is added at the end of the block.

4. styles: |2-:

• Each line in the text block is indented by two spaces.

[RKCKBN]

Unfortunately, this doesn’t work for me either:

[RichardU (Richard)]

@RickFurtado

Scenes do not have a usable state

Good. point. I had forgotten that’s why I only use groups, or scripts for more complicated things. I also write toggle scripts

[daffyduck42]

Does this go in the individual bubble card itself? I haven’t tackled the css customizations yet because they seem a little intimidating.

[MrBearPresident]

Yes indeed.

I understand .css can be intimidating but you can start with something easy.
Like just copy-pasting the code presented here.

If you find this to be to much you can wait a couple of days/weeks until I have finished the new code and Cloos accepts it.

The new code will look something like this. (depending on if Cloos agreas)

[MrBearPresident]

For the icon, you could use a small hack. Just fill in “no-icon” where it asks for a custom icon, then it will not find it and leave it blank.

For the sub-button, add cover, like this.

.bubble-sub-button-1{
  background-image: url("https://community.home-assistant.io/user_avatar/community.home-assistant.io/mrbearpresident/48/585054_2.png") !important;
  display: block !important;    
  background-size: cover;      
  }

[daffyduck42]

Thanks, I don’t mind waiting for the bugs to be ironed out.

The current implementation using the css snippet you gave ends up with buttons outside of the bubble. I guess I’ll just wait, looking forward to this fix.

[MrBearPresident]

Are you using sections already?
If not I’ll advice you switch to it.
Then in the layout tab from HA choose: 2 rows.

You can also choose (in the bubble-card under “styling options”) the “card layout”: Large with 2 sub-button rows.
This will make the sub-buttons smaller.

[cpo]

hmmm.

This code:

.bubble-button-card-container {
 border-radius: 10px !important;
}
.bubble-icon {
 color: ${parseFloat(hass.states['sensor.solar_watt'].state) > 100 ? '#9EBE51' : '#7F7F7F'} !important;
}

living here in the editor:

gives me this:

I can change the value to 5px and immediately see the change in the preview.

[flobidan]

Thanks, that works, the combination of background-size and display did it, the official example in the documentation just has one, which leads to the picture being not centered and resized properly.

[Vandana (Vandana Dass)]

@Cloos Please check the video. I don’t know if this is a bug or I am doing something wrong.

Whenever I try to change the volume, the text disappears from the media player card.

type: custom:bubble-card
card_type: media-player
entity: media_player.speaker
card_layout: large-2-rows
cover_background: true

Kindly guide how to fix this.

Thank you.

[cpo]

Maybe a dumb question:
Does anybody know, how to achive the same background color as the regular HA theme, when switching from dark to bright mode?

I want to integrate the cards visually into the standard behavior and look from HA (almost white during day, dark gray during night, preferably with a contour).

Thanks!

[LintHart (Linton)]

I am also really keen for this.

[flobidan]

He is using the climate card. Guess that has a different container name, like also the media player requires another code:

.bubble-media-player-container {
  border-radius: 10px !important;
}

I do not use the climate card, needs to be looked up in the styles file on github.

[cpo]

Now, i think i’ve found it

.bubble-climate-container {
 border-radius: 10px !important;
}

This should do the trick for you.
@flobidan was on the right track there.

[MrBearPresident]

:host{
  --bubble-border-radius: 12px;
  --bubble-select-list-width: 200px;
  --bubble-icon-border-radius: 200px;
}

.bubble-button-card-container{
  height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )) !important;
  border-style: solid;
  border-width: var(--ha-card-border-width,1px) !important;
  border-color: var(--ha-card-border-color,var(--divider-color,#e0e0e0));
}

.bubble-button-background{
  background: var(--ha-card-background,var(--card-background-color,#fff));
}

[maciejzurkowski]

Hello, After the last update, after partially lowering the blind, I can no longer lower the blind. Is there a way to make these two icons always active?
Maciej

[RKCKBN]

Thanks, but it doesn’t, as I wrote in my first post That’s why I’ve asked…

Edit: ok, copied your code and it worked,then noticed, that I’ve missed the “!” in my code… thanks for pointing me in the right direction…

[cpo]

@RKCKBN Sorry, did miss this.

Nevertheless, i tried this with a climate card by myself and it works as expected.
Did you try this on an individual card? This is what i did for testing (not in the source style file)… Just to confirm that it works at all on your side…

[cpo]

Thank you, this looks promising, although it get this (background is not 10px rounded):

Edit:
Got something in the wrong place, now it works great. Thanks again.

.bubble-button-card-container {
 border-radius: 10px !important;
 background: var(--ha-card-background,var(--card-background-color,#fff));
}
.bubble-button-card-container{
 border-style: solid;
 border-width: var(--ha-card-border-width,1px) !important;
 border-color: var(--ha-card-border-color,var(--divider-color,#e0e0e0));
}