Card mod styling for touchpad

[dipseth]

Can anyone provide guidance on touchpad styling using card mod. I want to use card mod rather than touchpad_style as the latter doesn't seem to support HA templating. The latest release notes mention this may be the case. For example the code below doesn't have any affect.

card_mod:
  style: |
    toucharea {
      background-image: url("https://i.insider.com/60c3a81023393a00188e2b96");
      background-size: cover;
      opacity: 0.5;
    }

Thanks!

[dipseth]

I was actually able to get it working by juat adding !important after the value. I also had select into the shadow-root by using remote-touchpad$:

card_mod:
  style:
    remote-touchpad$: |
      toucharea  {  
        opacity: .8;    
        height: 275 !important;
        background: 
          {% from 'random_light_hsl_css.jinja' import random_light_hsl %} 
          linear-gradient(217deg, rgba(255,0,0,.8) , rgba(255,0,0,0) 70.71%),
          linear-gradient(340deg, {{ random_light_hsl('living_room') }} , rgba(0,255,0,0) 70.71%),
          linear-gradient(127deg, rgba(0,0,255,.8), {{ random_light_hsl('living_room') }} 70.71%)  !important ;
         
      }

Now the touchpad will match the colors in the living room.