dreimer1986
commented
2 years ago I tinkered around a bit more and managed to get this far:
In app-drawer you find :host([persistent]) and a width value in there. When it's active:
when disabling it:
Here my mess I currently have in my theme:
card-mod-root: |
ha-app-layout {
background-size: cover;
}
app-header {
background: var(--ha-card-background) !important;
}
app-toolbar {
background: none !important;
}
card-mod-badge-yaml: |
ha-state-label-badge $ ha-label-badge $: |
.label-badge {
background: var(--ha-card-background) !important;
}
card-mod-sidebar: |
:host {
background: rgba(0, 0, 0, 0.5) !important;
}
:host([persistent]) {
width: 0 !important;
}
:host::before {
background: rgba(0, 0, 0, 0.5) !important;
}
div.menu {
background: var(--ha-card-background) !important;
}
paper-icon-item[role=option], paper-icon-item[aria-role=option] {
background: var(--ha-card-background) !important;
}
.iron-selected paper-icon-item {
background: var(--ha-card-background) !important;
}Most is completely useless, but I really hoped I could get it to edit the width to 0. Does not work though... What did I do wrong?
Currently I am tinkering with animated backgrounds. In the past I managed to use card-mod in my theme to get the background themed with a image already. But now that I try my luck with "Lovelace Animated Background" I find that the video runs on full screen, but the sidebar is hiding parts of it. Is there any way to make it transparent? I don't know if this is a real feature request, but running through all the CSS values I only managed to get it semi transparent to a white background color. The video still is not there. So maybe it is not possible right now?