Beta 10 button shifted

[peterthepeter]

Hello,

since beta 10 the buttons are shifted and have a scrollline on the outside.

This only happens on the PC (on my Mac) tested with several browsers (Arc, Safari, Edge). Cache and cookies have been cleared and all add-ons in the browsers have also been deactivated for test purposes. I don't have this error on my mobile phone (iOS). I am attaching a picture of the error.

[Clooos]

Hi, can you check in the editor if you are not on the beta 9?

[peterthepeter]

You're absolutely right. I am 99.9% sure that I did the update yesterday and everything was OK.

I have now installed update 10 again and now it works.

Sorry for the confusion.

A quick question should be if I want to change the colour of the button. This works when the device is switched off. As soon as I switch it on it briefly turns green and then the normal color for switched on devices is displayed. Have I done something wrong?

styles: |-
  .switch-button {
    background-color: ${hass.states['switch.socket_lelit_mara_x2'].state === 'on' ? 'green' : 'rgba(0,190,240,0.6)' } !important;
  } .bubble-icon-container {
    color: rgba(0,190,240,0.6);
  }```

[Clooos]

There is indeed a weird issue when installing this update, some got beta 9 instead of 10.

For your styling issue you can try this:

styles: |-
  .bubble-button-card-container {
      background-color: ${hass.states['switch.socket_lelit_mara_x2'].state === 'on' ? 'green' : 'rgba(0,190,240,0.6)' } !important;
  } 
  .bubble-icon-container {
      color: rgba(0,190,240,0.6);
  }

[peterthepeter]

I'll keep an eye on the update.

Unfortunately, changing the ON colour does not work. The button briefly turns green and then immediately turns yellow. I have attached a video.

https://github.com/Clooos/Bubble-Card/assets/74273835/6e61f58c-795f-4aed-8ef0-70c5039fe9ff

[Clooos]

My bad, this one should work:

styles: |-
  .bubble-button-background {
      opacity: 1 !important;
      background-color: ${hass.states['switch.socket_lelit_mara_x2'].state === 'on' ? 'green' : 'rgba(0,190,240,0.6)' } !important;
  }
  .bubble-icon-container {
      color: rgba(0,190,240,0.6);
  }

[peterthepeter]

Thank you this works, but not on the icon? or miss i something?

  .bubble-icon {
    opacity: 1 !important;
    color: ${hass.states['switch.socket_lelit_mara_x2'].state === 'on' ? 'rgba(0,190,240,0.6);' : 'var(--ha-card-background)' } !important;
  }

[Clooos]

Just remove the ; here 'rgba(0,190,240,0.6);' 🙂