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

[benm7 (Ben M)]

Trying to build a picture elements card with a bubble card in it. Successful getting the card in but I want to blur the bubble card and make it somewhat transparent. Have tried call combinations of blurring without success, hoping someone can help!

• type: picture-elements
  card_mod:
  style: |
  ha-card {
  border-radius: 36px;
  }
  camera_image: camera.living_room
  image: /local/Lounge Camera.png
  camera_view: live
  tap_action:
  action: more-info
  elements:
  • type: custom:mod-card
    style:
    top: 84%
    left: 50%
    width: 96%
    card_mod:
    style: |
    ha-card {
    border-radius: 36px;
    -webkit-backdrop-filter: blur(2px) !important;
    backdrop-filter: blur(2px) !important;
    }
    card:
    type: custom:bubble-card
    style: null
    card_type: button
    button_type: state
    entity: camera.living_room
    force_icon: true
    show_attribute: true
    attribute: frontend_stream_type
    button_action:
    tap_action:
    action: none
    sub_button:
    - entity: camera.living_room
    icon: mdi:play
    tap_action:
    action: call-service
    service: camera.turn_on
    target:
    entity_id: camera.living_room
    - entity: camera.living_room
    icon: mdi:chevron-double-right
    - entity: camera.living_room
    icon: mdi:stop
    tap_action:
    action: call-service
    service: camera.turn_off
    target:
    entity_id: camera.living_room
    card_layout: large
    styles: |-
    .bubble-button-card {
    opacity: ${state === ‘streaming’ ? ‘1.0’ : ‘0.3’} !important;
    background-color: rgba(var(–color-background),0.6) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    backdrop-filter: blur(2px) !important;
    filter: blur(50%) !important;
    }
    .bubble-button-card-container {
    background-color: none !important;
    }
    .bubble-button-background {
    background-color: none !important;
    filter: blur(50%) !important;
    }
    .bubble-icon {
    color: ${state === ‘streaming’ ? ‘var(–card-background-color)’ : ‘grey’} !important;
    opacity: 1.0 !important;
    }
    .bubble-icon-container {
    background-color: ${state === ‘streaming’ ? ‘var(–google-red)’ : ‘’} !important;
    opacity: 1.0 !important;
    }
    .bubble-name {
    font-size: 14px !important;
    }
    .bubble-sub-button-container {
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 100%;
    }
    .bubble-sub-button-1 {
    background-color: ${state === ‘streaming’ ? ‘rgba(var(–color-background),0.8)’ : ‘rgba(var(–color-background),0.6)’} !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 100%;
    }
    .bubble-sub-button-2 {
    background-color: none;
    border-radius: 100%;
    }
    .bubble-sub-button-3 {
    background-color: rgba(var(–color-green),0.8)) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 100%;
    }
    .is-on .bubble-icon {
    filter: brightness(1.0);
    opacity: 1;
    }

Current look - where the background is black I want that to be transparent and blurred so the picture elements comes through:

[Sireone]

It was actutally this setting that did the trick. Why it’s not enabled by default is beyond me! The 2.3.2 hotfix was the update that added this option after it was broken in 2.3.0!

[Tsar (Christian)]

Just started with the bubble, so maybe stupid question…

I have a floorplan on a view with as layout of course “panel (single card)”.

Can the bubble card be used in that case; if so…how ?

I want to have a popup of my airconditioner when clicking on a specific area on the floorplan. So I put this in my floorplan :

            - type: image
              entity: light.lights_hallway
              tap_action:
                action: navigate
                navigation_path: "#airco_living"
              hold_action:
                action: none
              state_image: {}
              style:
                left: 39%
                top: 90%
                width: 3.95%
                border: 1px solid red
              image: >-
                /local/images//floorplan/downstairs/a transparent airco
                living.png

