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

Share your Projects! Dashboards & Frontend
,
1912

Hey I’m working on that at the moment but stumbling on to loads of problems.
So PR will come in soon (probably).

For now in “sections”-mode you can use this:

  .bubble-button-card-container{
    height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )) !important;
  }

  .bubble-sub-button-container{
    flex-wrap: wrap;
  }

image

2 Likes
1913

Thanks!
I notice that it puts the picture on top of the icon, so parts of the icon would still be visible if you do not choose a small icon.

Do you know how to use a picture for a sub-button?
Usting the same code for .bubble-sub-button-1 instead of bubble-entity-picture just gives me mess, not a single big picture in the center of the button.

1914

I’ve updated to 2.30 now, thank you very much for this great release.

However, I’m not able to style the new climate card: I would like the borders less rounded and applied a “border-radius: 10px important;” to all section with “border-radius” as mentioned in the source style file, but only the icon and the temperature container change the border radius, the container itself not.

Any hint?


 .bubble-button-container {
      border-radius: 10px !important;
    }
  .bubble-icon-container {
      border-radius: 10px !important;
    }
  .bubble-temperature-container {
      border-radius: 10px !important;
    }
  .bubble-climate-container {
      border-radius: 10px important;
    }
  .bubble-feedback-container {
      border-radius: 10px important;
    }
  .bubble-color-background {
      border-radius: 10px important;
    }
1915

I’m having the same issue with the climate card I can’t apply styles to anything but the icon and I can’t even change the icon color either oddly.

1916

I will check that, thanks for the feedback!

1917

Now being on the new release, currently trying to move my visual custom adjustments into the general theme section. Looking forward to the complete overview, because some stuff I cannot really find in the style.ts files.

Now the concrete question:
With

.bubble-button-card-container {
  box-shadow: rgba(0, 0, 0, 0.84) 0px 1px 3px
}

I can get a nice 3d effect, see here for the blue button in contrast to the others:
grafik

So far I used

ha-card-box-shadow: rgba(0, 0, 0, 0.84) 0px 1px 3px

in my theme definition, which works for most home assistant cards, but not for bubble card.
How can I apply this box shadow to my theme so that it is being applied on all button card containers?
Does that need to be explicitely foreseen by you Cloos to have it available as a bubble-card specific variable that I can set?

1 Like
1918

This style works for background color. Change as needed:

.bubble-sub-button-2 {
  background-color: ${hass.states['input_boolean.gym_motion'].state === 'on' ? '#2f8e2f' : '#1a4a72'} !important;
}
1919

Hi ist it possible to get this Theme/YAML?

1920

Scenes do not have a usable state, it’s just a timestamp of when the scene was last activated.

1921

For me it works like this:

.bubble-button-card-container {
   border-radius: 5px !important;
  }
1922

hmm, I noticed that there are different ways to start the styles: section. I saw

styles: |
styles: >-
styles: |-
styles: |2-

there might be more… But what are consequences of those differences? i couldn t figure it out…

1923

@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.
  1. styles: >-:
  • line breaks in the text block are replaced with spaces, so the text is interpreted/displayed on a single line.
  1. styles: |-:
  • Line breaks in the text block are preserved, but no additional line break is added at the end of the block.
  1. styles: |2-:
  • Each line in the text block is indented by two spaces.
6 Likes
1924

Unfortunately, this doesn’t work for me either:
image

1925

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

1926

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

1927

Yes indeed.

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

image

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)
image

1928

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.
image

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;      
  }

image

2 Likes
1929

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

image

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.

1930

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

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.

1931

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:

image
image938×504 31.9 KB

gives me this:

image
image1024×194 6.02 KB

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