Mushroom Inspiration!

Share your Projects! Dashboards & Frontend
364

Hi just trying some of your nice cards,

card_mod:
  style:
     mushroom-shape-icon$: |
      .shape {
        border: 5.5px groove green;
        --shape-color: orange !important;
         }
  
  .: |
      ha-card {
        background-color: #fff000;
        border: 2.0px outset white;
        height: 200px !important;
        width: 200px;
        box-shadow: 0px 2px 4px 0px rgba(1,0,1,0.66);
        border-radius: 20px !important;
        animation: ping 2s infinite;
         } 
      @keyframes ping {
        0% {box-shadow: 0 0 0 0 rgba(var(--rgb-green), 0.7);}
        70% {box-shadow: 20px 0 0 10px transparent;}
        100% {box-shadow: 0 0 0 0 transparent;}
      }

does not work for me, if I remove

mushroom-shape-icon$: |
      .shape {
        border: 5.5px groove green;
        --shape-color: orange !important;
         }

and let the code as this

card_mod:
  style: |
      ha-card {
        background-color: #fff000;
        border: 2.0px outset white;
        height: 200px !important;
        width: 200px;
        box-shadow: 0px 2px 4px 0px rgba(1,0,1,0.66);
        border-radius: 20px !important;
        animation: ping 2s infinite;
         } 
      @keyframes ping {
        0% {box-shadow: 0 0 0 0 rgba(var(--rgb-green), 0.7);}
        70% {box-shadow: 20px 0 0 10px transparent;}
        100% {box-shadow: 0 0 0 0 transparent;}
      }

then it works fine

I cant understnad the $ and | thing

could you please explain for novices?