New badges and card-mod customisation

[Mariusthvdb (Marius)]

hey Liquid

While you’re at it, could I tempt you to check 🔹 Card-mod - Super-charge your themes! - #2052 by Mariusthvdb?

Ive managed the badges nicely and they are customized the way I want, including borders box-shadows etc.

however, setting a box-shadow reveals the border of the section below the badges sharply when using the new scroll feature… without it, it is perfect.

Scrolling makes the section border quite visible directly under the box-shadowed badges.

please have a look if you can find the element we need to adjust to prevent that, I am not entirely sure which it even is, is it the section below, the set of badges…

[LiQuid_cOOled]

Really nice work on the badges and the information you provided is robust!

It also helped me solve card-mod issues with Mushroom Template Badges.

@Mariusthvdb

setting a box-shadow reveals the border of the section below the badges sharply when using the new scroll feature

I’ll definitely take a look!

[LiQuid_cOOled]

@LiQuid_cOOled

    .: |
      ha-card {
       background none; 
       border:none;
         }

One method to consolidate…

card_mod:
  style:
    hui-entity-badge$:
      ha-badge$: |
        .badge {
          --card-mod-icon: {{'mdi:fan' if states(config.card.entity) |int(0) > 0 else 'mdi:fan-off' }};
          --card-mod-icon-color: {{'lime' if states(config.card.entity) |int(0) > 0 else 'grey' }};
           border: {{'1.5px solid lime !important' if states(config.card.entity) |int(0) > 0 else '1.5px solid grey !important' }};
            }
      .: |
        ha-state-icon {
          animation: {{ 'spin 1s linear infinite' if states(config.card.entity) |int(0) > 0 else 'none' }};
            }
         @keyframes spin {
           0% { transform: rotate(0deg);}
           100% {transform: rotate(359deg);}
            }
    .: |
      ha-card {
        background none; 
        border:none;
            }