@GTunney Yes having problems.
The card mod applied with the @media queries for the whole custom:mushroom-chips-card is working
card_mod:
style: |
@media (orientation: portrait) and (max-width: 768px) {
ha-card {
z-index:1;
position: fixed;
bottom: 5px;
left: 5px;
width: calc(100% - 10px);
background-color: transparent !important;
border-radius: 100px;
padding: 10px;
--chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px!important;
}
}
@media (orientation: portrait) and (min-width: 769px) {
ha-card {
z-index:1;
position: fixed;
bottom: 10px;
left: 50px;
width: calc(100% - 100px);
background-color: transparent !important;
border-radius: 100px;
padding: 10px;
--chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px !important;
--chip-height: 60px;
--chip-border-radius: 50%;
--chip-icon-size: 30px;
}
}
@media (orientation: landscape) and (min-width: 1281px) {
ha-card {
z-index:1;
position: fixed;
bottom: 5px;
left: 100px;
width: calc(100% - 200px);
background-color: transparent !important;
border-radius: 100px;
padding: 10px;
--chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px !important;
--chip-height: 55px;
--chip-border-radius: 50%;
--chip-icon-size: 30px;
}
}
@media (orientation: landscape) and (min-height: 600px) and (max-height: 800px) and
(max-width: 1280px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 5px;
left: 50px;
width: calc(100% - 100px);
background-color: transparent !important;
border-radius: 100px;
padding: 10px;
--chip-box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px !important;
--chip-height: 55px;
--chip-border-radius: 50%;
--chip-icon-size: 30px;
}
}
but the card mod for the individual chips is not.
- type: conditional
conditions:
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'off'
chip:
type: template
tap_action:
action: toggle
entity: input_boolean.chips_menu_toggle
icon: mdi:unfold-more-vertical
card_mod:
style: |
ha-card {
border: 2px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,225,226,1) 100%);
}
Managed to get some colour back to my mushroom chips cards by using mushroom theme variables, details in below post