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

Quokka1979 · December 4, 2024, 8:25am

I’m having some problems with the cover and was wondering if someone could point me in the right direction

type: custom:bubble-card
card_type: climate
entity: climate.kitchen
styles: |
  .bubble-button-card-container {
    background: [[[
      const temp = states['sensor.kitchen_temperature_humidity_temperature'] || 0;
      if (temp >= 35) return 'rgba(178,34,34,0.5)'; 
      if (temp >= 28) return 'rgba(245,222,179,0.5)';
      if (temp >= 18) return 'rgba(46,139,87,0.5)'; 
      if (temp >= 15) return 'rgba(70,130,180,0.5)'; 
      return 'rgba(135,206,250,0.5)'; 
    ]]];
  }
sub_button:
  - entity: sensor.kitchen_thermostat_heating
    styles: >
      .bubble-sub-button-1 { 
        background-color: ${hass.states['sensor.kitchen_thermostat_heating'].state >= 75 ? 'firebrick' : 
                          hass.states['sensor.kitchen_thermostat_heating'].state >= 50 ? 'orange' : 
                          hass.states['sensor.kitchen_thermostat_heating'].state >= 25 ? 'yellow' : 
                          hass.states['sensor.kitchen_thermostat_heating'].state >= 1 ? 'green' : 'grey'} !important;
        ${subButtonIcon[1].setAttribute("icon", hass.states['sensor.kitchen_thermostat_heating'].state > 0 
          ? 'mdi:radiator' : 'mdi:radiator-disabled')} 
      }
    show_state: true
    show_icon: true
    state_background: false
  - name: HVAC modes menu
    select_attribute: hvac_modes
    show_arrow: false
    state_background: false
    show_name: false
show_name: false

The idea is that the background changes colour depending on the temperature, and the state of sub button 1 should be coloured based on the settings of the valve.

Any help would be very welcome, thank you

Conquest · December 4, 2024, 9:10am

Is there a way to remove the display in the red circle on the new thermostat card, or, if that’s not possible, to lock it with a confirmation prompt?
Thank you in advance for your help.

victoroos · December 4, 2024, 9:23am

hi all,
I have a simple question, is there a way to change the background color of a (menu) button of bubblecard (so it is a button with the name setting) based on the view I’m in?

MrBearPresident · December 4, 2024, 10:03am

In the style area add this:

${card.querySelector('.bubble-temperature-container').classList.add("hidden")}

But this kinda defeats the whole purpose of the climate-card.
You could use the button-state card for the same purpose. (Minus the changing background)

MrBearPresident · December 4, 2024, 10:15am

Hey could you ellaborate?
What do you mean by view?
What do you mean with: “so it is a button with the name setting”

Conquest · December 4, 2024, 10:25am

Thank you, that works perfectly just as I imagined. I know it’s not the intended purpose of the card, but my dashboard is only for display. The climate control is automated, and it’s only meant to be switched on (winter) or off (summer).

MrBearPresident · December 4, 2024, 10:52am

Loads of problems.
Please read documentation again and look through the examples.

Errors made:

All style elements need to be under the style section of the whole bubble-card
jinja is not usable in the style sections
all DOM-changing actions (changing icon) should be on the bottom of the style section

type: custom:bubble-card
card_type: climate
entity: climate.dev_gf_lr_thermostat_heating
styles: >
  .bubble-climate-container{
    background: ${hass.states['sensor.kitchen_temperature_humidity_temperature'].state >= 35 ? 'rgba(178,34,34,0.5)' :
                    hass.states['sensor.kitchen_temperature_humidity_temperature'].state >= 28 ? 'rgba(245,222,179,0.5)' : 
                    hass.states['sensor.kitchen_temperature_humidity_temperature'].state >= 18 ? 'rgba(46,139,87,0.5)' :
                    hass.states['sensor.kitchen_temperature_humidity_temperature'].state >= 15 ? 'rgba(70,130,180,0.5)' : 'rgba(135,206,250,0.5)'}; !important
  }


  .bubble-sub-button-1 { 
    background-color: ${ hass.states['sensor.kitchen_thermostat_heating'].state >= 75 ? 'firebrick' : 
                        hass.states['sensor.kitchen_thermostat_heating'].state >= 50 ? 'orange' : 
                        hass.states['sensor.kitchen_thermostat_heating'].state >= 25 ? 'yellow' : 
                        hass.states['sensor.kitchen_thermostat_heating'].state >= 1 ? 'green' : 'grey'} !important; 
  }


  ${subButtonIcon[1].setAttribute("icon",
  hass.states['sensor.kitchen_thermostat_heating'].state > 0
      ? 'mdi:radiator' : 'mdi:radiator-disabled')}
