rhysb
October 21, 2022, 10:40am
3605
You need to change the border-radius, like this:
card_mod:
style: |
mushroom-shape-icon {
display: flex;
animation: cool 15s ease-in-out infinite;
border-radius: 50%;
}
@keyframes cool {
60% { box-shadow: 0 0 0 0 rgba(var(--rgb-cyan), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
0%, 100% { transform: rotate(25deg); }
25% { transform: rotate(-25deg); }
50% { transform: rotate(50deg); }
75% { transform: rotate(-50deg); }
}
rhysb
October 21, 2022, 10:48am
3606
Like this:
card_mod:
style:
mushroom-state-info$: |
.primary {
text-align: center;
}
.: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;
}
ha-card {
background: transparent;
border-radius: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
--icon-border-radius: 0;
}
rhysb
October 21, 2022, 10:51am
3607
Just remove the card-mod at the bottom then. This one:
card_mod:
style: |
ha-card {
background: transparent;
--ha-card-box-shadow: none;
}
If I do that I get the shadow around the stack in card.
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:auto-entities
card:
type: entities
filter:
include:
- area: Temperature Sensors
entity_id: /[te]mperature/
options:
type: custom:mushroom-template-card
primary: '{{ states[entity].name }}'
secondary: '{{ states(entity) | title }}'
picture: null
hold_action:
action: toggle
double_tap_action:
action: more-info
layout: null
tap_action:
action: none
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;
}
ha-card {
background: transparent;
border-radius: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
--icon-border-radius: 0;
}
mushroom-state-info$: |
.primary {
text-align: center;
}
exclude: []
- type: custom:auto-entities
card:
type: entities
filter:
include:
- area: Temperature Sensors
entity_id: /[hu]midity/
options:
type: custom:mushroom-template-card
primary: '{{ states[entity].name }}'
secondary: '{{ states(entity) | title }}'
picture: null
hold_action:
action: toggle
double_tap_action:
action: more-info
layout: null
tap_action:
action: none
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;
}
ha-card {
background: transparent;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
--icon-border-radius: 0;
}
exclude: []
I only want the shadow around the mushroom cards.
Odd, that didnât work either.
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:auto-entities
card:
type: entities
filter:
include:
- area: Temperature Sensors
entity_id: /[te]mperature/
options:
type: custom:mushroom-template-card
primary: '{{ states[entity].name }}'
secondary: '{{ states(entity) | title }}'
picture: null
hold_action:
action: toggle
double_tap_action:
action: more-info
layout: null
tap_action:
action: none
card_mod:
style:
mushroom-state-info$: |
.primary {
text-align: center;
}
.: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;
}
ha-card {
background: transparent;
border-radius: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
--icon-border-radius: 0;
}
exclude: []
- type: custom:auto-entities
card:
type: entities
filter:
include:
- area: Temperature Sensors
entity_id: /[hu]midity/
options:
type: custom:mushroom-template-card
primary: '{{ states[entity].name }}'
secondary: '{{ states(entity) | title }}'
picture: null
hold_action:
action: toggle
double_tap_action:
action: more-info
layout: null
tap_action:
action: none
card_mod:
style:
mushroom-state-info$: |
.primary {
text-align: center;
}
.: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;
}
ha-card {
background: transparent;
border-radius: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
--icon-border-radius: 0;
}
exclude: []
rhysb
October 21, 2022, 10:59am
3610
Your text is longer than the width of the cardâŚ
Oops that worked when I shrunk it.
Any idea about the box shadow of the stack-in-card? I want to keep the mushroom card shadow but not the stack-in-card
1 Like
Homeotte41
October 21, 2022, 5:25pm
3613
Ohw that itâs perfect thank you
1 Like
Yeah. Kinda fixed it. But it doesnât yet take into account if the light IS NOT an rgb light.
Looking at you @rhysb
Edit: code updated twice
code for card, two in one :D
type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.bella_ledlight
use_light_color: true
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: false
primary_info: none
secondary_info: none
fill_container: false
- type: custom:mushroom-light-card
entity: light.bella_ledlight
use_light_color: true
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
icon_type: none
name: RGB Light
- type: custom:my-slider-v2
entity: light.bella_ledlight
vertical: true
styles:
card:
- height: 113px
- width: 35px
container:
- border-radius: 12px
track:
- background: >
[[[ if (entity.state == "off") return
"rgba(var(--mush-rgb-disabled), 0.2)";
else return "rgba(var(--mush-rgb-amber), 0.2)";
]]]
progress:
- background: |
[[[
return `rgb(${entity.attributes.rgb_color})`
]]]
thumb:
- width: 0px
card_mod:
style: |
ha-card {
padding: 12px 12px 12px;
}
- type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.vardagsrum_golvlampa_tv_soffa_light
use_light_color: true
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: false
primary_info: none
secondary_info: none
fill_container: false
- type: custom:mushroom-light-card
entity: light.vardagsrum_golvlampa_tv_soffa_light
use_light_color: true
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
icon_type: none
name: Normal Light
- type: custom:my-slider-v2
entity: light.vardagsrum_golvlampa_tv_soffa_light
vertical: true
styles:
card:
- height: 113px
- width: 35px
container:
- border-radius: 12px
track:
- background: >
[[[ if (entity.state == "off") return "rgba(var(--mush-rgb-disabled),
0.2)";
else return "rgba(var(--mush-rgb-amber), 0.2)";
]]]
progress:
- background: |
[[[ if (entity.state == "off") return "rgb(var(--mush-rgb-disabled))";
else return "rgb(var(--mush-rgb-amber))";
]]]
thumb:
- width: 0px
card_mod:
style: |
ha-card {
padding: 12px 12px 12px;
}
Can you post a screenshot of what youâre seeing? Mine might be a little different I believe.
Web browser
Using some chrome function, Shift Ctrl âiâ
Ipad
iPhone 12 pro
Yep, thatâs what I have too! I see what you did with the RGB Light. Very impressive! I believe this as close as we can get to it right now but I definitely want to somehow figure out how to include these two buttons below.
That opens the door for me to do pop-ups for individual light controls vs. more-info pop-up to change the color/temperature. Just a better design and UI experience that way.
bengt
October 22, 2022, 12:09am
3618
I want a border like this around the mushroom title card, with a transparent background.
Where do you want them? Do a photoshop drawing and show me, and Iâll give it a try.
This is what Iâm looking for.
One compact card with a vertical slider that controls the temperature and RGB control.
Everything in a normal mushroom light card but with a vertical slider rather then a horizontal slider. All the same controls and options
4 Likes
Hi there. I was curious if you are still using the custom sidebar card for your dashboard or if you have recreated it using a stack? The custom card does indeed look slick but I am having the bottom-card-not-showing or must-refresh-to-see-sidebar issue that others are having in many other threads. I think I may be able to submit a PR for a modified sidebar card that fixes the bottomCard issue by this weekend⌠but Iâve thought that for the past few weekends before getting busy
Thanks!
@rhysb This morning I found myself thinking that with all the hundreds of customizations youâve helped this community implement, I wonder what the latest production version of your own mobile view looks like. You had before shared your dark/light versions of the primary home card, room cards, etc., and I wonder if they have changed much over the months? My base model still uses the layout you used back in the âearly daysâ of mushroom and I was curious if you wouldnât mind to post a refreshed view of what you yourself use? Even if not, thanks again for all of the contribution here - itâs really awesome.
4 Likes
Fzibi21
October 22, 2022, 8:35pm
3624
love your templates especially the person and battery card. care to share the code ?
RASBR
October 22, 2022, 11:15pm
3625
Hello @rhysb
Also, canât get the badge to show on the chip!
Below my code.
type: conditional
conditions:
- entity: switch.pool_tank_water_valve
state: 'on'
chip:
type: template
entity: sensor.pool_tank_level_number
picture: /local/my-icons/water 5.png
badge_icon: '{{ ''mdi:faucet'' if is_state('switch.pool_tank_water_valve', ''on'') else ''none'' }}'
badge_color: '{{ ''blue'' if is_state('switch.pool_tank_water_valve', ''on'') else ''none'' }}'
content_info: none
card_mod:
style: |
.avatar {
animation: clip 1.5s ease-out infinite; if is_state(config.entity, 'on')
}
@keyframes clip {
0% {clip-path: inset(100% 0 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
I am trying to add this to the above code:
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% set water_level = states('sensor.pool_tank_level_number') | int %}
{% if water_level == 5 %}
background: url("/local/my-icons/water 5.png") no-repeat center;
--shape-animation: clip 2s ease-out infinite;
{% elif water_level == 4 %}
background: url("/local/my-icons/water 4.png") no-repeat center;
--shape-animation: clip 2s ease-out infinite;
{% elif water_level == 3 %}
background: url("/local/my-icons/water 3.png") no-repeat center;
--shape-animation: clip 2s ease-out infinite;
{% elif water_level == 2 %}
background: url("/local/my-icons/water 2.png") no-repeat center;
--shape-animation: clip 2s ease-out infinite;
{% else %}
background: url("/local/my-icons/water 1.png") no-repeat center;
--shape-animation: clip 2s ease-out infinite;
{% endif %}
background-size: contain;
--shape-color: none;
{{ '--icon-animation: clip 2s ease-out infinite;' if is_state(config.entity, 'on') }}
}
@keyframes clip {
0% {clip-path: inset(100% 0 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
If you are using the custom card, are you having any reliability issues? If not, would you be opposed to sharing how you built the sidebar manually?