Card_mod mushroom-shape-icon AND ha-card

Configuration Frontend
1

Hello Community,

i am having trouble with my code, when i try to use the ha-card { xxx } and animating the icon at the same time. I think i am doing something wrong. Could someone check the code for me?

type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: ping 2s infinite;
      }
      @keyframes ping {
        0% {
          box-shadow: 0 0 5px 1px rgba(var(--rgb-green), 0.7);
        }
        
        100% {
          box-shadow: 0 0 5px 15px transparent;
        }
      }
   
    ha-card {
      border-radius: 0px;
      border-width: 0px;
      margin-top: -105px;
      margin-bottom: 0px;
      margin-left: 130px;
      margin-right: 0px;
      border: 0px;
      background: unset;
      box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
      --icon-size: 29px; 
      --card-primary-font-size: 12px;
      --card-secondary-font-size: 12px;
      --box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
      }

Thanks in advance!

2

I think you need to add .: |

type: custom:mushroom-template-card
primary: Hello, {{user}}
secondary: How are you?
icon: mdi:home
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: ping 2s infinite;
      }
      @keyframes ping {
        0% {
          box-shadow: 0 0 5px 1px rgba(var(--rgb-green), 0.7);
        }
        
        100% {
          box-shadow: 0 0 5px 15px transparent;
        }
      }
    .: |
      ha-card {
        border-radius: 0px;
        border-width: 0px;
        margin-top: -105px;
        margin-bottom: 0px;
        margin-left: 130px;
        margin-right: 0px;
        border: 0px;
        background: unset;
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
        --icon-size: 29px; 
        --card-primary-font-size: 12px;
        --card-secondary-font-size: 12px;
        --box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
      }
2 Likes
3

Hi Holdestmade,

it worked! Thanks a lot!