frontend
frontend copied to clipboard
home-assistant
Thin white line on sidebar when hiding sidebar
Checklist
- [X] I have updated to the latest available Home Assistant version.
- [X] I have cleared the cache of my browser.
- [X] I have tried a different browser to see if it is related to my browser.
- [X] I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.
Describe the issue you are experiencing
There is a thin white line on the side of the screen (sidebar) when the sidebar is closed/minimized. I can't get it to go away.
Describe the behavior you expected
There should be no thin white line.
Steps to reproduce the issue
- I didn't change anything I just updated home assistant to 2024.8 and it appeared. ...
What version of Home Assistant Core has the issue?
2024.8.3
What was the last working version of Home Assistant Core?
2024.7.3
In which browser are you experiencing the issue with?
Arc Browser aka Chromium
Which operating system are you using to run this browser?
macOS Sonoma 14.4.1
State of relevant entities
No response
Problem-relevant frontend configuration
No response
Javascript errors shown in your browser console/inspector
No response
Additional information
No response
Do you have a theme installed? I don't have this issue with the default theme.
I am using a theme yes, it's a modified version of "minimalist-desktop-theme", but this wasn't happening before the update.
Nestico-Home-Theme:
# Test
state-icon-color: "rgb(var(--color-theme))"
border-radius: "20px"
ha-card-border-radius: "var(--border-radius)"
error-color: "var(--google-red)"
warning-color: "var(--google-yellow)"
success-color: "var(--google-green)"
info-color: "var(--google-blue)"
divider-color: "rgba(var(--color-theme),.12)"
accent-color: "var(--google-blue)"
ha-dialog-border-radius: "30px"
accent-luminance: 23%
# fix added border-lines in 2022.11
ha-card-border-width: "0px"
#sidebar test
sidebar-background-color: var(--navbar-background)
sidebar-selected-icon-color: var(--primary-color)
sidebar-selected-text-color: var(--primary-text-color)
sidebar-text-color: var(--sidebar-icon-color)
card-mod-theme: "Nestico-Home-Theme"
card-mod-view-yaml: |
"*:first-child$": |
#columns .column > * {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
}
modes:
light:
#test sidebar border fix / popup BG colors maybe
mdc-theme-surface: "var(--primary-background-color)"
# text
primary-text-color: "#212121"
# main interface colors
primary-color: "rgba(137,179,248)"
google-red: "#F54436"
google-green: "#01C852"
google-yellow: "#FF9101"
google-blue: "rgba(61,90,254)"
google-violet: "#661FFF"
google-grey: "#BBBBBB"
color-red: "rgb(245, 68, 54)"
color-green: "rgb(1, 200, 82)"
color-yellow: "rgb(255, 145, 1)"
color-blue: "rgb(61, 90, 254)"
color-purple: "rgb(102, 31, 255)"
color-grey: "rgb(187, 187, 187)"
color-pink: "rgb(233, 30, 99)"
color-theme: "rgb(51,51,51)"
color-background-yellow: "250, 250, 250"
color-background-blue: "250, 250, 250"
color-background-green: "250, 250, 250"
color-background-red: "250, 250, 250"
color-background-pink: "250, 250, 250"
color-background-purple: "250, 250, 250"
color-yellow-text: "var(--primary-text-color)"
color-blue-text: "var(--primary-text-color)"
color-green-text: "var(--primary-text-color)"
color-red-text: "var(--primary-text-color)"
color-pink-text: "var(--primary-text-color)"
color-purple-text: "var(--primary-text-color)"
opacity-bg: "1"
# background and sidebar
card-background-color: "#FAFAFA"
primary-background-color: "#EFEFEF"
secondary-background-color: "#EFEFEF"
# header
navbar-background: rgb(240, 244, 249)
app-header-text-color: "var(--primary-text-color)"
app-header-background-color: "var(--primary-background-color)"
# paper-tabs-selection-bar-color: "var(--primary-text-color)"
# slider
slider-color: "rgb(var(--color-blue))"
slider-bar-color: "rgba(var(--color-blue),0.38)"
# cards
box-shadow: "0px 2px 4px 0px rgba(0,0,0,0.16)"
ha-card-box-shadow: "var(--box-shadow)"
# sidebar
sidebar-icon-color: rgb(88, 89, 95)
sidebar-selected-text-color: "var(--google-red)"
sidebar-selected-icon-color: "var(--google-red)"
sidebar-text-color: "#80868b"
# switch
switch-checked-color: "var(--google-blue)"
# media player
mini-media-player-accent-color: "var(--google-blue)"
dark:
#test sidebar border fix / popup BG colors maybe
mdc-theme-surface: "var(--primary-background-color)"
# text
primary-text-color: "#DDDDDD"
# main interface colors
primary-color: "rgba(137,179,248)"
google-red: "#F18B82"
# google-green: "#80C994"
google-green: "#01C852"
google-yellow: "#FCD663"
google-blue: "#89B3F8"
google-violet: "#BB86FC"
google-grey: "#BBBBBB"
color-red: "rgb(241, 139, 130)"
color-green: "rgb(128, 201, 148)"
color-yellow: "rgb(252, 214, 99)"
color-blue: "rgb(137, 179, 248)"
color-theme: "rgb(221,221,221)"
color-purple: "rgb(102, 31, 255)"
color-grey: "rgb(187, 187, 187)"
color-pink: "rgb(233, 30, 99)"
color-background-yellow: "var(--color-yellow)"
color-background-blue: "var(--color-blue)"
color-background-green: "var(--color-green)"
color-background-red: "var(--color-red)"
color-background-pink: "var(--color-pink)"
color-background-purple: "var(--color-purple)"
color-yellow-text: "var(--color-yellow)"
color-blue-text: "var(--color-blue)"
color-green-text: "var(--color-green)"
color-red-text: "var(--color-red)"
color-pink-text: "var(--color-pink)"
color-purple-text: "var(--color-purple)"
opacity-bg: "0.1"
# floating button text color
mdc-theme-on-secondary: "var(--card-background-color)"
# background and sidebar
card-background-color: "#1D1D1D"
primary-background-color: "#121212"
secondary-background-color: "#121212"
# header
navbar-background: rgb(30, 31, 32)
app-header-text-color: "var(--primary-text-color)"
app-header-background-color: "var(--primary-background-color)"
paper-tabs-selection-bar-color: "var(--primary-text-color)"
# Sidebar
sidebar-selected-text-color: "rgb(var(--color-blue))"
sidebar-selected-icon-color: "rgb(var(--color-blue))"
sidebar-icon-color: rgb(147, 149, 159)
# Slider
slider-color: "rgb(var(--color-blue))"
slider-bar-color: "rgba(var(--color-blue),0.38)"
# card
box-shadow: "none"
# media player
mini-media-player-accent-color: "var(--google-blue)"
# Journal
state-icon-color: "rgb(var(--color-theme))"
card-mod-more-info-yaml: |
$: |
.mdc-dialog__scrim {
backdrop-filter: blur(20px) brightness(70%);
-webkit-backdrop-filter: blur(20px) brightness(70%);
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
border-radius: 25px;
background: transparent;
}
.mdc-dialog .mdc-dialog__content {
padding-top: 0px !important;
}
ha-dialog$: |
.mdc-dialog__scrim {
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
ha-dialog-header$: |
.mdc-top-app-bar {
background: var(--header-background-color) !important;
}
card-mod-sidebar-yaml: |
.: |
:host {
background: var(--navbar-background) !important;
}
.iron-selected paper-icon-item::before {
background: "(var(--primary-color),.5)";
border-radius: 30px !important;
}
You will need to use the other support channels for this. This is only for bug reports towards supported resources. (The best thing I can suggest for now, is to open developer tools, hover over the white sidebar to see what css variable it uses. )
Here is what I found, turning off "border-color" removes it. How do I add this to the theme file now if you can tell me that'd be great. Thanks
Edit: figured it out