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

Thank you so much for bubble card. :heart::heart:

Really appreciate your hardwork :+1::heavy_heart_exclamation:

4 Likes

Dear all,

In my case “Climate” buttons do work.
Can you please advise how can I manually override “Climate” buttons colour/transparency similar to other buttons:

Hi! @Vandana you can add this in your custom styles:

ha-card {
  --bubble-select-list-width: 400px;
}

Or directly in your theme file:

bubble-select-list-width: "400px"

@DBunevich you can add this in your custom styles:

.bubble-climate-minus-button,
.bubble-climate-plus-button {
  background: rgba(0, 0, 0, 0.5) !important;
}
3 Likes

@Cloos Thank you so so much…

@Cloos, merci beaucoup votre l’aide!

Below you can see Mushroom and Bubble card for Climate.
Fundamental benefit of Bubble card is the ability to combine Fan and HVAC control into one card. This can’t be done in Mushroom still.

However, on the small screens due to many buttons there may not be enough space to fit all of them.
Due to that, please kindly consider in the future possibility for the cards to have not only 1x4, but also 2x2 section card sizes:

2 Likes

Is there a solution for the alignment?

I haven’t found a way to align them correctly and haven’t got any more response.

Maybe @Cloos can still help here?

@Cloos

Plz guide how to bring the media controls to the next row, so that only the song info is displayed in the first row.

Also, plz add shuffle and repeat controls in the next update if possible.

2 Likes

@Cloos

Please see the original select options that I have created in homeassistant.

Bubble Card select card is converting the strings/options to propercase. I hope I am making sense.

Please look into this and if possible kindly fix this in next update.

Thank you

Nope, nothing showing in the browser console. When on mobile my iOS device vibrates when I click either button, and on desktop I can see an effect when I click, but nothing happens. I’ve cleared my cache, logged in and out of HA, tried a few other things. Can’t seem to get it to work…

@nickpiccoli This is weird, can you send me your entity infos from the developer tools?

@DBunevich @Vandana I will soon add a new card layout for that, indeed with the success of the sub-buttons this is needed a lot! :sweat_smile:

@Vandana Indeed this is a mistake for these select menus! I will change that in the next beta :ok_hand:

@idominiki You need to set fixed width for these styles, play with the values to meet your needs.

.bubble-sub-button {
  width: 60px !important; /* Change 60px */
}
.rows-2 .bubble-sub-button-container {
  grid-template-columns: repeat(2, 60px) !important; /* Change 60px */
}

And sorry for the previous unanswered questions, it’s hard to keep up :sweat_smile:

For your bugs, the best way is to send them on GitHub. Even if I don’t answer quickly, I will do my best to fix everything!

4 Likes

Thank you so much.

Kindly also consider to add “Shuffle” and “Repeat” buttons in media control.

Yes! Thanks for the help… Seems pretty fast and stable! :slight_smile:
Amazing work as always!

2 Likes

For this request i think is ok but tell me if exist a better solution please

.bubble-button-card-container {
  border-radius: 15px;
  }
  .bubble-button-background {
  border-radius: 15px;
  }

Sorry to insist but to move forward on my Lovelace mobile can you answer me please

How do you change the background-colour of the climate card, the styling seems to be done in a different way to the other bubble cards. Looked in the documentation and I assume it is something to with the following code:

Have tried the following but it doesn’t do what I was expecting

type: custom:bubble-card
      card_type: climate
      button_type: state
      name: Heating
      icon: mdi:radiator
      entity: climate.wiser_office
      button_action:
        tap_action:
          action: more-info
      styles: |-
        .bubble-climate-container {
          background-color: rgba(74,91,107,1) !important;
          height: 100px;
        } .bubble-icon {
          opacity: 1;
          color: rgba(229,221,207,1)!important;
        } .bubble-icon-container {
          background-color: black !important
        } .bubble-sub-button {
            color: rgba(229,221,207,1)!Important;    
        } .bubble-name {
            color: rgba(229,221,207,1) !important;
        }.bubble-state {
            color: rgba(229,221,207,1) !important;
        } ${state === 'on' ? icon.setAttribute("icon", "mdi:radiator") :
          icon.setAttribute("icon", "mdi:radiator-off")};
      sub_button:
        - name: HVAC modes menu
          select_attribute: hvac_modes
          show_arrow: false
        - name: Climate temperature
          show_attribute: true
          attribute: temperature
          icon: mdi:thermometer
          state_background: false`

Probably not exactly what you’re looking for, but I changed the HA theme variables for the colors

  state-climate-cool-color: rgba(var(--color-blue), 0.75)
  state-climate-heat-color: rgba(var(--color-red), 0.75)

Hi, your answer is here, the new beta allows that globally now, I’ve also added an example.

Hi! That card is using .bubble-color-background this is indeed a bit different, but you can also check the styles.ts file for that card on GitHub.

Agreed, a smaller option like standard cards would be nice