Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 2)

Nope, I asked u in edited message above :slight_smile:

I was unable to create the effect of smoke rising from belowā€¦ I was only able to hide it from bottom to top and on the contrary, I cannot make the hiding go all the time from below in a circle.

sorry I missed the edit, message me the card code if youā€™d like.

Btw, I also had several questions regarding the lighting card (or template card with lighting):

  1. I didnā€™t find the answer on my own or didnā€™t understand how to apply it, is it possible to show the current color of the entity as the native HA does?

  2. I searched and tried to implement it myself, but so far to no avail, I would like to try the effect of a pulsating radius if the lighting is on (similar to how we do it with person cards).

Here is my code: Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 2) - #48 by SoulAssassin

Here is the icon: Mushroom Cards - Build a beautiful dashboard easily šŸ„ (Part 2) - #55 by SoulAssassin

From bottom to topā€¦

card_mod:
  style: |
    ha-state-icon {
      animation: air 3s infinite linear;
     }
    @keyframes air {
      0%, 100% { clip-path: inset(0 0 38% 0); }
      0% { clip-path: inset(0 0 0 0 ); }
     }
    :host {
      --icon-size: 80px !important;
      perspective: 900px;
       }
1 Like

Hello everyone,

So, long story short, i am trying to recreate @rhysb dashboard setup from here
So far it seems that the styling part is defeating me :slight_smile:

How it should look like:

How it looks for me

Also, blurring of the card doesnā€™t work with mushroom theme, only with the minimalist theme. However it still doesnt look like the original.

How it should look like:

Mine (mushroom theme)

Mine (minimalist theme)

Top sticky card:

card_mod:
  style: |
    /* Remove styling from top card with chips */
    ha-card {
      /* Allow pseudo elements to display outside card */
      overflow: visible !important;
      /* Remove gap at top of card */
      margin-top: calc(-1 * var(--mush-chip-spacing, 0px));
      /* Remove styling from card */
      box-shadow: none;
      border: none;
      background: none;
      padding: var(--mush-chip-spacing, 8px);
      transition: all 0s;
    }
    /* Make card sticky at top of page */
    :host {
      position: sticky;
      z-index: 4;
      top: 0px;
    }
    /* Pseudo element to hide card styling when at top */
    ha-card:after {
      content: "";
      /* Make fixed so element scrolls up */
      position: absolute;
      top: 0px;
      /* Adjust height when notifications visible */
      height: {{ '104px' if is_state('input_boolean.menuconsumi', 'on') else '60px' }};
      /* Set width to match */
      width: 100%;
      max-width: calc(var(--column-max-width) - 2 * var(--ha-card-border-width, 1px) - var(--mush-chip-spacing, 8px));
      /* Center element on page */
      left: 50%;
      transform: translateX(-50%);
      /* Position between chips and background pseudo elemnt */
      z-index: -1;[quote="system, post:1, topic:693055, full:true"]
      /* Match background to main card */
      background: rgba(var(--rgb-card-background-color), 0);
      border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
    }
    /* Pseudo element for background & other card styling */
    ha-card:before {
      content: "";
      /* Position & size card behind chips */
      position: absolute;
      top: 0px;
      left: 0px;
      height: 100%;
      /* Adjust width to account for border */
      width: calc(100% - 2 * var(--ha-card-border-width, 1px));
      /* Position card at back */
      z-index: -1;
      /* Blur content behind card */
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      /* Adjust opacity of card */
      background: rgba(var(--rgb-card-background-color), 0.1);
      /* Set styling of card */
      border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
      box-shadow: 20px !important;
      border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #
    }

Bottom card:

card_mod:
  style: |
    ha-card {
      /* Set padding of card */
      padding: 8px 8px 12px;

      /* Move card up to match header card */
      margin-top: -10px;

      /* Styling of card background */
      background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color)) !important;
      border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);

      transition: all 0s;
    }

Any help is welcomed.
Thanks

3 Likes

Hi

Do you have any idea about height control in tile card for light brightness?

or is it even possible ?

I can hide data but can not control light bar height.

The code I tried is.

type: tile
entity: light.hue_color_lamp_1_2
features:
  - type: light-brightness
