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

Share your Projects! Dashboards & Frontend
,
2936

This is my pop-up and I wanted to ask why the flipdown timer is frozen and not updating.
I assume it’s because of the vertical-stack wrapper (I’ve had this problem before, I solved it with stack-in-card) but now I need the vertical-stack for the pop-up.
I wanted to ask if anyone has a solution for this.

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#timer_ac_bedroom"
    name: טיימר של המזגן בחדר שינה
    icon: mdi:timer
    button_type: name
    background_update: true
    close_on_click: false
  - type: custom:mod-card
    card_mod:
      style: |
        ha-card {
          background: rgba(0,0,0,0.4) !important;
          backdrop-filter: blur(10px);
          border-radius: 22px;
          box-shadow: 0 4px 20px rgba(0,0,0,0.4);
          padding: 12px 10px;
        }
    card:
      type: custom:stack-in-card
      cards:
        - type: custom:stack-in-card
          cards:
            - type: custom:flipdown-timer-card
              entity: timer.ac_timer_bedroom
              name: זמן נותר
              show_hour: true
              show_title: true
              show_header: true
              theme: hass
              styles:
                rotor:
                  width: 50px
                  height: 70px
                button:
                  width: 0px
                  location: bottom
              show_error: false
              card_mod:
                style: |
                  :host {
                    direction: ltr !important;
                  }
            - type: custom:bubble-card
              card_type: button
              name: הפעל מחדש
              icon: mdi:restart
              entity: timer.ac_timer_bedroom
              tap_action:
                action: call-service
                service: timer.start
                data:
                  entity_id: timer.ac_timer_bedroom
              card_mod:
                style: |
                  ha-card {
                    margin-left: 25px;
                    margin-right: 25px;
                    margin-bottom: 8px;
                  }
2937

I also have a pop-up card with a sub-button a timer. Its only show the begin time and does not count back. Is this possible?
<
sub_button:
- entity: timer.spiegel_badkamer
show_attribute: true
name: uit over
show_name: true
show_state: true
show_last_changed: false
show_last_updated: false
attribute: remaining
state_display: >
{% set r = state_attr(‘timer.spiegel_badkamer’, ‘remaining’) %} {% if
r %}
{{ r }}
{% else %}
–
{% endif %}`
/>

2938

You should check the indenting of your code.

2939

Hey community,

I’ve some trouble with a border-radius of my bubble-card slider in a combined vertical-stack-card. I’ve drawn a white border to showcase my issue. The idea is to fill the slider while maintaining the border-radius to align the bottom border-radius, improving the visual consistency of the bubble-card slider within the vertical stack. The goal is to ensure the slider adheres to the surrounding border-radius, specifically at the bottom.

See screenshot.

Thanks in advance!

type: custom:vertical-stack-in-card
cards:
  - type: custom:bubble-card
    card_type: media-player
    entity: media_player.living_room_tv
    rows: "1.2"
    hide:
      play_pause_button: false
      volume_button: true
    sub_button:
      - entity: media_player.living_room_tv
        icon: mdi:play
        state_background: false
        tap_action:
          action: perform-action
          perform_action: media_player.media_play
          target:
            entity_id: media_player.living_room_tv
      - entity: media_player.living_room_tv
        icon: mdi:pause
        tap_action:
          action: perform-action
          perform_action: media_player.media_pause
          target:
            entity_id: media_player.living_room_tv
        state_background: false
    styles: |-
      ha-card { 
        --bubble-main-background-color: var(--card-background-color) !important;
      }
      .bubble-sub-button-icon {
        --mdc-icon-size: 22px !important;
        }
      .bubble-media-button-icon {
        --mdc-icon-size: 22px !important;
      }
    button_action:
      tap_action:
        action: more-info
    icon: mdi:television-off
  - type: custom:bubble-card
    card_type: button
    entity: media_player.denon_avr_s660h
    hide:
      power_button: true
      previous_button: true
      next_button: true
      mute_button: false
    show_state: false
    show_attribute: volume_level
    tap_to_slide: true
    sub_button:
      - entity: media_player.denon_avr_s660h
        select_attribute: sound_mode_list
        show_background: false
        show_arrow: true
        show_attribute: true
        attribute: sound_mode
        state_background: true
    show_icon: false
    scrolling_effect: false
    button_type: slider
    attribute: volume_level
    card_layout: large
    styles: |-
      .bubble-button-card-container {
        border-radius: 0px !important;
      }
      .bubble-button-card {
        border-radius: 0px !important;
      }
      .bubble-range-slider {
        border-radius: 0px !important;
      }
      .bubble-range-fill { 
        background: rgb(68, 115, 158) !important;
        border-radius: 0px !important;
        opacity: 1 !important;
        }
      .bubble-icon {
        --mdc-icon-size: 18px !important;
      }
      .bubble-sub-button {
        height: 48px !important;
        min-width: 48px !important;
        border-radius: 18px;
      }
      .bubble-sub-button-icon {
        --mdc-icon-size: 18px !important;
        }
    button_action:
      tap_action:
        action: more-info
    rows: "1.2"
card_mod:
  style: |
    ha-card {
      border: 1px solid #ccc;
      border-radius: 18px !important;
      overflow: visible !important;  /* Allow content to extend beyond */
      position: relative;
    }