Mushroom - Sticky Card

Bonjour à tous,

J’ai découvert la possibilité « d’attacher » une card pour que celle-ci reste visible.

  • Card attachée en haut (menu):

menu

Code complet
type: custom:stack-in-card
cards:
  - type: conditional
    conditions:
      - entity: group.grp_update_all
        state: 'on'
    card:
      type: custom:mushroom-chips-card
      chips:
        - type: template
          entity: input_boolean.notifications
          icon: mdi:bell
          tap_action:
            action: fire-dom-event
            local_conditional_card:
              action: set
              ids:
                - home: hide
                - light: hide
                - portail: hide
                - camera: hide
                - media: hide
                - divers: hide
                - EDF: hide
                - device: hide
                - serveur: hide
                - net: toggle
                - meteo: hide
          hold_action:
            action: none
          card_mod:
            style: |
              /* Notification indicator */
              ha-card {
                margin: 0px 0px 20px;
              }
              ha-card:after {
                /* Turn on indicator if there is a notification */
                {% set notifications = (expand(states.group.grp_update_all) | selectattr('state', 'eq', 'on') | list | count) %}

                {% if notifications > 0 %}
                  content: "";
                {% endif %}

                /* Position & style notification */
                position: absolute;
                background: rgb(var(--rgb-red));
                border-radius: 50%;
                top: 6px;
                right: 6px;
                width: 8px;
                height: 8px;
              } 
      alignment: end
  - type: custom:swipe-card
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            secondary: Home
            icon: mdi:home
            layout: vertical
            icon_color: blue
            tap_action:
              action: fire-dom-event
              local_conditional_card:
                action: set
                ids:
                  - home: toggle
                  - light: hide
                  - portail: hide
                  - camera: hide
                  - media: hide
                  - divers: hide
                  - EDF: hide
                  - device: hide
                  - serveur: hide
                  - net: hide
                  - meteo: hide
            card_mod:
              style: |
                ha-card {
                  /* Set size and spacing of button */
                  width: 58px;
                  --spacing: 8px;
                  padding-bottom: calc(var(--spacing) * 1.618) !important;

                  /* Styling of button */
                  background: var(--card-background-color) !important;
                  box-shadow: var(--ha-card-box-shadow) !important;
                  border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

                  /* Center button */
                  margin-left: auto;
                  margin-right: auto;
                  transition: all 0s;
                }

                /* Add subtle color on hover */
                ha-card:hover {
                  background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 25%, var(--card-background-color)) !important;
                }
          - type: custom:mushroom-template-card
            secondary: Light
            icon: mdi:lightbulb
            icon_color: amber
            layout: vertical
            tap_action:
              action: fire-dom-event
              local_conditional_card:
                action: set
                ids:
                  - home: hide
                  - light: toggle
                  - portail: hide
                  - camera: hide
                  - media: hide
                  - divers: hide
                  - EDF: hide
                  - device: hide
                  - serveur: hide
                  - net: hide
                  - meteo: hide
            card_mod:
              style: |
                ha-card {
                  /* Set size and spacing of button */
                  width: 58px;
                  --spacing: 8px;
                  padding-bottom: calc(var(--spacing) * 1.618) !important;

                  /* Styling of button */
                  background: var(--card-background-color) !important;
                  box-shadow: var(--ha-card-box-shadow) !important;
                  border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

                  /* Center button */
                  margin-left: auto;
                  margin-right: auto;
                  transition: all 0s;
                }

                /* Add subtle color on hover */
                ha-card:hover {
                  background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 25%, var(--card-background-color)) !important;
                }
          - type: custom:mushroom-template-card
            primary: ''
            secondary: Portail
            icon: mdi:gate
            icon_color: |2-
                {% if is_state('switch.portillon', 'on') %}
                  red
                {% else %}
                  green
                {% endif %}
            layout: vertical
            tap_action:
              action: fire-dom-event
              local_conditional_card:
                action: set
                ids:
                  - home: hide
                  - light: hide
                  - portail: toggle
                  - camera: hide
                  - media: hide
                  - divers: hide
                  - EDF: hide
                  - device: hide
                  - serveur: hide
                  - net: hide
                  - meteo: hide
                  - meteo_menu: hide
            card_mod:
              style: |
                ha-card {
                  /* Set size and spacing of button */
                  width: 58px;
                  --spacing: 8px;
                  padding-bottom: calc(var(--spacing) * 1.618) !important;

                  /* Styling of button */
                  background: var(--card-background-color) !important;
                  box-shadow: var(--ha-card-box-shadow) !important;
                  border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

                  /* Center button */
                  margin-left: auto;
                  margin-right: auto;
                  transition: all 0s;
                }

                /* Add subtle color on hover */
                ha-card:hover {
                  background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 25%, var(--card-background-color)) !important;
                }
          - type: custom:mushroom-template-card
            primary: ''
            secondary: Caméra
            icon: mdi:cctv
            layout: vertical
            icon_color: |2-
                {% if is_state('group.grp_motion', 'on') %}
                  red
                {% else %}
                  green
                {% endif %}
            tap_action:
              action: fire-dom-event
              local_conditional_card:
                action: set
                ids:
                  - home: hide
                  - light: hide
                  - portail: hide
                  - camera: toggle
                  - media: hide
                  - divers: hide
                  - EDF: hide
                  - device: hide
                  - serveur: hide
                  - net: hide
                  - meteo: hide
            card_mod:
              style: |
                ha-card {
                  /* Set size and spacing of button */
                  width: 58px;
                  --spacing: 8px;
                  padding-bottom: calc(var(--spacing) * 1.618) !important;

                  /* Styling of button */
                  background: var(--card-background-color) !important;
                  box-shadow: var(--ha-card-box-shadow) !important;
                  border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

                  /* Center button */
                  margin-left: auto;
                  margin-right: auto;
                  transition: all 0s;
                }

                /* Add subtle color on hover */
                ha-card:hover {
                  background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 25%, var(--card-background-color)) !important;
                }
          - type: custom:mushroom-template-card
            secondary: Media
            icon: |2-
                {% if is_state('media_player.currently_playing', 'playing') %}
                  mdi:play
                {% else %}
                  mdi:multimedia
                {% endif %}
            layout: vertical
            icon_color: |2-
                {% if is_state('media_player.currently_playing', 'playing') %}
                  red
                {% else %}
                  grey
                {% endif %}
            tap_action:
              action: fire-dom-event
              local_conditional_card:
                action: set
                ids:
                  - home: hide
                  - light: hide
                  - portail: hide
                  - camera: hide
                  - media: toggle
                  - divers: hide
                  - EDF: hide
                  - device: hide
                  - serveur: hide
                  - net: hide
                  - meteo: hide
            card_mod:
              style: |
                ha-card {
                  /* Set size and spacing of button */
                  width: 58px;
                  --spacing: 8px;
                  padding-bottom: calc(var(--spacing) * 1.618) !important;

                  /* Styling of button */
                  background: var(--card-background-color) !important;
                  box-shadow: var(--ha-card-box-shadow) !important;
                  border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

                  /* Center button */
                  margin-left: auto;
                  margin-right: auto;
                  transition: all 0s;
                }

                /* Add subtle color on hover */
                ha-card:hover {
                  background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 25%, var(--card-background-color)) !important;
                }
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            secondary: Divers
            icon: mdi:dots-hexagon
            layout: vertical
            icon_color: blue
            tap_action:
              action: fire-dom-event
              local_conditional_card:
                action: set
                ids:
                  - home: hide
                  - light: hide
                  - portail: hide
                  - camera: hide
                  - media: hide
                  - divers: toggle
                  - EDF: hide
                  - device: hide
                  - serveur: hide
                  - net: hide
                  - meteo: hide
            card_mod:
              style: |
                ha-card {
                  /* Set size and spacing of button */
                  width: 58px;
                  --spacing: 8px;
                  padding-bottom: calc(var(--spacing) * 1.618) !important;

                  /* Styling of button */
                  background: var(--card-background-color) !important;
                  box-shadow: var(--ha-card-box-shadow) !important;
                  border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

                  /* Center button */
                  margin-left: auto;
                  margin-right: auto;
                  transition: all 0s;
                }

                /* Add subtle color on hover */
                ha-card:hover {
                  background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 25%, var(--card-background-color)) !important;
                }
          - type: custom:mushroom-template-card
            secondary: EDF
            icon: mdi:flash
            icon_color: lime
            layout: vertical
            tap_action:
              action: fire-dom-event
              local_conditional_card:
                action: set
                ids:
                  - home: hide
                  - light: hide
                  - portail: hide
                  - camera: hide
                  - media: hide
                  - divers: hide
                  - EDF: toggle
                  - device: hide
                  - serveur: hide
                  - net: hide
                  - meteo: hide
            card_mod:
              style: |
                ha-card {
                  /* Set size and spacing of button */
                  width: 58px;
                  --spacing: 8px;
                  padding-bottom: calc(var(--spacing) * 1.618) !important;

                  /* Styling of button */
                  background: var(--card-background-color) !important;
                  box-shadow: var(--ha-card-box-shadow) !important;
                  border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

                  /* Center button */
                  margin-left: auto;
                  margin-right: auto;
                  transition: all 0s;
                }

                /* Add subtle color on hover */
                ha-card:hover {
                  background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 25%, var(--card-background-color)) !important;
                }
          - type: custom:mushroom-template-card
            primary: ''
            secondary: Device
            icon: mdi:devices
            icon_color: pink
            layout: vertical
            tap_action:
              action: fire-dom-event
              local_conditional_card:
                action: set
                ids:
                  - home: hide
                  - light: hide
                  - portail: hide
                  - camera: hide
                  - media: hide
                  - divers: hide
                  - EDF: hide
                  - device: toggle
                  - serveur: hide
                  - net: hide
                  - meteo: hide
            card_mod:
              style: |
                ha-card {
                  /* Set size and spacing of button */
                  width: 58px;
                  --spacing: 8px;
                  padding-bottom: calc(var(--spacing) * 1.618) !important;

                  /* Styling of button */
                  background: var(--card-background-color) !important;
                  box-shadow: var(--ha-card-box-shadow) !important;
                  border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

                  /* Center button */
                  margin-left: auto;
                  margin-right: auto;
                  transition: all 0s;
                }

                /* Add subtle color on hover */
                ha-card:hover {
                  background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 25%, var(--card-background-color)) !important;
                }
          - type: custom:mushroom-template-card
            primary: ''
            secondary: Serveur
            icon: mdi:server-network
            layout: vertical
            icon_color: |2-
                {% if is_state('device_tracker.dalg_udm', 'home') %}
                  green
                {% else %}
                  red
                {% endif %}
            tap_action:
              action: fire-dom-event
              local_conditional_card:
                action: set
                ids:
                  - home: hide
                  - light: hide
                  - portail: hide
                  - camera: hide
                  - media: hide
                  - divers: hide
                  - EDF: hide
                  - device: hide
                  - serveur: toggle
                  - net: hide
                  - meteo: hide
            card_mod:
              style: |
                ha-card {
                  /* Set size and spacing of button */
                  width: 58px;
                  --spacing: 8px;
                  padding-bottom: calc(var(--spacing) * 1.618) !important;

                  /* Styling of button */
                  background: var(--card-background-color) !important;
                  box-shadow: var(--ha-card-box-shadow) !important;
                  border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

                  /* Center button */
                  margin-left: auto;
                  margin-right: auto;
                  transition: all 0s;
                }

                /* Add subtle color on hover */
                ha-card:hover {
                  background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 25%, var(--card-background-color)) !important;
                }
          - type: custom:mushroom-template-card
            secondary: Net
            icon: mdi:lan
            layout: vertical
            icon_color: |-
              {% if is_state('group.grp_update_all', 'on') %}
                red
              {% elif not is_state('sensor.hacs', '0') %}
                red
              {% else %}
                green
              {% endif %}
            badge_icon: none
            badge_color: |-
              {% if is_state('group.grp_update_all', 'on') %}
                red
              {% elif not is_state('sensor.hacs', '0') %}
                red
              {% else %}
                disable
              {% endif %}
            tap_action:
              action: fire-dom-event
              local_conditional_card:
                action: set
                ids:
                  - home: hide
                  - light: hide
                  - portail: hide
                  - camera: hide
                  - media: hide
                  - divers: hide
                  - EDF: hide
                  - device: hide
                  - serveur: hide
                  - net: toggle
                  - meteo: hide
            card_mod:
              mushroom-shape-icon$: |
                ha-icon {
                  {% set state = states(config.entity) %}
                  {% if state == 'on' %}
                    --icon-animation: fade-out 1.5s infinite;
                  {% endif %}
                }
                @keyframes fade-out {
                  0% { opacity:1; }
                  50% { opacity:0; }
                  100% { opacity:1; }
                }
              style: |
                ha-card {
                  /* Set size and spacing of button */
                  width: 58px;
                  --spacing: 8px;
                  padding-bottom: calc(var(--spacing) * 1.618) !important;

                  /* Styling of button */
                  background: var(--card-background-color) !important;
                  box-shadow: var(--ha-card-box-shadow) !important;
                  border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;

                  /* Center button */
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 5px;
                  transition: all 0s;
                }

                /* Add subtle color on hover */
                ha-card:hover {
                  background: color-mix(in srgb, var(--{{ config.icon_color }}-color) 25%, var(--card-background-color)) !important;
                }
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, 8px));

      /* 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: 9;
      top: var(--header-height);
    }
    /* Pseudo element to hide card styling when at top */
    ha-card:after {
      content: "";

      /* Center element on page */
      left: 50%;
      transform: translateX(-50%);

      /* Position between chips and background pseudo elemnt */
      z-index: -1;

      /* Match background to main card */
      background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color));
      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.3);

      /* Set styling of card */
      border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
      box-shadow: var(--ha-card-box-shadow);
      border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
    }