Where do I put this :

  - type: custom:bubble-card
    card_type: pop-up
    hash: "#airco_living"
  - type: tile
    entity: climate.airco_living
    features:
      - style: icons
        type: climate-hvac-modes
        hvac_modes:
          - heat
          - cool
          - fan_only
          - "off"
      - type: target-temperature
      - type: climate-fan-modes
        style: dropdown

[davidnestico]

This looks amazing, almost like its official

Can’t get your code to work though cuz I think you pasted it wrong, paste it as a code pls

[Cinamon]

type: picture-elements
card_mod:
  style: |
    ha-card {
      border-radius: 36px;
    }
camera_image: camera.living_room
image: /local/Lounge Camera.png
camera_view: live
tap_action:
  action: more-info
elements:
  - type: custom:mod-card
    style:
      top: 84%
      left: 50%
      width: 96%
    card_mod:
      style: |
        ha-card {
          border-radius: 36px;
          -webkit-backdrop-filter: blur(2px) !important;
          backdrop-filter: blur(2px) !important;
        }
    card:
      type: custom:bubble-card
      style: null
      card_type: button
      button_type: state
      entity: camera.living_room
      force_icon: true
      show_attribute: true
      attribute: frontend_stream_type
      button_action:
        tap_action:
          action: none
      sub_button:
        - entity: camera.living_room
          icon: mdi:play
          tap_action:
            action: call-service
            service: camera.turn_on
            target:
              entity_id: camera.living_room
        - entity: camera.living_room
          icon: mdi:chevron-double-right
        - entity: camera.living_room
          icon: mdi:stop
          tap_action:
            action: call-service
            service: camera.turn_off
            target:
              entity_id: camera.living_room
      card_layout: large
      styles: |-
        .bubble-button-card {
          opacity: ${state === 'streaming' ? '1.0' : '0.3'} !important;
          background-color: rgba(var(--color-background), 0.6) !important;
          -webkit-backdrop-filter: blur(2px) !important;
          backdrop-filter: blur(2px) !important;
          filter: blur(50%) !important;
        }
        .bubble-button-card-container {
          background-color: none !important;
        }
        .bubble-button-background {
          background-color: none !important;
          filter: blur(50%) !important;
        }
        .bubble-icon {
          color: ${state === 'streaming' ? 'var(--card-background-color)' : 'grey'} !important;
          opacity: 1.0 !important;
        }
        .bubble-icon-container {
          background-color: ${state === 'streaming' ? 'var(--google-red)' : ''} !important;
          opacity: 1.0 !important;
        }
        .bubble-name {
          font-size: 14px !important;
        }
        .bubble-sub-button-container {
          -webkit-backdrop-filter: blur(10px) !important;
          backdrop-filter: blur(10px) !important;
          border-radius: 100%;
        }
        .bubble-sub-button-1 {
          background-color: ${state === 'streaming' ? 'rgba(var(--color-background), 0.8)' : 'rgba(var(--color-background), 0.6)'} !important;
          -webkit-backdrop-filter: blur(10px) !important;
          backdrop-filter: blur(10px) !important;
          border-radius: 100%;
        }
        .bubble-sub-button-2 {
          background-color: none;
          border-radius: 100%;
        }
        .bubble-sub-button-3 {
          background-color: rgba(var(--color-green), 0.8) !important;
          -webkit-backdrop-filter: blur(10px) !important;
          backdrop-filter: blur(10px) !important;
          border-radius: 100%;
        }
        .is-on .bubble-icon {
          filter: brightness(1.0);
          opacity: 1;
        }

[Cinamon]

do you mean this:

type: picture-elements
card_mod:
  style: |
    ha-card {
      border-radius: 36px;
    }
camera_image: camera.living_room
image: /local/Lounge Camera.png
camera_view: live
tap_action:
  action: more-info
