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?