Add this at the end of your code and modify as required:
card_mod:
style: |
ha-card {
{% if is_state('binary_sensor.drzwi_wejsciowe_zigbee_contact', 'open') %}
animation: blink 2s ease infinite;
{% else %}
animation: none;
{% endif %}
}
@keyframes blink {
100% {opacity: 0.1;}
}
How do I remove all animations from Horizontal buttons stack? I already added:
rise_animation: false
But it keeps sliding from the left.
Thanks.
A nice example for adaptive designs.
I love bubble cards and after about 3months of playing, I’ve decided to change the radius a little. A couple of questions though…
is it possible to change the radius of the popup window.
I have a climate card where the radius is reduced but the color change on state is still the old radius (see attachment)
Thanks it looks great. But still working on nice pulsing color for Bubble switch when doors are open. My old parents got same eye problem and understanding technology. For them could be the best nice pulsing color for open sensor. Anymation is realy cool and it will become a permanent part of my HA sensor 
type: custom:bubble-card
card_type: button
button_type: state
entity: binary_sensor.drzwi_wejsciowe_zigbee_contact
name: Drzwi Główne
show_last_changed: true
force_icon: false
show_attribute: true
attribute: battery_low
card_layout: normal
card_mod:
style: |
ha-card {
{% if is_state(‘binary_sensor.drzwi_wejsciowe_zigbee_contact’, ‘open’) %}
animation: blink 2s ease infinite;
{% else %}
animation: none;
{% endif %}
}
@keyframes blink {
100% {opacity: 0.1;}
}
I have seen this somewhere
But cant find the way to show current day/time to the separator card. Any help? Thank you and happy new year!
Yes i can confirm this. I missed the actual and only rule that is 100% necessary. all pop up cards have to be at the end.
There is an integration called Time & Date
If you set it up through the UI on the integrations page you can setup a sensor for most formated date objects. So you need to use the one for Time and you can add that entity to the header of the Bubble-Card header.
I’ve got 12 different popups that are triggered by buttons–all good there.
I can have a popup close after a certain amount of time–good there as well.
How can I get a popup to open after a certain amount of time? Say I have a popup open and I am done with it and manually close it or it closes after ‘x’ amount of time. I now want another popup to open automatically. And maybe a bit fancier: open a certain popup when ‘y’ condition is met and another when it isn’t met.
Any ideas? Basically, I don’t know how to tell when there is no popup selected and use that as a trigger.
That button looks sick, any chance of seeing some yaml to recreate it?
Anyway I can hide or make the climate buttons smaller? It doesn’t look good when using it with the sections dashboard for me
How do I make it show a state from an entity?
My code that isn’t working
.bubble-icon-container {
overflow: visible;
}
.bubble-icon-container::after {
background-color: red;
color: white;
font-size: 10px;
line-height: 1.5em;
border-radius: 30px;
margin-top: -5px;
margin-left: 30px;
min-width: 15px;
padding: 2px;
position: absolute;
text-align: center;
content: |-
'(lock.front_door.attributes.battery_level)'
}
Hello all and have a happy new year !
congrats for the job, those cards are really wonderfull
Is it possible to know how to do this one please ?
Thanks
Has anyone tried the cover button. There is a weird behavior of open and close icon. The default changes to close and open shapes but the custom icon doesn’t maintain the shape. As you can see the window is open, the default icon appears unfilled but the the custom icon doesn’t change… it changes momentarily to the one provided but then immediately falls back to close icon. The close icon is correct when its closed.
I’d also be interested to know if this is somehow possible.
Edit
for the slide in animation:
.bubble-button {
transition: transform 0s; !important;
}
Also, is it somehow possible to increase the spacing from the bottom edge (In the iOS mobile app, it’s otherwise too close to the app switcher bar)
Edit
.horizontal-buttons-stack-card {
height: 80px; !important
}
How can I reduce the size of the entire bubble card? I have a few separator cards that I am using as titles for sections and they are much larger than the actual content itself. Would like them to essentially be as small in height as possible to ensure the content is presented correctly.
Code:
type: custom:bubble-card
card_type: separator
name: Alarm
card_layout: normal
styles: |2-
.bubble-line {
background: none;
opacity: 0;
}
* {
font-size: 14px !important;
height: 18px !important;
padding-bottom: 0px !important;
margin-bottom: -60px !important;
}
How it looks today below. As you can see there is quite a big gap between the card above and the title, can confirm it is the height of the title not the bottom of the card above causing the issue.
Haw to group for example ligts is there any option similiar to HACS - Lightener ??
Not sure if I get your point. I have selected custom buttons, but they still grey out as expected. Maybe a browser caching issue for you?
Hi!
What theme are you using? Thanks!
