I love the flexibility and variety of options that come with the Bubble Card addon. However, I am seeking a more visually seamless integration with the standard HA cards such as the Entity card. Therefore I was spending some time to tweak the CSS Styles options to have a somewhat similar appearance. This is what is looks like (Bubble Cards with red dots)…
and in dark mode…
styles code:
${icon.setAttribute("icon", hass.states[entity].state === 'on' ?
'mdi:lightbulb' : 'mdi:lightbulb-off')}
.bubble-sub-button {
background: var(--secondary-background-color);
color: var(--primary-text-color);
}
ha-card {
--bubble-accent-color: rgba(253, 174, 10);
--bubble-border-radius: 12px;
--bubble-padding: 8px;
--bubble-background: var(--ha-card-background);
--bubble-box-shadow: var(--ha-card-box-shadow);
--bubble-icon-border-radius: 18px;
--bubble-sub-button-border-radius: 18px;
--bubble-border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color,
var(--divider-color));
--bubble-main-background-color: var(--ha-card-background, var(--card-background-color, white)) !important;
}
.bubble-button-container {
height: 56px !important;
min-height: 56px !important;
padding: 8 8px !important;
}
.bubble-icon-container {
margin-left: 9px !important;
margin-right: 4px !important;
background: transparent !important;
background: ${state ===
'on'
? 'rgba(254, 194, 53, 0.2)'
: 'var(--secondary-background-color)'} !important;
color: ${state === 'on'
? 'rgb(254, 194, 53)'
: 'rgba(var(--rgb-primary-text-color), 0.7)'} !important;
}
.bubble-name {
font-size: 1rem !important;
font-weight: 500 !important;
color: var(--primary-text-color) !important;
}
.bubble-state {
font-size: 0.9rem !important;
font-weight: 400 !important;
color: var(--primary-text-color) !important;
opacity: 1;
}