Mushroom light card: how to keep light icon, brightness and brightness slider on a single "line"?

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).

Start here. Helped me a lot.

@ncd i also made this:

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 %}

Screenshot 2024-01-05 152755

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:

Screenshot 2024-01-05 153405

But on my smartphone (or dark mode theme) the percentages are hardly readable:

Screenshot 2024-01-05 153802

So this I’ll have to change sometime. For now it’ll do.

1 Like