this may sound noobish, but with the changed icon variables I forgot/cant find which to use, so please help me out.
I want to have on/off colors for the toggle entities (binary/switch/boolean) and am not sure what to use. In custom-ui I do:
customize_domain:
automation:
templates:
<<: &state_color
icon_color: >
if (state === 'on') return 'var(--primary-color)';
return 'var(--disabled-text-color)';
but I want to move that to themes
paper-item-icon-color: var(--primary-text-color) # Icon color
paper-item-icon-active-color: var(--primary-color) #'#F9C536' # Icon color active
is an option, but then all regular icon also are colored like that, and Id like to have the on/off icons stand out from regular icons.
do we have a dedicated theme variabel for on/off?
or would it be –mwc-switch-unchecked-button-color and --mwc-switch-checked-button-color? Didnt find the latter in that file, but hey that would be an estimated guess…
or, can we simply use switch-unchecked-button-color.
all a bit confusing to me. also what is mwc and mdc …?
hope you can have a look, thanks!
edit
wait, those are for the toggle, not the icon. hmm, have to look further.
It’s a very strange behaviour.
-
The more-info dialog is opened:
The card-mod data does not contain styles for shadowRoot:
-
The 2nd tab is selected, then the theme is reloaded (as described here) - now the style for shadowRoot is still absent:
But now we got a style inside theha-more-info-history $:
So, the 1st style is stored in the card-mod element on the ha-dialog level, the 2nd style - on the ha-more-info-history $ level. It is not created on the dialog open.
Thanks for pointing me in this direction. At least I have a work-around for my case (color of text, but if @Mariusthvdb would set text to background, this should “hide” as well).
card-mod-more-info-yaml: |
ha-more-info-history:
$: |
.header > a, a:visited {
color: var(--secondary-text-color);
font-size: 12px;
}
ha-more-info-logbook:
$: |
.header > a, a:visited {
color: var(--secondary-text-color);
font-size: 12px;
}
.: |
ha-more-info-history {
--primary-color: var(--secondary-text-color);
}
ha-more-info-logbook {
--primary-color: var(--secondary-text-color);
}
So first is, what I wanted, other color for the links and smaller. This is only working on 1. tab.
But as primary color is only used there for the link.color and not set before in this shadow the additional second is changing the color on tab 2 as well. So still not able to set the size or other attributes there, but color is fine now on tab 2 as well.
really sorry, but I dont follow…
what exactly are you hiding with which card_mod?
Hm. You wanted to hide the links here: 🔹 Card-mod - Super-charge your themes! - #1006 by Mariusthvdb. I only want another color. But then we discussed, that it is not possible to do this on second tab. And I found a way to color the link on second tab. And so, if you set link color to backrund, you should be able to “hide” there as well.
yes, I think I understood that bit 
what I was wondering was if all of your code was necessary, or only some of it.
What I still dont get is why you use the a:visited . what does that refer to? Am now using:
ha-more-info-history:
$: |
.header > a {
display: {{'none' if is_state('input_boolean.hide_more_info_history_show_more','on')}};
}
ha-more-info-logbook:
$: |
.header > a {
display: {{'none' if is_state('input_boolean.hide_more_info_logbook_show_more','on')}};
}
and that hides (or not) the ‘Show more’ robustly.
AM I right in understanding you that adding:
.: |
ha-more-info-history {
--primary-color: var(--secondary-text-color);
}
ha-more-info-logbook {
--primary-color: var(--secondary-text-color);
}
and then replace the var(--secondary-text-color); with the color variable for the more-info background, it should be ‘invisible’? can you show me? because I tried it and cant make it happen.
Its a bit of a problem finding a good entity, because I dont have that History tab on many entities I the first place…
btw, I also tried:
.: |
mwc-tab#mdc-tab-10 {
display: {{'none' if is_state('input_boolean.hide_more_info_history_show_more','on')}};
}
ha-more-info-logbook {
display: {{'none' if is_state('input_boolean.hide_more_info_logbook_show_more','on')}};
}
to really not display it, but that doesnt work either. Ildar, am I targeting the correct mwc-tab# path there?
i do believe those tabs are numbered along the number of them in the view, so we probably cant use that, but would need something like:
paper-tab[aria-label='History']
and
paper-tab[aria-label='Details']
…
In my case at least the size in first parts as well, because I want to change it, but this is only possibel on tab 1. for tab 2 I only added the work-arround. Of course, it would be possible to remove the color-line in first part, but this doesn’t matter and perhaps i’ll work in the future only with this, so I will remember better.
Because as this was set in path as well and of course for hinding, this never has any relevance, but sometimes visited links have another color and then it would be necessary to overrule this as well. It is not a more granular think for .header and therefor without it is not more robust. It assigns CSS to is .header > a AND a:visted instead of having two assignments.
yes.
I assign a color to --primary-color, because this one is used for the link. could be
--primary-color: red;
or your background color as well or in general
--primary-color: var(--ha-card-background);
and then is is “hidden”:
P.S. Can you do me a favor and if you reply to a post, reply via this Reply
and not this
Then there is a better assignment and esp. an info.
well, thanks, but no matter what I try, I can only see the color of the text of ‘Show more’ change, and not the tab , nor is it disappearing for that matter.
it seems a hack too, and I dont really think we should be doing that. If there’s no real way of ‘not showing’ it, I guess we have to live with it, or file a FR in the Frontend repo, allowing us to hide those tabs.
I have never taked about hiding the tab, but only changing the link-color in this tab. As you have hidden (only) hidden the link in your starting post.
If you want to remove the row or secon tab, you can do this as well, but this is not refering to the problem, that you cannot style size or something else on tab 2.
card-mod-more-info-yaml: |
.: |
mwc-tab-bar { display:none; }
mwc-tab-bar mwc-tab:nth-child(2) { display:none; }
First row the hide the ow, second to only hide the second tab.
In short - if more-info dialog contains 2 tabs, then for the 2nd tab you may use only styles w/o entering to shadowRoot.
This works for the 2nd tab:
element {
some style
}
This does not work for the 2nd tab:
element $: |
element {
some style
}
sorry for any misunderstanding! I just believed you wrote about hiding the tabs. It has been a long standing wish indeed.
I can now do:
and my full more-info mod:
card-mod-more-info-yaml: |
$: |
.mdc-dialog {
backdrop-filter: blur(17px);
-webkit-backdrop-filter: blur(17px);
}
.: |
mwc-tab-bar {
display: {{'none' if is_state('input_boolean.hide_more_info_tab_bar','on')}};
}
mwc-tab-bar mwc-tab:nth-child(2) {
display: {{'none' if is_state('input_boolean.hide_more_info_history_tab','on')}};
}
ha-more-info-history:
$: |
.header > a {
display: {{'none' if is_state('input_boolean.hide_more_info_history_show_more','on')}};
}
ha-more-info-logbook:
$: |
.header > a {
display: {{'none' if is_state('input_boolean.hide_more_info_logbook_show_more','on')}};
}
works a miracle!
but you wouldn’t be able to make that happen for the element Show more on the second tab would you?
@arganto Any chance of hiding the attributes drop down box completely:
ha-expansion-panel {
display: {{'none' if is_state('input_boolean.hide_more_info_attributes','on')}};
}
or
ha-more-info-dialog:
$: |
.ha-expansion-panel {
display: {{'none' if is_state('input_boolean.hide_more_info_attributes','on')}};
}
obviously doesnt do it, but that should be the target element?
Hm, as much you mod, you should really have a look in/learn the html structure and compare with whyt you have done before.
Neither there is ha-more-info-dialog (at leat not in my cards) nor is ha-expansion-panel outside shadow-roots (it is below two of them).
So you should be able to hide more-info-content directly and completely same as mwc-tab-bar, etc. At least i9n this case. Or if you have more in more-info-content (e.g. vaciium card, etc.) you have to dig into the relevant shadow roots first.
yes, you are right, and I am the first to admit I have a hard time mastering the Dom and its steps in the card-mod.
I always try the chrome inspector, which returns:
document.querySelector("body > home-assistant").shadowRoot.querySelector("ha-more-info-dialog").shadowRoot.querySelector("ha-dialog > div.content > more-info-content > more-info-person").shadowRoot.querySelector("ha-attributes").shadowRoot.querySelector("ha-expansion-panel")
I then turn to card-mod-helper at card-mod-helper and find it returns
"body>home-assistant$ha-more-info-dialog$ha-dialog>div.content>more-info-content>more-info-person$ha-attributes$ha-expansion-panel"
and then I am lost… figuring I need the ha-expansion-panel, and you say I can hide the more-info-content just as I did with tab bar?
that would be like:
ha-more-info-content {
display: {{'none' if is_state('input_boolean.hide_more_info_attributes','on')}};
}
which again, does nothing…
trying another dom path
"body>home-assistant$ha-more-info-dialog$ha-dialog>div.content>more-info-content>more-info-default$ha-attributes$ha-expansion-panel"
and
ha-more-info-dialog:
$: |
.more-info-content {
display: {{'none' if is_state('input_boolean.hide_more_info_attributes','on')}};
}
again nothing, so yes, please guide me so I can understand how to navigate that?
Update
Found it:
more-info-content {
display: {{'none' if is_state('input_boolean.hide_more_info_attributes','on')}};
}
but… this also hides all of the other content: sliders and color wheels.
So I need to isolate the ha-expansion-panel after all.
Exactly what I wrote.
So you should be able to hide more-info-content directly and completely same as mwc-tab-bar, etc.
And secondly:
At least in this case. Or if you have more in more-info-content (e.g. vaciium card, etc.) you have to dig into the relevant shadow roots first.
… and then only hide only ha-attributes
In case vacuum card you will see
and you only have to look, where ha-attributes are. From top node, only one shadow deeper, in more-info-vacuum shadow, so
card-mod-more-info-yaml: |
more-info-vacuum:
$: |
ha-attributes {
display:none;
}
will directly work. In other card, other name or perhaps more levels, but the solution will always be the same.
Yes, I know you told me, but things often kick in when you find it yourself…
So, I reported back so you could see and comment. Thanks for that.
I did already try what you do for the vacuum card, but probably missed a shadow root, or maybe got the syntax wrong.
Ill redo the work and will let you know, thanks again !
edit
more-info-default:
$: |
ha-attributes {
display: {{'none' if is_state('input_boolean.hide_more_info_attributes','on')}};
}
and
more-info-light:
$: |
ha-attributes {
display: {{'none' if is_state('input_boolean.hide_more_info_attributes','on')}};
}
…
it was way more simple than I supposed at first.
very nice!
would be cool if we could somehow wildcard that, but I believe I havent seen that before.
new post for new search:
what has always bothered me is that on many entities I don’t have recorder enabled, so I see:
this is not an error, there simply is no history nor logbook entry for that entity. I’ve asked the frontend team before, but they say they can not prevent this, because the frontend doesn’t know about the backend.
Now, with card-mod we see ha-more-info-history and ha-more-info-logbook, and their respective div class="info",
and for logbook that is a bit different:
the div is actually called no-entries
what is was wondering, is whether we can set display: none to ha-more-info-history if the info == ‘No state history found.’ ?
or can we not get that info in a jinja template?
would you know?
As these are different shadow root levels, I don’t think, that you can do this with card-mod and css.
Don’t know.
Why?