🔹 Card-mod - Add css styles to any lovelace card

[dcapslock (Darryn Capes-Davis)]

@fusterclucker

I was thinking more the second. Got some resources for me to dig into?

Hmmm… can’t transition gradients so no go on my plan. Tried some ideas but nothing works. So unfortunately you will need to have a helper entity to manage your gradient if you want to debounce the transition, but even then you won’t get a nice fade, but just one abrupt transition rather than a few.

Any workaround, if possible, would be based on putting the graident background as a :before element, managing its opacity, then transitioning opacity. See Transitioning Gradients.

@fusterclucker

The terminal output

Browser console

[fusterclucker (Jeff)]

Any workaround, if possible, would be based on putting the graident background as a :before element, managing its opacity, then transitioning opacity. See Transitioning Gradients.

I’ll dig into this in the coming week or two and see what I can come up with. Thanks @dcapslock!

[bladecell]

I am trying to add backdrop filter and set background to the .mdc-menu-surface dropdown element across ha. I have just tryied to apply the style in dev tools and getting weird results:

I have in my theme set the header to be transparent:

# Header
app-header-backdrop-filter: blur(8px) saturate(1.2)
app-header-edit-background-color: oklch(0 0 0 / 20%)

And when I remove color and background in the devtools from the .mdc-menu-surface it becomes transparent and when I add backdrop-filter, nothing happens:

But when I remove the backdrop-filter from .header:

It applies the backdrop-filter to the .mdc-menu-surface:

But I would like to have both, the header and the dropdown with backdrop filter.

[LiQuid_cOOled]

Just a heads up…This is the correct thread for card-mod themes inquires

[dcapslock (Darryn Capes-Davis)]

@bladecell

But I would like to have both, the header and the dropdown with backdrop filter.

Check out https://stackoverflow.com/questions/60997948/backdrop-filter-not-working-for-nested-elements-in-chrome.

[Juu]

Hi,
In a “custom:multiple-entity-row” I want to:
A. change the color of the left icon (green)
B. change the color of the left text “name” (orange)
C. change the color of the right texte “state” (red)

I found in this topic each solution (thanks to Ildar_Gabdullin), I could combine 2 of them but not the last one. How can write the code to get all colors inside the same line?
Is there a way to “guess” which “keyword” (state-badge, .info, .state-entity, hui-generic-entity-row, …) I need to use.

Here is my code, the first entity is request A and B, the second entity is request C , the third entity is what I tried but it don’t work.

type: entities
entities:
  - entity: sun.sun
    type: custom:multiple-entity-row
    entities:
      - entity: sun.sun
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              color: green !important;
            }
            .info {
              color: orange;
            }
  - entity: sun.sun
    type: custom:multiple-entity-row
    entities:
      - entity: sun.sun
    card_mod:
      style: |
        .state.entity {
          color: red;
        }
  - entity: sun.sun
    type: custom:multiple-entity-row
    entities:
      - entity: sun.sun
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              color: green !important;
            }
            .info {
              color: orange;
            }
            .state.entity {
              color: red;
            }

Thanks a lot!

[Ildar_Gabdullin]

Away from a PC, typing from a mobile, try this:

    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            state-badge {
              color: green !important;
            }
            .info {
              color: orange;
            }
          .: |
            .state.entity ….

But actually you should have found out the solution by yourself. See, the main icon-related part is in shadiwroot ($), other stuff - not. Now you need to combine two parts - shadowroot-part and “normal” part. Check “fantastic post - other stuff - how to combine” for explanation.

[Juu]

Thank you very much, it works . I need to read all the documentation again, for the moment I still don’t understand all the levels, and what is at which level .
Thanks again for your help and for all the documentation you made!