search

Clooos / Bubble-Card

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

Horizontal buttons stack gradient gap with margin #806

Open CZonin opened 2 months ago

CZonin commented 2 months ago

Describe the bug
When adding a margin to a horizontal buttons stack through the Styling Options > Horizontal buttons stack styling > Optional - Margin the gradient behind the stack also applies the margin and leaves a gap.

Expected behavior
The added margin is applied to the buttons, not the gradient

Screenshots
Screenshot_20240922-091000

YAML 

type: custom:bubble-card
card_type: horizontal-buttons-stack
1_link: home
1_name: ''
1_icon: mdi:home
2_link: tech
2_name: ''
2_icon: mdi:devices
3_link: other
3_name: ''
3_icon: mdi:information-outline
styles: |-
  .bubble-button {
    height: 45px;
  }
  .bubble-button-1 > .bubble-background-color {
    background-color: var(--ha-card-background) !important;
    border: none;
    opacity: 100%;
  }
  .bubble-button-2 > .bubble-background-color {
    background-color: var(--ha-card-background) !important;
    border: ${hass.states['binary_sensor.docker_hub_update_available'].state === 'on' || hass.states['sensor.updates_available'].state > 0 || hass.states['sensor.plex_czonin'].state > 0 ? '' : 'none'} !important;
    border-color: var(--accent-color) !important;
    border-width: 2px;
    opacity: 40%;
  }
  .bubble-button-2 > .bubble-icon {
    opacity: 40%;
  }
  .bubble-button-2 > .bubble-name {
    opacity: 40%;
  }
  .bubble-button-3 > .bubble-background-color {
    background-color: var(--ha-card-background) !important;
    border: ${hass.states['sensor.garbage'].state === 'Today' || hass.states['sensor.garbage'].state === 'Tomorrow' || hass.states['sensor.papers'].state === 'today' || hass.states['sensor.papers'].state === 'Tomorrow' || hass.states['sensor.bottles'].state === 'Today' || hass.states['sensor.bottles'].state === 'Tomorrow' || hass.states['switch.front_lawn'].state === 'on' || hass.states['switch.back_lawn'].state === 'on' || hass.states['switch.back_side_lawn'].state === 'on' || hass.states['switch.flower_beds'].state === 'on' ? '' : 'none'} !important;
    border-color: var(--accent-color) !important;
    border-width: 2px;
    opacity: 40%;
  }
  .bubble-button-3 > .bubble-icon {
    opacity: 40%;
  }
  .bubble-button-3 > .bubble-name {
    opacity: 40%;
  }
rise_animation: false
highlight_current_view: false
visibility:
  - condition: user
    users:
      - 0821beef6db34ae6853b0acdb244ce86
margin: 5px

Informations (please complete the following information):