joseluis9595/lovelace-navbar-card v0.17.0

NavbarCard v0.17.0

on GitHub

✨ New media_player widget

This release brings in a major new feature: a media_player widget that displays on top of navbar-card when the configured media_player is playing. This is heavily inspired by the great work of @jlnbln

Enable it by adding your media player entity under the new media_player config:

type: custom:navbar-card
media_player:
  entity: media_player.your_entity_id
...

⚠️ CSS styles

To be able to properly implement the media player widget, some internal refactor was needed for navbar-card. Said refactor means some CSS class names have been renamed or moved:

• .navbar → Now the main container div, wrapping both .navbar-card and .media-player. Controls the positioning of the card on the screen.
• .navbar-card → The ha-card for the navbar itself. Contains all card styles.
• .media-player → The new ha-card for the media player widget.

Positioning-only custom styles

For users who have custom styles to just change positioning related styles, no changes are required:

type: custom:navbar-card
...
styles: |
  .navbar.desktop.bottom {
    bottom: 100px;
  }

Visual customization styles

If your custom styles affect visuals (border-radius, background, colors, etc.), update them to reference .navbar-card:

type: custom:navbar-card
...
styles: |
  .navbar-card.desktop.bottom {
    background: green;
    border-radius: 300px;
  }

All changes in this release

• New media_player config (closes #15 ).
• CSS styles revamp.
• Fix: remove auto_padding styles from the DOM when unmounting navbar-card.
• Update README with internal CSS variables from navbar-card.

⭐ Support navbar-card

If you enjoy using navbar-card and want to support its continued development, consider buying me a coffee (or a beer 🍺), or becoming a GitHub Sponsor!

Your support means a lot and helps keep the project alive and growing. Thank you! 🙌