Bonjour à tous,
J’ai découvert la possibilité « d’attacher » une card pour que celle-ci reste visible.
- Card attachée en haut (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) :
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 :