elements:
  - type: custom:mod-card
    style:
      top: 84%
      left: 50%
      width: 96%
    card_mod:
      style: |
        ha-card {
          border-radius: 36px;
          -webkit-backdrop-filter: blur(2px) !important;
          backdrop-filter: blur(2px) !important;
        }
    card:
      type: custom:bubble-card
      style: null
      card_type: button
      button_type: state
      entity: camera.living_room
      force_icon: true
      show_attribute: true
      attribute: frontend_stream_type
      button_action:
        tap_action:
          action: none
      sub_button:
        - entity: camera.living_room
          icon: mdi:play
          tap_action:
            action: call-service
            service: camera.turn_on
            target:
              entity_id: camera.living_room
        - entity: camera.living_room
          icon: mdi:chevron-double-right
        - entity: camera.living_room
          icon: mdi:stop
          tap_action:
            action: call-service
            service: camera.turn_off
            target:
              entity_id: camera.living_room
      card_layout: large
      styles: |-
        .bubble-button-card {
          opacity: ${state === 'streaming' ? '1.0' : '0.3'} !important;
          background-color: rgba(var(--color-background), 0.6) !important;
          -webkit-backdrop-filter: blur(10px) !important;
          backdrop-filter: blur(10px) !important;
        }
        .bubble-button-card-container {
          background-color: rgba(0, 0, 0, 0.4) !important;
          -webkit-backdrop-filter: blur(10px) !important;
          backdrop-filter: blur(10px) !important;
        }
        .bubble-button-background {
          background-color: none !important;
          filter: blur(50%) !important;
        }
        .bubble-icon {
          color: ${state === 'streaming' ? 'var(--card-background-color)' : 'grey'} !important;
          opacity: 1.0 !important;
        }
        .bubble-icon-container {
          background-color: ${state === 'streaming' ? 'var(--google-red)' : ''} !important;
          opacity: 1.0 !important;
        }
        .bubble-name {
          font-size: 14px !important;
        }
        .bubble-sub-button-container {
          -webkit-backdrop-filter: blur(10px) !important;
          backdrop-filter: blur(10px) !important;
          border-radius: 100%;
        }
        .bubble-sub-button-1 {
          background-color: ${state === 'streaming' ? 'rgba(var(--color-background), 0.8)' : 'rgba(var(--color-background), 0.6)'} !important;
          -webkit-backdrop-filter: blur(10px) !important;
          backdrop-filter: blur(10px) !important;
          border-radius: 100%;
        }
        .bubble-sub-button-2 {
          background-color: none;
          border-radius: 100%;
        }
        .bubble-sub-button-3 {
          background-color: rgba(var(--color-green), 0.8) !important;
          -webkit-backdrop-filter: blur(10px) !important;
          backdrop-filter: blur(10px) !important;
          border-radius: 100%;
        }
        .is-on .bubble-icon {
          filter: brightness(1.0);
          opacity: 1;
        }

gaves you:

[davidnestico]

Thank you! Working now, just gonna style it a little more though.

[Cinamon]

You’re welcome! Do you want to share the result?

[Markus1995]

Thank you for the idea.

But it doesnt work also without “!important”

[amstermk]

Did you remove the „font-size: 15px;“ on the other places?

[amstermk]

Hi,

I do have a bubble-button card with an „input-select Subbutton“. I use this for various light-scenes. One of the input-select options is a dummy called „Reset“ which I need for the automation.

As this is a Dummy I would like it to be invisible in the selection. Is there a way to do this within the bubble card?

[davidnestico]

Just a few style changes I prefer

type: picture-elements
card_mod:
  style: |
    ha-card {
      border-radius: 36px;
    }
camera_image: camera.porch
image_entity: image.porch_person
camera_view: live
tap_action:
  action: more-info
