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

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

[Mdnx (Martin Tamke)]

What a great card collection! and so open to customisation.

I found that one can even change the background color of a sub-button as well as the icon depending on the state of an emtity

Closed lock

Open lock

YAML code:

styles: >
    .bubble-sub-button-4 { background-color: ${hass.states['lock.main_door'].state
     === 'unlocked' ?  'red' : 'rgba(92, 83, 103, 1)' } !important;
    ${subButtonIcon[3].setAttribute("icon", hass.states['lock.main_door'].state
     === 'locked' ? 'mdi:lock-outline' : 'mdi:lock-open-outline')} }

one cn as well change the color of the icon in the sub button:

  #.bubble-sub-button-4 > ha-icon {color: ${hass.states['lock.main_door'].state
  === 'unlocked' ? 'green' : 'white'} !important;

[daffyduck42]

Sharing a silly card I made for my Go Lamps to call scripts that change the colors.

type: custom:bubble-card
card_type: button
button_type: switch
sub_button:
  - entity: script.lights_turn_lightcoral
    show_state: false
    show_name: false
    show_attribute: false
    show_last_changed: false
    name: null
    icon: mdi:square
    state_background: false
    show_background: false
    tap_action:
      action: toggle
  - entity: script.lights_turn_yellowgreen
    show_state: false
    show_name: false
    show_attribute: false
    show_last_changed: false
    name: null
    icon: mdi:square
    state_background: false
    show_background: false
    tap_action:
      action: toggle
  - entity: script.lights_turn_ghostwhite
    show_state: false
    show_name: false
    show_attribute: false
    show_last_changed: false
    name: null
    icon: mdi:square
    state_background: false
    show_background: false
    tap_action:
      action: toggle
  - entity: script.lights_turn_chocolate
    show_state: false
    show_name: false
    show_attribute: false
    show_last_changed: false
    name: null
    icon: mdi:square
    state_background: false
    show_background: false
    tap_action:
      action: toggle
  - entity: script.lights_turn_cyan
    show_state: false
    show_name: false
    show_attribute: false
    show_last_changed: false
    name: null
    icon: mdi:square
    state_background: false
    show_background: false
    tap_action:
      action: toggle
  - entity: script.lights_turn_crimson
    show_state: false
    show_name: false
    show_attribute: false
    show_last_changed: false
    name: null
    icon: mdi:square
    state_background: false
    show_background: false
    tap_action:
      action: toggle
  - entity: script.lights_turn_darkorchid
    show_state: false
    show_name: false
    show_attribute: false
    show_last_changed: false
    name: null
    icon: mdi:square
    state_background: false
    show_background: false
    tap_action:
      action: toggle
  - entity: script.lights_turn_peachpuff
    show_state: false
    show_name: false
    show_attribute: false
    show_last_changed: false
    name: null
    icon: mdi:square
    state_background: false
    show_background: false
    tap_action:
      action: toggle
  - entity: script.lights_turn_yellow
    show_state: false
    show_name: false
    show_attribute: false
    show_last_changed: false
    name: null
    icon: mdi:square
    state_background: false
    show_background: false
    tap_action:
      action: toggle
  - entity: script.lights_turn_midnightblue
    show_state: false
    show_name: false
    show_attribute: false
    show_last_changed: false
    name: null
    icon: mdi:square
    state_background: false
    show_background: false
    tap_action:
      action: toggle
name: Go Lamp Colors
double_tap_action:
  action: none
hold_action:
  action: none
card_layout: large-2-rows
entity: script.lights_turn_random
icon: mdi:bulb
show_state: false
tap_action:
  action: toggle
button_action:
  double_tap_action:
    action: none
  hold_action:
    action: none
  tap_action:
    action: none
styles: |2-
    .icon {
      background-image: url("/local/images/colors/randomcolor.png");
      background-size: cover;  
    }
    .bubble-sub-button-1 {
      background-color: lightcoral !important;
    }
    .bubble-sub-button-2 {
      background-color: yellowgreen !important;
    }
      .bubble-sub-button-3 {
      background-color: ghostwhite !important;
    }
      .bubble-sub-button-4 {
      background-color: chocolate !important;
    }
      .bubble-sub-button-5 {
      background-color: cyan !important;
    }
      .bubble-sub-button-6 {
      background-color: crimson !important;
    }
      .bubble-sub-button-7 {
      background-color: darkorchid !important;
    }
      .bubble-sub-button-8 {
      background-color: peachpuff !important;
    }
      .bubble-sub-button-9 {
      background-color: yellow !important;
    }
      .bubble-sub-button-10 {
      background-color: midnightblue !important;
    }
    .bubble-sub-button-icon {
      display: none;
    }
show_icon: true
show_name: true

[MrBearPresident]

May I ask, why do you do this with a script and not with a scene?