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

One more question about animation, I don’t understand which parameter is responsible for expanding the effect throughout the entire window in the icon? Ucan see white stripes on the sides of the animation rising up, I wanted the effect to fill this animation of the toaster completely inside.

Peek 2024-02-27 23-50

            - type: custom:mushroom-template-card
              layout: vertical
              entity: switch.socket
              icon: mdi:toaster-oven
              icon_color: red
              primary: Toaster
              secondary: "{{ states('sensor.power') | round(1) }} W"
              tap_action:
                action: toggle
              double_action:
                action: none
              hold_action:
                action: more-info
              vertical: true
              card_mod:
                  style: |
                    ha-card {
                      border: none !important;
                    }
                    ha-state-icon:before {
                      content: "";
                      position: absolute;
                      width: 25%;
                      height: 30%;
                      margin: 12%;
                      animation: cook 1s linear infinite;
                    }
                    @keyframes cook { 
                      0%, 100% { background: linear-gradient(0deg, orange 0%, transparent 50%, transparent 100%); }
                      33% { background: linear-gradient(0deg, transparent 0%, orange 50%, transparent 100%); }
                      66% { background: linear-gradient(0deg, transparent 0%, transparent 50%, orange 100%); }
                    }
                    :host {
                      --icon-size: 80px !important;
                      perspective: 900px;
                    }
                    ha-card:active {
                      transform: rotateX(25deg);
                      transform-origin: center bottom;
                      transition: 0s;
                    }

Mushroom cards has completely transformed my dashboard :smiley:
But I saw something online where for light entities the slider appears behind the text (not below). Do any of you have an ideia how can this be done with mushroom like I saw below?

1 Like

Yes it’s possible with Mushroom.

Feel free to load your code from an entity or two for advice.

This card has multiple data points on top of the slider (underlined in green)

1 Like

Adjust these

      width: 37%;
      height: 30%;
      left: 22px;
      top: 30px;

image

card_mod:
  style: |
    ha-card {
      border: none !important;
    }
    ha-state-icon:before {
      content: "";
      position: absolute;
      width: 37%;
      height: 30%;
      left: 22px;
      top: 30px;
      animation: cook 1.5s linear infinite;
    }
    @keyframes cook { 
      0%, 100% { background: linear-gradient(0deg, orange 0%, transparent 50%, transparent 100%); }
      33% { background: linear-gradient(0deg, transparent 0%, orange 50%, transparent 100%); }
      66% { background: linear-gradient(0deg, transparent 0%, transparent 50%, orange 100%); }
    }
    :host {
      --icon-size: 80px !important;
      perspective: 900px;
    }
    ha-card:active {
      transform: rotateX(25deg);
      transform-origin: center bottom;
      transition: 0s;
    }

1 Like

Thanks. This is my original code. I don’t know how to start (already have card-mod):slight_smile:

type: custom:mushroom-light-card
entity: light.ceiling_light
show_brightness_control: true
use_light_color: true

I’d recommend starting with this guide and learn a bit before we start with your request…

My code for this card is 184 lines long and that’s simple compared to what some folks have designed.

1 Like

Thanks!

                      width: 37%;
                      height: 30%;
                      left: 11px;
                      top: 17px;
                      margin: 12%;

…is good for me :+1:

@LiQuid_cOOled Btw, can u tell me about that kitchen hood animation that I showed above? Is it possible to add a rising smoke effect? So that it smoke appears from below, and not from above?

1 Like

Did you get the exhaust fan figure out?

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

2 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