Partie du code pour attacher le menu en haut
card_mod:
  style: |
    :host {
      position: sticky;
      z-index: 9;
      top: var(--header-height);
    }
  • Card attachée en bas (media card) :

media

Code complet
type: custom:mushroom-media-player-card
entity: media_player.currently_playing
icon: mdi:play
use_media_info: true
icon_type: entity-picture
show_volume_level: false
media_controls:
  - play_pause_stop
  - next
volume_controls:
  - volume_set
fill_container: false
layout: horizontal
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      title: Currently Playing
      content:
        type: custom:stack-in-card
        cards:
          - type: custom:mushroom-media-player-card
            entity: media_player.currently_playing
            icon_type: none
            layout: vertical
            media_controls:
              - previous
              - play_pause_stop
              - next
            volume_controls:
              - volume_set
              - volume_buttons
            show_volume_level: false
            use_media_info: true
            collapsible_controls: false
            card_mod:
              style:
                mushroom-state-info$: |
                  /* CSS for Mushroom Popup Media Player */
                  .secondary:before {

                    /* Add album name between song title and artist name */
                    {% if state_attr(config.entity, 'media_album_name') != none %}
                      content: "{{ state_attr(config.entity, 'media_album_name')}}\A";
                    {% endif %}

                    /* Format title to fit on seperate line */
                    white-space: pre;
                    text-overflow: ellipsis;
                  }
                .: |
                  ha-card {

                    /* Remove border from media player */
                    --ha-card-border-width: 0;

                    /* Apply album art color to media player icon & volume bar */
                    --rgb-state-media-player: var(--album-art-color);

                    /* Disable transitions */
                    transition: all 0s;
                  }
                  .actions {

                    /* Apply album art color to media player controls */
                    --rgb-primary-text-color: var(--album-art-color);
                    --primary-text-color: rgb(var(--album-art-color));

                    /* Move volume button to seperate row */
                    display: block !important;
                  }
                  ha-card:before {
                    content: "";

                    /* Show album art above media player when active and default image when idle */
                    {% if is_state(config.entity, ['playing', 'paused']) %}
                      background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
                    {% else %}
                      background: url('/local/idle_art.png') center no-repeat;
                    {% endif %}

                    /* Add padding around album art */
                    margin: 0px 4px 16px;

                    /* Add drop shadow to album art */
                    filter: drop-shadow(4px 4px 6px rgba(var(--album-art-color), 0.3));

                    /* Round borders of album art */
                    border-radius: var(--control-border-radius);

                    /* Adjust the album art aspect ratio based on media type */
                    {% set media_type = state_attr(config.entity, 'media_content_type') %}
                    {% if media_type == 'tvshow' %}
                      aspect-ratio: 16 / 9;
                    {% elif media_type == 'movie' %}
                      aspect-ratio: 2 / 3;
                    {% else %}
                      aspect-ratio: 1 / 1;
                    {% endif %}

                    /* Stretch album art to fit box. Fix for if album art is not sized correctly */
                    background-size: 100% 100%;
                  }
                  mushroom-button {

                    /* Size volume button to match other controls and center */
                    display: flex;
                    width: calc((100% / 3) - (var(--spacing) / 3) * 2);
                    margin: auto;
                  }
                  mushroom-media-player-media-control,
                  mushroom-media-player-volume-control {

                    /* Correct margins for volume button on second row */
                    display: flex;
                    margin-right: 0px !important;
                    
                    /* Check if PLAY|STOP are supported and adjust margin accordingly */
                    {% if state_attr(config.entity, 'supported_features') | int | bitwise_and(20480) > 0 %}
                      margin-bottom: var(--spacing) !important;
                    {% endif %}
                  }
          - entity: media_player.currently_playing
            hide:
              icon: true
              name: true
              runtime: true
              source: true
              power: true
              state_label: true
              volume: true
              info: true
              progress: false
              controls: true
            more_info: false
            type: custom:mini-media-player
            toggle_power: false
            group: true
            card_mod:
              style:
                mmp-progress$: |
                  paper-progress {

                    /* Apply album art color to progress bar when paused */
                    --paper-progress-container-color: rgba(var(--album-art-color), 0.2) !important;
                    
                    /* Apply album art color to progress bar when playing */
                    --paper-progress-active-color: rgb(var(--album-art-color)) !important;
                  }
                .: |
                  ha-card {

                    /* Move progress bar up into gap. Check if PLAY|STOP are supported */
                    --base-offset: calc(4 * var(--mush-spacing, 12px)
                                        + 1.33 * var(--mush-spacing, 12px)
                                        + var(--mush-card-primary-line-height, 1.5) * var(--mush-card-primary-font-size, 14px)
                                        + var(--mush-card-secondary-line-height, 1.5) * var(--mush-card-secondary-font-size, 12px)
                                        + var(--mush-control-height, 42px));

                    /* Check if Play (16385) or Stop (4096) are supported and add control button height if they are */
                    {% if state_attr(config.entity, 'supported_features') | int | bitwise_and(20480) > 0 %}
                      --control-offset: calc(var(--mush-spacing, 12px) + var(--mush-control-height, 42px));
                    {% else %}
                      --control-offset: 0px;
                    {% endif %}

                    /* Check if album name is present and add to height if it is */
                    {% set album_name = state_attr(config.entity, 'media_album_name') %}
                    {% if album_name == None or album_name == "" %}
                      --album-offset: 0px;
                    {% else %}
                      --album-offset: calc(var(--mush-card-secondary-line-height, 1.5) * var(--mush-card-secondary-font-size, 12px));
                    {% endif %}

                    bottom: calc(var(--base-offset) + var(--control-offset) + var(--album-offset));

                    /* Correct margins for progress bar */
                    margin: 0px 28px -12px;

                    /* Set height of card to match pregress bar height */
                    height: var(--mmp-progress-height);

                    /* Remove border outline */
                    --ha-card-border-width: 0;

                    /* Round corners of progress bar */
                    --mmp-border-radius: var(--control-border-radius, 12px) !important;

                    /* Set height of progress bar */
                    --mmp-progress-height: 12px !important;

                    /* Remove transitions to prevent progress bar floating in */
                    transition: all 0s;
                  }
        card_mod:
          style: |
            :host {

              /* Assign album art color to variable used in popup */
              --album-art-color:      
              {% if is_state('media_player.currently_playing', ['playing', 'paused']) %}
                {{ states('sensor.muted_color') }}
              {% else %}
                141, 117, 238
              {% endif %};

              /* Remove background because it is applied to popup */
              --ha-card-background: none;

              
            }
      card_mod:
        style:
          ha-dialog$: |
            .mdc-dialog__surface {

              /* Apply gradient background to popup using album art colors. Set to default colors when idle */
              {% if is_state('media_player.currently_playing', ['playing', 'paused']) %}
                background: linear-gradient(305deg, transparent 50%, rgba({{ states('sensor.dark_vibrant_color') }}, 0.4)), 
                            linear-gradient(55deg, transparent 50%, rgba({{ states('sensor.vibrant_color') }}, 0.2)),  
                            linear-gradient(180deg, transparent 40%, rgba({{ states('sensor.dark_muted_color') }}, 0.3));
              {% else %}
                background: linear-gradient(0deg, transparent 40%, rgba(192, 127, 190, 0.3)), 
                            linear-gradient(240deg, transparent 40%, rgba(143, 119, 237, 0.3)),  
                            linear-gradient(120deg, transparent 40%, rgba(122, 181, 239, 0.3));
              {% endif %}
            }
          ha-header-bar$: |
            .mdc-top-app-bar {

              /* Remove header background so that popup background is visible */
              --mdc-theme-primary: none;

              /* Reduced the gap between header and album art */
              margin-bottom: -16px;
            }
          .: |
            :host {

              /* Set width of popup */
              --popup-min-width: 450px;
            }
