Hi.
I’ve been using GeorgeSG’s Time Picker Card for a while.
Lately, however, it started to display in a weird way:
The way it used to display, was with HA’s card background (which, for the default theme is #FFFFFF), but for some reasons, now, if TPC is set to “Embedded”, its background is the same as HA’s dashboard (#FAFAFA).
The component is installed through HACS, reinstalling had no effect.
Looking in the web inspector, I noticed that adding back the background color to CSS class .time-picker-row, it displays correctly.
I then went into TPC’s files, in www/community/lovelace-time-picker-card/time-picker-card.js, and I found where the card’s CSS appears to be defined, in particular:
.time-picker-row {
display: flex;
flex-direction: row;
align-items: center;
padding: 16px;
}
I added background-color: #FFFFFF; to line 252, which appears to be where .time-picker-row is defined:
.time-picker-row {
display: flex;
flex-direction: row;
align-items: center;
padding: 16px;
background-color: #FFFFFF;
}
After reloading the page, clearing the browser’s cache, rebooting the system and reloading the custom component, inspecting the card reveals that .time-picker-row is still missing the background color, and therefore the card still shows the wrong background color.
I’m trying to figure out if I need to reload that component in any other way, but I found nothing.
I also tried
.time-picker-row {
display: flex;
flex-direction: row;
align-items: center;
padding: 16px;
background-color: var(--tpc-background-color);
}
After defining the --tpc-background-color variable as
:host {
[other TPC variables]
--tpc-background-color: var(--time-picker-background-color, var(--card-background-color))
[other TPC variables]
}
Where var(--card-background-color) should be HA’s default card bg color; not sure if that’s how I was supposed to define that variable, but I just copied the way that other variables, in the same document, are defined.
TPC displays the correct background color only when NOT set as “Embedded”.
An issue was open on the project’s GitHub page, but it appears this is not maintained anymore.
This is the configuration giving me problems:
type: custom:time-picker-card
entity: input_datetime.next_sunset
hour_mode: 24
hour_step: 1
minute_step: 5
layout:
hour_mode: double
align_controls: right
name: header
embedded: true #Problem here
hide:
seconds: true
This is how it’s supposed to look like (obtained by manually modifying the card’s CSS from the inspector):
It’s also supposed to have a border.
This is how it looks like:
For the versions in use, i’m on:
TPC: 1.4.0 (latest available)
HA OS: 10.3
HA Core: 2023.06.3
Ha Supervisor: 2023.6.4