Mushroom-template-card hintergrund Transparent

Dashboard/Cards/Frontend
,
1

Hallo zusammen

Ich versuche seid ein paar Tagen ein anmiertes Icon meinem Dashboard hinzuzufügen.

Klappt soweit auch aber ich habe immer einen schwarzen Rahmen drum herum. Ich den es liegt an der Template Card.

Gibts ne möglichkeit dasd transparent zu machen?.

            - type: custom:mushroom-template-card
              primary: ''
              icon: mdi:music
              icon_color: blue
              style:
                top: 50%
                left: 50%
              card_mod:
                style:
                  mushroom-shape-icon: |
                    ha-state-icon {                   
                      animation: music 2s ease-in-out infinite alternate;
                      transform-origin: 50% 100%
                    }
                    .shape {
                      perspective: 7px;
                    }
                    @keyframes music {
                      0%, 100% { transform: translateY(0px) scaleX(1); }
                      20% { transform: translateY(2px) scaleX(0.9); }
                      40% { transform: rotateY(10deg) rotateZ(-10deg); }
                      60% { transform: translateY(-4px) scaleX(1.1); }
                      80% { transform: rotateY(-10deg) rotateZ(10deg); }
                    }
2

Brobiers mal damit:

type: custom:mushroom-template-card
primary: ""
icon: mdi:music
icon_color: blue
style:
  top: 50%
  left: 50%
card_mod:
  style:
    style: |
      ha-card {
        --ha-card-background: transparent;
        --ha-card-border-width: 0;
      }
    mushroom-shape-icon: |
      ha-state-icon {                   
        animation: music 2s ease-in-out infinite alternate;
        transform-origin: 50% 100%
      }
      .shape {
        perspective: 7px;
      }
      @keyframes music {
        0%, 100% { transform: translateY(0px) scaleX(1); }
        20% { transform: translateY(2px) scaleX(0.9); }
        40% { transform: rotateY(10deg) rotateZ(-10deg); }
        60% { transform: translateY(-4px) scaleX(1.1); }
        80% { transform: rotateY(-10deg) rotateZ(10deg); }
      }

Sieht dann so aus

grafik
grafik232×117 2.56 KB

1 „Gefällt mir“
4

Danke
Auf die Idee bin ich nicht gekommen.
Nice

Mal noch was anderes.

Ich versuche das Icon nur Anzeigen zu lassen wenn der mini-media player Musik abspielt. In meinem Test Dashboard funktioniert das auch. Nur in meinem Flurplan nicht.

Ich versuche das über die visibility:

            - type: custom:mushroom-template-card
              icon: mdi:music
              secondary: ''
              fill_container: false
              icon_color: blue
              style:
                top: 60%
                left: 72%
              primary: ''
              badge_icon: ''
              badge_color: ''
              picture: ''
              visibility:
                - condition: state
                  entity: media_player.thorstens_echo_dot
                  state: playing                  
              card_mod:
                style:
                  style: |
                    ha-card {
                      --ha-card-background: transparent;
                      --ha-card-border-width: 0;
                    }                
                  mushroom-shape-icon: |
                    ha-state-icon {                   
                      animation: music 2s ease-in-out infinite alternate;
                      transform-origin: 50% 100%
                    }
                    .shape {
                      perspective: 7px;
                    }
                    @keyframes music {
                      0%, 100% { transform: translateY(0px) scaleX(1); }
                      20% { transform: translateY(2px) scaleX(0.9); }
                      40% { transform: rotateY(10deg) rotateZ(-10deg); }
                      60% { transform: translateY(-4px) scaleX(1.1); }
                      80% { transform: rotateY(-10deg) rotateZ(10deg); }
                    }

:crayon:by HarryP: Zusammenführung Doppelpost (bei Änderungen oder hinzufügen von Inhalten bitte die „Bearbeitungsfunktion“ anstatt „Antworten“ zu nutzen)

5

Warum das mit visibility in der Bildkarte nicht funktioniert, kann ich Dir nicht beantworten. Da Du die Mushroom-template-card benutzt, kanns Du ein wenig triksen. Entweder über icon_color oder über das icon.
Hier z.B. icon_color anpassen

icon_color: |
  {% if is_state('media_player.galaxy_tab_a_8_0_2019','playing') %}
    blue
  {% else %}
    white
  {% endif %}
6

Ja das funktioniert soweit. Find ich auch gar nicht schlecht so.
Einzige Problem ist nur noch das ich das Symbol nicht selbstständig aktualisiert sondern ich muss den Media Player nochmals Bedienen