Mushroom Light Card - demo of combining brightness and name areas

Share your Projects! Dashboards & Frontend
1

I have a room full of dimmable bulbs (white color only) I control with Mushroom Light Cards, and by default that looks like:

image

On a small device, having a series of those takes up quite a bit of space, so I found a way to compress them using card-mod:

image

The icon is still available for taps/holds, but I really thought there was no sense in having the name visible, plus a separate slider bar for brightness below.

The CSS I’d want to apply to that would move the slider bar up (give it a negative margin), and in so it doesn’t overlay the icon (give it a left margin), and give it less than 100% default opacity so you can read what’s layered below it.

Result:

        card_mod:
          style: |
            div.actions {
              margin-top: -4em;
              margin-left: 52px;
              opacity: 0.4;
            }

Bonus: If you happen to group lights for common control but still want the ability to tweak individual lights in the group, use an expander card (With a title card to represent the whole group when the card is not-expanded)… and each individual light card inside the group so you can tweak each one. Have to also use a grid card inside the expander to fix layout issues, and can throw the card-mod overlay trick above on too, and get…

Light-Group-Animation

I was so happy with how it worked, I figured I’d share.

The full code for that grouped display:

type: custom:expander-card
gap: 0.6em
padding: 1em
clear: false
title: Expander
overlay-margin: 2em
child-padding: 0.5em 1em 0.5em 0.5em
button-background: transparent
cards:
  - square: false
    type: grid
    cards:
      - type: custom:mushroom-light-card
        entity: light.0xb0ce18140355f2f6
        show_brightness_control: true
        card_mod:
          style: |
            div.actions {
              margin-top: -4em;
              margin-left: 52px;
              opacity: 0.4;
            }
      - type: custom:mushroom-light-card
        entity: light.0xb0ce181403560902
        show_brightness_control: true
        card_mod:
          style: |
            div.actions {
              margin-top: -4em;
              margin-left: 52px;
              opacity: 0.4;
            }
      - type: custom:mushroom-light-card
        entity: light.0xb0ce18140356327f
        show_brightness_control: true
        card_mod:
          style: |
            div.actions {
              margin-top: -4em;
              margin-left: 52px;
              opacity: 0.4;
            }
      - type: custom:mushroom-light-card
        entity: light.0xb0ce1814035e2a4f
        show_brightness_control: true
        card_mod:
          style: |
            div.actions {
              margin-top: -4em;
              margin-left: 52px;
              opacity: 0.4;
            }
    columns: 1
title-card:
  type: custom:mushroom-light-card
  entity: light.living_room_corner_lights_2
  show_brightness_control: true
  collapsible_controls: true
  hold_action:
    action: call-service
    service: scene.turn_on
    data:
      transition: 1
    target:
      area_id: living_room
      entity_id: scene.watch_tv
  double_tap_action:
    action: call-service
    service: scene.turn_on
    data:
      transition: 3
    target:
      area_id: living_room
      entity_id: scene.living_room_lights_full_on
  card_mod:
    style: |
      div.actions {
        margin-top: -4em;
        margin-left: 52px;
        opacity: 0.4;
      }
card_mod:
  style: |
    div.actions {
      margin-top: -4em;
      margin-left: 52px;
      opacity: 0.4;
    }
5 Likes