From 3 days ago, https://community.home-assistant.io/t/bubble-card-a-minimalist-card-collection-for-home-assistant-with-a-nice-pop-up-touch/609678/2073?u=rickfurtado
Maybe this is what you are looking for:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#musicplayer"
name: Media Player
icon: mdi:music
bg_color: rgb(12,12,12)
bg_opacity: "30"
shadow_opacity: "0"
styles: |-
.bubble-button-card-container {
opacity: 1 !important;
background-color: rgba(112,12,12,0.5) !important;
border-radius: 10px !important;
}
.bubble-icon-container {
opacity: 0 !important;
background-color: black} !important;
}
show_icon: false
scrolling_effect: true
show_name: true
margin_top_mobile: "-50px"
width_desktop: 550px
margin: 5px
auto_close: ""
- type: iframe
url: http://192.168.xxx.xxx:8095/#/home
aspect_ratio: 185%
This is my media popup with Music Assistant as media player
If you would like to start with the artist selection change the link to
2 Likes
im sure its in here already but i just cant seem to find it i went to the styling explanation on git and tried most of them but im just lost (spent over 3 hours)
- type: custom:bubble-card
card_type: media-player
show_last_changed: false
show_state: false
entity: media_player.squeezeplay_e4_5f_01_8e_f4_af
styles: ""
- type: custom:bubble-card
card_type: button
entity: switch.android_tv_power
icon: mdi:television
name: Xiaomi TV
show_state: true
show_last_changed: true
tap_action:
action: toggle
styles: ""
how do i give these things another color than orange i would like to know how to use rgb colors when i turn on the xiaomi tv and i would also like to know how to choose color from the squeezebox icons and slider color etc
please advice
The github docs provides examples how to change colors of different elements based on an entity status:
In this thread here you also find many examples. As you do not precisely state which colors should be changed based on what, this is all I can provide. Instead of ‘blue’ you can of course also provide any rgb color code like rgb(255,255,255).
1 Like
im sorry rgb(160, 21, 241, 1 is the color i want to use for the following card what would i put there if i want that color for "on"behavior what do i replace .kitchen with?
the following still shows as orange
- type: custom:bubble-card
card_type: media-player
show_last_changed: false
show_state: false
entity: media_player.squeezeplay_e4_5f_01_8e_f4_af
styles: ""
- type: custom:bubble-card
card_type: button
entity: switch.android_tv_power
icon: mdi:television
name: Xiaomi TV
show_state: true
show_last_changed: true
tap_action:
action: toggle
styles: |
.bubble-button-card-container {
background-color: ${state === 'on' ? 'rgb(160, 21, 241)' : 'initial'} !important;
}
Thanks - that gives me a new direction to look at. Just curious, but where did you come up with the url?
Thanks again…
your idea is really cool with the music assistant in a popup.
does your card also load when you are outside the network?
type: custom:bubble-card
card_type: button
layout_options:
grid_columns: 2
grid_rows: 3.5
entity: sensor.raumthermostat_temperature
show_attribute: false
show_name: true
show_icon: true
scrolling_effect: true
show_state: true
double_tap_action:
action: navigate
navigation_path: "#szenenWZ"
card_layout: large-2-rows
button_action:
tap_action:
action: navigate
navigation_path: "#wohnzimmer"
tap_action:
action: navigate
navigation_path: "#wohnzimmer"
button_type: state
name: Wohnzimmer
icon: mdi:account-group
sub_button:
- entity: light.wohnzimmer
show_last_changed: false
show_attribute: false
show_state: false
tap_action:
action: toggle
show_background: true
hold_action: {}
double_tap_action: {}
name: Lampen Wohnzimmer
- show_last_changed: false
show_state: false
show_name: false
tap_action:
action: toggle
entity: input_boolean.1
double_tap_action:
action: navigate
navigation_path: "#mediaplayerwohnzimmer"
icon: ""
name: Sonos Wohnzimmer
- entity: light.balkonbeleuchtung
tap_action:
action: toggle
double_tap_action: {}
hold_action: {}
name: Lampen Balkon
- entity: switch.steckdose_sterne
tap_action:
action: toggle
double_tap_action:
action: {}
hold_action:
action: {}
name: Sterne Lichterkette
styles: >
:host{
--icon-Background-Color: #4c556e ;
--color-yellow: 233, 187, 53 ;
--color-blue: 25, 130, 196 ;
--color-green: 138, 201, 38 ;
--color-purple: 106, 76, 147 ;
--color-purple1: 233, 53, 157 ;
--color-blue1: 53, 205, 233 ;
}
.card-content {
width: 100%;
margin: 0 !important;
}
.large .bubble-button-card-container {
height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )) !important;
overflow: hidden !important;
background-color: #262422;
}
.bubble-button-card {
display: grid;
grid-template-areas:
'n n n b'
'l l l b'
'i i . b'
'i i . b';
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1.5fr 0.5fr 1fr 1fr;
justify-items: center;
}
.bubble-icon-container {
grid-area: i;
border-radius: 50% !important;
width: 160% !important;
height: 160% !important;
max-width: none !important;
max-height: none !important;
position: absolute !important;
place-self: center !important;
margin: 0px 0px 0px 0px !important;
padding: 0px, 0px, 0px, 0px !important;
background-color: var(--icon-Background-Color);
}
.bubble-icon {
width: 0%;
position: relative !important;
--mdc-icon-size: 100px !important;
opacity: 0.5 !important;
}
.bubble-name-container {
grid-area: n;
justify-self: start;
margin-left: 20px;
max-width: calc(100% -(12px + 0px));
gap: 10px !important;
color: #fffefd
}
.bubble-name {
font-weight: bold;
font-size: 19px;
}
.bubble-state {
font-weight: bold;
font-size: 14px;
filter: opacity(70%)
}
.rows-2 .bubble-sub-button-container {
grid-area: b;
display: flex !important;
flex-wrap: wrap;
flex-direction: column;
justify-content: flex-start;
width: auto !important;
padding-right: 0px;
height: 100% !important;
margin-top: 25px;
}
.rows-2 .bubble-sub-button {
height: 45px !important;
}
.bubble-sub-button {
min-width: 45px !important;
}
.bubble-sub-button-1 {
color: rgba(var(${hass.states['light.wohnzimmer'].state === 'on' ? '--color-yellow' : ''}), 1) !important;
background-color: rgba(var(${hass.states['light.wohnzimmer'].state === 'on' ? '--color-yellow' : ''}), 0.3) !important;
}
.bubble-sub-button-2 {
color: rgba(var(${hass.states['input_boolean.1'].state != 'on' ? '' : '--color-blue1'}), 1) !important;
background-color: rgba(var(${hass.states['input_boolean.1'].state != 'on' ? '' : '--color-blue1'}), 0.3) !important;
}
.bubble-sub-button-2 .bubble-sub-button-icon{
animation: ${hass.states['input_boolean.1'].state === 'on' ? 'sound 0.8s' : ''} !important;
animation-iteration-count: infinite !important;
}
.bubble-sub-button-3 {
color: rgba(var(${hass.states['light.balkonbeleuchtung'].state === 'on' ? '--color-purple1' : ''}), 1) !important;
background-color: rgba(var(${hass.states['light.balkonbeleuchtung'].state === 'on' ? '--color-purple1' : ''}), 0.3) !important;
}
.bubble-sub-button-3 .bubble-sub-button-icon {
animation: ${hass.states['light.balkonbeleuchtung'].state === 'on' ? 'bounce 0.6s cubic-bezier(0.30, 2.40, 0.85, 2.50) infinite' : ''};
}
@keyframes bounce {
0%, 100% { transform: translateY(0px) scaleY(0.9); }
80% { transform: translateY(-3px); }
}
@keyframes sound {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.bubble-sub-button-4 {
color: rgba(var(${hass.states['switch.steckdose_sterne'].state === 'on' ? '--color-yellow' : ''}), 1) !important;
background-color: rgba(var(${hass.states['switch.steckdose_sterne'].state === 'on' ? '--color-yellow' : ''}), 0.3) !important;
}
.bubble-sub-button-4 .bubble-sub-button-icon{
animation: ${hass.states['switch.steckdose_sterne'].state === 'on' ? 'shake 10s' : ''} !important;
animation-iteration-count: infinite !important;
}
@keyframes shake {
0% { transform: translate(0px, 5px) rotate(0deg); }
25% { transform: translate(-5px, 0px) rotate(-45deg); }
50% { transform: translate(0px, -5px) rotate(0deg); }
75% { transform: translate(5px, 0px) rotate(45deg); }
100% { transform: translate(0px, 5px) rotate(0deg); }
}
.bubble-icon-container {
background-image: url("/local/interior-design.png") !important;
background-size: 50%;
background-repeat: no-repeat;
background-position: 50% 40%;
}
#Place all the icon changing stuff on the bottom
${subButtonIcon[0].setAttribute("icon", hass.states['light.wohnzimmer'].state
=== 'on' ? 'hue:bulb-group-sultan-3' : 'hue:bulb-group-sultan-3-off')}
${subButtonIcon[1].setAttribute("icon", hass.states['input_boolean.1'].state
=== 'on' ? 'mdi:speaker-play' : 'mdi:speaker-pause')}
${subButtonIcon[2].setAttribute("icon",
hass.states['light.balkonbeleuchtung'].state === 'on' ? 'hue:festavia' :
'hue:festavia')}
${subButtonIcon[3].setAttribute("icon",
hass.states['switch.steckdose_sterne'].state === 'on' ? 'mdi:creation' :
'mdi:creation-outline')}
force_icon: true
show_last_changed: false
but the big thanks go to MrBearPresident for this card and cloos
1 Like
The url is the internal ip of my HA Server. Music Assistant is running on the same server with different port (which, I assume, is the standard installation everywhere).
I’m connecting to my network via vpn. This way I can access HA via companion app with all features, including Music Assistant. The popup opens the same way as in my home network (and in combination with browser-mod I can stream my music everywhere in the world)
1 Like
is it possible to hide hvac_modes in the type: custom:bubble-card
Typ climate in the dropdown menu
type: custom:bubble-card
card_type: climate
entity: climate.klima_wohnzimmer
sub_button:
- entity: climate.klima_wohnzimmer
select_attribute: fan_modes
show_arrow: false - name: HVAC modes menu
state_background: false
show_arrow: false
tap_action:
action: toggle
icon: mdi:power
select_attribute: hvac_modes
show_background: true
show_icon: true
icon: mdi:heat-wave
name: Wohnzimmer
show_state: true
show_attribute: true
force_icon: false
state_color: true
card_layout: large
attribute: current_temperature
styles: |-
.bubble-icon {
color: ${state === ‘on’ ? ‘#FFAF45’ : ‘#ffffff’} !important;
}
.bubble-icon-container {
background: ${hass.states[‘climate.klima_wohnzimmer’].state === ‘heat’ ? ‘#FF9E53’ :
hass.states[‘climate.klima_wohnzimmer’].state === ‘cool’ ? ‘#5293B4’ :
hass.states[‘climate.klima_wohnzimmer’].state === ‘fan_only’ ? ‘#7B9175’ :
hass.states[‘climate.klima_wohnzimmer’].state === ‘off’ ? ‘#212531’ :
‘#91AC8F’} !important;
}
.bubble-climate {
border-radius: 10px !important;
background-color: ${hass.states[‘climate.klima_wohnzimmer’].state === ‘heat’ ? ‘#ff7b18’ :
hass.states[‘climate.klima_wohnzimmer’].state === ‘cool’ ? ‘#3A6D8C’ :
hass.states[‘climate.klima_wohnzimmer’].state === ‘fan_only’ ? ‘#66785F’ :
‘#252a38’} !important;
}
.bubble-sub-button-1 {
background: ${hass.states[‘climate.klima_wohnzimmer’].state === ‘heat’ ? ‘#FF9E53’ :
hass.states[‘climate.klima_wohnzimmer’].state === ‘cool’ ? ‘#5293B4’ :
hass.states[‘climate.klima_wohnzimmer’].state === ‘fan_only’ ? ‘#7B9175’ :
‘#212531’} !important;
}
.bubble-sub-button-2 {
background: ${hass.states[‘climate.klima_wohnzimmer’].state === ‘heat’ ? ‘#FF9E53’ :
hass.states[‘climate.klima_wohnzimmer’].state === ‘cool’ ? ‘#5293B4’ :
hass.states[‘climate.klima_wohnzimmer’].state === ‘fan_only’ ? ‘#7B9175’ :
‘#212531’} !important;
}
.bubble-temperature-container {
background: ${hass.states[‘climate.klima_wohnzimmer’].state === ‘heat’ ? ‘#FF9E53’ :
hass.states[‘climate.klima_wohnzimmer’].state === ‘cool’ ? ‘#5293B4’ :
hass.states[‘climate.klima_wohnzimmer’].state === ‘fan_only’ ? ‘#7B9175’ :
‘#212531’} !important;
}
/* Verstecke bestimmte HVAC-Modi wie ‘heat_cool’ und ‘dry’ */
.bubble-select-list-item {
display: ${[‘heat_cool’, ‘dry’].includes(item) ? ‘none’ : ‘block’} !important;
}
ha-card {
–bubble-select-list-background-color: #252a38 !important;
–bubble-list-item-accent-color: #212538 !important;
}
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
Hello everyone,
I have a bubble card here that I use to display various room values in the second row.
But I can’t make the title (bathroom) larger in terms of font size.
No matter which container I put the font size (font-size: 15px !important;) in, the font size doesn’t change.
Thank you for a little help.
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: name
card_layout: large
name: Badezimmer
icon: mdi:bathtub
show_state: false
button_action:
action: navigate
navigation_path: Badezimmer
tap_action:
action: navigate
navigation_path: Badezimmer
sub_button:
- entity: sensor.raumklima_bad_co2
show_background: false
show_state: true
icon: mdi:molecule-co2
tap_action: more-info
hold_action:
action: more-info
- entity: sensor.raumklima_bad_luftfeuchtigkeit
show_background: false
show_state: true
tap_action: more-info
hold_action:
action: more-info
- entity: sensor.raumklima_bad_temperatur
show_background: false
show_state: true
tap_action: more-info
hold_action:
action: more-info
styles: |
.bubble-button-card-container,
.bubble-button-card {
height: 80px !important;
background: transparent !important;
font-size: 15px !important;
}
.bubble-icon-container,
.bubble-name-container {
top: -25px;
}
.bubble-sub-button-container {
position: absolute !important;
bottom: 0px !important;
justify-content: left !important;
width: calc(100% - 20px) !important;
right: inherit !important;
margin: 10px !important;
height: 30px !important;
)
.bubble-feedback-element {
height: 200% !important;
}
.bubble-name {
font-size: 15px !important;
}
.bubble-sub-button-1 {
background-color: ${hass.states['sensor.raumklima_bad_co2'].state >= 1250 ? 'tomato' :
hass.states['sensor.raumklima_bad_co2'].state >= 750 ? '#FFB347' :
hass.states['sensor.raumklima_bad_co2'].state >= 100 ? 'transparent' :
'transparent'} !important;
}
.bubble-sub-button-2 {
background-color: ${hass.states['sensor.raumklima_bad_luftfeuchtigkeit'].state >= 80 ? 'tomato' :
hass.states['sensor.raumklima_bad_luftfeuchtigkeit'].state >= 60 ? '#FFB347' :
'transparent'} !important;
color: ${hass.states['sensor.raumklima_bad_luftfeuchtigkeit'].state >= 60 && hass.states['sensor.raumklima_bad_luftfeuchtigkeit'].state <= 80 ? '#383838' : 'inherit'} !important;
}
.bubble-sub-button-3 {
background-color: ${hass.states['sensor.raumklima_bad_temperatur'].state >= 28 ? 'tomato' :
hass.states['sensor.raumklima_bad_temperatur'].state >= 23 ? '#FFB347' :
hass.states['sensor.raumklima_bad_temperatur'].state >= 17 ? 'transparent' :
'LightSkyBlue'} !important;
color: ${hass.states['sensor.raumklima_bad_temperatur'].state < 17 ? '#383838' : 'inherit'} !important;
}
tap_action:
action: navigate
navigation_path: Badezimmer
show_icon: false
force_icon: false
scrolling_effect: false
Here is an example:
type: custom:bubble-card
card_type: button
button_type: switch
entity: switch.adguard_protection
icon: mdi:shield-check
sub_button: []
tap_action:
service: ""
target: {}
action: toggle
styles: |-
.bubble-button-background {
background-color: ${state === 'on' ? 'rgba(0,128,0,0.2)' : 'rgba(255,0,0,0.4)'} !important;
}
.bubble-icon {
color: ${state === 'on' ? 'green' : 'red'} !important;
${icon.setAttribute("icon",
state === 'on' ? 'mdi:shield-check'
: 'mdi:shield-off')}
}
show_last_changed: false
show_attribute: false
show_state: false
layout_options:
grid_columns: 2
grid_rows: 1
hold_action:
action: more-info
double_tap_action:
action: none
name: AdGuard Filter
show_icon: true
force_icon: false
button_action:
tap_action:
action: more-info
double_tap_action:
action: none
Result:
This is my tablet layout, it’s still WIP.
I use the expander card in combination with the bubble card to open and close the menu’s where I can click the room to open a pop-up to see the complete room.
Next up, I’m changing the People at home to show the pictures of the persons here along with a coloured border.
Any suggestions for improvement?
Normally it should work when using „.bubble-name“ but without „!important“
1 Like
May i ask which card you use to display the power usage. I would lilke to use a card similar to this, where you can have multiple devices or states but not limited to one line. Multiple states for multiple devices on multiple rows.
It’s probably embedded somewhere in these 2000+ responses, but did I miss where the ‘on’ color for some buttons turned to dark gray instead of yellow? I know I can set CSS style background for each button, but I would want the ‘on’ color to be yellow globally. Not sure why only State buttons retain the proper color.
2 Likes
I think this was already answered on reddit and in your case it was this option?!
But overall I also sometimes struggle with the fact that buttons partly behave differently in terms of colors, used variables and applied transparencies, would be good to have to consistent as a basis and only optionally adjust it.