card_mod:
  style: |
      ha-card .content {
        display: none !important;
      }
      ha-card {
        background: transparent;   
        padding: 0px 11px 11px;
        --mush-rgb-disabled: 189,189,189;
        --mush-rgb-state-light: 255, 152, 0;
        --control-height: 16px;
        --control-top: 16px;
        --control-border-radius: 5px;

You are using a tile card not a mushroom card.

There is a Tile thread that was just started. @Mariusthvdb may knowā€¦

@berkans Got it to workā€¦

type: tile
entity: light.tv_lights
hide_state: false
show_entity_picture: false
features:
  - type: light-brightness
tap_action:
  action: toggle
icon: mdi:light-recessed
card_mod:
  style:
    hui-card-features$:
      hui-light-brightness-card-feature$:
        ha-control-slider$: |
          .slider {
            --control-slider-border-radius: 4px !important;
             height:15px !important; 
              }
    .: |
        ha-card .content {
         display: none !important;
         }
5 Likes

Perfect. Thank you very much.

Hi thanks very much for this wonderful set of cards.
Thereā€™s something I couldnā€™t achieve yet with the custom template or light cards.

I use the template cards badge to show if thereā€™s presence detected in the rooms where I have detectors
image

The problem is that I couldnā€™t add this feature to the light cards, and if using the template cards I cannot reach the advanced setting for the lights (colour, intensityā€¦)

Iā€™d like to add a badge when detected any zone where I have it set (these are light cards), as I have a FP2 that gives that info

Is there any way to achieve it?
Thanks!

Here I would like to place it
image

Share your code and ill make it happend :slight_smile:

to startā€¦The card you are using is a mini-media-player, not a Mushroom card. The Mini-media player has itā€™s own mod settings youā€™ll need to adjust.

checkout this extensive guide and look for mini-media-player

3 Likes

Hello Everyone!

Does anyone has the code, or something similar, to create this?

image

The important part is, Iā€™m not sure how to add the three buttons side by side, any help would be kindly appreciated, thanks!

Its a Tile or a Mushroom Cover Card. They are automatically added.

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Garage Door
    secondary: >-
      {% if is_state('cover.garage_door','open') and
      is_state('binary_sensor.garage_door_open','on') %}
        Open and Unlocked
      {% elif is_state('binary_sensor.garage_door_open','on') %}
        Door Open
      {% elif is_state('cover.garage_door','open') %}
        Unlocked
      {% else %}
        Closed
      {% endif%}
    icon: >-
      {% if is_state('cover.garage_door','open') and
      is_state('binary_sensor.garage_door_open','on') %}
        mdi:garage-open-variant
      {% elif is_state('binary_sensor.garage_door_open','on') %}
        mdi:garage-open-variant
      {% elif is_state('cover.garage_door','open') %}
        mdi:garage-alert-variant
      {% else %}
        mdi:garage-variant-lock
      {% endif%}
    icon_color: >-
      {% if is_state('cover.garage_door','closed') and
      is_state('binary_sensor.garage_door_open','off') %}
        green
      {% else %}
        red
      {% endif%}
    badge_icon: |-
      {% set bl = states('sensor.garage_door_sensor_battery_level') | int %}
      {% if bl < 10 %} mdi:battery-outline
      {% elif bl < 20 %} mdi:battery-10
      {% elif bl < 30 %} mdi:battery-20
      {% elif bl < 40 %} mdi:battery-30
      {% elif bl < 50 %} mdi:battery-40
      {% elif bl < 60 %} mdi:battery-50
      {% elif bl < 70 %} mdi:battery-60
      {% elif bl < 80 %} mdi:battery-70
      {% elif bl < 90 %} mdi:battery-80
      {% elif bl < 100 %} mdi:battery-90
      {% elif bl == 100 %} mdi:battery
      {% else %} mdi:battery-unknown
      {% endif %}
    badge_color: |-
      {% set bl = states('sensor.garage_door_sensor_battery_level') | int %}
      {% if bl < 10 %} red
      {% elif bl < 20 %} red
      {% elif bl < 30 %} red
      {% elif bl < 40 %} orange
      {% elif bl < 50 %} orange
      {% elif bl < 60 %} green
      {% elif bl < 70 %} green
      {% elif bl < 80 %} green
      {% elif bl < 90 %} green
      {% elif bl < 100 %} green
      {% elif bl == 100 %} green
      {% else %} disabled
      {% endif %}
    tap_action:
      action: none
    card_mod:
      style: |
        mushroom-badge-icon {
          left: -3px;
        }
  - type: custom:mushroom-cover-card
    entity: cover.garage_door
    name: Garage Door
    primary_info: none
    secondary_info: none
    icon_type: none
    tap_action:
      action: none
    show_buttons_control: true
    card_mod:
      style: |
        ha-card {
          margin-top: -12px;
        }
card_mod:
  style: |
    ha-card {
      {% if is_state('cover.garage_door','closed') and
      is_state('binary_sensor.garage_door_open','off') %}
          background: rgba(101,170,91,0.2);
      {% else %}
          background: rgba(226,84,66,0.2);
      {% endif %}
    }

Hey guys! I need help. a long time ago my animations stopped working, and I tried everything but I cant get them to work, can someone help me and checkout what Iā€™m doing wrong?

Thank you :smiley:

example:

cards:
  - type: custom:mushroom-template-card
    icon: mdi:sofa
    entity: light.livingroom_group
    primary: Living Room
    icon_color: |-
      {% if is_state('light.livingroom_group', 'on') %}
        orange
      {% endif %}
    tap_action:
      action: toggle
    hold_action:
      action: navigate
      navigation_path: livingroom
    secondary: '{{ states(''sensor.atc_0ae9_temperature'') }}Ā°F'
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {

          {{  '--icon-animation: ducky 2s ease-in-out infinite;' if
          is_state('light.livingroom_group', 'on') }} 
            transform-origin: 50% 75%;
          }

          @keyframes ducky {
            0%, 100% { transform: rotate(-15deg); }
            50% { transform: rotate(15deg); }
          }
  - type: custom:mushroom-template-card
    icon: mdi:bed-queen
    primary: Bedroom
    icon_color: |-
      {% if is_state('light.bedroom_bathroom_group', 'on') %}
        orange
      {% endif %}
    tap_action:
      action: toggle
    hold_action:
      action: navigate
      navigation_path: bedroom
    secondary: '{{ states(''sensor.ewelink_th01_temperature'') }}Ā°F'
    entity: light.bedroom_bathroom_group
    card_mod:
      style:
        mushroom-shape-icon$: |
          ha-icon {

          {{  '--icon-animation: ducky 2s ease-in-out infinite;' if
          is_state('light.bedroom_bathroom_group', 'on') }} 
            transform-origin: 50% 75%;
          }

          @keyframes ducky {
            0%, 100% { transform: rotate(-15deg); }
            50% { transform: rotate(15deg); }
          }

image

ha-icon should be ha-state-icon and --icon-animation: should just be animation:

An example

type: custom:mushroom-template-card
primary: Spin
icon: mdi:fan
icon_color: red
card_mod:
  style: |
    ha-state-icon {
      animation: rotate .5s infinite linear}
     @keyframes rotate {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(-359deg);
        }
      }      
1 Like

Thanksss! That solved it. :slight_smile:
is there a way to make it so that the animation only will work when the entity is on?