elements:
  - type: state-icon
    entity: binary_sensor.porch_motion
    style:
      left: 10%
      top: 10%
    card_mod:
      style: |
        ha-card {
          border-radius: 36px;
          -webkit-backdrop-filter: blur(24px) !important;
          backdrop-filter: blur(24px) !important;
        }
  - type: custom:mod-card
    style:
      top: 87%
      left: 50%
      width: 90%
    card_mod:
      style: |
        ha-card {
          border-radius: 36px;
          -webkit-backdrop-filter: blur(24px) !important;
          backdrop-filter: blur(24px) !important;
        }
    card:
      type: custom:bubble-card
      style: null
      card_type: button
      button_type: state
      entity: camera.porch
      force_icon: true
      show_attribute: true
      attribute: frontend_stream_type
      button_action:
        tap_action:
          action: none
      sub_button:
        - entity: camera.porch
          icon: mdi:play-box-multiple
          tap_action:
            action: navigate
            navigation_path: "#events"
        - entity: switch.porch_power
          icon: mdi:power
          state_background: true
          confirmation:
            text: This will Turn Off the camera, do you want to proceed?
      card_layout: normal
      styles: |-
        .bubble-button-card {
          opacity: ${state === 'recording' ? '1.0' : '0.3'} !important;
          background: rgba(0,0,0,0.1) !important;
          -webkit-backdrop-filter: blur(24px) !important;
          backdrop-filter: blur(24px) !important;
          filter: blur(50%) !important;
        }
        .bubble-button-card-container {
          background: rgba(0,0,0,0.1) !important;
          -webkit-backdrop-filter: blur(24px) !important;
          backdrop-filter: blur(24px) !important;
          filter: blur(50%) !important;
        }
        .bubble-button-background {
          background-color: var(--card-background-color) !important;
          filter: blur(50%) !important;
        }
        .bubble-icon {
          color: ${state === 'recording' ? 'var(--accent-color)' : 'grey'} !important;
          opacity: 0.8 !important;
        }
        .bubble-icon-container {
          background-color: ${state === 'recording' ? 'var(--google-red)' : 'grey'} !important;
          opacity: 0.8 !important;
          filter: blur(50%) !important;
        }
        .bubble-name {
          font-size: auto !important;
        }
        .bubble-sub-button-container {
          background: none !important;
        }
        .bubble-sub-button-1 {
          -webkit-backdrop-filter: blur(24px) !important;
          backdrop-filter: blur(24px) !important;
          border-radius: 100%;
          background: rgba(0,0,0,0.1) !important;
        }
        .bubble-sub-button-2 {
          -webkit-backdrop-filter: blur(24px) !important;
          backdrop-filter: blur(24px) !important;
          border-radius: 100%;
        }
        .bubble-sub-button-3 {
          -webkit-backdrop-filter: blur(24px) !important;
          backdrop-filter: blur(24px) !important;
          border-radius: 100%;
          background: rgba(0,0,0,0.1) !important;
        }
        .is-on .bubble-icon {
          filter: brightness(1.0);
          opacity: 1;
        }

[benm7 (Ben M)]

I’ll give it a try myself

[benm7 (Ben M)]

Awesome! Out of interest, what did you change to get it to work? I tried every combo

[benm7 (Ben M)]

Here is my final code, think I’m happy with it now!

