thanks, will test.
fwiw, Ive just found out the history-explorer card has the same issue, and I can only do this?:
- type: entities
title: 3 Fase totaal
card_mod:
class: class-header-margin
entities:
- type: custom:hui-element
card_type: custom:history-explorer-card
card_mod:
style: |
ha-card {
margin: -8px -16px -16px -16px;
box-shadow: none:
}
# - type: custom:history-explorer-card
# header: 3 Fase totaal
header: ' '
to get:
thereās a bit too much white above the graph for my taste, but using header: hide
makes the graph overflow the headerā¦ (ofc, I can adapt my header class, but the thing is that was made to be universally useable. too bad these custom cards all use their own header stylingsā¦
update
can confirm your fix to work
thanks!
type: custom:sankey-chart
title: Energie verbruik
card_mod:
style:
$: |
.card-header {
background-color: var(--background-color-off);
font-weight: 400;
font-size: 20px;
color: var(--text-color-off);
padding: 0px 12px;
margin: 0px 0px 16px 0px;
}
and same for:
- type: custom:history-explorer-card
header: 3 Fase totaal
card_mod:
style:
$: |
.card-header {
background-color: var(--background-color-off);
font-weight: 400;
font-size: 20px;
color: var(--text-color-off);
padding: 0px 12px;
margin: 0px 0px 16px 0px;
}
And for the history-graph! which is a core cardā¦ so even the HA devs now do thisā¦
- type: history-graph
title: Temperatuur - Verwarming
card_mod:
style:
$: |
.card-header {
background-color: var(--background-color-off);
font-weight: 400;
font-size: 20px;
color: var(--text-color-off);
padding: 0px 12px;
margin: 0px 0px 16px 0px;
}
hours_to_show: 48
refresh_interval: 60
entities:
So, because this now is becoming more of a default mod, it seems very useful to write that as an extra card-mod-theme class for custom cards and history-graphs (maybe even others, need to checkā¦). any chance you could help me do that? I now use:
card-mod-card-yaml: |
hui-buttons-header-footer $ hui-buttons-base $ : |
.ha-scrollbar {
justify-content: space-evenly;
height: 50px;
align-content: center;
margin: -8px 0px 0px 0px;
--ha-chip-background-color: var(--primary-color);
--ha-chip-text-color: var(--card-background-color);
--paper-item-icon-active-color: red;
--secondary-text-color: var(--card-background-color);
}
hui-buttons-header-footer $ hui-buttons-base $ .ha-scrollbar ha-chip:
$: |
.mdc-chip {
border: 1px solid green;
border-radius: var(--ha-card-border-radius);
}
.mdc-chip__ripple {
border-radius: var(--ha-card-border-radius) !important;
}
.: |
ha-card.class-header-margin .card-header {
background-color: var(--background-color-off);
font-weight: 400;
font-size: 20px;
color: var(--text-color-off);
padding: 0px 12px;
margin: 0px 0px 16px 0px;
}
ha-card.class-header-no-margin .card-header {
background-color: var(--background-color-off);
font-weight: 400;
font-size: 20px;
color: var(--text-color-off);
padding: 0px 12px;
}
so would need to add your āshadow root below ha-cardā in the stylings
I tried to create a class-shadow-header-margin
:
$: |
.class-shadow-header-margin .card-header {
background-color: var(--background-color-off);
font-weight: 400;
font-size: 20px;
color: var(--text-color-off);
padding: 0px 12px;
margin: 0px 0px 16px 0px;
}
but that wont work like that