Mushroom Cards - Build a beautiful dashboard easily 🍄 (Part 1)

[itsboo]

@rhysb

mushroom-shape-avatar$: |
      .picture {
        border: solid rgb(var(--rgb-green));
      }

@rhysb thanks soo far made this…suggest me if you got some better animation idea…
what this animations does is , when my distracting time is more than 1 hr it will alert me with the animation like this

[Yoinkz]

Would it be possible to do the same with sensor while it is active?
Right now it pulses while both being on and off. Goal is to have a more visible style when a sensor is triggered.

[j.loewen (Johann)]

This doesn’t work for me sadly. The text color does not change to green or any other color.

[Posreg (Daros)]

I think you can achieve it by

                card_mod:
                  style:
                    mushroom-shape-icon$: |
                      .shape {
                        {% if is_state('vacuum.kazek', 'cleaning') %}
                           --shape-animation: ping 1s infinite
                        {% endif %}

                      }
                      @keyframes ping {
                        0% {
                          box-shadow: 0 0 5px 1px rgba(var(--rgb-pink), 0.7);
                        }
                        
                        100% {
                          box-shadow: 0 0 5px 15px transparent;
                        }
                      }

you need to define if inside card_mod

unless @rhysb has some other solution

[alnavasa (A)]

I am using mushroom cards with noctis theme, and this buttons are hard to be seeing,
what element on the theme should be changed so I can set a different bg-color

[rhysb (Rhys)]

This may be what you are wanting.

Mushroom Inset Ping Animation:

type: custom:mushroom-template-card
icon: mdi:mushroom
icon_color: red
primary: Mushroom
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-animation: ping 2s infinite;
      }
      @keyframes ping {
        0% {
          box-shadow: 0 0 1px 1px rgba(var(--rgb-red), 0.7) inset;
        }
        
        100% {
          box-shadow: 0 0 5px 15px transparent inset;
        }
      }

[rhysb (Rhys)]

Should work. Share your code.

[itsboo]

Exactly!!! thanks

[rhysb (Rhys)]

Add primary-background-color: to your theme file with the color you want.

[sebbaT]

Hi all!

Does anyone have any problems with animations working in Safari? The animation below works fine in chrome but not in Safari.

Any tips or pointers would be much appreciated!

type: custom:mushroom-template-card
style: |
  ha-card {
    padding-top: 25px !important;
    padding-bottom: 15px !important;
    align-items: center !important;
    background-color: rgba(28,28,28,1) !important;
  }
  {% set state=states('binary_sensor.test_sensor') %}
  {% if state == 'off' %}
    mushroom-shape-icon {
      animation: fade 4s ease-in-out infinite both;
    }
      @keyframes fade {
        0%, 50%, 100% {
          opacity: 1;
        }
        25%, 75% {
          opacity: 0.2;
        }
      }
  {% endif %}
primary: Test Title Text
icon: |-
  {% set mode = states('binary_sensor.test_sensor') %}
  {% if mode == 'off' %}
  mdi:power-off
  {% elif mode == 'on' %}
  mdi:power-on
  {% else %}
  mdi:power
  {% endif %}
icon_color: |-
  {% set status = states('binary_sensor.test_sensor) %}
  {% if status == 'off' %}
  red
  {% elif status == 'on' %}
  green
  {% else %}
  red
  {% endif %}
tap_action: none

[rhysb (Rhys)]

Do you have card-mod installed? Can be found in HACS.

[rhysb (Rhys)]

Just tested here and next/previous show up correctly for me. Perhaps you could try re-adding the integration.

[Mosher]

mind sharing yaml?

[alnavasa (A)]

I am afraid is not that one:

  # Background
  background-color: '#242e42'
  primary-background-color: red
  background-color-2: '#20293c' 
  secondary-background-color: 'none'
  markdown-code-background-color: 'var(--background-color)'

[rhysb (Rhys)]

What background did you want? Card background? Try card-background-color:.

[wernazz]

Thanks for your fast reply. That actually worked for whatever reason. Really nice card Thank you!

Is is possible to change the color of the volume bar?

[rhysb (Rhys)]

This also changes the volume bar color:

Mushroom Cards - Build a beautiful dashboard easily (Part 1)

Yes, you can change the Mushroom Media Player icon color like this: [Mushroom MediaPlayer Icon Color] type: custom:mushroom-media-player-card entity: media_player.currently_playing volume_controls: - volume_set media_controls: - previous - play_pause_stop - next - on_off use_media_info: true card_mod: style: | ha-card { --rgb-state-media-player: var(--rgb-pink); } Or in your theme file with the undocumented variable: mush-rgb-state-media-player: var(--mush-rgb-gree…

[wernazz]

I try not to display anything when there is no light on.

Example: If two lights are on, the text “There are 2 lights on” is displayed. If no light is on, there should be nothing. Is that possible?

YAML:

type: custom:mushroom-template-card
primary: Alle Lichter
secondary: >-
  Es sind {{ expand(states.light.alle_lichter) | selectattr( 'state', 'eq','on')
  | list | count }} Lichter an!
icon: mdi:lightbulb-on-outline
entity: light.alle_lichter
icon_color: |-
  {% if is_state('light.alle_lichter', 'on') %}
    cyan
  {% endif %}
  {% if is_state('light.alle_lichter', 'off') %}
    grey
  {% endif %}
tap_action:
  action: toggle
card_mod:
  style: |
    ha-card:active {
        transform: scale(0.975);
        transition: 0s;
    }

[rhysb (Rhys)]

Yes, with a conditional card.

[wernazz]

Thanks it changes the color of the bar but the entity picture/background of the song playing is gone. I tried playing around with placing the code snippet for the volume bar color elsewhere but it stays the same/syntax is completely wrong. No idea if i did it right.

YAML:

type: custom:mushroom-media-player-card
entity: media_player.ytube_music_player
use_media_artwork: false
use_media_info: true
media_controls:
  - play_pause_stop
  - previous
  - next
collapsible_controls: true
volume_controls:
  - volume_set
  - volume_mute
  - volume_buttons
show_volume_level: true
fill_container: false
tap_action:
  action: toggle
style: |
  ha-card {
    {% if is_state('media_player.ytube_music_player', 'off') %}
    {% else %}
      background-image: url( '{{ state_attr( "media_player.ytube_music_player", "entity_picture" ) }}' );
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-color: rgba(var(--rgb-card-background-color),0.8);
      background-blend-mode: overlay;

     position: relative;
    {% endif %}  
  }
card_mod:
  style: |
    ha-card {
      --rgb-state-media-player: var(--rgb-teal);
    }