The problem here, that it is (!) centering. But to wrong inherited or wrong set (browser style of line-heights) line-heights of the surrounding elements. This is a css attribute in host of ha-svg-icon. But at other places, you have
Whereas here you see a button and this
And here in the line-heigh from ha-state-icon is not set as in other places and takes the browser standard and ha-svg-icon is centered to the line height of the ha-state-icon, which is too height, but you cannot see this, because the bottom is invisible in ha-icon-button and it is top-aligned
This said, currently you can only set the virtual line-height of the parent to 0px or switch of (unset) the centering to the parent.
This is, what I think about the reasons.
wow, youāve made a fine analysis, thanks. Seems we should file an issue in Frontend with this?
how are we supposed to do that? I have been trying to āunsetā the whole box, except for the title, which seems to be positioned correctly.
Btw, can you confirm that a plain picture-glance card (I mean without any card_mods) shows the icons sub center? because if thats thatās the case, we really have an issue and the image in the docs is no longer happening (or check Ildars images in š¹ Card-mod - Add css styles to any lovelace card - #1689 by Ildar_Gabdullin ) which also are centered nicely
I think the unset is unfortunately only 1:1 for each icon because the center is, see above, a general feature of :host from ha-svg-icon. And if you unsetset it there (try it in developer tools) every other icon is to heigh afterwards, because not centered anymore to the corretcly set line heigh of their parents.
But: ha-state-icon, which has a wrong line-heigh in this card, is not inseide a shadow root, so this is working here as well and then for every icon of this row:
card_mod:
style:
.: |
.box ha-state-icon {
line-height: 0px;
}
.box div:nth-child(3) div:nth-child(1) ha-icon-button {
animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
}
.box div:nth-child(3) div:nth-child(2) ha-icon-button {
animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
color: var(--text-color-off);
}
100% {
color: aquamarine;
}
}
.box div:nth-child(3) div:nth-child(1) {
--ha-picture-icon-button-on-color: var(--text-color-off);
}
.box div:nth-child(3) div:nth-child(2) {
--ha-picture-icon-button-on-color: var(--text-color-off);
}
At least here, you can remove the unset-parts and only use the example. Didnāt dive that deep yesterday and took the unset switch first.
Yes.
before I test your code above, I went back to the post by Ildar, and tried that once again:
card_mod:
style:
.box div:nth-child(3):
div:nth-child(1):
ha-icon-button ha-state-icon:
$:
ha-icon:
$: |
ha-svg-icon {
animation: rotation 2s linear infinite, colorize 3s linear forwards 1;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
color: var(--text-color-off);
}
100% {
color: aquamarine;
}
}
the icons are placed correctly to the right, the icons are rotating nicely, but now the colorization doesnt workā¦ this css in a picture-glance is a true horror.
now Ill test your code aboveā¦
right! perfect placement, rotating nicely. and colorization. NICE!!
for reference sake, hereās the final card, including the conditional state:
type: picture-glance
title: Vijverpompen
image: /local/images/areas/vijver.png
state_filter:
'off': grayscale(72%)
entity: binary_sensor.vijverpompen
entities:
- switch.vijverpomp_links
- switch.vijverpomp_rechts
# - input_boolean.vijverpompen_alterneren
- sensor.pond_buiten_sensor_temperature
- binary_sensor.vijverpompen
card_mod:
style:
.: |
.box ha-state-icon {
line-height: 0px;
}
.box div:nth-child(3) div:nth-child(1) ha-icon-button {
{% if is_state('switch.vijverpomp_links','on') %}
animation: rotation 3s linear infinite, colorize 3s linear forwards 1;
{% endif %}
}
.box div:nth-child(3) div:nth-child(2) ha-icon-button {
{% if is_state('switch.vijverpomp_rechts','on') %}
animation: rotation 3s linear infinite, colorize 3s linear forwards 1;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
color: var(--text-color-off);
}
100% {
color: aquamarine;
}
}
created the issue at entities in picture-glance are not centered and aligned with the title Ā· Issue #12731 Ā· home-assistant/frontend Ā· GitHub @arganto , I can not tag you there? please chime in for reference
Can someone help me with styling a browser_mod popup? I use many popups with vertical-stacks. While they all work great, I notice they all start at the top of the page. I need the cards to be centered, very much like a normal more-info dialogue (which is dead center on screen).
I used inspect_element on a normal more-info dialogue hoping to find some code I could use, but couldnāt find anything useful. Anyone know what the code might be or where to look?
I currently use this for styling:
$: |
.mdc-dialog .mdc-dialog__container {
# width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
# width:100%;
box-shadow:none;
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
# --ha-card-background: rgba(0,0,0,8);
# --mdc-dialog-scrim-color: rgba(0,0,0,0.8);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
app-toolbar {
background: none !important;
}
mwc-icon-button {
margin-top: -10px;
color: #FFFFFF;
}
.main-title {
color: rgba(0,0,0,0.0);
letter-spacing: '-0.01em';
font-family: Helvetica;
font-weight: bold;
}
Edit: I tried with below code, but didnāt make a difference. I noticed this code when inspecting a more-info dialogue.
$: |
.mdc-dialog .mdc-dialog__container {
# width: 100% !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-around !important;
box-sizing: border-box !important;
height: 100%;
}
The earlier described method to animate icons works fine (at least on my setup - Win10, Chrome).
Btw, added some changes to that post - in part of animations only:
āJumpingā icon now is ājumpingā in a nicer way (changing a margin instead of a padding).
Rotating cars are replaced by cross-circles - to show that icons are centered.
For rotating suns - it is noted that the MDI-icons are not centered themselves - so the rotation is not centered.
Replaced a āsimple DOM navigationā with an āoptimized DOM navigationā.
Replaced ānth-childā with ānth-of-typeā where it works better.
Regarding the proposed way - i.e. with specified "line-height: 0px" - it seems to make a life easier:
No need to go into shadowRoot; the code is less cumbersome; commonly used animations may be specified (no need to repeat same animations for each icon).
No need to use different codes for cases āwith ha-iconā & āw/o ha-iconā.
The code for the 3rd card with this method:
type: vertical-stack
cards:
- type: picture-glance
title: some
image: /local/images/blue_low.jpg
entities:
- entity: binary_sensor.iiyama_2_ping_availability_status
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: input_boolean.test_boolean
icon: mdi:plus-circle
- entity: input_boolean.test_boolean
icon: mdi:plus-circle
- entity: input_boolean.test_boolean
icon: mdi:plus-circle
- entity: input_boolean.test_boolean
icon: mdi:plus-circle
card_mod:
style: |
.box .wrapper ha-icon-button ha-state-icon {
line-height: 0px;
}
.box div:nth-child(2) div:nth-of-type(2) ha-icon-button ha-state-icon {
animation: rotation_1 0.5s linear infinite;
}
.box div:nth-child(2) div:nth-of-type(3) ha-icon-button ha-state-icon {
animation: rotation_1 5s linear infinite;
}
.box div:nth-child(3) div:nth-of-type(1) ha-icon-button ha-state-icon {
animation: rotation_1 5s linear infinite;
}
.box div:nth-child(3) div:nth-of-type(2) ha-icon-button ha-state-icon {
animation: rotation_2 1s linear infinite;
}
@keyframes rotation_1 {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
@keyframes rotation_2 {
0% { transform: rotate(359deg); }
100% { transform: rotate(0deg); }
}
But on iPad both methods still give non-centered rotation (the 2nd method - less misalignment)ā¦
1 Like
see Home Assistant Design showing all icons centered lower than the titleā¦
card_mod:
style: |
.box .wrapper ha-icon-button ha-state-icon {
line-height: 0px;
}
now too
got to figure out the difference with what I use in the rotating pump card:
card_mod:
style:
.: |
.box ha-state-icon {
line-height: 0px;
}
btw: weather-sunny is not centered? Ā· Issue #6597 Ā· Templarian/MaterialDesign Ā· GitHub just to get their response on the off centeredness of some icons, weather-sunny in this case
Ildar, can you confirm colorize animation not to work when entered under the mod you now show?
I had to add them to the rotation animations under the .: , like:
card_mod:
style:
.: |
.box ha-state-icon {
line-height: 0px;
}
.box div:nth-child(3) div:nth-child(1) ha-icon-button {
{% if is_state('switch.vijverpomp_links','on') %}
animation: rotation 3s linear infinite, colorize 3s linear forwards 1;
{% endif %}
}
Stop.
Ildar_Gabdullin:
Stop.
??
A typo was made by me yes. Doesnt change the issue though. white-balance-sunny is not centered Ā· Issue #6597 Ā· Templarian/MaterialDesign Ā· GitHub
This works:
type: vertical-stack
cards:
- type: picture-glance
title: some
image: /local/images/blue_low.jpg
entities:
- entity: binary_sensor.iiyama_2_ping_availability_status
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: input_boolean.test_boolean
icon: mdi:plus-circle
- entity: input_boolean.test_boolean
icon: mdi:plus-circle
- entity: input_boolean.test_boolean
icon: mdi:plus-circle
- entity: input_boolean.test_boolean
icon: mdi:plus-circle
card_mod:
style: |
.box .wrapper ha-icon-button ha-state-icon {
line-height: 0px;
}
.box div:nth-child(3) div:nth-of-type(1) ha-icon-button ha-state-icon
{
animation: rotation_1 5s linear infinite,coloring 3s linear forwards 1;
}
.box div:nth-child(3) div:nth-of-type(2) ha-icon-button ha-state-icon
{
animation: rotation_2 1s linear infinite, coloring 1s linear infinite;
}
@keyframes rotation_1 {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
@keyframes rotation_2 {
0% { transform: rotate(359deg); }
100% { transform: rotate(0deg); }
}
@keyframes coloring {
0% { color: blue; }
100% { color: red; }
}
1 Like
Ildar_Gabdullin:
This works:
it does indeed, can confirm!
.box ha-state-icon {line-height: 0px;}
which seems to do the trick too.
now which of those would be preferableā¦
now weāve been able to fix that line-height, I wonder if that could also fix these:
- type: custom:template-entity-row
# https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/2182
entity: binary_sensor.vijverpompen
card_mod:
style:
div#wrapper: |
state-badge {
{% if is_state(config.entity,'on') %}
animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
background: steelblue;
}
100% {
background: aquamarine;
}
}
icon: mdi:pump
and an identical with fan, because they too show the off-center behavior, and yet are 100% correct from mdi.
Donāt think so. I think they are only using the wrong or changed code there as well, without having seen that it is not centered (anymore?).
yes, I hope so, still, on a design site, that would be an issue
anyways, I filed an issue, and added that to it.
oops:
card_mod:
style:
div#wrapper: |
state-badge {
line-height: 0px;
{% if is_state(config.entity,'on') %}
animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
{% endif %}
}
not a guessing task, need to go into the inspectorā¦
It must be something in core Lovelace because:
I tried this example and it is centered here. Du you have the whole example?
yes ofc:
- type: custom:template-entity-row
# https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/2182
entity: fan.luchtreiniger_ella
name: Ella
<<: &fan
secondary: >
{% if states[config.entity] is not none %}
{% if states[config.entity].state == 'on' %}
On: {{states[config.entity].attributes.percentage}} -
{% else %} Off since {{relative_time(states[config.entity].last_changed)}}
{% endif %}
{% else %} Not yet set
{% endif %}
{% if states[config.entity] is not none %}
Air quality:
{% set id = states[config.entity].object_id %}
{% if states('sensor.' ~ id ~ '_air_quality') in ['unknown','unavailable'] %}
{% if states[config.entity].state == 'on' %} Initializing
{% else %} Device not ready
{% endif %}
{% else %} {{states('sensor.' ~ id ~ '_air_quality')}} Āµg/mĀ³
{% endif %}
{% else %} Not yet set
{% endif %}
card_mod:
style:
div#wrapper: |
state-badge {
{% if is_state(config.entity,'on') %}
animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
{% endif %}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes colorize {
0% {
background: steelblue;
}
100% {
background: aquamarine;
}
}
state: >
{{'Aan' if is_state(config.entity,'on') else 'Uit'}}
icon: >
{{'mdi:fan' if is_state(config.entity,'on') else 'mdi:fan-off'}}
toggle: true
second fan is simply:
- type: custom:template-entity-row
entity: fan.luchtreiniger_george
name: George
<<: *fan
And there is no other card mod in the parent entities card, which contains the template-entity-row?
I did mention your solution ofc.
