🔹 Card-mod - Super-charge your themes!

Mariusthvdb · January 27, 2022, 10:45am

not sure if this was posted before, but helping out on discord today and thought I’d share here too:
nice if you dont need the link, or find it lacking. simply hide it.

    card-mod-more-info-yaml: |

      $: |
        .mdc-dialog {
          backdrop-filter: blur(17px);
          -webkit-backdrop-filter: blur(17px);
        }
/* hide the 'Show more' on the modern more-info cards */
      ha-more-info-history:
        $: |
          .header > a, a:visited {
            display: none;
          }

arganto · January 27, 2022, 3:06pm

But how to do this on second tab?

Mariusthvdb · January 27, 2022, 3:26pm

mm, not sure yet… seems to return the same path in inspector…
/html/body/home-assistant//ha-more-info-dialog//ha-dialog/div[2]/ha-more-info-history//div/a

also, the other mod is not very sticky when used in the card-mod-theme. Ive seen that with other mods, and decided to add those to love cards directly.

eg

  - type: custom:fold-entity-row
    head:
      type: section
      label: Label
      card_mod:
        style: |
          .label {
            margin-left: 0px;
          }

which works very reliably like that.

more-info ofc can not be done that way, so I fear we’re on our own here. Maybe Ildar would know of a way, or Kendell.

arganto · January 27, 2022, 3:43pm

I think the second tab it is loaded asynchronously and then the mod is not re-applied. Something like this.

Mariusthvdb · January 27, 2022, 3:59pm

could you check please:

      ha-more-info-history:
        $: |
          .header > a {
            display: none;
          }

seems to do the same? hide show more on first tab, not hide on History tab.

also for the logbook on more-info:

      ha-more-info-logbook:
        $: |
          .header > a {
            display: none;
          }

And, if it does the same, its less code, so less can go wrong
added some frontend control: Custom header theme · GitHub

arganto · January 27, 2022, 8:19pm

Hm. Where is the difference to your first try? I used the same for some months (not to hide, but for other colors). But unfortunately it works only on first tab.

Mariusthvdb · January 27, 2022, 9:21pm

a:visited

mkanet · January 27, 2022, 9:46pm

I am using the Compact header code from the cookbook for my custom theme. However, there’s an issue when I enable Edit Dashboard in Lovelace. I am not able to click on the + icon at the top/left of the screen to exit Edit Dashboard mode.

See below screenshot, I am hoping someone who knows CSS much better than me could help modify the CSS Compact Header code from the Cookbook so I can exit Dashboard mode again.

DavidFW1960 · January 27, 2022, 10:41pm

This is my mod for custom header. I don’t have your issue.

  # CUSTOM-HEADER MODS
  card-mod-theme: ios-dark-mode-blue-red-mod
  card-mod-root: |
    .edit-mode, app-header, app-toolbar {
      background: url('/hacsfiles/themes/ios-themes-mod/homekit-bg-blue-red.jpg') !important;
    }
  header-height: 48px

Just tried to take a screenshot but I’m on beta and it looks like the new frontend has changed it to a done button now

mkanet · January 27, 2022, 11:05pm

Thank you. That fixed the issue. However, when I enter “Edit Dashboard” mode, it wastes a lot of empty space. Do you (or anyone else) know how to make the “Edit Dashboard” header also compact?

This is what it looks like now:

Ildar_Gabdullin · January 27, 2022, 11:45pm

I guess so.
Here my test:

Create a theme:

  card-mod-more-info-yaml: |
    ha-more-info-history $: |
      .header {
        color: red;
      }
    .: |
      ha-more-info-history {
        --secondary-text-color: orange;
      }

2.Open more-info popup, switch to the 2nd tab - the color: red is not applied, the scale is orange:

3. Update the theme - run service: frontend.reload_themes.
4. Check that the header now is red:

5. Switch to the 1st tab, next back to the 2nd tab - the header is again of standard color.

DavidFW1960 · January 27, 2022, 11:52pm

it’s only while you are editing so what’s the problem? i don’t think you can fix that

mkanet · January 28, 2022, 12:27am

Yes, it’s only while I’m editing; which sometimes I use a lot. I thought it would be possible via card-mod since I saw CSS code referencing edit mode in the Cookbook link I posted. I just wasn’t sure what to change.

arganto · January 28, 2022, 7:52am

Really a pity. If you can ever find a solution, I would be more than interested.

Mariusthvdb · January 28, 2022, 8:12am

yes, check Fix Lovelace view edit mode "Done" button styling by spacegaier · Pull Request #11449 · home-assistant/frontend · GitHub

Mariusthvdb · January 28, 2022, 8:25am

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.

Ildar_Gabdullin · January 28, 2022, 11:16am

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 the ha-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.

arganto · January 29, 2022, 2:31pm

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.

Mariusthvdb · January 29, 2022, 2:37pm

really sorry, but I dont follow…
what exactly are you hiding with which card_mod?

arganto · January 29, 2022, 3:20pm

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.