Clooos / Bubble-Card

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

Border Radius for Card #555

Closed broyuken closed 2 weeks ago

broyuken commented 3 weeks ago

I'm trying to set the border radius of this card to look more like a mushroom card. End goal is to make a card for my Ember mug that fits in with the rest of my dashboard which uses mushroom. Figured out the transparency but can't get the radius to work. If I set it, it takes it in a weird spot like the screenshot below. I want it to look like the bottom card, but with the functionality of bubble.

type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.ember_mug_d928a3fa8e04_state
name: Britni's Mug
show_state: true
card_layout: large-2-rows
sub_button:
  - name: Current
    icon: fas:mug-hot
    entity: sensor.ember_mug_d928a3fa8e04_current_temp
    show_state: true
    show_icon: true
    show_background: false
    show_name: true
  - name: Power
    entity: binary_sensor.ember_mug_d928a3fa8e04_power
    show_state: true
    show_background: false
    show_name: false
  - name: Target
    entity: number.ember_mug_d928a3fa8e04_target_temp
    show_name: true
    show_state: true
    show_background: false
    tap_action:
      action: more-info
  - name: Battery
    entity: sensor.ember_mug_d928a3fa8e04_battery_percent
    show_state: true
    show_background: false
show_attribute: false
styles: |
  .bubble-button-card-container {
    background: rgba(0,0,0,0.35) !important;
    border-radius: 75% !important;
  }

image

ZeroOmar commented 2 weeks ago

Use pixels instead of percentage and it will work fine The border is option but I added it to match my cards

  .bubble-button-card-container {
    border-radius: 10px !important;
    border: 1px solid rgb(42, 43, 46);
  }

image

Clooos commented 2 weeks ago

I'm closing this one as this is not an issue. And the @ZeroOmar solution seems to be the good one.