search

Clooos / Bubble-Card

Bubble Card is a minimalist card collection for Home Assistant with a nice pop-up touch.
MIT License
1.46k stars 41 forks source link

Styling horizontal button card #388

Closed telegrambeans closed 5 months ago

telegrambeans commented 5 months ago

Since the latest version, the styling doesn't work properly for horizontal button stack anymore.

IMG_20240215_091037

The background is overwritten by the active entity and thus does not remain transparent.

telegrambeans commented 5 months ago

Before that:

fully-screenshot (10)

Example code:

.kuche {
    background: rgba(0 0 0 / 0.3) !important;
    border: transparent !important;
    ha-icon {
     color: ${hass.states['binary_sensor.kuche_presensmelder_fp2_presence_sensor_1'].state === 'on' ? 'white' : 'rgba(255,255,255,0.4)'} !important;
    }
  }
Clooos commented 5 months ago

Hi! I'm sorry, this was a small breaking change that I forgot to mention.

Here is how to change the background color now:

styles: |
  .kitchen > .color-background {
    background-color: ${hass.states['light.kitchen'].state === 'on' ? 'blue' : 'red'} !important;
  }
telegrambeans commented 5 months ago

Can I remove the border in the same way?

Clooos commented 5 months ago

It should be possible yes, try border: none !important.

dnestico commented 4 months ago

This doesn't work on buttons that don't have the hash link and are used as navigation buttons it seems

Hi! I'm sorry, this was a small breaking change that I forgot to mention.

Here is how to change the background color now:

styles: |
  .kitchen > .color-background {
    background-color: ${hass.states['light.kitchen'].state === 'on' ? 'blue' : 'red'} !important;
  }