Does anyone know of a way to move the brightness slider and the light icon and brightness % on a single “line” rather than having the light icon and brightness above the slider? Right now this is pretty wasteful of space without much benefit (at least IMHO).
Yes, very nice work. Changed a few things myself to get rid of the secondary text (Off) when the light is off; the contrast between an ‘on’ light and an ‘off’ light is big enough. To accomplish this I added a ‘display: none;’ in the .secondary part, after the first {% else %}:
.secondary {
flex-shrink: 1;
flex-grow: 0;
{% if state_attr(config.entity, 'rgb_color') == none %}
{% if states(config.entity) == 'on' %}
--secondary-text-color: #3b3b3b;
{% else %}
display: none;
{% endif %}
To get a bit more space between the percentage and the edge of the slider I changed the right margin in the .container part, from -8px to 0:
.container {
display: flex;
{% if states(config.entity) == 'on' %}
z-index: 1;
flex-direction: row !important;
align-items: baseline;
pointer-events: none !important;
margin-left: 10px;
margin-right: -0px;
{% else %}
{% endif %}
}
On my laptop with the Home Assistant theme in light mode it looks very nice. Top 3 sliders are with the added / changed card_mod yaml, bottom one is an original mushroom light card:
But on my smartphone (or dark mode theme) the percentages are hardly readable:
So this I’ll have to change sometime. For now it’ll do.
1 Like