type: custom:state-switch
entity: camera.living_room
default: idle
states:
  idle:
    type: picture-elements
    card_mod:
      style: |
        ha-card {
          border-radius: 36px;
        }
    image: /local/Lounge Camera.png
    camera_view: live
    tap_action:
      action: more-info
    elements:
      - type: custom:mod-card
        style:
          top: 84%
          left: 50%
          width: 96%
        card_mod:
          style: |
            ha-card {
              border-radius: 36px;
              -webkit-backdrop-filter: blur(2px) !important;
              backdrop-filter: blur(2px) !important;
            }
        card:
          type: custom:bubble-card
          card_type: button
          button_type: state
          entity: camera.living_room
          force_icon: true
          show_attribute: true
          button_action:
            tap_action:
              action: none
          card_layout: normal
          sub_button:
            - entity: sensor.living_room_battery_percentage
              show_state: true
            - entity: camera.living_room
              icon: mdi:play
              tap_action:
                action: call-service
                service: camera.turn_on
                target:
                  entity_id: camera.living_room
            - entity: camera.living_room
              icon: mdi:chevron-double-left
              tap_action:
                action: none
            - entity: camera.living_room
              icon: mdi:stop
              tap_action:
                action: call-service
                service: camera.turn_off
                target:
                  entity_id: camera.living_room
          styles: |-
            .bubble-button-card {
              opacity: ${state === 'streaming' ? '1.0' : '0.5'} !important;
              background: rgba(0,0,0,0.1) !important;
              -webkit-backdrop-filter: blur(2px) !important;
              backdrop-filter: blur(2px) !important;
            }
            .bubble-button-card-container {
              background-color: rgba(0,0,0,0) !important;
              -webkit-backdrop-filter: blur(2px) !important;
              backdrop-filter: blur(2px) !important;
              filter: blur(50%) !important;
            }
            .bubble-button-background {
              background-color: var(--card-background-color) !important;
              filter: blur(50%) !important;
            }
            .bubble-icon {
              color: var(--card-background-color) !important;
              opacity: 1.0 !important;
            }
            .bubble-icon-container {
              background-color: ${state === 'streaming' ? 'var(--google-red)' : 'grey'} !important;
            }
            .bubble-name {
              font-size: auto !important;
            }
            .bubble-sub-button-container {
              background: none !important;
            }
            .bubble-sub-button-1 {
              background-color: ${hass.states['sensor.living_room_battery_percentage'].state <= 10 ? 'var(--google-red)' : hass.states['sensor.living_room_battery_percentage'].state <= 20 ? 'var(--google-orange)' : 'rgba(0,0,0,0)'} !important;
              display: ${hass.states['sensor.living_room_battery_percentage'].state <= 20 ? '' : 'none'} !important;
            }
            .bubble-sub-button-2{
              border-radius: 32px 0px 0px 32px;
              background-color: rgba(var(--color-background),0.6);
              -webkit-backdrop-filter: blur(2px) !important;
              backdrop-filter: blur(2px) !important;
            }
            .bubble-sub-button-3{
              border-radius: 0px;
              margin-left: -8px;
              margin-right: -8px;
              background-color: rgba(var(--color-background),0.6);
              -webkit-backdrop-filter: blur(2px) !important;
              backdrop-filter: blur(2px) !important;
            }
            .bubble-sub-button-4{
              border-radius: 0px 32px 32px 0px;
              background-color: rgba(var(--color-background),0.6);
              -webkit-backdrop-filter: blur(2px) !important;
              backdrop-filter: blur(2px) !important;
            }
            .is-on .bubble-icon {
              filter: brightness(1.0);
              opacity: 1;
            }
  streaming:
    type: picture-elements
    card_mod:
      style: |
        ha-card {
          border-radius: 36px;
        }
    camera_image: camera.living_room
    image: /local/Lounge Camera.png
    camera_view: live
    tap_action:
      action: more-info
    elements:
      - type: custom:button-card
        style:
          top: 10%
          left: 85%
          width: 20%
        card_mod:
          style: |
            ha-card  {
              background-color: var(--folder-background);
              backdrop-filter: blur(2px) !important;
              -webkit-backdrop-filter: blur(2px) !important;
            }
        show_name: true
        show_state: false
        name: Live
        entity: camera.living_room
        layout: icon_name
        icon: mdi:record
        styles:
          card:
            - border-radius: 24px
            - width: 120%
          img_cell:
            - width: 40px
            - height: 20px
            - background: none
            - border-radius: 100%
          icon:
            - width: 20px
            - color: var(--google-red)
            - top: "-2px"
          name:
            - color: var(--primary--font-color)
            - font-size: 10px
            - justify-self: start
      - type: custom:mod-card
        style:
          top: 84%
          left: 50%
          width: 96%
        card_mod:
          style: |
            ha-card {
              border-radius: 36px;
              -webkit-backdrop-filter: blur(2px) !important;
              backdrop-filter: blur(2px) !important;
            }
        card:
          type: custom:bubble-card
          card_type: button
          button_type: state
          entity: camera.living_room
          force_icon: true
          show_attribute: true
          button_action:
            tap_action:
              action: none
          card_layout: normal
          sub_button:
            - entity: sensor.living_room_battery_percentage
              show_state: true
            - entity: camera.living_room
              icon: mdi:play
              tap_action:
                action: call-service
                service: camera.turn_on
                target:
                  entity_id: camera.living_room
            - entity: camera.living_room
              icon: mdi:chevron-double-right
              tap_action:
                action: none
            - entity: camera.living_room
              icon: mdi:stop
              tap_action:
                action: call-service
                service: camera.turn_off
                target:
                  entity_id: camera.living_room
          styles: |-
            .bubble-button-card {
              opacity: ${state === 'streaming' ? '1.0' : '0.5'} !important;
              background: rgba(0,0,0,0.1) !important;
              -webkit-backdrop-filter: blur(2px) !important;
              backdrop-filter: blur(2px) !important;
            }
            .bubble-button-card-container {
              background-color: rgba(0,0,0,0) !important;
              -webkit-backdrop-filter: blur(2px) !important;
              backdrop-filter: blur(2px) !important;
              filter: blur(50%) !important;
            }
            .bubble-button-background {
              background-color: var(--card-background-color) !important;
              filter: blur(50%) !important;
            }
            .bubble-icon {
              color: var(--card-background-color) !important;
              opacity: 1.0 !important;
            }
            .bubble-icon-container {
              background-color: ${state === 'streaming' ? 'var(--google-red)' : 'grey'} !important;
            }
            .bubble-name {
              font-size: auto !important;
            }
            .bubble-sub-button-container {
              background: none !important;
            }
            .bubble-sub-button-1 {
              background-color: ${hass.states['sensor.living_room_battery_percentage'].state <= 10 ? 'var(--google-red)' : hass.states['sensor.living_room_battery_percentage'].state <= 20 ? 'var(--google-orange)' : 'rgba(0,0,0,0)'} !important;
              display: ${hass.states['sensor.living_room_battery_percentage'].state <= 20 ? '' : 'none'} !important;
            }
            .bubble-sub-button-2{
              border-radius: 32px 0px 0px 32px;
              background-color: rgba(var(--color-background),0.6);
              -webkit-backdrop-filter: blur(2px) !important;
              backdrop-filter: blur(2px) !important;
            }
            .bubble-sub-button-3{
              border-radius: 0px;
              margin-left: -8px;
              margin-right: -8px;
              background-color: rgba(var(--color-background),0.6);
              -webkit-backdrop-filter: blur(2px) !important;
              backdrop-filter: blur(2px) !important;
            }
            .bubble-sub-button-4{
              border-radius: 0px 32px 32px 0px;
              background-color: rgba(var(--color-background),0.6);
              -webkit-backdrop-filter: blur(2px) !important;
              backdrop-filter: blur(2px) !important;
            }
            .is-on .bubble-icon {
              filter: brightness(1.0);
              opacity: 1;
            }

