fix dom refresh loop and add configurable custom colors

[fuslwusl]

allow user to change the colors of the card elements using the ui or yaml configuration:
cardBackgroundColor: transparent
headerBackgroundColor: "#ffffff55"
headerTextColor: "#000000"
textColor: "#ffffff"

[Nisbo]

Thx for your request, so far the addition for the color options are nice. :)

Now I have to find out why there was a problem with the DOM. I saw you added a delay of 30 seconds and added a lot of lines to the code.

[fuslwusl]

The dom refreshes on every event in homeassistant. If you have lots of items that update very often - for example power measurements every second - the dom updates all the time. you can see this frequent updates in the developer tools in the browser.

[Nisbo]

I tested it in my test system and so far its working but I dont like the design changes.
Now it looks like this

instead of this

Appart from the padding changes, TRAM now looks like a S4 and busses like a S5

I’d prefer not to change the default design (also partly for self-defense → WAF 😄).

However, if you think a smaller header (the yellow background) and more compact rows below might be useful for some users, an optional setting in the card editor—similar to the other options you added—could be a good solution.

Just please keep the labels unchanged.