card_mod:
  style: |
    /* CSS for Mushroom Mini Media Player */
    ha-card {

      /* Apply album art color to volume bar */
      --rgb-state-media-player: var(--album-art-color);

      /* Apply gradient background to sticky media player using album art colors */
      {% if is_state('media_player.currently_playing', ['playing', 'paused']) %}
        --ha-card-background: linear-gradient(135deg, rgba({{ states('sensor.dark_vibrant_color') }}, 0.95), 
                                                      rgba({{ states('sensor.dark_muted_color') }}, 0.95));
      {% endif %} 
    }
    .actions {

      /* Apply album art color to sticky media player controls */
      --rgb-primary-text-color: var(--album-art-color);
      --primary-text-color: rgb(var(--album-art-color));

      /* Allow the album info to display more text */
      max-width: fit-content;
    }
    mushroom-media-player-volume-control {

      /* Fix the width of the volume bar */
      width: 200px;
    }
    :host {

      /* Add background to host to prevent transparent card */
      border-radius: var(--ha-card-border-radius, 12px);

      /* Assign album art color to variable used in sticky media player */
      {% if is_state('media_player.currently_playing', ['playing', 'paused']) %}
        --album-art-color: {{ states('sensor.muted_color') }};
      {% else %}
      
        /* Hide the sticky media player when it is idle */
        display: none !important;
      {% endif %}

      /* Make the media player sticky at the bottom of the page */
      position: sticky !important;
      bottom: 15px !important;
    }