Streaming:

Idle:

[davidnestico]

Nice! Was having fun and decided to make a 2nd version lol

      type: picture-elements
      card_mod:
        style: |
          ha-card {
            border-radius: 24px;
          }
      camera_image: camera.driveway
      image_entity: image.driveway_person
      camera_view: auto
      aspect_ratio: 16x9
      tap_action:
        action: navigate
        navigation_path: >-
          /lovelace/home/vsic?frigate-card-action:popup:camera_select=camera.driveway#camera
      elements:
        - type: state-icon
          entity: binary_sensor.driveway_motion
          style:
            left: 10%
            top: 10%
          card_mod:
            style: |
              ha-card {
                border-radius: 10px;
                box-shadow: none !important;
                -webkit-backdrop-filter: blur(24px) !important;
                backdrop-filter: blur(24px) !important;
              }
        - type: custom:mod-card
          style:
            top: 86%
            left: 50%
            width: 95%
          card_mod:
            style: |
              ha-card {
                background: none !important;
                border-radius: 36px;
                box-shadow: none !important;
              }
          card:
            type: custom:bubble-card
            style: null
            card_type: button
            button_type: state
            entity: camera.driveway
            icon: mdi:open-in-new
            force_icon: true
            show_attribute: true
            attribute: frontend_stream_type
            button_action:
              tap_action:
                action: none
            tap_action:
              action: navigate
              navigation_path: >-
                /lovelace/home/vsic?frigate-card-action:popup:camera_select=camera.driveway#camera
            sub_button:
              - entity: camera.driveway
                icon: mdi:play-box-multiple
                tap_action:
                  action: navigate
                  navigation_path: "#events"
              - entity: switch.driveway_power
                icon: mdi:power
                state_background: true
                confirmation:
                  text: This will Turn Off the camera, do you want to proceed?
            card_layout: normal
            styles: |-
              .bubble-button-card {
                color: auto !important;
                opacity: ${state === 'recording' ? '1.0' : '0.3'} !important;
                background: none !important;
                box-shadow: none !important;
              }
              .bubble-button-card-container {
                background: none !important;
                box-shadow: none !important;
              }
              .bubble-button-background {
                background-color: none !important;
                box-shadow: none !important;
                filter: blur(50%) !important;
              }
              .bubble-icon {
                color: ${state === 'recording' ? 'var(--primary-text-color)' : 'grey'} !important;
                opacity: 0.8 !important;
              }
              .bubble-icon-container {
                background-color: ${state === 'recording' ? 'var(--google-red)' : 'grey'} !important;
                opacity: 0.8 !important;
                filter: blur(50%) !important;
              }
              .bubble-name {
                font-size: auto !important;
              }
              .bubble-sub-button-container {
                background: none !important;
              }
              .bubble-sub-button-1 {
                -webkit-backdrop-filter: blur(24px) !important;
                backdrop-filter: blur(24px) !important;
                border-radius: 100%;
                background: rgba(0,0,0,0.1) !important;
              }
              .bubble-sub-button-2 {
                -webkit-backdrop-filter: blur(24px) !important;
                backdrop-filter: blur(24px) !important;
                border-radius: 100%;
              }
              .bubble-sub-button-3 {
                -webkit-backdrop-filter: blur(24px) !important;
                backdrop-filter: blur(24px) !important;
                border-radius: 100%;
                background: rgba(0,0,0,0.1) !important;
              }
              .is-on .bubble-icon {
                filter: brightness(1.0);
                opacity: 1;
              }

