CoverFlow front face on real ha-card hosts
Real ha-card everywhere on the front face
Every mini-card on the CoverFlow front face (bandeau, three badges, radial wrap, footer clock) is now an <ha-card> element instead of a styled <div>. The background, border, border-radius and box-shadow come straight from the HA frontend's own ha-card shadow CSS, so the cards adopt the active theme's --ha-card-* token cascade with zero Helios magic numbers in the way.
The Helios outer ha-card global rule (#000 background, 480 px min-height, helios-card container scope) is opted out for the four inner ha-cards via class overrides, otherwise the inner cards would inherit the map-area chrome and the @container helios-card queries would mis-fire against the inner widths.
Layout overhaul
.dash-cf-card now drives all the spacing via padding: 8 px + gap: 8 px on the outer flex column. The per-child margins are gone, every mini-card gets a symmetric 8 px gap to its neighbours and to the outer card edge.
The outer .dash-cf-card radius is calc(var(--ha-card-border-radius) + 8 px) , the concentric-rounded-rectangle rule (outer = inner + padding) so the inner mini-card corners visually align with the outer shell regardless of how the theme tunes the radius token.
Icons
- Production:
mdi:solar-power(HA energy dashboard production glyph) instead ofmdi:solar-power-variant - Battery:
mdi:battery(HA energy dashboard battery glyph) instead ofmdi:home-battery, neutral default colour switches to--state-icon-colorso the icon reads as a standard HA state icon at rest - Cloud:
mdi:cloud(filled) instead ofmdi:weather-cloudy(outline), tinted with--secondary-text-colorso the icon matches the grey cloud ring in the dial below