Since 2021.9 Im starting noticing strange behaviour with my frontend.
When writing code and saving it looks like the top picture but when I update/reload the page it looks like the bottom picture.
The code:
cards:
- content: |
# Asus Router
style:
.: |
ha-card {
background-color: transparent !important;
box-shadow: none !important;
}
ha-markdown:
$: |
h1 {
font-size: 25px;
# font-weight: bold;
text-align: center;
letter-spacing: '-0.01em';
}
type: markdown
- type: glance
entities:
- entity: sensor.asuswrt_devices_connected
name: Connected
- entity: sensor.asuswrt_download_speed
name: Download
- entity: sensor.asuswrt_upload_speed
name: Upload
show_name: true
show_state: true
show_icon: true
state_color: true
columns: 3
style: |
ha-card {
--ha-card-background: rgba(50,50,50,0.0);
background-repeat: no-repeat;
background-size: 100% 100%;
border: solid 2px rgba(100,100,100,0.5);
border-radius: 20px;
box-shadow: 3px 3px rgba(0,0,0,0.4);
overflow: hidden;
}
- type: glance
entities:
- entity: sensor.asuswrt_download
name: Download
- entity: sensor.asuswrt_upload
name: Upload
show_name: true
show_state: true
show_icon: true
state_color: true
columns: 2
style: |
ha-card {
--ha-card-background: rgba(50,50,50,0.0);
background-repeat: no-repeat;
background-size: 100% 100%;
border: solid 2px rgba(100,100,100,0.5);
border-radius: 20px;
box-shadow: 3px 3px rgba(0,0,0,0.4);
overflow: hidden;
}
type: vertical-stack