Drops down
Expands upwards
That helps a bunch. Iāll take a look. 
Sorry, not sure what to look at. Couldnāt find anything related.
This portionā¦
card_mod:
style:
mushroom-select-option-control$:
mushroom-select$: |
.mdc-select__anchor{
background: none !important;
border-radius: 20px !important;
}
.mdc-line-ripple::before {
border-bottom-width: 0px !important;
}
.mdc-line-ripple::after {
border-bottom-width: 0px !important;
}
.mdc-select__selected-text {
color: transparent !important;
}
.mdc-select__dropdown-icon {
fill: transparent !important;
}
.mdc-select {
position: absolute !important;
width: 100% !important;
--select-height: 97px;
top: 0%;
right: 0%;
}
OK, Iāll look into it when I get home and let you know how it works. Thank you!
So far this is what Iāve found while inspecting the CSS. It seems that the list is created under the ā.mdc-menu-surfaceā class, and one property that drew my attention was ātransform-originā, not sure if Iām on the right track though, nor how to reference that, in order to overwrite the properties there.
Hi all, need your expertise advice on how I could fine tune my mushroom template card to achieve the following. Sample code snippet only showing the card for Den.
I wonder if it is possible to have tooltip (or call it hover text if you wish) when hover the battery badge icon to show the actual reading of the blind battery sensor.
type: grid
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Den
secondary: |-
{% if is_state('cover.den_blind','open') %}
Open
{% elif is_state('cover.den_blind','closed') %}
Closed
{% else %}
{{ states('sensor.den_blind_motor_state') }}
{% endif%}
- {{ state_attr('cover.den_blind', 'current_position') }}%
icon: |-
{% if is_state('cover.den_blind','open') %}
mdi:window-shutter-open
{% else %}
mdi:blinds-horizontal-closed
{% endif%}
badge_icon: |-
{% set bl = states('sensor.den_blind_battery') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
badge_color: |-
{% set bl = states('sensor.den_blind_battery') | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} green
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} disabled
{% endif %}
tap_action:
action: none
card_mod:
style: |
mushroom-badge-icon {
left: 30px;
}
ha-card {
box-shadow: none;
--ha-card-border-width: 0px;
}
- type: custom:mushroom-cover-card
entity: cover.den_blind
name: Bathroom
primary_info: none
secondary_info: none
icon_type: none
tap_action:
action: none
show_buttons_control: true
card_mod:
style: |
ha-card {
margin-top: -20px;
box-shadow: none;
--ha-card-border-width: 0px;
}
card_mod:
style: |
ha-card {
{% if is_state('cover.den_blind','open')}
background: rgba(101,170,91,0.2);
{% else %}
background: rgba(226,84,66,0.2);
{% endif %}
}
Thanks in advance!
G
got no way of testing but I think you can play around with
ha-card:hover
if the card uses ha-card that is
@Frosty is on the right trackā¦ If you want to isolate the badge,use mushroom-badge-icon:hover {
I am unsure if you can get the state of cover battery to appear. Iād have to think about a method to accomplish that.
card_mod:
style: |
mushroom-badge-icon {
left: 30px;
}
mushroom-badge-icon:hover {
transform: scale(5);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
ha-card {
box-shadow: none;
--ha-card-border-width: 0px;
}
another option is to add a second badgeā¦
tap_action:
action: toggle
card_mod:
style: |
ha-state-icon::after {
content: "{{ states('sensor.basement_sensor_battery') }}";
position: absolute;
top: 0%;
right: 80%;
display: flex;
justify-content: center;
align-items: center;
width: 14px;
height:14px;
border-radius: 50%;
background-repeat: no-repeat;
background: red;
font-size: 9px;
}
mushroom-badge-icon {
left: 28px;
}
mushroom-badge-icon:hover {
transform: scale(5);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
ha-card {
box-shadow: none;
--ha-card-border-width: 0px;
}
One more option that is a bit hacky, but worksā¦
type: custom:mushroom-template-card
primary: Hover
secondary: more info
entity: cover.bed_curtains
icon: mdi:curtains
icon_color: white
badge_icon: |-
{% set bl = states('sensor.bed_curtains_battery') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
badge_color: |-
{% set bl = states('sensor.bed_curtains_battery')| int(0) %}
{% if bl < 10 %} red
{% elif bl < 50 %} orange
{% elif bl <= 100 %} green
{% else %} disabled
{% endif %}
tap_action:
action: toggle
card_mod:
style:
mushroom-state-info$: |
.primary {
color: green !important;
margin-left: 10px !important; }
.secondary {
color: white !important;
margin-left: 10px !important; }
.: |
ha-state-icon::after {
content: "{{ states('sensor.bed_curtains_battery') }}";
position: absolute;
top: -10px;
left: 30px;
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height:24px;
border-radius: 50%;
background-repeat: no-repeat;
background: blue;
font-size: 12px;
font-weight: bold;
}
mushroom-badge-icon:hover {
--main-color: transparent !important;
--icon-color: transparent;
transform: scale(3);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
mushroom-badge-icon {
left: 30px;
top: -10px;
--badge-icon-size: 16px;
--badge-size: 24px;
}
ha-card {
box-shadow: none;
--ha-card-border-width: 0px;
}
Just a heads up, your color logic is overkill.
badge_color: |-
{% set bl = states('sensor.bed_curtains_battery')| int(0) %}
{% if bl < 10 %} red
{% elif bl < 50 %} orange
{% elif bl <= 100 %} green
{% else %} disabled
{% endif %}
4 Likes
Is it possible to replace badge icon with entity state?
The only way I know how is to use a pseudo-element
type: custom:mushroom-template-card
primary: Hover
secondary: more info
entity: cover.bed_curtains
icon: mdi:curtains
icon_color: white
tap_action:
action: toggle
card_mod:
style:
mushroom-state-info$: |
.primary {
color: green !important;
margin-left: 10px !important; }
.secondary {
color: white !important;
margin-left: 10px !important; }
.: |
ha-state-icon::after {
content: "{{ states('sensor.bed_curtains_battery') }}";
position: absolute;
top: -10px;
left: 30px;
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height:24px;
border-radius: 50%;
background-repeat: no-repeat;
background: blue;
font-size: 12px;
font-weight: bold;
}
ha-card {
box-shadow: none;
--ha-card-border-width: 0px;
}
If you search badge here, there are a lot of examples.
1 Like
Thank you. But I need 2 badges with numbers 
just use two pseudo-elements
type: custom:mushroom-template-card
primary: Hover
secondary: more info
entity: cover.bed_curtains
icon: mdi:curtains
icon_color: white
tap_action:
action: toggle
card_mod:
style:
mushroom-state-info$: |
.primary {
color: green !important;
margin-left: 10px !important; }
.secondary {
color: white !important;
margin-left: 10px !important; }
.: |
ha-state-icon::after {
content: "{{ states('sensor.bed_curtains_battery') }}";
position: absolute;
top: -10px;
left: 30px;
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height:24px;
border-radius: 50%;
background-repeat: no-repeat;
background: blue;
font-size: 12px;
font-weight: bold;
}
ha-state-icon::before {
content: "{{ states('sensor.bed_curtains_battery') }}";
position: absolute;
top: -10px;
left: -16px;
display: flex;
justify-content: center;
align-items: center;
width: 24px;
height:24px;
border-radius: 50%;
background-repeat: no-repeat;
background: green;
font-size: 12px;
font-weight: bold;
z-index: 1
}
ha-card {
box-shadow: none;
--ha-card-border-width: 0px;
}
2 Likes
super cool! thank you!
The code I provide is a rough draft. Other elements will need to shift right with this method.
Happy codingā¦
2 Likes
it works great!
1 Like
Iāve been at this for hours trying to combine fixing the height of the slider with the ha-card height, and Iām currently at the point where my laptop is soon going to fly out of the window. Why the **** doesnāt this work, please, for the love of god, enlighten me. Iāve tried all possible combinations of intends on .: and it still doesnāt work. Except the combination that works that I havenāt found yet.
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.light_bulb_vardagsrummet_golvlampan
show_brightness_control: true
use_light_color: true
name: Golvlampan
card_mod:
style: |
ha-card {
height: 200px !important;
width: 200px;
}
.:
mushroom-light-brightness-control$:
mushroom-slider$: |
.slider {
width: 400px !important;
height: 200px !important;
}
type: custom:mushroom-light-card
entity: light.lounge_main_light
show_brightness_control: true
use_light_color: true
name: Golvlampan
card_mod:
style:
mushroom-light-brightness-control$:
mushroom-slider$: |
.slider {
width: 400px !important;
height: 200px !important;
}
.: |
ha-card {
height: 200px !important;
width: 200px;
}
Or:
type: custom:mushroom-light-card
entity: light.lounge_main_light
show_brightness_control: true
use_light_color: true
name: Golvlampan
card_mod:
style:
.: |
ha-card {
height: 200px !important;
width: 200px;
}
mushroom-light-brightness-control$:
mushroom-slider$: |
.slider {
width: 400px !important;
height: 200px !important;
}
Hi, can you help me with the select card? Or if this is hard to achieve, cause it seems that nobody can help, at least how can I make the list element visible outside a parent container with the overflow property set to scroll?
Or at least how can i reference the ā.mdc-menu-surface.mdc-menu-surfaceāfixed.mdc-menu-surfaceāopenā class, so I could overwrite itās values?
Anyone?