Partie du code pour attacher la card en bas
card_mod:
  style: |
    :host {
      /* Make the media player sticky at the bottom of the page */
      position: sticky !important;
      bottom: 15px !important;
    }

Voici la source :

7 « J'aime »

Bonjour,

Superbe travail, je viens de me convertir à mushroom, ça donne des envies.

Merci du partage

1 « J'aime »

Sympa.
Par contre l’implémentation n’a pas l’air simple…J’ai l’impression qu’il faut répéter les trucs souvent, non ?

Ouai pas forcement facile à mettre en place.
D’après ce que j’ai pu tester, cette solution ne s’applique pas à toutes les cards.
Aucun problème avec le type stack-in-card :

type: custom:stack-in-card

Egalement fonctionnel avec :

type: custom:mushroom-media-player-card

Perso j’ai besoin d’une soluce type menu (sticky, ça me simplifiera les layout) mais avec une mécanique d’include (tout en restant en mode UI)… J’ai pas envie de mettre 5x400 lignes de yaml.
Dommage parce que declustering ça passe pas bien

Je comprends, j’ai plusieurs dashboard pour test dont celui-ci.
J’utilise la local-conditionnal-card que je trouve top. Je reste en YAML
Je masque toutes les card par défaut et ne les affiche que lorsque je clic je un bouton du menu.


Dashboard en vue normal

menu2

Dashboard en mode edition

De cette manière je peux gérer chaque card individuellement.
Juste besoin d’ajouter ça en début de code :

type: custom:local-conditional-card
default: hide
id: divers
card:
  type: ...

Hello, j’aime bien ta sticky bar! Elle est toujours d’actualité? Car il semble que certaine partie ne fonctionnent plus (background blur, la couleur du background etcc…). Merci d’avance si tu peux faire un retour, ou simplement me dire si tu es passé à autre chose!

Salut

Pour moi aucun problème de blur ou autres.
Pour l’effet de couleur lorsqu’il y a une lecture en cours, tout passe par node-red.