One thing I wasn't able to fix just from the pure GitHub editor: when the room name is missing, there's a needless spacing at the top. To solve that, the whole .header element must not be rendered. I'll do a second commit with that, but you should test it on your setup before merging it.
That's because I made all the CSS changes both in my DevTools and in the GitHub editor, so I could avoid discovering how to get a dev version running on my HA instance :eyes:
The side effect is that I cannot check TS changes (neither have I ever used TS, just pure JS+JSDoc).
Besides the colors, I also standardized CSS spaces as different sections had different spacing; also removed an out-of-place <li> in favor of a generic <div>, and cleaned some rules that seemed as leftovers - such as background: 0 0 which had no visible effect, at least on the different setups I tried.
I also standardized some sizes: icons got smaller, so they're using the standard var(--mdc-icon-size) which is used for other HA icons, and line height was changed to be the same, so the icon doesn't stand out so much from the rest of the line. The default HA's line height is even smaller (normal), so I found the icon size to be a good compromise between the card contents and standard styles.
Some space changed as well: one of them was causing extra space in between cards, which would make these cards more spaced from others than default cards. There is still extra space, but I wasn't able to figure out why.
One thing I wasn't able to fix just from the pure GitHub editor: when the room name is missing, there's a needless spacing at the top. To solve that, the whole
.headerelement must not be rendered. I'll do a second commit with that, but you should test it on your setup before merging it.That's because I made all the CSS changes both in my DevTools and in the GitHub editor, so I could avoid discovering how to get a dev version running on my HA instance :eyes: The side effect is that I cannot check TS changes (neither have I ever used TS, just pure JS+JSDoc).
Besides the colors, I also standardized CSS spaces as different sections had different spacing; also removed an out-of-place
<li>in favor of a generic<div>, and cleaned some rules that seemed as leftovers - such asbackground: 0 0which had no visible effect, at least on the different setups I tried.I also standardized some sizes: icons got smaller, so they're using the standard
var(--mdc-icon-size)which is used for other HA icons, and line height was changed to be the same, so the icon doesn't stand out so much from the rest of the line. The default HA's line height is even smaller (normal), so I found the icon size to be a good compromise between the card contents and standard styles. Some space changed as well: one of them was causing extra space in between cards, which would make these cards more spaced from others than default cards. There is still extra space, but I wasn't able to figure out why.closes #42