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

[Balucanb]

LOL. Yep. Exactly like that SMH. Thanks! Now I am just curious can you make everything transparent and just have the text showing? I know you can change the color of those 2

[Balucanb]

NM I got it.

type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.attic_temp_humid_temperature
name: Attic
show_state: true
card_layout: large-2-rows
sub_button:
  - entity: sensor.attic_ac_temp_humid_temperature
    name: Attic AC
    show_name: true
    show_state: true
    show_last_changed: true
  - entity: sensor.attic_ac_moisture_temperature
    name: AC Pan
    show_name: true
    show_last_changed: true
    show_state: true
scrolling_effect: false
show_attribute: false
show_last_changed: true
styles: |-
  .bubble-button-card-container {
    background: none !important;
  }
  .bubble-icon-container {
    background: transparent !important;
  }
  .bubble-sub-button-container {
    background: none !important;
  }
  .bubble-sub-button {
    background-color: transparent !important;
  }
  .bubble-sub-button .icon {
    background-color: transparent !important;
  }

[gmeroni (Gianmarco Meroni)]

Apply style

I’m implementing the bubble cards but the style is basic with grey colors. Is there any CSS I need to apply to get a quick start with the colors of the examples in the github? Any guide or reference will be useful. thanks guys

[aubi86]

Disabling a sub-button.

I build my own cover card with sub-buttons.
Is there a way to just disable not completely hide e.g. the up button if the shutter is fully opened as like with the original bubble cover card?

[Pineapple]

This may be a silly question… but is it possible to use a colour value from say a sensor attribute within a conditional statement? E.g.

color: ${hass.states['sensor.some_sensor'].state === 'some_value' ? hass.states['sensor.some_sensor].attributes.colour : ''} !important;

I guess it’s similar to (in my mind) how light cards can reflect the colour of the light if it’s on.

[Annors]

Is there some way to choose if a select card always goes up/down (not according to if “down” fits on screen or not)?

[RichardU (Richard)]

Thanks for much for the update. BTW, it seems like the spacing is off here:

   visibility:
     # Show this sub-button only when motion is detected at the front door.
     - condition: state
        entity: binary_sensor.front_door_motion
        state: "on"

I think there’s an extra space shown before entity: and state:

[Dakononov (Dmitry)]

I tried to do it this way but X is shifted in this case. Is there a way to beat this? THX

    styles: |2-
      .bubble-close-button {
          background: #922724 !important;
          height: 20px !important;
          width: 20px !important;
        }

[Cloos]

Indeed! That’s weird because I’ve copied this code from my editor, it seems that GitHub/this forum doesn’t want to format it correctly, but I’ve changed that

[EiStri]

Looking good! Which cards you use for the tv apps?

[Stevengerrard08]

Instead of the dashboard behind the card getting darker, is it possible to blur it a bit instead?

The fact that the iPhone’s top bar dont change color is something that bothers me a bit.

[stefan1982 (Stefan)]

It is… Use filter: blur(4px); or something similar to the corresponding div.

[Seagull01 (Andy)]

Many thanks EiStri, they are scripts to select either the source input on the tv or Apple TV

[Menelao (Roberto)]

If you just want to change the color based on the status you can do like this:

type: custom:bubble-card
card_type: cover
entity: cover.tesla_trunk
styles: |-
  .bubble-open {
    background: ${state === 'closed' ? '' : 'rgb(25, 25, 25)' } !important;
  }
  .bubble-icon-open{
    color: ${state === 'closed' ? 'white' : 'rgb(45, 45, 45)' } !important;
  }
  .bubble-close {
    background: ${state === 'open' ? '' : 'rgb(25, 25, 25)' } !important;
  }
  .bubble-icon-close{
    color: ${state === 'open' ? '' : 'rgb(45, 45, 45)' } !important;
  }
show_state: true
show_name: true
icon_close: phu:tesla-trunk
icon_open: phu:tesla-trunk
force_icon: false

[Menelao (Roberto)]

I found a way to do it, let’s see if you like it:

As a preliminary step you need to create an input_boolean to handle the popup trigger.

1- hide the popup header
2- assign the input_boolean to the popup trigger
3- activate the input_boolean.turn_on action when the popup opens
4- as the first element of the popup insert a Button Name
5- insert a SubButton with action input_boolean.turn_off and icon mdi:close-thick
6- add the style to the button

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#pop-up"
    name: Test
    button_type: state
    show_header: false
    trigger:
      - condition: state
        entity: input_boolean.test_popup
        state: "on"
    open_action:
      action: perform-action
      perform_action: input_boolean.turn_on
      target:
        entity_id: input_boolean.test_popup
    styles: ""
  - type: custom:bubble-card
    card_type: button
    button_type: name
    scrolling_effect: false
    show_icon: true
    show_name: false
    name: Header
    sub_button:
      - name: ""
        icon: mdi:close-thick
        show_name: false
        state_background: false
        show_icon: true
        tap_action:
          action: perform-action
          perform_action: input_boolean.turn_off
          target:
            entity_id: input_boolean.test_popup
        show_background: true
    styles: |-
      .bubble-button-card-container {
        background-color: rgba(0,0,0,0) !important;
      }
      .bubble-button-background{
        background-color: rgba(229,229,229,0.5) !important;
        width: 90% !important;
      }
      .bubble-sub-button-1 {
        background-color: rgb(244, 84, 80) !important;
        color: rgb(122, 5, 8) !important;
        --mdc-icon-size: 15px !important;
        height: 20px !important;
        width: 20px !important;
        min-width: 20px !important;
      }
      .bubble-sub-button-icon {
        --mdc-icon-size: inherit !important;
      }
    icon: mdi:finance

[Dakononov (Dmitry)]

Thank you very much! you did a great job! I hope that in the future there will be an easier way to catsomize

[nesnajkneh]

I’ve got this strange thing. Each time i open my dashboard with the bubble cards and the horizontal button stack it opens 1 popup automatically. I don’t have any pop-up triggers on this popup. Anyone has this problem? I’m using v2.3.4.

[maeffjus]

I got two questions:

1. My pop-up is always stretched to the bottom of the screen - no matter how little there is inside. Is there any way to make it shorter? I want it to be just a floating window - also and especially on my mobile. This is, because in order to leave the pop-up, it would be pretty convenient to tap below it (the darkened / blurred area).
   But currently there is no such area.
   

   
   
   I’d like to have it like this:
   
   

2. Blur: Doesn’t matter what I set blur at - even if background and backdrop-blur is at 100, there is just no blur. What could be the reason?
   I would love to have the background fully blurred - like I made with Photoshop here:
   

   

[Cloos]

Hi! You need to set the backdrop blur on the first pop-up on your view, then refresh the page

[maeffjus]

At first I had just one popup only - which I set to 80 and also tried 100, with refreshing each time.
No effect.

I just tried “10”, since in some other post it was mentioned that before the effect was disabled by default, this was the value.
it worked right away. So probably, the annotation saying “0-100” is wrong as “0-10” should work.