[adissimo]

Hi, I need some help from you. I am using the bubble theme (light) for mobile and wall panel. After the breaking changes of version 2.3.0-beta8 I can’t get the blur background set to be light/white again and look the same as before. Can you please give me some tips? Thanks.

Before 2.3.0-beta8:

after 2.3.0-beta8:

[Cloos]

Bubble Card 2

v2.3.4-beta.1 - Let’s do things right!

Hi everyone!

The last versions were not very good, and there were many bug reports. I’m really sorry about that!

However, I believe I’ve finally identified the issues in those versions, and this new beta should be perfectly stable and even faster on some setups/browsers! That said, I’m releasing it as a beta to make absolutely sure.

I also want to wish you happy holidays in advance, as I’m not sure if another version will be released before 2025 (unless this beta satisfies everyone ).

Thank you all for your patience and support!

And if you missed the previous changelogs, check v2.3.0 and v2.3.1 for the new features.

---

Bug fixes and optimizations

• Errors introduced in v2.3.1 and later:
  Fixed various issues that caused errors in recent versions. #1041

• Code optimization:
  Improved parts of the code to ensure smoother and more stable behavior. #1035 #1065

• Pop-up performance:
  Optimized pop-ups for faster opening and closing in some setups (Seriously, they’re so much smoother now… again).

