Hi all,
I updated to the most recent version of Home Assistant and almost all of my CSS code fails to be recognized (e.g. drop shadow, background blur, transparency, animations etc…)
Any one having similar issues?
What do you mean by CSS code? A custom theme? A custom card-mod theme? Just a card-mod code?
1 Like
I think the release notes of one of the latest card_mods had an explanation for it and probably also a solution.
Explanation is very simple - Frontend changed))).
Now users need to find out which vars are deprecated, which vars should be replaced & so on. Patchwork.
Yikes, I’ve never had to rework my entire dash for an update before but I will see what’s changed. This is mainly card-mods. See screen shots below of what happened to my floating transparent nav bar at the bottom of my dash.
type: custom:mod-card
card_mod:
style: |
@media (min-width:180px) {
ha-card {
z-index: 1;
position: fixed;
bottom: 10px;
left: 10px;
width: calc(100% - 20px);
shadow: none;
background: rgba(250,251,252,.04);
backdrop-filter: blur(10px);
border-radius: 100px;
padding: 10px;
}
}
@media (min-width:800px) {
ha-card {
width: calc(50% - 0px);
left: calc(25% - 0px);
}
}
card:
type: grid
square: false
columns: 6
cards:
- type: custom:button-card
icon: mdi:arrow-expand-vertical
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.kiosk_mode
data: {}
styles:
icon:
- width: 20px
- color: grey
ing_cell:
- width: 50px
- height: 50px
card:
- background: none
- shadow: none
- padding: 0
- type: custom:button-card
icon: mdi:lightbulb
tap_action:
action: navigate
navigation_path: \dark-theme\lights
styles:
icon:
- width: 20px
- color: grey
ing_cell:
- width: 50px
- height: 50px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:television
tap_action:
action: navigate
navigation_path: \dark-theme\media
styles:
icon:
- width: 20px
- color: rgb(33,150,243)
ing_cell:
- width: 50px
- height: 50px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:air-filter
tap_action:
action: navigate
navigation_path: \dark-theme\air
styles:
icon:
- width: 20px
- color: grey
ing_cell:
- width: 50px
- height: 50px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:robot-vacuum
tap_action:
action: navigate
navigation_path: \dark-theme\vacuums
styles:
icon:
- width: 20px
- color: grey
ing_cell:
- width: 50px
- height: 50px
card:
- background: none
- padding: 0
- type: custom:button-card
icon: mdi:motion-sensor
tap_action:
action: navigate
navigation_path: \dark-theme\motion
styles:
icon:
- width: 20px
- color: grey
ing_cell:
- width: 50px
- height: 50px
card:
- background: none
- padding: 0
I am getting the same problems.
Here i asked to the bubble card developer:
Fixed it by updating to the newest version of card-mod v 4