Very nice. Can you share the code?
I see from this thread that there are several early examples where Conditional functionality exists, however there’s no documentation about their use on the Mushroom Cards github (none that I can find anyway). Does Mushroom Cards support conditionals? And if so, what are the correct use cases?
Hey Alle D.,
could you pls provide me with code to indicate the number of lights on of the first row in the screenshot: is it a chip-card? Just found the template-card, which can hold a badge-icon… but never saw this for the chip… Anyhow: I have already a sensor counting the number of lights on, but didn’t get the way how to display it nicely other than as “content”… wich looks quite ugly…:
Any help would be great!
Cheers, Hauke
May I ask how you created these seperators (e.g. — Presets —) with those lines left and right of the text?
Certainly! It’s a custom “card” called Text Divider Row. The card is installed via HACS. From there, all you need to do is add two lines of YAML to whichever card you would like.
- type: custom:text-divider-row
text: <Insert your text here>
In case anyone else is interested, I’ve shared the full card with YAML in the Mushroom Inspiration Thread.
1 Like
Hero! Thank you so much.
Edit: Are you using version 1.4.0? 1.4.1 seems to ignore card_mod to remove background. Any ideas?
2 Likes
- type: conditional
conditions:
- entity: sensor.lights_on
state_not: '0'
chip:
type: template
icon: |-
{% if (states.sensor.lights_on.state | int == 1) %}
mdi:lightbulb
{% elif (states.sensor.lights_on.state | int == 0) %}
mdi:lightbulb-off-outline
{% elif (states.sensor.lights_on.state | int > 1) %}
mdi:lightbulb-group
{% endif %}
tap_action:
action: navigate
navigation_path: /lovelace-details/lichter
icon_color: yellow
card_mod:
style: |
ha-card:after {
content: "{{ (states.sensor.lights_on.state | int) }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(105,105,105);
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
if you dont like the number shown in the upper circle … use primary field and remove the card_mod part…
That computer card on the right looks great, can you share please?
unfortunately no 
Trying to set a icon colour based on state that returns 0.1 etc…
feeling a bit stuck
icon_color: |
{% if ('sensor.runeborg_indoor_netatmo_rain_rain') > 0 %}
blue
{% else %}
yellow
{% endif %}
Can you share the sensor definition of the “arrival” sensor whosn in upper left? I use last changed from person entity. However. after restart it shows “last restart”. If you have a better solution … happy to learn. I can imagine an input_time which gets updated once person entity changed. That would survive a reboot. But “lots of code” just for this little feature.
I would like to show the number of the shoping cart items on a chip but it seems that I fail setting the state correctly:
- type: conditional
conditions:
- entity: sensor.shopping_list
state: |
{% if states('sensor.shopping_list') > '0' %} 'on' {% endif %}
chip:
type: template
icon: mdi:cart
content: |
{{ states('sensor.shopping_list') }}
tap_action:
action: navigate
navigation_path: /dashboard-mobile/cart
entity: sensor.shopping_list
icon_color: brown
double_tap_action:
action: none
hold_action:
action: none
Could someone please give me a hint?
Hi,
arrival is very simpel template sensor, so it survive a reboot:
- trigger:
- platform: state
entity_id:
- person.yourname
to: 'home'
sensor:
- unique_id: tmp_person_time_arrived_home_yourname
name: tmp_person_time_arrived_home_yourname
icon: mdi:home-clock
state: >-
{% set last_changed = states.person.yourname.last_changed | as_local %}
{{ as_timestamp(last_changed) | as_datetime() }}
1 Like
A New Year and a new update to my Mushroom Media Player. This one uses Node-Red to extract the album art colors and apply them to the Media Player controls. I was already using this for some WLEDS behind my TV, so it was easy to adapt it for this.
Mushroom Media Player - Compact:
Mushroom Media Player - Compact YAML
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
--card-mod-icon: mdi:television-classic;
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
--card-mod-icon: mdi:movie-roll;
animation: spin 2s linear infinite reverse;
{% elif media_type == 'music' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
{{ 'animation: none;' if not is_state(config.entity, 'playing') }}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--album-art-color), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--album-art-color), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
--ha-card-border-width: 0;
--rgb-state-media-player: var(--album-art-color);
}
.actions {
--rgb-primary-text-color: var(--album-art-color);
--primary-text-color: rgb(var(--album-art-color));
}
- type: conditional
conditions:
- entity: media_player.currently_playing
state_not: 'off'
- entity: media_player.currently_playing
state_not: idle
card:
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 {
{% if is_state(config.entity, 'playing') %}
--paper-progress-container-color: rgba(var(--album-art-color), 0.2) !important;
{% endif %}
}
.: |
ha-card {
margin: 0px 12px 12px;
--mmp-progress-height: 12px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(var(--album-art-color));
--mmp-border-radius: 12px !important;
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card::before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
{% if not is_state('media_player.currently_playing', 'idle') and not is_state('media_player.currently_playing', 'off') %}
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url( '{{ state_attr('media_player.currently_playing', "entity_picture") }}' ) center no-repeat;
filter: blur(150px) saturate(400%);
background-size: 100% 100%;
{% endif %}
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
--ha-card-border-width: 0;
{% if not is_state('media_player.currently_playing', 'idle') and not is_state('media_player.currently_playing', 'off') %}
background: url( '{{ state_attr("media_player.currently_playing", "entity_picture") }}' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 50%);
{% if state_attr('media_player.currently_playing', 'media_content_type') == 'tvshow' %}
background-size: auto 100%, cover;
{% else %}
background-size: 50% auto, cover;
{% endif %}
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
{% endif %}
}
:host {
--album-art-color:
{% if not is_state('media_player.currently_playing', 'idle') and not is_state('media_player.currently_playing', 'off') %}
{{ states('sensor.muted_color') }}
{% else %}
var(--rgb-indigo-color)
{% endif %};
}
Mushroom Media Player - Full:
Mushroom Media Player - Full YAML
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
--card-mod-icon: mdi:television-classic;
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
--card-mod-icon: mdi:movie-roll;
animation: spin 2s linear infinite reverse;
{% elif media_type == 'music' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
{{ 'animation: none;' if not is_state(config.entity, 'playing') }}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--album-art-color), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--album-art-color), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
--ha-card-border-width: 0;
--rgb-state-media-player: var(--album-art-color);
}
.actions {
--rgb-primary-text-color: var(--album-art-color);
--primary-text-color: rgb(var(--album-art-color));
}
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'idle') and not is_state(config.entity, 'off') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
margin: 4px 4px 16px;
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
border-radius: var(--control-border-radius);
{% 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 %}
}
- type: conditional
conditions:
- entity: media_player.currently_playing
state_not: 'off'
- entity: media_player.currently_playing
state_not: idle
card:
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 {
{% if is_state(config.entity, 'playing') %}
--paper-progress-container-color: rgba(var(--album-art-color), 0.2) !important;
{% endif %}
}
.: |
ha-card {
margin: 0px 12px 12px;
--mmp-progress-height: 12px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(var(--album-art-color));
--mmp-border-radius: 12px !important;
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state('media_player.currently_playing', 'idle') and not is_state('media_player.currently_playing', 'off') %}
background: url( '{{ state_attr('media_player.currently_playing', "entity_picture") }}' ) center no-repeat;
{% endif %}
filter: blur(150px) saturate(200%);
background-size: 100% 100%;
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
:host {
--album-art-color:
{% if not is_state('media_player.currently_playing', 'idle') and not is_state('media_player.currently_playing', 'off') %}
{{ states('sensor.muted_color') }}
{% else %}
var(--rgb-indigo-color)
{% endif %};
}
Node-Red Album Art Color Flow:
Node-Red Album Art Color Flow
[{"id":"eacdc375eb4de995","type":"server-state-changed","z":"f05a616e.f2aef","name":"Currently Playing Changed","server":"84a6d09c.5336e","version":4,"exposeToHomeAssistant":false,"haConfig":[{"property":"name","value":""},{"property":"icon","value":""}],"entityidfilter":"media_player.currently_playing","entityidfiltertype":"exact","outputinitially":true,"state_type":"str","haltifstate":"playing","halt_if_type":"re","halt_if_compare":"is","outputs":2,"output_only_on_state_change":false,"for":"0","forType":"num","forUnits":"minutes","ignorePrevStateNull":false,"ignorePrevStateUnknown":false,"ignorePrevStateUnavailable":false,"ignoreCurrentStateUnknown":true,"ignoreCurrentStateUnavailable":true,"outputProperties":[{"property":"payload","propertyType":"msg","value":"","valueType":"entityState"},{"property":"data","propertyType":"msg","value":"","valueType":"eventData"},{"property":"topic","propertyType":"msg","value":"","valueType":"triggerId"}],"x":210,"y":3670,"wires":[["bd9143fe7b314177"],[]]},{"id":"bd9143fe7b314177","type":"function","z":"f05a616e.f2aef","name":"Format Album Art URL","func":"msg.payload = 'https://**homeassistant.url**:8123' + msg.data.new_state.attributes.entity_picture\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":530,"y":3670,"wires":[["c309c0f5a752ecdd"]]},{"id":"c309c0f5a752ecdd","type":"vibrant","z":"f05a616e.f2aef","name":"Extract Album Art Color","x":840,"y":3670,"wires":[["7882f420860746b9"]]},{"id":"7882f420860746b9","type":"function","z":"f05a616e.f2aef","name":"Colors","func":"var msg1 = { payload: msg.payload.Vibrant.rgb[0] + ',' + msg.payload.Vibrant.rgb[1] + ',' + msg.payload.Vibrant.rgb[2] };\nvar msg2 = { payload: msg.payload.DarkVibrant.rgb[0] + ',' + msg.payload.DarkVibrant.rgb[1] + ',' + msg.payload.DarkVibrant.rgb[2] };\nvar msg3 = { payload: msg.payload.LightVibrant.rgb[0] + ',' + msg.payload.LightVibrant.rgb[1] + ',' + msg.payload.LightVibrant.rgb[2] };\nvar msg4 = { payload: msg.payload.Muted.rgb[0] + ',' + msg.payload.Muted.rgb[1] + ',' + msg.payload.Muted.rgb[2] };\nvar msg5 = { payload: msg.payload.DarkMuted.rgb[0] + ',' + msg.payload.DarkMuted.rgb[1] + ',' + msg.payload.DarkMuted.rgb[2] };\nvar msg6 = { payload: msg.payload.LightMuted.rgb[0] + ',' + msg.payload.LightMuted.rgb[1] + ',' + msg.payload.LightMuted.rgb[2] };\n\nreturn [msg1, msg2, msg3, msg4, msg5, msg6];","outputs":6,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1090,"y":3670,"wires":[["cf6ff890cadf96ef"],["63e066959f858c54"],["6efb0dc3953b3240"],["5806b87267d02bc3"],["77b1979bc5ad11f3"],["e5b91489990a01ea"]]},{"id":"cf6ff890cadf96ef","type":"ha-sensor","z":"f05a616e.f2aef","name":"Vibrant Color","entityConfig":"dfb12e11b7a6e846","version":0,"state":"payload","stateType":"msg","attributes":[],"inputOverride":"allow","outputProperties":[],"x":1460,"y":3540,"wires":[[]]},{"id":"63e066959f858c54","type":"ha-sensor","z":"f05a616e.f2aef","name":"Dark Vibrant Color","entityConfig":"3e58f341fe905599","version":0,"state":"payload","stateType":"msg","attributes":[],"inputOverride":"allow","outputProperties":[],"x":1480,"y":3590,"wires":[[]]},{"id":"6efb0dc3953b3240","type":"ha-sensor","z":"f05a616e.f2aef","name":"Light Vibrant Color","entityConfig":"70d8791a24738ee6","version":0,"state":"payload","stateType":"msg","attributes":[],"inputOverride":"allow","outputProperties":[],"x":1480,"y":3640,"wires":[[]]},{"id":"5806b87267d02bc3","type":"ha-sensor","z":"f05a616e.f2aef","name":"Muted Color","entityConfig":"be0a1e0059e1713e","version":0,"state":"payload","stateType":"msg","attributes":[],"inputOverride":"allow","outputProperties":[],"x":1460,"y":3690,"wires":[[]]},{"id":"77b1979bc5ad11f3","type":"ha-sensor","z":"f05a616e.f2aef","name":"Dark Muted Color","entityConfig":"90991e9dde96cec6","version":0,"state":"payload","stateType":"msg","attributes":[],"inputOverride":"allow","outputProperties":[],"x":1480,"y":3740,"wires":[[]]},{"id":"e5b91489990a01ea","type":"ha-sensor","z":"f05a616e.f2aef","name":"Light Muted Color","entityConfig":"13f67da67efbf0ae","version":0,"state":"payload","stateType":"msg","attributes":[],"inputOverride":"allow","outputProperties":[],"x":1480,"y":3790,"wires":[[]]},{"id":"84a6d09c.5336e","type":"server","name":"Home Assistant","version":5,"addon":true,"rejectUnauthorizedCerts":true,"ha_boolean":"y|yes|true|on|home|open","connectionDelay":true,"cacheJson":true,"heartbeat":false,"heartbeatInterval":"30","areaSelector":"friendlyName","deviceSelector":"friendlyName","entitySelector":"friendlyName","statusSeparator":"at: ","statusYear":"hidden","statusMonth":"short","statusDay":"numeric","statusHourCycle":"h23","statusTimeFormat":"h:m","enableGlobalContextStore":true},{"id":"dfb12e11b7a6e846","type":"ha-entity-config","server":"84a6d09c.5336e","deviceConfig":"","name":"Vibrant Color","version":"6","entityType":"sensor","haConfig":[{"property":"name","value":"Vibrant Color"},{"property":"icon","value":""},{"property":"entity_category","value":""},{"property":"device_class","value":""},{"property":"unit_of_measurement","value":""},{"property":"state_class","value":""}],"resend":false,"debugEnabled":false},{"id":"3e58f341fe905599","type":"ha-entity-config","server":"84a6d09c.5336e","deviceConfig":"","name":"Dark Vibrant Color","version":"6","entityType":"sensor","haConfig":[{"property":"name","value":"Dark Vibrant Color"},{"property":"icon","value":""},{"property":"entity_category","value":""},{"property":"device_class","value":""},{"property":"unit_of_measurement","value":""},{"property":"state_class","value":""}],"resend":false,"debugEnabled":false},{"id":"70d8791a24738ee6","type":"ha-entity-config","server":"84a6d09c.5336e","deviceConfig":"","name":"Light Vibrant Color","version":"6","entityType":"sensor","haConfig":[{"property":"name","value":"Light Vibrant Color"},{"property":"icon","value":""},{"property":"entity_category","value":""},{"property":"device_class","value":""},{"property":"unit_of_measurement","value":""},{"property":"state_class","value":""}],"resend":false,"debugEnabled":false},{"id":"be0a1e0059e1713e","type":"ha-entity-config","server":"84a6d09c.5336e","deviceConfig":"","name":"Muted Color","version":"6","entityType":"sensor","haConfig":[{"property":"name","value":"Muted Color"},{"property":"icon","value":""},{"property":"entity_category","value":""},{"property":"device_class","value":""},{"property":"unit_of_measurement","value":""},{"property":"state_class","value":""}],"resend":false,"debugEnabled":false},{"id":"90991e9dde96cec6","type":"ha-entity-config","server":"84a6d09c.5336e","deviceConfig":"","name":"Dark Muted Color","version":"6","entityType":"sensor","haConfig":[{"property":"name","value":"Dark Muted Color"},{"property":"icon","value":""},{"property":"entity_category","value":""},{"property":"device_class","value":""},{"property":"unit_of_measurement","value":""},{"property":"state_class","value":""}],"resend":false,"debugEnabled":false},{"id":"13f67da67efbf0ae","type":"ha-entity-config","server":"84a6d09c.5336e","deviceConfig":"","name":"Light Muted Color","version":"6","entityType":"sensor","haConfig":[{"property":"name","value":"Light Muted Color"},{"property":"icon","value":""},{"property":"entity_category","value":""},{"property":"device_class","value":""},{"property":"unit_of_measurement","value":""},{"property":"state_class","value":""}],"resend":false,"debugEnabled":false}]
You will need to replace **homeassistant.url** with the URL for your Home Assistant instance.
In addition to Node-Red the Vibrant Node is Required:
There are six colors to choose from; vibrant, dark vibrant, light vibrant, muted, dark muted & light muted. I’ve used muted as it seems to work best in both light and dark themes. Pick whatever works best for you.
26 Likes
For those that would rather have the Media Player shrink down when not playing anything you can change the code like this:
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
{% if not is_state(config.entity, 'idle') and not is_state(config.entity, 'off') %}
content: "";
{% endif %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
background-size: contain;
margin: 4px 4px 16px;
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
border-radius: var(--control-border-radius);
{% 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 %}
}
5 Likes
Hi,
Of course 
Details :
- The card shows the “on” button when the computer is off
- When the computer is on, the “sleep” and “shut down” buttons are displayed. As well as computer image
- A click on the card displays a larger preview (with animation on the icon) or an image if the computer is off
(card background color matches image)
- When off
I use IOTLink on the computer for MQTT information feedback to Home Assistant
Code
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Dell
secondary: OptiPlex
icon: |-
{% if is_state('binary_sensor.ping_dalg_pc', 'off') %}
mdi:remote-desktop
{% else %}
disable
{% endif %}
icon_color: |-
{% if is_state('binary_sensor.ping_dalg_pc', 'off') %}
red
{% else %}
transparent
{% endif %}
layout: vertical
entity: camera.dalg_pc_screen_0
tap_action:
action: fire-dom-event
haptic: heavy
browser_mod:
service: browser_mod.popup
data:
style: |-
--popup-border-radius: 15px;
--popup-border-color: transparent;
--popup-padding-x: 5px;
size: normal
content:
type: vertical-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: camera.dalg_pc_screen_0
name: Dell OptiPlex
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
display: flex;
--card-mod-icon: mdi:remote-desktop;
animation: beat 1.3s ease-out infinite both;
{{ 'animation: none;' if not is_state(config.entity, 'idle') }}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
--ha-card-border-width: 0;
}
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/mushroom/dell.png') center no-repeat;
{% if not is_state(config.entity, 'unavailable') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
margin: 4px 4px 16px;
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
border-radius: var(--control-border-radius);
{% if is_state(config.entity, 'idle') %}
aspect-ratio: 16 / 9;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
}
}
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url('/local/mushroom/dell.png') center no-repeat;
{% if not is_state('camera.dalg_pc_screen_0', 'unavailable') %}
background: url( '{{ state_attr('camera.dalg_pc_screen_0', "entity_picture") }}' ) center no-repeat;
{% endif %}
filter: blur(150px) saturate(200%);
background-size: 100% 100%;
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
card_mod:
style: |
:host {
--mush-icon-size: 65px;
}
ha-card {
{% if not is_state(config.entity, 'unavailable') %}
background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(var(--rgb-card-background-color)0.5);
background-blend-mode: overlay;
--primary-text-color: transparent;
--secondary-text-color: transparent;
{% endif %}
--rgb-state-media-player: var(--rgb-teal);
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.ping_dalg_pc
state: 'off'
chip:
type: template
entity: script.my_computer_wake
icon: mdi:power
icon_color: green
content: 'On'
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-border-width: 0;
- type: conditional
conditions:
- entity: binary_sensor.ping_dalg_pc
state: 'on'
chip:
type: template
entity: script.my_computer_restart
icon: mdi:restart
icon_color: orange
content: ''
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-border-width: 0;
- type: conditional
conditions:
- entity: binary_sensor.ping_dalg_pc
state: 'on'
chip:
type: template
entity: script.my_computer_shutdown
icon: mdi:power
icon_color: red
content: ''
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-border-width: 0;
alignment: center
card_mod:
style:
style: |
ha-card {
margin: 10px 0px 12px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 40px;
{% if is_state('binary_sensor.ping_dalg_pc', 'on') %}
--chip-padding: 25px;
--chip-spacing: 15px;
{% else %}
--chip-padding: 25px;
--chip-spacing: 0px;
{% endif %}
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Dell
secondary: Precision
icon: |-
{% if is_state('binary_sensor.ping_dalg_dell', 'off') %}
mdi:remote-desktop
{% else %}
disable
{% endif %}
icon_color: |-
{% if is_state('binary_sensor.ping_dalg_dell', 'off') %}
red
{% else %}
transparent
{% endif %}
layout: vertical
entity: camera.dalg_dell_screen_0
tap_action:
action: fire-dom-event
haptic: heavy
browser_mod:
service: browser_mod.popup
data:
style: |-
--popup-border-radius: 15px;
--popup-border-color: transparent;
--popup-padding-x: 5px;
size: normal
content:
type: vertical-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: camera.dalg_dell_screen_0
name: Dell Precision
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
display: flex;
--card-mod-icon: mdi:desktop-classic;
animation: beat 1.3s ease-out infinite both;
{{ 'animation: none;' if not is_state(config.entity, 'idle') }}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
--ha-card-border-width: 0;
}
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/mushroom/dell.png') center no-repeat;
{% if not is_state(config.entity, 'unavailable') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
margin: 4px 4px 16px;
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
border-radius: var(--control-border-radius);
{% if is_state(config.entity, 'idle') %}
aspect-ratio: 16 / 9;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
}
}
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url('/local/mushroom/dell.png') center no-repeat;
{% if not is_state('camera.dalg_dell_screen_0', 'unavailable') %}
background: url( '{{ state_attr('camera.dalg_dell_screen_0', "entity_picture") }}' ) center no-repeat;
{% endif %}
filter: blur(150px) saturate(200%);
background-size: 100% 100%;
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
card_mod:
style: |
:host {
--mush-icon-size: 65px;
}
ha-card {
{% if not is_state(config.entity, 'unavailable') %}
background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(var(--rgb-card-background-color)0.5);
background-blend-mode: overlay;
--primary-text-color: transparent;
--secondary-text-color: transparent;
{% endif %}
--rgb-state-media-player: var(--rgb-teal);
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.ping_dalg_dell
state: 'off'
chip:
type: template
entity: script.my_computer_wake2
icon: mdi:power
icon_color: green
content: 'On'
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-border-width: 0;
- type: conditional
conditions:
- entity: binary_sensor.ping_dalg_dell
state: 'on'
chip:
type: template
entity: script.my_computer_3_reboot
icon: mdi:restart
icon_color: orange
content: ''
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-border-width: 0;
- type: conditional
conditions:
- entity: binary_sensor.ping_dalg_dell
state: 'on'
chip:
type: template
entity: script.my_computer_3_shutdown
icon: mdi:power
icon_color: red
content: ''
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-border-width: 0;
alignment: center
card_mod:
style:
style: |
ha-card {
margin: 10px 0px 12px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 40px;
{% if is_state('binary_sensor.ping_dalg_dell', 'on') %}
--chip-padding: 25px;
--chip-spacing: 15px;
{% else %}
--chip-padding: 25px;
--chip-spacing: 0px;
{% endif %}
}
PS: sorry for my english 
10 Likes
Have a look at Universal Media Player, does exactly what you want.
I would love if we could start sharing “popup”-like cards, heres mine:
Do anyone know if it is possible to show both “Brightness” and “Color temp” at the same time?
Current config (ps. its a declutering-template card):
lyskort:
card:
type: tile
name: '[[navn]]'
entity: '[[entitet]]'
show_entity_picture: true
features:
- type: light-brightness
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: '[[navn]]'
content:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-light-card
entity: '[[entitet]]'
layout: vertical
use_light_color: true
show_brightness_control: true
show_color_control: false
show_color_temp_control: true
card_mod:
style: |
ha-card {
{% if is_state(config.entity, 'on') %}
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
{% if r == null %}
background: rgba(255, 152, 0, 0.1);
{%- else -%}
background: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
{%- endif %}
{%- endif %}
}
- shorten_cards: false
consolidate_entities: true
child_card: true
hide_header: true
header: ''
color_wheel: true
persist_features: true
brightness: false
color_temp: false
white_value: false
color_picker: true
smooth_color_wheel: true
speed: false
intensity: false
force_features: false
show_slider_percent: false
full_width_sliders: true
brightness_icon: weather-sunny
white_icon: file-word-box
temperature_icon: thermometer
speed_icon: speedometer
intensity_icon: transit-connection-horizontal
type: custom:light-entity-card
entity: '[[entitet]]'
effects_list: false
card_mod:
style: |
ha-card {
{% if is_state(config.entity, 'on') %}
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
{% if r == null %}
background: rgba(255, 152, 0, 0.1);
{%- else -%}
background: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
{%- endif %}
{%- endif %}
}
Only popup-card:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-light-card
entity: light.utebod_ledstrip
layout: vertical
use_light_color: true
show_brightness_control: true
show_color_control: false
show_color_temp_control: true
card_mod:
style: |
ha-card {
{% if is_state(config.entity, 'on') %}
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
{% if r == null %}
background: rgba(255, 152, 0, 0.1);
{%- else -%}
background: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
{%- endif %}
{%- endif %}
}
- shorten_cards: false
consolidate_entities: true
child_card: true
hide_header: true
header: ''
color_wheel: true
persist_features: true
brightness: false
color_temp: false
white_value: false
color_picker: true
smooth_color_wheel: true
speed: false
intensity: false
force_features: false
show_slider_percent: false
full_width_sliders: true
brightness_icon: weather-sunny
white_icon: file-word-box
temperature_icon: thermometer
speed_icon: speedometer
intensity_icon: transit-connection-horizontal
type: custom:light-entity-card
entity: light.utebod_ledstrip
effects_list: false
card_mod:
style: |
ha-card {
{% if is_state(config.entity, 'on') %}
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
{% if r == null %}
background: rgba(255, 152, 0, 0.1);
{%- else -%}
background: rgba( {{r}}, {{g}}, {{b}}, 0.1 );
{%- endif %}
{%- endif %}
}
Edit: Trying to make a UI Minimalist-like popup… but dont wanna use that “theme” since its not easy to do changes on-the-fly and it locks you down with its templates-in-template’ nesting
Guess i can have a “only show color temp” mushroom-light card inside there
9 Likes
Wow this is fantastic, i was using IOTLink for my HTPC and was turning on my other computers with WOL. Yours is just next level, thanks for sharing.
1 Like