I just deleted all cached images and files. Same behavior in both edge and chrome.
card-mod applied with the media queries is respected. card-mod applied to the individual chips is not respected.
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: input_boolean.kiosk_mode_toggle
state: 'on'
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'off'
chip:
type: template
tap_action:
action: toggle
entity: input_boolean.kiosk_mode_toggle
icon: mdi:menu
card_mod:
style: |
ha-card {
border: 2px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,194,226,1) 100%);
}
}
- type: conditional
conditions:
- condition: screen
media_query: '(min-height: 801px) and (min-width: 768px)'
- condition: state
entity: input_boolean.kiosk_mode_toggle
state: 'on'
chip:
type: back
card_mod:
style: |
ha-card {
border: 2px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,194,226,1) 100%);
}
- type: spacer
- type: conditional
conditions:
- condition: state
entity: input_boolean.kiosk_mode_toggle
state: 'off'
chip:
type: template
tap_action:
action: toggle
entity: input_boolean.kiosk_mode_toggle
icon: mdi:monitor-screenshot
card_mod:
style: |
ha-card {
border: 2px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,194,226,1) 100%);
}
- type: spacer
- type: conditional
conditions:
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'off'
- condition: screen
media_query: '(min-height: 1920px)'
chip:
type: template
tap_action:
action: navigate
navigation_path: /lovelace-media/music-assistant-iframe
entity: null
icon: mdi:music
card_mod:
style: |
ha-card {
border: 2.0px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(216,226,43,1) 100%);
}
- type: conditional
conditions:
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'off'
- condition: screen
media_query: '(max-height: 1919px)'
chip:
type: template
tap_action:
action: navigate
navigation_path: >-
https://ifouiz3rfiho185v4nkjxadhyfhss651.ui.nabu.casa/d5369777_music_assistant_beta/ingress
entity: null
icon: mdi:music
card_mod:
style: |
ha-card {
border: 2.0px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(216,226,43,1) 100%);
}
- type: conditional
conditions:
- condition: state
entity: input_boolean.kiosk_mode_toggle
state: 'on'
- condition: state
entity: switch.home_and_away_switch
state: 'on'
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'off'
chip:
type: template
tap_action:
action: toggle
entity: switch.home_and_away_switch
icon: mdi:home-account
card_mod:
style: |
ha-card {
border: 2px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,226,49,1) 100%);
}
- type: conditional
conditions:
- condition: state
entity: switch.home_and_away_switch
state: 'off'
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'off'
chip:
type: template
tap_action:
action: toggle
entity: switch.home_and_away_switch
icon: mdi:home-export-outline
card_mod:
style: |
ha-card {
border: 2px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(226,43,43,1) 100%);
}
- type: conditional
conditions:
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
- condition: and
conditions:
- condition: or
conditions:
- condition: screen
media_query: '(orientation: landscape) and (min-width: 1281px)'
- condition: screen
media_query: '(orientation: portrait) and (min-width: 769px)'
chip:
type: template
tap_action:
action: navigate
navigation_path: /3d-home/3d-home
icon: mdi:floor-plan
entity: null
icon_color: white
card_mod:
style: |
ha-card {
border: 2px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: screen
media_query: '(orientation: portrait) and (max-width: 768px)'
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
chip:
type: template
tap_action:
action: navigate
navigation_path: /3d-home/3d-home
icon: mdi:floor-plan
entity: null
icon_color: white
card_mod:
style: |
ha-card {
border: 1px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: screen
media_query: >-
(orientation: landscape) and (max-height: 800px) and
(max-width: 1280px)
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
chip:
type: template
tap_action:
action: toggle
entity: script.dash_3d_home_1080
hold_action:
action: navigate
navigation_path: /3d-home/3d-home
icon: mdi:floor-plan
card_mod:
style: |
ha-card {
border: 1.0px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
- condition: and
conditions:
- condition: or
conditions:
- condition: screen
media_query: '(orientation: landscape) and (min-width: 1281px)'
- condition: screen
media_query: '(orientation: portrait) and (min-width: 769px)'
chip:
type: template
tap_action:
action: navigate
navigation_path: /lovelace-custom/weather-all-devices
icon: mdi:weather-rainy
entity: null
icon_color: white
card_mod:
style: |
ha-card {
border: 2px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: screen
media_query: '(orientation: portrait) and (max-width: 768px)'
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
chip:
type: template
tap_action:
action: navigate
navigation_path: /lovelace-custom/weather-all-devices
icon: mdi:weather-lightning
entity: null
icon_color: white
card_mod:
style: |
ha-card {
border: 1px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: screen
media_query: >-
(orientation: landscape) and (max-height: 800px) and
(max-width: 1280px)
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
chip:
type: template
tap_action:
action: toggle
entity: script.weather_page
hold_action:
action: navigate
navigation_path: /lovelace-custom/weather-all-devices
icon: mdi:weather-lightning-rainy
card_mod:
style: |
ha-card {
border: 1.0px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
- condition: and
conditions:
- condition: or
conditions:
- condition: screen
media_query: '(orientation: landscape) and (min-width: 1281px)'
- condition: screen
media_query: '(orientation: portrait) and (min-width: 769px)'
chip:
type: template
tap_action:
action: navigate
navigation_path: /garden-all-devices/garden-irrigation
icon: mdi:flower
entity: null
icon_color: white
card_mod:
style: |
ha-card {
border: 2px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: screen
media_query: '(orientation: portrait) and (max-width: 768px)'
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
chip:
type: template
tap_action:
action: navigate
navigation_path: /garden-all-devices/garden-irrigation
icon: mdi:flower
entity: null
icon_color: white
card_mod:
style: |
ha-card {
border: 1px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: screen
media_query: >-
(orientation: landscape) and (max-height: 800px) and
(max-width: 1280px)
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
chip:
type: template
tap_action:
action: toggle
entity: script.dash_garden
hold_action:
action: navigate
navigation_path: /garden-all-devices/garden-irrigation
icon: mdi:flower
card_mod:
style: |
ha-card {
border: 1.0px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
- condition: and
conditions:
- condition: or
conditions:
- condition: screen
media_query: '(orientation: landscape) and (min-width: 1281px)'
- condition: screen
media_query: '(orientation: portrait) and (min-width: 769px)'
chip:
type: template
entity: null
tap_action:
action: navigate
navigation_path: /fish-tank-panel/panel
icon: mdi:fishbowl-outline
icon_color: white
card_mod:
style: |
ha-card {
border: 2px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: screen
media_query: '(orientation: portrait) and (max-width: 768px)'
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
chip:
type: template
entity: null
tap_action:
action: navigate
navigation_path: /fish-tank-panel/mobile
icon: mdi:fishbowl-outline
icon_color: white
card_mod:
style: |
ha-card {
border: 1px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: screen
media_query: >-
(orientation: landscape) and (max-height: 800px) and
(max-width: 1280px)
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
chip:
type: template
tap_action:
action: toggle
entity: script.fish_tank_panel
hold_action:
action: navigate
navigation_path: /fish-tank-panel/panel
icon: mdi:fishbowl-outline
card_mod:
style: |
ha-card {
border: 1.0px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
- condition: and
conditions:
- condition: or
conditions:
- condition: screen
media_query: '(orientation: landscape) and (min-width: 1281px)'
- condition: screen
media_query: '(orientation: portrait) and (min-width: 769px)'
chip:
type: template
tap_action:
action: navigate
navigation_path: /lovelace-floorplan/CCTV-Aarlo-Panel
entity: null
icon_color: white
icon: mdi:cctv
card_mod:
style: |
ha-card {
border: 2px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
}
- type: conditional
conditions:
- condition: screen
media_query: '(orientation: portrait) and (max-width: 768px)'
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
chip:
type: template
tap_action:
action: navigate
navigation_path: /lovelace-media/all_devices
entity: null
picture: ''
icon_color: white
icon: mdi:remote-tv
card_mod:
style: |
ha-card {
border: 1px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: screen
media_query: >-
(orientation: landscape) and (max-height: 800px) and
(max-width: 1280px)
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
chip:
type: template
tap_action:
action: toggle
icon: mdi:remote-tv
entity: script.media_page
hold_action:
action: navigate
navigation_path: /lovelace-media/all_devices
card_mod:
style: |
ha-card {
border: 1px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
- condition: and
conditions:
- condition: or
conditions:
- condition: screen
media_query: '(orientation: landscape) and (min-width: 1281px)'
- condition: screen
media_query: '(orientation: portrait) and (min-width: 769px)'
chip:
type: template
tap_action:
action: navigate
navigation_path: /dashboard-bathroom/panel
entity: null
icon: mdi:bathtub-outline
icon_color: white
card_mod:
style: |
ha-card {
border: 2px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: screen
media_query: '(orientation: portrait) and (max-width: 768px)'
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
chip:
type: template
tap_action:
action: navigate
navigation_path: /dashboard-bathroom/mobile
entity: null
icon: mdi:bathtub-outline
icon_color: white
card_mod:
style: |
ha-card {
border: 1px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: conditional
conditions:
- condition: screen
media_query: >-
(orientation: landscape) and (max-height: 800px) and
(max-width: 1280px)
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
chip:
type: template
tap_action:
action: toggle
icon: mdi:bathtub-outline
entity: script.bathroom_home
hold_action:
action: navigate
navigation_path: /dashboard-bathroom/panel
card_mod:
style: |
ha-card {
border: 1px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(138,43,226,1) 100%);
}
- type: spacer
- type: spacer
- type: conditional
conditions:
- condition: state
entity: input_boolean.chips_menu_toggle
state: 'on'
chip:
type: template
tap_action:
action: toggle
entity: input_boolean.chips_menu_toggle
icon: mdi:unfold-less-vertical
card_mod:
style: |
ha-card {
border: 2px solid gray !important;
--chip-background: linear-gradient(45deg, rgba(60,0,103,1) 0%, rgba(43,226,64,1) 100%);
}
- 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%);
}
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;
}
}