sub_button:
  - entity: sensor.dev_gf_kch_fridgetemp_temperature
    show_state: true
    show_icon: true
    state_background: false
  - name: HVAC modes menu
    select_attribute: hvac_modes
    show_arrow: false
    state_background: false
    show_name: false
show_name: false

daffyduck42 · December 4, 2024, 11:29am

Do you have to do something special to get media player cards to theme with the css? No matter what I put in there, they don’t seem to colorize.

Also, can anyone recommend what I’d use to bubble card-ify several generic light button cards? I’m probably overthinking this.

Andreas58 · December 4, 2024, 11:29am

I think the bubble card is great. But customizing buttons and backgrounds is complicated for me. I have been looking for several times how to change the color of the bubble card cover up and down arrows. It just can’t be done?

nesnajkneh · December 4, 2024, 12:56pm

Hey Martin thanks for the code!

I have 2 questions about it.

‘red’: is that the color for the locked stateN and the rgba for the normal state?

.bubble-sub-button-4 { background-color: ${hass.states[‘lock.main_door’].state> === ‘unlocked’ ? ‘red’ : ‘rgba(92, 83, 103, 1)’ } !important;

This doesn’t work for me

${subButtonIcon[3].setAttribute(“icon”, hass.states[‘lock.main_door’].state
=== ‘locked’ ? ‘mdi:lock-outline’ : ‘mdi:lock-open-outline’)} }

how can i fix it?

AUkkers · December 4, 2024, 1:32pm

Hi everyone !
Something changes in one of last updates ?
I have this style code for switch button

.switch-button {    
  background-color: ${state === 'on' ? '#ff9800' : '#B7C4CF'} !important;
}
.bubble-icon {
  color: ${state === 'on' ? '#ff9800' : '#3F4E4F'} !important;
}

Previously the color of the icon and the color of the on switch were the same, but now they are not.
How can this be fixed ?

whittssg · December 4, 2024, 2:38pm

Hello,

Is there a way to control the opacity of a slider based on the current brightness of the light / light switch.

I thought it would be something like this:


  .bubble-range-fill {  
    opacity: ${hass.states['light.my_room'].attributes.brightness} / 255 !important;
  }

but it doesnt seem to work.

I can create a template and then use the template in there like this and it works fine:

opacity: ${hass.states['sensor.my_room_brightness'].state} !important;

but i would prefer to be able to set it up on the button vs having to create a template for every light i have.

Thanks

abercrombie1892 · December 4, 2024, 9:10pm

I keep trying to change the icon color, for example, when the player is playing it’s blue and when not it’s green. Do you have any tips?

.bubble-play-pause-button {
 background-color: ${hass.states['media_player.unnamed_room'].state === 'playing' ? 'blue' : 'red'} !important;
  }

Sam1501 · December 4, 2024, 10:23pm

No sure if this has been asked before.
Is it possible to instead of showing the state of a entity on a button card can I show the state or attribute of a different entity?

flobidan · December 5, 2024, 8:25am

Media players have their own style elements, as they are a different kind of button.

.bubble-media-player-container {
  border-radius: 10px !important;
}
.bubble-media-player-container {
  background: rgba(139,69,19,0.2) !important;
}
.bubble-play-pause-button {
  background-color: ${hass.states['media_player.sonos_wohnzimmer'].state == 'playing' ? 'rgba(255,140,0,1)' : 'white'} !important;
  border-radius: 200px !important;
}

daffyduck42 · December 5, 2024, 9:10am

Thanks, this should be in the docs. I don’t think it’s on github or patreon.

flobidan · December 5, 2024, 9:27am

The docs offer some examples. The individual style elements for the different cards you need to find out by looking over the respective styles.ts files on Github, here for example for the media player:

github.com

Clooos/Bubble-Card/blob/ffe37778d791c9dd6db7c4b881a92dd2692ea473/src/cards/media-player/styles.ts