• Accent color for lights:
  Resolved a problem where the “Use accent color” feature for lights did not always display the correct color. #692

---

Bubble Card news

---

I’ve been wanting to start my own YouTube channel for a while, focusing on tutorials around Home Assistant and Bubble Card. There are two videos so far, an introduction explaining the project and a first tutorial on how to create your first pop-up. I really hope you will enjoy them. Don’t hesitate to subscribe to help give my channel more visibility. Thank you in advance!

The next video will cover the new global variables, as well as custom styles and templates, since I’ve noticed more and more questions on these topics.

---

Over the past year, I’ve been working almost everyday on Bubble Card to make it the best it can be, and I still don’t believe how much it have grown in popularity. Watching the community getting this big and seeing so many people using my work has been incredibly rewarding.

I have another announcement to you all, I decided to create a Patreon as a way to offer something more for those who want to support me. On my Patreon, I share advanced YAML configurations, custom styles, and templates. For example, I’ve added one (my favorite) that allows up to four conditional badges placed around the card’s icons. It’s also a great way to learn about all the possibilities of Bubble Card custom styles and templates!

If you like my project and want to support its development, subscribing to my Patreon is probably the best way to help me keep the project going.

Also, let me know if you have any suggestions or feedback on this. Trying to find a way to monetize my work was not something I ever imagined doing, but I really hope you see it as a way to keep improving the project, and not as a negative step.

Thank you so much for being part of this amazing community, your support will always makes a huge difference!

---

I want to highlight that on the GitHub page, in the Discussions section, you can share and discover some amazing YAML examples from the community. Go check it out! Some of the creations are absolutely incredible!

---

And if you are interested I’ve opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:

Release Bubble Card v2.3.4-beta.1 · Clooos/Bubble-Card

[Dakononov (Dmitry)]

Is it possible to reduce the size of the close button and change the color? Iam need something like a MacOs style. THX

[ausfas]

It’s Large with 2 sub-buttons rows (Optimized for sections)

- type: custom:bubble-card
    card_type: button
    button_type: name
    card_layout: large-2-rows
    name: Energy
    icon: mdi:home-lightning-bolt-outline
    show_state: true
    button_action:
      tap_action:
        action: navigate
        navigation_path: "#energy"
    sub_button:
      - entity: sensor.laundry_socket_1_current
        icon: mdi:iron-outline
        show_state: true
        show_background: false
      - entity: sensor.laundry_socket_1_voltage
        icon: ""
        show_state: true
        show_background: false
        show_icon: false
      - entity: sensor.laundry_socket_2_current
        icon: mdi:power-socket-au
        show_state: true
        show_background: false
      - entity: sensor.laundry_socket_2_voltage
        icon: ""
        show_state: true
        show_background: false
        show_icon: false
      - entity: sensor.laundry_socket_2_current
        icon: mdi:washing-machine
        show_state: true
        show_background: false
      - entity: sensor.laundry_socket_2_voltage
        icon: mdi:voltage
        show_state: true
        show_background: false
        show_icon: false
      - entity: sensor.laundry_socket_3_current
        icon: mdi:fridge
        show_state: true
        show_background: false
      - entity: sensor.laundry_socket_3_voltage
        icon: mdi:counter
        show_state: true
        show_background: false
        show_icon: false
    style:
      background-color: "#ffffff"
      color: "#333333"
      border-radius: 10px
      padding: 12px
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2)
    scrolling_effect: false
    show_name: false