Mushroom Style Changes

[jhemak]

Style changes were made in Mushroom between v3.6.4 to v4.0.0. These changes may need to be incorporated into timer-bar-card as the height of cards no longer matches Mushroom when using v4.0.0. https://github.com/piitaya/lovelace-mushroom/pull/1471.

Left is a timer-bar-card; right is a mushroom-template-card.

[EthanBezz]

As a temporary solution, and if you have card-mod installed, you can add this to the end of your timer-bar-card's configuration:

card_mod:
  style: |
    ha-card {
      transition: none !important;
      padding: 0px !important;
    }

So for example:

type: custom:timer-bar-card
entity: timer.example_timer
name: "My Example Timer"
card_mod:
  style: |
    ha-card {
      transition: none !important;
      padding: 0px !important;
    }

[jhemak]

Thanks @EthanBezz!

[EthanBezz]

Now that Home Assistant version 2024.8.0 has been released, more card-mod magic is needed in order for the timer-bar-card to match the slimmer look of the other cards.

Replace the old temporary solution with this newer temporary solution:

card_mod:
  style: |
    ha-card {
      transition: none !important;
      padding: 0px !important;
      --spacing: var(--mush-spacing, 10px) !important;
      --icon-size: var(--mush-icon-size, 36px) !important;
    }
    div.bar-container.pointer {
      min-height: 1em !important;
    }

[rianadon]

Thanks for keeping up with these changes! It seems the mushroom cards are changing a lot as the Home Assistant team finishing up the new sections layout.

I'll wait for them to finish before updating the card to be consistent. Then, I can tackle updating to the latest mushroom and adding whatever sections layout requires in one go.

[tempus2016]

Now that Home Assistant version 2024.8.0 has been released, more card-mod magic is needed in order for the timer-bar-card to match the slimmer look of the other cards.

Replace the old temporary solution with this newer temporary solution:

card_mod:
  style: |
    ha-card {
      transition: none !important;
      padding: 0px !important;
      --spacing: var(--mush-spacing, 10px) !important;
      --icon-size: var(--mush-icon-size, 36px) !important;
    }
    div.bar-container.pointer {
      min-height: 1em !important;
    }

Do you know what the css would be to make the state of the timer bold to match the mushroom theme?

[jhemak]

@EthanBezz and @rianadon - looks like the card_mod hack above is no longer working as of 2025.1. The cards are now showing much taller than they should be. Do you know how to fix?

[yestrdave]

@jhemak Mine blew up to.

[jhemak]

The issue, at least for me, was introduced by version 3.5.0 of card-mod. It appears the release has been pulled and we should return to version 3.4.4. Once I did that, the problem I reported immediately above was resolved.

[yestrdave]

Thank you. I got tired of fixing it and deleted css out. Doesn’t look as good but timer works. Hopefully someday this works with mushroom card and the new sections view.

[rianadon]

I'm working on a fix for this plus supporting the sections view. Thanks everyone for your patience.

[rianadon]

Fixed in v1.31.0 🎉

[jhemak]

You rock - thank you!

I have only one card-mod left now ... which is the below to accommodate timers of >1 hour. Not sure if you would like to incorproate it as well?

card_mod:
  style: |
    div.text-content.value.pointer {
      width: 4em !important;
    }

[rianadon]

This should be configurable with the text_width option.

[AJErazzor]

is there anything special I need to do to apply this - mine still padded after updating

[rianadon]

The padding will only disappear in mushroom mode. So add mushroom: to your config and you'll see it. You'll also need to have mushroom cards installed.

Now that mushroom cards and the included tile cards look practically the same, I need to sometime decouple this card from mushroom cards and start calling the mushroom stuff "tile card appearance" or something similar. That'll allow me to make this style the default as well. That's a lot of work, however, so for now I'm reliant on mushroom configuration.

[AJErazzor]

as soon as I add in mushroom: it borks the layout? I have mushroom installed but not sure what mushroom cards is?

[rianadon]

You have the right thing installed! I meant mushroom not mushroom cards.

I should have better managed the logic for putting the card into mushroom mode though. In your screenshot it's currently in a twilight zone of being sized like a mushroom card but still looking like a normal card.

Change

entities:
  - entity: timer.outdoor_water_valve_timer
    name: Water timer

to

entity: timer.outdoor_water_valve_timer
name: Water timer

and the card should now look like a mushroom card.

To make the card full-width, you can go to the layout tab then check "full width card".

[AJErazzor]

Thank you that changed fixed it!!!