thomasloven / lovelace-card-mod

🔹 Add CSS styles to (almost) any lovelace card
MIT License
1.05k stars 169 forks source link

[Feature] Theming With HTML Elements That Unloads or Loads Late #302

Closed Nerwyn closed 6 months ago

Nerwyn commented 8 months ago

Is there any way to make it so that card-mod within themes reloads if the HTML on the page changes? Some elements unload and reload or load late, and the card-mod theme CSS does not apply if the element is not present on initial page load.

Context: I've started using card-mod as part of my theme to transform the navbar from a header to a footer and make some other stylistic changes. While this works great it does break when I enter or exit edit dashboard mode.

How it looks with card-mod theming normally:

image

After entering edit mode: image

And after exiting edit mode:

image

The reason for this is that the HTML around the navbar changes from ha-tabs:

image

to paper-tabs:

image

While I was able to repeat the CSS for evenly spacing the icons for both of these, because entering and editing edit mode causes the HTML of the page to change it the card-mod theme CSS doesn't apply until the page is refreshed. Relevant card-mod CSS for reference:

ha-tabs:
  $: |
    #tabsContent.scrollable {
      width: 100% !important;
      display: flex !important;
      justify-content: space-between !important;
      flex-shrink: 0;
    }
    paper-icon-button {
      display: none !important;
    }

paper-tabs:
  $: |
    #tabsContent.scrollable {
      width: 100% !important;
      display: flex !important;
      justify-content: space-between !important;
      flex-shrink: 0;
    }

The frontend.reload_themes service also fixes the CSS for new HTML elements. Is there any way to make it so that either the card-mod theme CSS is reloaded if the page HTML changes, or frontend.reload_themes is called? Alternatively is there a way to detect and automate calling frontend.reload_themes if any user enters or exits edit mode?

thomasloven commented 6 months ago

Duplicate (but better) of #290

Try

.:
  ha-tabs:
    ...etc...
  paper-tabs:
    ...etc...
Nerwyn commented 6 months ago

Placing the selectors in .: breaks the card-mod theme, BUT it looks like the other changes and improvements you made in 3.4.0 fixed this with no changes to my theme needed!