export default `
    * {
        -webkit-tap-highlight-color: transparent !important;
    }

    ha-card {
        margin-top: 0;
        background: none;
        opacity: 1;
        overflow: visible !important;
    }
    .is-unavailable {
        opacity: 0.5;
    }

    .bubble-media-player-container {
        position: relative;
        width: 100%;
        height: 50px;
        background-color: var(--bubble-media-player-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));

This file has been truncated. show original

Add a bit of try and error and you usually get the adjustment you want

Quokka1979 · December 5, 2024, 9:52am

I’m working on nesting bubble cards into an expander card.
This works great, but looks weird so I’m hoping to move the expander-card into a sub button of a bubble card:

The goal is to create a nice header, that opens the expander card and show the lights on, on that floor.

type: custom:expander-card
child-margin-top: 0.6em
padding: 0
title: First floor
title-card-button-overlay: true
title-card-clickable: true
expander-card-background: rgba(0, 0, 0, 0.0);
min-width-expanded: 300
cards:
  - type: custom:bubble-card
    card_type: button
    entity: light.lights_cinema
    name: Cinema
    sub_button:
      - entity: sensor.count_lights_cinema
        show_state: true
        tap_action:
          action: none
        show_background: false
        show_icon: true
      - entity: sensor.cinema_temperature_humidity_humidity
        show_state: true
        show_background: false
      - entity: sensor.cinema_temperature_humidity_temperature
        show_background: false
        show_state: true
    button_action:
      tap_action:
        action: navigate
        navigation_path: "#Cinema"
      name: Cinema
    icon: fapro:cinema
    tap_action:
      action: toggle
    hold_action:
      action: more-info
    styles: >-
      ${(() => {if(hass.states['light.lights_cinema'].state !=
      'on'){card.querySelector('.bubble-sub-button-1').classList.add("hidden")}})()}

expander

This sadly fails, I tried it like this:

type: custom:bubble-card
card_type: button
button_type: name
show_icon: false
show_name: true
name: First floor
sub_button:
  - entity: sensor.count_lights_living_room
    show_background: false
  - icon: mdi:arrow-down-thin
    show_background: false
    tap_action:
      action: toggle
      service: browser_mod.popup
      service_data:
        title: "Outdoors"
        card:
          type: custom:expander-card
          child-margin-top: 0.6em
          padding: 0
          title: Outdoors
          title-card-button-overlay: true
          title-card-clickable: true
          expander-card-background: rgba(0, 0, 0, 0.0)
          min-width-expanded: 300
styles: >-
  ${(() => {if(hass.states['light.lights_livingroom'].state != 'on'){card.querySelector('.bubble-sub-button-1').classList.add("hidden")}})()}

Can anyone point me in the right direction

flobidan · December 5, 2024, 10:01am

Works for me with exactly that code as far as I see. Have you confirmed that the state is really “playing”?

.bubble-play-pause-button {
  background-color: ${hass.states['media_player.sonos_wohnzimmer'].state == 'playing' ? 'rgba(255,140,0,1)' : 'white'} !important;
  border-radius: 200px !important;
}

grafik

daffyduck42 · December 5, 2024, 10:58am

When I press play on my media_player card and the content is played, the icon doesn’t change to a pause button. Is this normal or did I mess something up? I tried putting an icon: change inside of the .bubble-play-pause-button to simply make it mdi:play-pause, but it didn’t work.

Other minor issue, my css lines keeps unformatting with lots of line breaks and bad indentation when I save, even after I try to eliminate whitespace…

type: custom:bubble-card
card_type: media-player
entity: media_player.home_assistant_speakers
sub_button:
  - show_icon: false
    show_name: true
    name: Sound Selection
    show_state: false
    show_last_changed: false
    show_attribute: false
    show_arrow: true
    icon: mdi:chevron-down
    entity: input_select.ambient_sounds
    attribute: icon
hide:
  next_button: true
  previous_button: true
  play_pause_button: false
  power_button: true
  volume_button: false
show_icon: true
force_icon: false
show_state: true
show_last_changed: false
show_attribute: false
hold_action:
  action: none
double_tap_action:
  action: none
styles: >2
    .bubble-media-player-container {
      border-radius: 10px !important;
    }
    .bubble-media-player-container {
      background: rgba(84, 110, 122) !important;
    }
    .bubble-play-pause-button {
      background-color: ${hass.states['media_player.home_assistant_speakers'].state == 'playing' ? 'rgba(255,140,0,1)' : 'rgba(69, 90, 100)'} !important;
      border-radius: 200px !important;
    }
    .bubble-icon-container {
    background: #455A64;
  }
    .bubble-sub-button {
  background-color: #455A64 !important; */ }
    .bubble-dropdown-arrow {
   background: rgba(84, 110, 122) !important;
  }
    .bubble-volume-slider {
        background-color: rgba(45, 60, 70, 1)    }

  mwc-list-item  {

  background: rgba(84, 110, 122) !important;

  border-radius: var(--bubble-select-list-border-radius,
  var(--bubble-border-radius, 55px));

  margin: 5px;

  }

  mwc-list-item[selected] {

  background: rgba(40, 60, 70, 1) !important;

  }
name: Ambient Sounds
attribute: media_content_type
card_layout: large
scrolling_effect: false
tap_action:
  action: none
cover_background: false