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

I am not using card mod as well, I was using the bubble card style in a vertical stack. I don’t know if you saw my code above and my image, but the only thing I wasn’t able to do is to change the background color of the HA card itself:

image

      - type: custom:bubble-card
        entity: light.interruptor_1_quarto_thomas_light_3
        card_type: button
        button_type: slider
        show_name: false
        icon: hue:scene-bright
        styles: |
          ha-card {
            background: #111F32;
            border-top-right-radius: 0px !important;
          }
          .bubble-icon {
            color: ${state === 'on' ? '#FFE500' : '#59F1FF'} !important;
            --mdc-icon-size: 30px !important;
          }
          .bubble-range-fill { 
            background: linear-gradient(to right, #FFFFFF, #FFE500) !important;
            opacity: 0.5 !important;
          }
          .bubble-icon-container {
            background: #111F32;
          }

I’ve just taken another look at your YAML and you have this background because your Bubble button is below this:

- type: entities
  entities:

If your really have a reason to keep it under it, you will have to use card mod to remove this background.

But if it’s not important just remove these lines and you will not have this background anymore.

I’m new to the party and just digging into this card. I’ve searched the documentation and this thread but there’s a lot of info so I may have missed this. I’ve created two pop-ups and a horizontal stack. Why is the stack at the bottom of the page? How do I move it to the top? Thanks.

views:
  - title: Home
    cards:
      - type: vertical-stack
        cards:
          - type: custom:bubble-card
            card_type: horizontal-buttons-stack
            1_link: '#family'
            1_name: Family Room
            1_icon: mdi:human-male-female-child
            2_link: '#kitchen'
            2_name: Kitchen
            2_icon: phu:kitchen-group
            rise_animation: false
      - type: vertical-stack
        cards:
          - type: custom:bubble-card
            card_type: pop-up
            hash: '#family'
            button_type: state
            entity: sensor.family_room_thermostat_temperature
            tap_action:
              action: navigate
              navigation_path: ''
          - type: custom:bubble-card
            card_type: button
            button_type: slider
            entity: light.family_room_sconces
            name: Sconces
          - type: custom:bubble-card
            card_type: button
            button_type: slider
            entity: light.family_room_main_lights
          - type: custom:bubble-card
            card_type: horizontal-buttons-stack
            1_link: '#family'
            1_name: Familly Room
            1_icon: mdi:human-female-female-child
      - type: vertical-stack
        cards:
          - type: custom:bubble-card
            card_type: pop-up
            hash: '#kitchen'
            button_type: state
            entity: sensor.kitchen_temperature
            tap_action:
              action: navigate
              navigation_path: ''
          - type: custom:bubble-card
            card_type: button
            button_type: slider
            entity: light.kitchen_under_cabinet
            name: Sconces
          - type: custom:bubble-card
            card_type: button
            button_type: slider
            entity: light.kitchen_main_lights
          - type: custom:bubble-card
            card_type: horizontal-buttons-stack
            1_link: '#family'
            1_name: Familly Room
            1_icon: mdi:human-female-female-child

Thank you @Cloos! I was able to achieve what I needed based on your suggestion and I am using card_mod. Is there a way to decrease the height of this slider?

I tried .bubble-range-slider, but didn’t work:

image

type: custom:mod-card
card_mod:
  style: |
    ha-card {
      background-color: #111F32;
    }
card:
  type: vertical-stack
  cards:
    - type: custom:button-card
      entity: light.interruptor_1_quarto_thomas_light_3
      icon: hue:ceiling-aurelle
      show_state: false
      show_name: true
      name: Plafon
      aspect_ratio: 3/1
      show_last_changed: false
      tap_action:
        action: toggle
      hold_action:
        action: more-info
      double_tap_action:
        action: none
      show_icon: true
      styles:
        card:
          - border-radius: 15px
          - border-bottom-left-radius: 0px
          - border-bottom-right-radius: 0px
          - background-color: '#111F32'
        icon:
          - color: '#59F1FF'
        name:
          - color: '#FFFFFF'
      state:
        - value: 'on'
          styles:
            icon:
              - color: '#FFE500'
    - type: entities
      entities:
        - type: custom:bubble-card
          entity: light.interruptor_1_quarto_thomas_light_3
          card_type: button
          button_type: slider
          show_name: false
          icon: hue:scene-bright
          styles: |
            .bubble-icon {
              color: ${state === 'on' ? '#FFE500' : '#59F1FF'} !important;
              --mdc-icon-size: 30px !important;
            }
            .bubble-range-fill { 
              background: linear-gradient(to right, #FFFFFF, #FFE500) !important;
              opacity: 0.5 !important;
            }
            .bubble-icon-container {
              background: #111F32;
            }
      card_mod:
        style: |
          ha-card {
            background-color: #111F32;
            border-top-right-radius: 0px;
            border-top-left-radius: 0px;
          }

Hi! You can’t place it anywhere else at the moment, this card act as a footer.

But you can open the pop-ups with regular buttons too.

I am having trouble templating the name and icon of individual buttons in horizontal stack. This style works for button background color:

styles: |-
  .solar > .bubble-background-color {
    background-color: ${hass.states['sensor.power_meter_active_power'].state  > -200 ? 'rgb(60, 179, 113)' : 'orange'} !important;
  }

I have no problem templating the bubble button cards, but how do I template the name/text and icon inside horizontal buttons stack?

If someone has an example config with dynamic names/icons in horizontal buttons stack that would be awesome.

Thanks!

Update:
I have managed to template an icon using card mod:

card_mod:
  style: |
    .weather {
      --card-mod-icon: {{ 'mdi:weather-' + states['weather.forecast_home'].state }} !important;

This sets the icon of a button inside horizontal buttons stack to current weather conditions.

ahhh, I see. I love what you’ve developed so far. I’ve built multiple software companies (though I still can’t code worth a damn), so I know how hard it is to build good UX/UI. Hats off to you for creating and evolving this card.

1 Like

Hi everyone
How can I remove the border around the horizontal stack buttons. I’ve tried a lot and failed.

Since the latest version, I can’t do that anymore.

I got it. :sweat_smile:

Have you tried this in your pop up icon container? By that I mean, when you click the Weather button in your horizontal button stack, are you able to get the dynamic Weather icon in your pop up header?

I ask because I’m using the same workaround in my horizontal button stack, which works as you’ve noted with card mod, yet cannot achieve the same in my Weather popup itself - the icon to the left of the .bubble-name is just a space where an icon should be.

EDIT: link to my post above on this very issue.

Unfortunately I have not been able to template a header icon inside a popup yet. I’ll let you know if I manage to do it eventually.

Meanwhile, do you by any chance know how to template the actual text inside a horizontal button stack? I want my button inside horizontal stack for a weather popup to display a state of an entity.

Thanks for the quick reply! I was having trouble using the example from the documentation “change the background of a button…” using .button-buble-card-container only, as the color “mixed” with the background of the card itself when the entity is ‘on’. I noticed in the HTML that when the entity is using an “is-on” class, the background is set to --accent-color, which means to use a customized color I would need to also set .button-bubble-background-color to 0,0,0,0 to avoid blending. Does that sound right?

Hi, could you show an example how you implemented this code into the YAML code of a horizontal button stack? Don’t quite get it… thanks in advance!

Sure. Here is an example of a button inside horizontal stack that changes icon based on weather conditions:

type: custom:bubble-card
card_type: horizontal-buttons-stack
1_link: '#weather'
1_name: Weather
1_icon: mdi:weather-partly-cloudy
width_desktop: 1000px
card_mod:
  style: |
    .weather {
      --card-mod-icon: {{ 'mdi:weather-' + states['weather.forecast_home'].state }} !important;

You may have to change your weather provider entity (weather.forecast_home) to something else though. I have not fully tested it yet but it works for current conditions.

1 Like

When I color the icon against a white background, it’s washed out, as if the white is a layer above the icon. In the example shown, the icon color is the same as the button background but clearly doesn’t appear that way. Is this something I can adjust via CSS or is the result of how the buttons are constructed?
Screenshot 2024-06-10 at 12.18.39 PM

* { 
    font-size: 12px !important;
    color: white;
  }
  
  .bubble-button-card-container {
    background: rgba(0,0,204,1) !important;
  }
  .bubble-icon-container {
    background: rgb(255,255,255,1);
  }
  
  .bubble-icon {
    --mdc-icon-size: 20px !important;
  }        
  .bubble-icon {
    color: rgb(0,0,204,1) !important;
  }

Sorry to reply to my own - hope that’s not bad form? I realize my question does reference the Bubble theme, but I think the real question deals with how to implement the problem statement via the Bubble cards and CSS. Let me know if it’s too much off-topic!

Problem statement is simple: I want to ignore --accent-color for buttons that are ‘on’. They use the is-on style defines in styles.ts, which sets the card background to --accent-color. This hides the new background I want to conditionally set based on the entity state. I don’t want to delete --accent-color because it has a nice effect on other areas of the dashboard.

The only way I got this to work is:

.bubble-button-card-container {
  background-color: ${state === 'on' ? 'var(--tech_active)' : 'var(--tech_inactive)' } !important;
}
.bubble-button-background {
  opacity: 0 !important;
}

This seems a little funky, so could someone tell me if this is correct? If I use to use background-color: or color: under the .bubble-button-background, it has no effect.

Thanks!

Hi there, I have an issue that just popped up after installing the latest version. I have kiosk mode on, and now when I put ?edit=1 at the end of the string to edit my dashboard the entire screen goes black and I can’t see anything. Please help.

HI there,

is something like the one below possible with “Horizontal buttons stack”? Buttons with multiple batches…

Hi,

I have a whole load of dashboards with heavy use of bubble card pop ups and buttons. I’m trying to implement a feature where I overlay a full screen with customisable opacity to further ‘dim’ the screen at night. It partly works but all of the cards including the vertical stack pop up cards are over the overlay element. That element is set with a z-index of 9999 so in theory should appear over the top of everything. The possible issue is if something has broken the z-index layers? Any idea if bubble card should support that?

This is the snippet of the code I’m using for the overlay:

    cards:
      - type: custom:mod-card
        style: |
          ha-card {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, {{ states('input_number.bedside_table_device_overlay_brightness') }});  # Use the variable here
            z-index: 9999;
            pointer-events: none;  # Make overlay non-interactive
            display: flex;
            justify-content: center;
            align-items: center;
          }
          ha-card > div {
            pointer-events: auto;  # Make the inner elements interactive
          }

Of course it could be my code or something else on the page.

Thanks.


type: custom:bubble-card
card_type: button
card_layout: large
button_type: name
show_icon: false
show_name: false
sub_button:
  - name: Mute
    icon: mdi:volume-off
    tap_action:
      action: toggle
      service: input_boolean.toggle
    entity: input_boolean.silent_mode
  - name: Covers
    entity: cover.all_group
    show_background: false
    tap_action:
      action: navigate
      navigation_path: '#cover'
  - name: Shopping list
    icon: mdi:cart-outline
    show_background: false
    tap_action:
      action: navigate
      navigation_path: '#shopping-list'
  - name: Security
    icon: mdi:video-outline
    show_background: false
    tap_action:
      action: navigate
      navigation_path: '#security'
  - name: Settings
    icon: mdi:cog
    show_background: false
    tap_action:
      action: navigate
      navigation_path: '#configuration'
styles: |
  .card-content {
    width: 100%;
    margin: 0 !important;
  }
  .bubble-button-card-container {
    background: none;
  }
  .bubble-sub-button {
    height: 46px !important;
    width: 46px !important;
  }
  .bubble-sub-button-container {
    width: 100%;
    justify-content: space-between !important;
  }
  .bubble-sub-button-icon {
    --mdc-icon-size: inherit !important;
  }
  .bubble-name-container {
    margin-right: 0px !important;
  }

I want to use your code but fixed on bottom how can i do that?

I have a similar overlay feature (for dimming the screen if a dropdown is opened) which broke a few updates ago, I think it was because of some changes to the z-index. I’m not totally sure how I fixed it, but it was some of the following:

  • add ‘!important;’ to the z-index (always worth a try)
  • add ‘transform: none !important;’ to the bubble popup container (stops changes to the z-index of cards if your overlay is within a popup)
  • make sure your applying the z-index to the topmost container if the overlay is not inside a popup (you can check this in the dev console of your browser)
1 Like