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

[ncd]

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

[treinenwimke (Willem van Bergen)]

Start here. Helped me a lot.

[dimitri.landerloos]

@ncd i also made this:

Mushroom Inspiration!

Hi All, I have built an alternative to the existing mushroom horizontal layout that currently exists with card_mod: [image] i didnt like the fact that a bunch of space is being wasted, and that you have very limited room for the slider. so i built this: [image] and its alternative that keeps the text in 2 rows: [image] You need to ensure that you have layout: horizontal in your card it works with no buttons, 1 button or both of the buttons: [image] it will auto adjust th…

[treinenwimke (Willem van Bergen)]

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.