Mushroom Inspiration!

Hi,

image
Thank you for the code
Is it possible to get it full?

And how can the cubes be made - I need 4 but not one under the other I want one next to the other

Mushroom-Internet-State-Card

image image

Made with Mushroom-Card and Button-Card.

The card shows

  • the state of my internet-connection (binary_sensor from fritz.box)
  • a button to toggle guest-wifi (switch from fritz.box)
  • the upload, download and ping (sensors from speedtest.net)

The Download, Upload and Ping Icons turn green (good), orange (average) or red (poor) matching your rules in the “variables”-section.

You just to need to fill in your entities in the “variables:”-section.

YAML-Code
(little update - just found out that i need to add “triggers_update” so that updates to the entities will show as they happen)

    type: custom:button-card
    variables:
      internet_state: binary_sensor.fb_keller_connection
      wifi_switch: switch.fb_keller_wi_fi_guestwifi
      download_state: sensor.speedtest_download
      upload_state: sensor.speedtest_upload
      ping_state: sensor.speedtest_ping
      download_good_above: 350
      download_average_above: 200
      download_poor_below: 200
      upload_good_above: 150
      upload_average_above: 100
      upload_poor_below: 100
      ping_good_below: 20
      ping_average_below: 40
      ping_poor_above: 40
    triggers_update:
      - '[[[ return variables.internet_state ]]]'
      - '[[[ return variables.wifi_switch ]]]'
      - '[[[ return variables.download_state ]]]'
      - '[[[ return variables.upload_state ]]]'
      - '[[[ return variables.ping_state ]]]'
    show_name: false
    show_state: false
    show_icon: false
    styles:
      card:
        - padding: 3px
      grid:
        - grid-template-areas: '"oben" "unten"'
        - grid-template-columns: auto
        - grid-template-rows: 1fr 1fr
      custom_fields:
        oben:
          - filter: opacity(100%)
          - overflow: visible
        unten:
          - filter: opacity(100%)
          - overflow: visible
    custom_fields:
      oben:
        card:
          type: custom:mushroom-template-card
          entity: '[[[ return variables.internet_state ]]]'
          tap_action:
            action: navigate
            navigation_path: /lovelace/internet
          icon: |
            {% if is_state(entity, "on") %}
              mdi:web-check
            {% elif is_state(entity, "off") %}
              mdi:web-cancel
            {% endif %}
          icon_color: |
            {% if is_state(entity, "on") %}
              green
            {% elif is_state(entity, "off") %}
              red
            {% endif %}
          primary: |
            {% if is_state(entity, "on") %}
              online
            {% elif is_state(entity, "off") %}
              offline
            {% endif %}
          secondary: '{{ state_attr(entity,"friendly_name") }}'
          card_mod:
            style: |
              ha-card {
                padding: 0px !important;
                padding-bottom: 3px !important;
                text-align: left !important;
                border: none !important;
                box-shadow: none !important;
              }        
      unten:
        card:
          type: grid
          columns: 4
          square: false
          cards:
            - type: custom:button-card
              entity: '[[[ return variables.wifi_switch ]]]'
              layout: icon_state
              show_name: false
              show_state: true
              show_label: true
              label: Gast
              size: 100%
              state:
                - value: 'on'
                  state_display: an
                  styles:
                    icon:
                      - color: green
                - value: 'off'
                  state_display: aus
              styles:
                icon:
                  - color: darkcyan
                state:
                  - font-size: 0.7rem
                  - font-weight: bold
                label:
                  - font-size: 0.7rem
                card:
                  - background: rgba(var(--rgb-primary-text-color), 0.05)
                  - height: 3rem
                  - border: none
                  - box-shadow: none
            - type: custom:button-card
              entity: '[[[ return variables.download_state ]]]'
              layout: icon_state
              show_name: false
              show_state: true
              show_label: true
              label: Mbit/s
              size: 100%
              state_display: >-
                [[[ return
                Math.round(Number(states[variables.download_state].state)).toFixed(0);
                ]]]
              state:
                - value: '[[[ return variables.download_good_above ]]]'
                  operator: ">"
                  styles:
                    icon:
                      - color: green
                - value: '[[[ return variables.download_average_above ]]]'
                  operator: ">="
                  styles:
                    icon:
                      - color: darkorange
                - value: '[[[ return variables.download_poor_below ]]]'
                  operator: "<"
                  styles:
                    icon:
                      - color: red
              styles:
                state:
                  - font-size: 0.7rem
                  - font-weight: bold
                label:
                  - font-size: 0.7rem
                card:
                  - background: rgba(var(--rgb-primary-text-color), 0.05)
                  - height: 3rem
                  - border: none
                  - box-shadow: none
            - type: custom:button-card
              entity: '[[[ return variables.upload_state ]]]'
              layout: icon_state
              show_name: false
              show_state: true
              show_label: true
              label: Mbit/s
              size: 100%
              state_display: >-
                [[[ return
                Math.round(Number(states[variables.upload_state].state)).toFixed(0);
                ]]]
              state:
                - value: '[[[ return variables.upload_good_above ]]]'
                  operator: ">"
                  styles:
                    icon:
                      - color: green
                - value: '[[[ return variables.upload_average_above ]]]'
                  operator: ">="
                  styles:
                    icon:
                      - color: darkorange
                - value: '[[[ return variables.upload_poor_below ]]]'
                  operator: "<"
                  styles:
                    icon:
                      - color: red
              styles:
                state:
                  - font-size: 0.7rem
                  - font-weight: bold
                label:
                  - font-size: 0.7rem
                card:
                  - background: rgba(var(--rgb-primary-text-color), 0.05)
                  - height: 3rem
                  - border: none
                  - box-shadow: none
            - type: custom:button-card
              entity: '[[[ return variables.ping_state ]]]'
              layout: icon_state
              show_name: false
              show_state: true
              show_label: true
              label: ms
              size: 100%
              state_display: >-
                [[[ return
                Math.round(Number(states[variables.ping_state].state)).toFixed(0);
                ]]]
              state:
                - value: '[[[ return variables.ping_good_below ]]]'
                  operator: "<"
                  styles:
                    icon:
                      - color: green
                - value: '[[[ return variables.ping_average_below ]]]'
                  operator: "<="
                  styles:
                    icon:
                      - color: darkorange
                - value: '[[[ return variables.ping_poor_above ]]]'
                  operator: ">"
                  styles:
                    icon:
                      - color: red
              styles:
                state:
                  - font-size: 0.7rem
                  - font-weight: bold
                label:
                  - font-size: 0.7rem
                card:
                  - background: rgba(var(--rgb-primary-text-color), 0.05)
                  - height: 3rem
                  - border: none
                  - box-shadow: none

You can also have the cards above in this way

image
image

All you need to to ist to change this

      grid:
        - grid-template-areas: '"oben" "unten"'
        - grid-template-columns: 100%
        - grid-template-rows: 1.3fr 1fr

to that

  grid:
    - grid-template-areas: '"oben unten"'
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 100%
28 Likes

Mushroom-Printer-State-Card

image image

Made with Mushroom-Card and Button-Card.

The card shows

  • the state of my printer (sensor from IPP-Integration)
  • the fill of the toners Cyan, Magenta, Yellow, Black (sensors from IPP-Integration)

You just to need to fill in your entities in the “variables:”-section.

YAML-Code
(little update - just found out that i need to add “triggers_update” so that updates to the entities will show as they happen)

    type: custom:button-card
    variables:
      printer_state: sensor.ecosys_m5521cdn
      c_state: sensor.ecosys_m5521cdn_cyan_tk_5230cs
      y_state: sensor.ecosys_m5521cdn_yellow_tk_5230y
      m_state: sensor.ecosys_m5521cdn_magenta_tk_5230m
      k_state: sensor.ecosys_m5521cdn_black_tk_5230k
    triggers_update:
      - '[[[ return variables.printer_state ]]]'
      - '[[[ return variables.c_state ]]]'
      - '[[[ return variables.y_state ]]]'
      - '[[[ return variables.m_state ]]]'
      - '[[[ return variables.k_state ]]]'
    show_name: false
    show_state: false
    show_icon: false
    styles:
      card:
        - padding: 3px
      grid:
        - grid-template-areas: '"oben" "unten"'
        - grid-template-columns: 100%
        - grid-template-rows: 1fr 1fr
      custom_fields:
        oben:
          - filter: opacity(100%)
          - overflow: visible
        unten:
          - filter: opacity(100%)
          - overflow: visible
    custom_fields:
      oben:
        card:
          type: custom:mushroom-entity-card
          entity: '[[[ return variables.printer_state ]]]'
          tap_action:
            action: more-info
          icon: mdi:printer-outline
          card_mod:
            style: |
              ha-card {
                padding: 0px !important;
                padding-bottom: 3px !important;
                text-align: left !important;
                border: none !important;
                box-shadow: none !important;
              }     
      unten:
        card:
          type: grid
          columns: 4
          square: false
          cards:
            - type: custom:button-card
              entity: '[[[ return variables.k_state ]]]'
              layout: icon_state
              size: 200%
              styles:
                icon:
                  - color: DimGray
                state:
                  - font-size: 0.7rem
                  - font-weight: bold
                label:
                  - font-size: 0.7rem
                card:
                  - background: rgba(var(--rgb-primary-text-color), 0.05)
                  - height: 3rem
              show_name: false
              show_state: true
              show_label: true
              label: >-
                [[[ return states[variables.k_state].attributes.friendly_name
                ]]]
              state_display: >-
                [[[ return
                Math.round(Number(states[variables.k_state].state)).toFixed(0) +
                states[variables.k_state].attributes.unit_of_measurement; ]]]
              icon: mdi:water
              card_mod:
                style: |
                  ha-card {
                    padding: 3px !important;
                    margin: 0px !important;
                    border: none !important;
                    box-shadow: none !important;
                  }    
            - type: custom:button-card
              entity: '[[[ return variables.c_state ]]]'
              layout: icon_state
              size: 200%
              styles:
                icon:
                  - color: darkcyan
                state:
                  - font-size: 0.7rem
                  - font-weight: bold
                label:
                  - font-size: 0.7rem
                card:
                  - background: rgba(var(--rgb-primary-text-color), 0.05)
                  - height: 3rem
              show_name: false
              show_state: true
              show_label: true
              label: >-
                [[[ return states[variables.c_state].attributes.friendly_name
                ]]]
              state_display: >-
                [[[ return
                Math.round(Number(states[variables.c_state].state)).toFixed(0) +
                states[variables.c_state].attributes.unit_of_measurement; ]]]
              icon: mdi:water
              card_mod:
                style: |
                  ha-card {
                    padding: 3px !important;
                    margin: 0px !important;
                    border: none !important;
                    box-shadow: none !important;
                  }                
            - type: custom:button-card
              entity: '[[[ return variables.m_state ]]]'
              layout: icon_state
              size: 200%
              styles:
                icon:
                  - color: darkmagenta
                state:
                  - font-size: 0.7rem
                  - font-weight: bold
                label:
                  - font-size: 0.7rem
                card:
                  - background: rgba(var(--rgb-primary-text-color), 0.05)
                  - height: 3rem
              show_name: false
              show_state: true
              show_label: true
              label: >-
                [[[ return states[variables.m_state].attributes.friendly_name
                ]]]
              state_display: >-
                [[[ return
                Math.round(Number(states[variables.m_state].state)).toFixed(0) +
                states[variables.m_state].attributes.unit_of_measurement; ]]]
              icon: mdi:water
              card_mod:
                style: |
                  ha-card {
                    padding: 3px !important;
                    margin: 0px !important;
                    border: none !important;
                    box-shadow: none !important;
                  }             
            - type: custom:button-card
              entity: '[[[ return variables.y_state ]]]'
              layout: icon_state
              size: 200%
              styles:
                icon:
                  - color: darkorange
                state:
                  - font-size: 0.7rem
                  - font-weight: bold
                label:
                  - font-size: 0.7rem
                card:
                  - background: rgba(var(--rgb-primary-text-color), 0.05)
                  - height: 3rem
              show_name: false
              show_state: true
              show_label: true
              label: >-
                [[[ return states[variables.y_state].attributes.friendly_name
                ]]]
              state_display: >-
                [[[ return
                Math.round(Number(states[variables.y_state].state)).toFixed(0) +
                states[variables.y_state].attributes.unit_of_measurement; ]]]
              icon: mdi:water
              card_mod:
                style: |
                  ha-card {
                    padding: 3px !important;
                    margin: 0px !important;
                    border: none !important;
                    box-shadow: none !important;
                  }  

You can also have the cards above in this way

image
image

All you need to to ist to change this

      grid:
        - grid-template-areas: '"oben" "unten"'
        - grid-template-columns: 100%
        - grid-template-rows: 1.3fr 1fr

to that

  grid:
    - grid-template-areas: '"oben unten"'
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 100%
27 Likes

Mushroom-Desk-Card

image image

Made with Mushroom-Card and Button-Card.

The card shows

You just to need to fill in your entities in the “variables:”-section.

YAML-Code
(little update - just found out that i need to add “triggers_update” so that updates to the entities will show as they happen - also changed the “mushroom”-card a little bit)

    type: custom:button-card
    variables:
      desk_cover: cover.desk
      desk_height: sensor.desk_height
      up_switch: switch.up
      down_switch: switch.down
      stop_script: script.schreibtisch_anhalten
      sit_button: button.sit
      stand_button: button.stand
    triggers_update:
      - '[[[ return variables.desk_cover ]]]'
      - '[[[ return variables.desk_height ]]]'
      - '[[[ return variables.up_switch ]]]'
      - '[[[ return variables.stop_script ]]]'
      - '[[[ return variables.sit_button ]]]'
      - '[[[ return variables.stand_button ]]]'
    show_name: false
    show_state: false
    show_icon: false
    styles:
      card:
        - padding: 3px
      grid:
        - grid-template-areas: '"oben" "unten"'
        - grid-template-columns: 100%
        - grid-template-rows: 1.3fr 1fr
      custom_fields:
        oben:
          - filter: opacity(100%)
          - overflow: visible
        unten:
          - filter: opacity(100%)
          - overflow: visible
    custom_fields:
      oben:
        card:
          type: custom:mushroom-template-card
          entity: '[[[ return variables.desk_height ]]]'
          tap_action:
            action: more-info
            entity: '[[[ return variables.desk_cover ]]]'
          icon_color: blue
          primary: '{{ state_attr(entity,"friendly_name") }}'
          secondary: '{{ states(entity) }} {{ state_attr(entity,"unit_of_measurement") }}'
          icon: '{{ state_attr(entity,"icon") }}'
          card_mod:
            style: |
              ha-card {
                padding: 0px !important;
                padding-bottom: 3px !important;
                text-align: left !important;
                border: none !important;
                box-shadow: none !important;
              }   
      unten:
        card:
          type: grid
          columns: 5
          square: false
          cards:
            - type: custom:button-card
              tap_action:
                action: call-service
                service: switch.turn_on
                service_data:
                  entity_id: '[[[ return variables.down_switch ]]]'
              show_state: false
              show_name: false
              show_icon: true
              icon: mdi:arrow-down
              styles:
                card:
                  - padding: 3px
                  - height: 3rem
                  - box-shadow: none
                  - border: none
                  - background: rgba(var(--rgb-primary-text-color), 0.05)
                icon:
                  - height: 1.5rem
                  - width: 1.5rem
            - type: custom:button-card
              tap_action:
                action: call-service
                service: '[[[ return variables.stop_script ]]]'
              show_state: false
              show_name: false
              show_icon: true
              icon: mdi:pause
              styles:
                card:
                  - padding: 3px
                  - height: 3rem
                  - box-shadow: none
                  - border: none
                  - background: rgba(var(--rgb-primary-text-color), 0.05)
                icon:
                  - height: 1.5rem
                  - width: 1.5rem
            - type: custom:button-card
              tap_action:
                action: call-service
                service: switch.turn_on
                service_data:
                  entity_id: '[[[ return variables.up_switch ]]]'
              show_state: false
              show_name: false
              show_icon: true
              icon: mdi:arrow-up
              styles:
                card:
                  - padding: 3px
                  - height: 3rem
                  - box-shadow: none
                  - border: none
                  - background: rgba(var(--rgb-primary-text-color), 0.05)
                icon:
                  - height: 1.5rem
                  - width: 1.5rem
            - type: custom:button-card
              tap_action:
                action: call-service
                service: button.press
                service_data:
                  entity_id: '[[[ return variables.sit_button ]]]'
              show_state: false
              show_name: false
              show_icon: true
              icon: mdi:chair-rolling
              styles:
                card:
                  - padding: 3px
                  - height: 3rem
                  - box-shadow: none
                  - border: none
                  - background: rgba(var(--rgb-primary-text-color), 0.05)
                icon:
                  - height: 1.5rem
                  - width: 1.5rem
            - type: custom:button-card
              tap_action:
                action: call-service
                service: button.press
                service_data:
                  entity_id: '[[[ return variables.stand_button ]]]'
              show_state: false
              show_name: false
              show_icon: true
              icon: mdi:human-handsup
              styles:
                card:
                  - padding: 3px
                  - height: 3rem
                  - box-shadow: none
                  - border: none
                  - background: rgba(var(--rgb-primary-text-color), 0.05)
                icon:
                  - height: 1.5rem
                  - width: 1.5rem

You can also have the cards above in this way

image
image

All you need to to ist to change this

      grid:
        - grid-template-areas: '"oben" "unten"'
        - grid-template-columns: 100%
        - grid-template-rows: 1.3fr 1fr

to that

  grid:
    - grid-template-areas: '"oben unten"'
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 100%
17 Likes

How can delete the shadows behind the squares? I’m trying and nothing at all! Can you help me because it’s perfect for mine but I don’t want the shadows. Thanks!

Mushroom-Bar-Card

image
image

Why this card when there is a mushroom-number-card?
I wanted to have a card to display a number value on a bar, but has no option to change the value.

Made with Mushroom-Card, Button-Card and Bar-Card.

The card shows

  • the state of a sensor entity in relation to a “max”-entity
  • a bar with the state of an entity in relation to a “max”-entity

You just to need to fill in your entities in the “variables:”-section.

YAML-Code


    type: custom:button-card
    entity: sensor.stromeinspeisung_kwh_bisher
    variables:
      max_entity: input_select.senec_cloud  # the entity, that has the "max"-value
      name: '[[[ return entity.attributes.friendly_name ]]]'  # name to display (defaults to the entities friendly-name)
      color: purple  # the color the bar and mushroom-card shut be (attention: mushroom-cards dont accept all color names!)
      units: '[[[ return entity.attributes.unit_of_measurement ]]]' # the unit of measurement to display (defaults to the unit of measurement of the entity)
      icon: mdi:cloud-arrow-up-outline # the icon the mushroom-card should have
    show_name: false
    show_state: false
    show_icon: false
    styles:
      card:
        - padding: 3px
      grid:
        - grid-template-areas: '"mush bar"'
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: 100%
      custom_fields:
        mush:
          - filter: opacity(100%)
          - overflow: visible
        bar:
          - filter: opacity(100%)
          - overflow: visible
    custom_fields:
      mush:
        card:
          type: custom:mushroom-template-card
          tap_action:
            action: more-info
          entity: '[[[ return entity.entity_id ]]]'
          icon_color: '[[[ return variables.color ]]]'
          secondary: '[[[ return variables.name ]]]'
          primary: >-
            [[[ return entity.state + "/" + states[variables.max_entity].state +
            " " + variables.units ]]]
          icon: '[[[ return variables.icon ]]]'
          card_mod:
            style: |
              ha-card {
                padding: 0px !important;
                padding-bottom: 3px !important;
                text-align: left !important;
                border: none !important;
                box-shadow: none !important;
                background: none !important;
              }   
      bar:
        card:
          type: custom:bar-card
          name: ' '
          entity: '[[[ return entity.entity_id ]]]'
          max: '[[[ return states[variables.max_entity].state ]]]'
          min: 0
          unit_of_measurement: >-
            [[[ return "/ " + states[variables.max_entity].state + " " +
            variables.units ]]]
          color: '[[[ return variables.color ]]]'
          decimal: 0
          entity_row: true
          positions:
            icon: 'off'
            indicator: 'off'
            minmax: inside
            title: 'off'
            value: 'off'
          style: |-
            .contentbar-direction-right {
             flex-direction: row;
            }
            bar-card-contentbar {
                align-items: flex-end;
                display: flex;
                justify-content: space-between;
            }
            bar-card-backgroundbar, bar-card-currentbar {
                left: 0px !important;
            }
            bar-card-iconbar {
              color: white;
            }
            bar-card-name {
              margin-top: 2px;
              margin-bottom: 2px;
              margin-left: 2px;
              margin-right: 2px;
              font-size: 1em;
              font-weight: bold;
              color: white;
            }
            bar-card-value {
              margin-top: 2px;
              margin-bottom: 2px;
              margin-left: 2px;
              margin-right: 2px;
              font-size: 1em;
              font-weight: bold;
              color: white;
            }
            bar-card-max {
              display: none;
            }
            bar-card-divider {
              display: none;
            }
            .min-direction-right {
              display: none;
            }

You can also have the cards above in this way
image
image

All you need to to ist to change this

  grid:
    - grid-template-areas: '"mush bar"'
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 100%

to that:

      grid:
        - grid-template-areas: '"mush" "bar"'
        - grid-template-columns: 100%
        - grid-template-rows: 1.3fr 1fr
14 Likes

would be wonderfull if you shared how you did that in code.

Maybe a bit off-topic but i think my energie-card fits perfectly to my mushroom-cards dashboard, so here is my

Energy-Dashboard-Card


For this you will need:

image
This Icons has a link to another Tab in Home Assistant with a full-screen-view of the Apex-Charts-Card

image
These Chip-Cards Link to Subviews for Electrical Energy, Gas and Water-Usage.

type: grid
columns: 1
square: false
cards:
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        content: Energie
        icon: mdi:home-import-outline
        tap_action: none
        card_mod:
          style: |
            ha-card {
              padding: 0px !important;
              border: none !important;
              box-shadow: none !important;
              font-size: 3.5rem !important;
              background: none !important;
            } 
      - type: template
        content: Strom
        icon: mdi:lightning-bolt-circle
        icon_color: orange
        tap_action:
          action: navigate
          navigation_path: /lovelace/energie-dashboard
      - type: template
        content: Wasser
        icon: mdi:waves
        icon_color: blue
        tap_action:
          action: navigate
          navigation_path: /lovelace/wasser
      - type: template
        content: Gas
        icon: mdi:gas-burner
        icon_color: purple
        tap_action:
          action: navigate
          navigation_path: /lovelace/gas
  - type: custom:stack-in-card
    card_mod:
      style: |
        ha-card {

          padding: 0px;
        }
    mode: vertical
    keep:
      background: true
      border_radius: true
      box_shadow: true
      margin: true
      outer_padding: true
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:apexcharts-card
            card_mod:
              style: |
                ha-card {
                  padding: 0px 0px 0px 0px;
                  border: none;
                  box-shadow: none;
                  margin-bottom: -15px;
                }
                #state__value > #state {
                  font-size: 1.2em !important;
                }
                .apexcharts-tooltip-series-group {
                  padding-top: 0px !important;
                  padding-bottom: 0px !important;
                  margin-top: 0px !important;
                  margin-bottom: 0px !important;
                  display: none;
                  text-align: left;
                  justify-content: left;
                  align-items: center;
                }
                #header {
                    padding: 3px !important;
                }        
            apex_config:
              chart:
                height: 120px
              legend:
                show: false
              tooltip:
                items:
                  display: flex
              title:
                text: Stromverbrauch
                align: center
                margin: 0
                offsetX: 0
                offsetY: 15
                floating: true
                style:
                  fontSize: 1rem
                  fontWeight: bold
                  color: var(--primary-text-color)
            yaxis:
              - min: ~0
                max: ~500
                decimals: 0
                apex_config:
                  tickAmount: 4
                  forceNiceScale: true
                  title:
                    text: W
                    rotate: 0
            all_series_config:
              stroke_width: 2
              float_precision: 0
              show:
                in_header: raw
                legend_value: false
              type: area
              opacity: 0.2
              statistics:
                type: mean
                period: 5minute
            span:
              end: minute
            graph_span: 24h
            header:
              show: false
              title: ''
              show_states: true
              colorize_states: true
              standard_format: true
              floating: true
            series:
              - entity: sensor.senec_house_power
                name: Haus
                color: grey
              - entity: sensor.senec_solar_generated_power
                name: Solar
                color: var(--energy-solar-color)
              - entity: sensor.senec_grid_imported_power
                name: aus Netz
                color: var(--energy-grid-consumption-color)
              - entity: sensor.senec_battery_import_power
                name: in Speicher
                color: var(--energy-battery-out-color)
                invert: true
              - entity: sensor.senec_battery_export_power
                name: aus Speicher
                color: var(--energy-battery-in-color)
              - entity: sensor.senec_grid_exported_power
                name: ins Netz
                color: var(--energy-grid-return-color)
                invert: true
          - type: custom:button-card
            tap_action:
              action: navigate
              navigation_path: /lovelace/energie-aktuell
            icon: mdi:magnify-expand
            styles:
              card:
                - width: 3.5rem
                - border: none
                - box-shadow: none
                - margin-left: '-40px'
      - type: custom:sankey-chart
        show_names: true
        show_icons: false
        wide: true
        round: 0
        height: 70
        show_units: true
        min_box_height: 10
        card_mod:
          style: |
            ha-card {
              background: var(card-background-color);
              padding: 0px;
              #border-radius: 0px;
              font-size: 0.8rem;
              font-weight: bold;
              border: none;
              box-shadow: none;
              overflow-x: clip !important;
            }
            .container {
              padding: 0px !important;
            }
        sections:
          - entities:
              - entity_id: sensor.senec_solar_generated_power
                color: var(--energy-solar-color)
                name: Solar
                children:
                  - sensor.senec_solar_house_used_power
                  - sensor.produced_power_produktionsueberschuss
              - entity_id: sensor.senec_grid_imported_power
                color: var(--energy-grid-consumption-color)
                name: Netz
                children:
                  - sensor.senec_grid_house_used_power
              - entity_id: sensor.senec_battery_export_power
                color: var(--energy-battery-out-color)
                name: Speicher
                children:
                  - sensor.senec_battery_house_used_power
                  - sensor.senec_grid_exported_power
          - entities:
              - entity_id: sensor.senec_solar_house_used_power
                color: var(--energy-solar-color)
                name: Haus
                children:
                  - sensor.senec_house_power
                  - sensor.shelly_pool_energy_power
              - entity_id: sensor.senec_grid_house_used_power
                type: passthrough
                color: var(--energy-grid-consumption-color)
                name: Haus
                children:
                  - sensor.senec_house_power
                  - sensor.shelly_pool_energy_power
              - entity_id: sensor.senec_battery_house_used_power
                type: passthrough
                color: var(--energy-battery-out-color)
                name: Haus
                children:
                  - sensor.senec_house_power
                  - sensor.shelly_pool_energy_power
              - entity_id: sensor.produced_power_produktionsueberschuss
                color: var(--energy-solar-color)
                name: Gewinn
                children:
                  - sensor.senec_grid_exported_power
                  - sensor.senec_battery_import_power
          - entities:
              - entity_id: sensor.senec_house_power
                color: grey
                subtract_entities:
                  - sensor.shelly_pool_energy_power
              - entity_id: sensor.shelly_pool_energy_power
                color: grey
              - entity_id: sensor.senec_grid_exported_power
                color: var(--energy-grid-return-color)
                name: Netz
              - entity_id: sensor.senec_battery_import_power
                color: var(--energy-battery-in-color)
                name: Speicher
  - type: custom:stack-in-card
    card_mod:
      style: |
        ha-card {

          padding: 0px;
        }
    mode: vertical
    keep:
      background: true
      border_radius: true
      box_shadow: true
      margin: true
      outer_padding: true
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:apexcharts-card
            card_mod:
              style: |
                ha-card {
                  padding: 0px 0px 0px 0px;
                  border: none;
                  box-shadow: none;
                  margin-bottom: -15px;
                }
                #state__value > #state {
                  font-size: 1.2em !important;
                }
                .apexcharts-tooltip-series-group {
                  padding-top: 0px !important;
                  padding-bottom: 0px !important;
                  margin-top: 0px !important;
                  margin-bottom: 0px !important;
                  display: none;
                  text-align: left;
                  justify-content: left;
                  align-items: center;
                }
                #header {
                    padding: 3px !important;
                }  
            yaxis:
              - id: first
                decimals: 0
                min: -2500
                max: 2500
                apex_config:
                  tickAmount: 4
                  forceNiceScale: false
                  title:
                    text: W
                    rotate: 0
                  labels:
                    style:
                      colors:
                        - var(--energy-battery-out-color)
                        - var(--energy-battery-out-color)
                        - grey
                        - var(--energy-battery-in-color)
                        - var(--energy-battery-in-color)
              - id: second
                opposite: true
                decimals: 0
                min: 0
                max: 100
                apex_config:
                  tickAmount: 4
                  title:
                    text: '%'
                    rotate: 0
                  labels:
                    style:
                      colors: grey
            apex_config:
              chart:
                height: 120px
              legend:
                show: false
              title:
                text: Senec Batteriespeicher
                align: center
                margin: 10
                offsetX: 0
                offsetY: 10
                floating: true
                style:
                  fontSize: 1rem
                  fontWeight: bold
                  color: var(--primary-text-color)
            span:
              end: minute
            graph_span: 24h
            header:
              show: false
              title: ' '
              show_states: true
              colorize_states: true
            all_series_config:
              statistics:
                type: mean
                period: 5minute
              show:
                in_header: raw
              opacity: 0.2
              type: area
              stroke_width: 2
            series:
              - entity: sensor.senec_battery_charge_power
                yaxis_id: first
                name: Ladung
                color: var(--energy-battery-in-color)
              - entity: sensor.senec_battery_charge_percent
                yaxis_id: second
                name: Füllstand
                color: grey
              - entity: sensor.senec_battery_discharge_power
                yaxis_id: first
                invert: true
                name: Entladung
                color: var(--energy-battery-out-color)
          - type: custom:button-card
            tap_action:
              action: navigate
              navigation_path: /lovelace/senec-speicher
            icon: mdi:magnify-expand
            styles:
              card:
                - width: 3.5rem
                - border: none
                - box-shadow: none
                - margin-left: '-40px'
      - type: custom:mushroom-template-card
        entity: sensor.senec_battery_charge_percent
        primary: Speicher-Status
        multiline_secondary: true
        secondary: |-
          {% set state = states('sensor.senec_system_state') %}
          {% if state == 'CHARGE' %}
            {{ states(entity, with_unit=True) }} - Speicher wird mit {{ states("sensor.senec_battery_import_power", with_unit=True) }} geladen
          {% elif state == 'ABSORPTION PHASE' %}
            {{ states(entity, with_unit=True) }} - Nachlade-Phase
          {% elif state == 'BATTERY FULL' %}
            {{ states(entity, with_unit=True) }} - Speicher vollständig geladen
          {% elif state == 'OWN CONSUMPTION' %}
            {{ states(entity, with_unit=True) }} - Selbstverbrauch von Solarenergie
          {% elif state == 'DISCHARGE' %}
            {{ states(entity, with_unit=True) }} - Speicher wird mit {{ states('sensor.senec_battery_export_power', with_unit=True) }} entladen
          {% elif state == 'BATTERY EMPTY' %}
            {{ states(entity, with_unit=True) }} - Speicher ist leer
          {% elif state == 'PV + DISCHARGE' %}
            {{ states(entity, with_unit=True) }} - Solarstrom und Speicher mit {{ states('sensor.senec_battery_export_power', with_unit=True) }} entladen
          {% elif state == 'GRID + DISCHARGE' %}
            {{ states(entity, with_unit=True) }} - Strom aus dem Netz und Speicher mit {{ states('sensor.senec_battery_export_power', with_unit=True) }} entladen
          {% elif state == 'BATTERY DIAGNOSIS' %}     
            {{ states(entity, with_unit=True) }} - Speicher im Diagnosemodus
          {% elif state == 'PASSIVE' %}      
            {{ states(entity, with_unit=True) }} - Speicher im Standby-Modus
          {% elif state == 'EMERGANCY CHARGE' %}   
            {{ states(entity, with_unit=True) }} - Notladung
          {% else %}
            {{ states('sensor.senec_battery_charge_percent') }}% - Status nicht bekannt
          {% endif %}
        icon: |-
          {% set state = states('sensor.senec_system_state') %}
          {% if state == 'CHARGE' %}
            mdi:battery-arrow-up
          {% elif state == 'ABSORPTION PHASE' %}
            mdi:battery-arrow-up
          {% elif state == 'BATTERY FULL' %}
            mdi:battery
          {% elif state == 'OWN CONSUMPTION' %}
            mdi:recycle
          {% elif state == 'DISCHARGE' %}
            mdi:battery-arrow-down
          {% elif state == 'BATTERY EMPTY' %}
            mdi:battery-10
          {% elif state == 'PV + DISCHARGE' %}
            mdi:battery-arrow-down
          {% elif state == 'GRID + DISCHARGE' %}
            mdi:battery-arrow-down
          {% elif state == 'BATTERY DIAGNOSIS' %}     
            mdi:progress-question
          {% elif state == 'PASSIVE' %}      
            mdi:sleep
          {% elif state == 'EMERGANCY CHARGE' %}   
            mdi:alert
          {% else %}
            mdi:progress-question
          {% endif %}
        icon_color: |-
          {% set state = states('sensor.senec_system_state') %}
          {% if state == 'CHARGE' %}
            green
          {% elif state == 'ABSORPTION PHASE' %}
            blue
          {% elif state == 'BATTERY FULL' %}
            green
          {% elif state == 'OWN CONSUMPTION' %}
            orange
          {% elif state == 'DISCHARGE' %}
            red
          {% elif state == 'BATTERY EMPTY' %}
            red
          {% elif state == 'PV + DISCHARGE' %}
            red
          {% elif state == 'GRID + DISCHARGE' %}
            red
          {% elif state == 'BATTERY DIAGNOSIS' %}     
            blue
          {% elif state == 'PASSIVE' %}      
            blue
          {% elif state == 'EMERGANCY CHARGE' %}   
            red
          {% else %}
            blue
          {% endif %}
        fill_container: true
        tap_action:
          action: more-info
        card_mod:
          style: |
            ha-card {
              background: rgba(var(--rgb-primary-text-color), 0.05) !important;
              padding: 3px !important;
              #border: none !important;
              #box-shadow: none !important;
            }       
  - type: custom:stack-in-card
    card_mod:
      style: |
        ha-card {

          padding: 0px;
        }
    mode: vertical
    keep:
      background: true
      border_radius: true
      box_shadow: true
      margin: true
      outer_padding: true
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:apexcharts-card
            stacked: true
            card_mod:
              style: |
                ha-card {
                  padding: 0px 0px 0px 0px;
                  border: none;
                  box-shadow: none;
                }
                #state__value > #state {
                  font-size: 1.2em !important;
                }   
                #header {
                    padding: 3px !important;
                }    
            apex_config:
              chart:
                height: 120px
              legend:
                show: false
              tooltip:
                shared: true
              title:
                text: Energieverbrauch heute
                align: center
                margin: 0
                offsetX: 0
                offsetY: 15
                floating: true
                style:
                  fontSize: 1rem
                  fontWeight: bold
                  color: var(--primary-text-color)
            span:
              start: day
            graph_span: 1d
            header:
              show: false
              title: ''
              show_states: true
              colorize_states: true
              standard_format: true
              floating: false
            yaxis:
              - min: ~0
                max: ~1
                apex_config:
                  tickAmount: 3
                  forceNiceScale: true
                  title:
                    text: kWh
            all_series_config:
              stroke_width: 2
              opacity: 0.2
              float_precision: 1
              show:
                in_header: raw
                legend_value: false
              type: column
              statistics:
                type: sum
              group_by:
                func: diff
                start_with_last: true
                duration: 1hour
            series:
              - entity: sensor.grid_imported_daily
                name: aus Netz
                color: var(--energy-grid-consumption-color)
              - entity: sensor.battery_charged_daily
                invert: true
                name: in Speicher
                color: var(--energy-battery-in-color)
              - entity: sensor.battery_discharged_daily
                name: aus Speicher
                color: var(--energy-battery-out-color)
              - entity: sensor.solar_produced_daily
                name: Solar
                color: var(--energy-solar-color)
              - entity: sensor.grid_exported_daily
                invert: true
                name: ins Netz
                color: var(--energy-grid-return-color)
              - entity: sensor.house_consumed_daily
                type: area
                opacity: 0.2
                name: Haus
                color: grey
          - type: custom:button-card
            tap_action:
              action: navigate
              navigation_path: /energy
            icon: mdi:magnify-expand
            styles:
              card:
                - width: 3.5rem
                - border: none
                - box-shadow: none
                - margin-left: '-40px'
      - type: custom:sankey-chart
        energy_date_selection: true
        show_names: true
        show_icons: false
        wide: true
        unit_prefix: k
        round: 1
        height: 70
        show_units: true
        min_box_height: 10
        card_mod:
          style: |
            ha-card {
              background: var(card-background-color);
              #color: rgb(50,50,50);
              # --primary-text-color: rgb(50,50,50);
              # --secondary-text-color: rgb(50,50,50);
              padding: 0px;
              #border-radius: 0px;
              font-size: 0.8rem;
              font-weight: bold;
              border: none;
              box-shadow: none;
              overflow-x: clip !important;
            }
            .container {
              padding: 0px !important;
            }
        sections:
          - entities:
              - entity_id: sensor.senec_solar_total_generated
                color: var(--energy-solar-color)
                name: Solar
                children:
                  - sensor.senec_grid_total_export
                  - sensor.senec_battery_total_charged
                  - sensor.whatever
              - entity_id: sensor.senec_grid_total_import
                color: var(--energy-grid-consumption-color)
                name: Netz
                children:
                  - sensor.senec_grid_total_import
              - entity_id: sensor.senec_battery_total_discharged
                color: var(--energy-battery-out-color)
                name: Speicher
                children:
                  - sensor.senec_battery_total_discharged
          - entities:
              - entity_id: sensor.senec_grid_total_export
                type: passthrough
                name: Gewinn
                color: var(--energy-solar-color)
                children:
                  - sensor.senec_grid_total_export
              - entity_id: sensor.senec_battery_total_charged
                type: passthrough
                color: var(--energy-solar-color)
                name: Haus
                children:
                  - sensor.senec_battery_total_charged
              - entity_id: sensor.whatever
                type: remaining_parent_state
                color: var(--energy-solar-color)
                name: Haus
                children:
                  - sensor.senec_house_total_consumption
              - entity_id: sensor.senec_grid_total_import
                type: passthrough
                color: var(--energy-grid-consumption-color)
                name: Haus
                children:
                  - sensor.senec_house_total_consumption
              - entity_id: sensor.senec_battery_total_discharged
                type: passthrough
                color: var(--energy-battery-out-color)
                name: Haus
                children:
                  - sensor.senec_house_total_consumption
          - entities:
              - entity_id: sensor.senec_grid_total_export
                color: var(--energy-grid-return-color)
                name: Netz
              - entity_id: sensor.senec_battery_total_charged
                color: var(--energy-battery-in-color)
                name: Speicher
              - entity_id: sensor.senec_house_total_consumption
                color: var(--energy-grid-consumption-color)
                name: Haus
      - type: custom:energy-period-selector-plus
        card_background: false
        today_button: true
        prev_next_buttons: true
        compare_button_type: ''
        today_button_type: icon
        custom_period_label: Custom
        compare_button_label: Daten vergleichen
        period_buttons:
          - day
          - month
          - year
31 Likes

I’m using the Sidebar Card, and have it configured to only display when the screen size is large enough. As far as the layout goes, it’s all done in the Lovelace dashboard using layout-card with the following settings:

.

Each tile is its own entity using Mushroom cards with vertical layouts.

2 Likes

I have made a mushroom inspired battery card (can also be used for other bar style cards). It is built entirely out of the auto entities card and the bar card.

Does not work without auto entities! Please use auto entities even if you have just 1 bar. It will not work without it



What it looks like with multiple entities.

All you have to do is fill in the <=> sections your colors and icons you want use for the severity. And then choose the entity/entities you want to target with auto entities.

The color of the icon and the bar+background will then update to reflect your colors set automatically.

type: custom:auto-entities
card:
  type: custom:stack-in-card
  card_mod:
    style: |
      ha-card {
        padding-top: 5px;
filter:
  include:
    - entity_id: sensor.office_blinds**battery
      options:
        type: custom:bar-card
        card_mod:
          style: |
            bar-card-currentbar, bar-card-backgroundbar {
              border-radius: 13px;
              height: 43px !important;
              margin-top: -8px;
            }
            bar-card-row {
              margin-bottom: 14px !important;
            }
            bar-card-name {
              color: black;
              margin-top: -10px;
            }
            bar-card-value {
              color: black;
              margin-top: -10px;
            }
            ha-icon{
              padding: 11px;
              border-radius: 100px;
              margin-top: -12px;
            }
            bar-card-row bar-card-currentbar,
            ha-icon, bar-card-backgroundbar {
              --bar-color:
              {% if states(config.entity) | int <= 10 %}
                #ff0026 !important;
                --card-mod-icon: mdi:battery-10 !important;
              {% elif states(config.entity) | int <= 20 %}
                #ff4d00 !important;
                --card-mod-icon: mdi:battery-20 !important;
              {% elif states(config.entity) | int <= 30 %}
                #ff9900 !important;
                --card-mod-icon: mdi:battery-30 !important;
              {% elif states(config.entity) | int <= 40 %}
                #ffcc00 !important;
                --card-mod-icon: mdi:battery-40 !important;
              {% elif states(config.entity) | int <= 50 %}
                #e7fc03 !important;
                --card-mod-icon: mdi:battery-50 !important;
              {% elif states(config.entity) | int <= 60 %}
                #aaff00 !important;
                --card-mod-icon: mdi:battery-60 !important;
              {% elif states(config.entity) | int <= 70 %}
                #aaff00 !important;
                --card-mod-icon: mdi:battery-70 !important;
              {% elif states(config.entity) | int <= 80 %}
                #22c402 !important;
                --card-mod-icon: mdi:battery-80 !important;
              {% elif states(config.entity) | int <= 90 %}
                #22c402 !important;
                --card-mod-icon: mdi:battery-90 !important;
              {% elif states(config.entity) | int <= 100 %}
                #22c402 !important;
                --card-mod-icon: mdi:battery !important;
              {% else %}
                blue
                mdi:bug
              {% endif %}
            }
            bar-card-row ha-icon {
              color: color-mix(in srgb, var(--bar-color) 100%, transparent);
              background: color-mix(in srgb, var(--bar-color) 20%, transparent);
            }
            ha-card {
              padding: 0px !important;
              margin: -3px !important;
              height: 60px;
            }
sort:
  method: state
  numeric: true
  ip: false
  ignore_case: false
  reverse: false
show_empty: true
card_param: cards

This is the section you will want to change the colors, icons, and the values of for your own purpose:

            bar-card-row bar-card-currentbar,
            ha-icon, bar-card-backgroundbar {
              --bar-color:
              {% if states(config.entity) | int <= 10 %}
                #ff0026 !important;
                --card-mod-icon: mdi:battery-10 !important;
              {% elif states(config.entity) | int <= 20 %}
                #ff4d00 !important;
                --card-mod-icon: mdi:battery-20 !important;
              {% elif states(config.entity) | int <= 30 %}
                #ff9900 !important;
                --card-mod-icon: mdi:battery-30 !important;
              {% elif states(config.entity) | int <= 40 %}
                #ffcc00 !important;
                --card-mod-icon: mdi:battery-40 !important;
              {% elif states(config.entity) | int <= 50 %}
                #e7fc03 !important;
                --card-mod-icon: mdi:battery-50 !important;
              {% elif states(config.entity) | int <= 60 %}
                #aaff00 !important;
                --card-mod-icon: mdi:battery-60 !important;
              {% elif states(config.entity) | int <= 70 %}
                #aaff00 !important;
                --card-mod-icon: mdi:battery-70 !important;
              {% elif states(config.entity) | int <= 80 %}
                #22c402 !important;
                --card-mod-icon: mdi:battery-80 !important;
              {% elif states(config.entity) | int <= 90 %}
                #22c402 !important;
                --card-mod-icon: mdi:battery-90 !important;
              {% elif states(config.entity) | int <= 100 %}
                #22c402 !important;
                --card-mod-icon: mdi:battery !important;
              {% else %}
                blue
                mdi:bug
              {% endif %}

And this is the section you will want to change to target your specific entity/entities:

filter:
  include:
    - entity_id: sensor.office_blinds**battery

You can also use a grid card instead of the stack in card. I just prefer the single card with multiple bars look :slight_smile:

18 Likes

The post above should get you on your way for setting up the general layout. Here is code for my Garage section. Each of the individual rooms is a section similar to what I am posting now. Just add a new card and throw this code in. Then substitute your own entities and such. Entities will show up in rows of 3.

square: false
columns: 1
type: grid
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-title-card
        title: ''
        subtitle: Garage
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          width: 300
          grid-template-columns: 130px 130px 130px
        cards:
          - type: custom:mushroom-cover-card
            entity: cover.garage
            layout: vertical
          - type: custom:mini-graph-card
            entities:
              - sensor.garage_freezer_temperature
            line_color: lightblue
            line_width: 4
            font_size: 50
            font_size_header: 10
            align_icon: state
            tap_action:
              action: fire-dom-event
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Shopping List
                  content:
                    type: vertical-stack
                    cards:
                      - type: custom:gap-card
                        height: 24
                      - type: shopping-list
            height: 50
            card_mod:
              style: |
                ha-card {
                  max-height: 120px;
                }
          - type: custom:mushroom-entity-card
            entity: input_boolean.help_needed_when_arriving_home
            icon: phu:rooms-carport
            icon_color: red
            layout: vertical
            name: Help Unload
            tap_action:
              action: toggle
          - type: custom:mushroom-template-card
            entity: sensor.waste_collection_trash_formated
            primary: Trash Day
            secondary: '{{ states(''sensor.waste_collection_trash_formated'') }}'
            icon: mdi:trash-can
            layout: vertical
            icon_color: >
              {% if is_state('sensor.waste_collection_trash_formated', 'Today')
              %} lime {% endif %}
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
          - type: custom:mushroom-template-card
            entity: sensor.waste_collection_recycle_formated
            primary: Recycling Day
            secondary: '{{ states(''sensor.waste_collection_recycle_formated'') }}'
            icon: mdi:recycle
            layout: vertical
            icon_color: >
              {% if is_state('sensor.waste_collection_recycle_formated',
              'Today') %} purple {% endif %}
            tap_action:
              action: none
            hold_action:
              action: none
            double_tap_action:
              action: none
          - type: custom:mushroom-template-card
            primary: Garage Door
            secondary: >-
              {% if
              is_state("binary_sensor.lumi_lumi_sensor_magnet_aq2_opening",
              "off") -%}
                Closed
              {%- elif
              is_state("binary_sensor.lumi_lumi_sensor_magnet_aq2_opening",
              "on") -%}
                Open
              {% else %}
                Unknown
              {%- endif %}
            icon: >-
              {% if
              is_state('binary_sensor.lumi_lumi_sensor_magnet_aq2_opening',
              'on') %} mdi:door-open {%- else -%} mdi:door {% endif %}
            entity: binary_sensor.lumi_lumi_sensor_magnet_aq2_opening
            layout: vertical
            icon_color: >
              {% if
              is_state('binary_sensor.lumi_lumi_sensor_magnet_aq2_opening',
              'on') %} red {% endif %}
            tap_action:
              action: more-info

I am also using a custom theme.

homekit:
  modes:
    light:
      # Background image
      lovelace-background: 'center / cover no-repeat url("https://hassio_url/local/images/backgrounds/light-theme-wallpaper.png") fixed'
      ha-card-background: '#f6f6f6'
    dark:
      # Background image
      lovelace-background: 'center / cover no-repeat url("https://hassio_url/local/images/backgrounds/homekit_bg_dark.png") fixed'
      primary-color: steelblue
# blurring-background-behind-popup
  dialog-backdrop-filter: blur(5px)
  dialog-border-radius: 20px;
  dialog-box-shadow: 0em 0em 0.5em;
  iron-overlay-backdrop-opacity: 0.5
  iron-overlay-backdrop-background-color: rgba(0, 0, 0, 0.32)
  mdc-dialog-box-shadow: 0em 0em 15px 15px slategray
  mdc-shape-medium: 25px


1 Like

I’ve been making heavy use of card_mod styling in my dashboard. Just wondering if anyone else has issues where the styling is applied after a slight delay, causing everything to flicker on the initial page load?

1 Like

I have made some significant improvements and changes to my battery card that i posted a while back that i feel like it warrants another post if that is ok. if not i will remove and update my original post instead.

  • Card now lists lowest battery detected with auto entities only, and gives the option for a dropdown menu to see the rest. i really like this change as it now doesnt take up loads of space at the bottom of my room cards, only when i expand it to see all of them will it take up that space :slight_smile:
    image
    image

  • The auto entities filter is now based on a template instead of static values in include and exclude. means more complex filtering that you can do! :slight_smile:

{%- for state in states.sensor |
selectattr('entity_id','search','battery') |
selectattr('entity_id','search','spare_bedroom') -%}
  • Because we are using a template filter we can now also edit the name of the entity on the fly. so removing things from the name that are redundant. in my case i remove the word battery, because… of course its a battery…? and then removing the name off the room. i clicked on the room, i know what room i am looking at, so doesnt need to be in the name.
'name': state.attributes.friendly_name.split(' Battery')[0].split(' battery')[0].split('Spare Bedroom')[1],
  • You can now set the text color based on the battery percentage as well. this is good for when you have a color set on the bar that doesnt work well with the default text color. you can also set this based on whether dark or light theme is being used.
    (this is now a bit messy looking, but trust me when i say that this was the only way to implement it.)
{% if states(config.entity) | int <= 10 %}
bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
  /* Bar color */
  --bar-color: #ff0026 !important;
  /* Icon */
  --card-mod-icon: mdi:battery-10 !important;
}
@media (prefers-color-scheme: dark) {
  /* Dark theme text colors */
  bar-card-name {
    color: var(--primary-text-color) !important;
  }
  bar-card-value {
    color: #cccccc !important;
  }
}
@media (prefers-color-scheme: light) { 
  /* Light theme text colors */
  bar-card-name {
    color: var(--primary-text-color)  !important;
  }
  bar-card-value {
    color: #3b3b3b !important;
  }
}
  • Fixed some alignment issues. and made it perfectly match the sizing of mushroom cards :slight_smile:

You do now need to fill in your values for bar color, icon type, and text color in 2 seperate places rather than 1 like before. but it is just a duplicate of the other, so you can copy and paste once you have finished 1 full {% if %} {% endif %} section into the other one and then fix the indentation.

here is what it looks like expanded. safe to say that i am in love with this card :slight_smile:
image
image

The code is too big to post in a single reply, so i will post it in 2 sections. just put them together right under eachother in the same card!

1st Half of Code
type: custom:stack-in-card
cards:
  - type: vertical-stack
    cards:
      - type: custom:stack-in-card
        card_mod:
          style: |
            ha-card {
              background: transparent;
              box-shadow: none;
              border: none;
            }
        cards:
          - type: grid
            square: false
            columns: 2
            cards:
              - type: custom:auto-entities
                card:
                  type: custom:stack-in-card
                  card_mod:
                    style: |
                      ha-card {
                        padding-top: 5px;
                        {% if states('input_boolean.spare_bedroom_battery_dropdown') == 'on' %}
                          padding-bottom: 5px;
                        {% else %}
                          padding-bottom: 0px;
                        {% endif %}
                        padding-right: 30px;
                        width: 200%;
                        background: transparent !important;
                        box-shadow: none;
                        border: none !important;
                      }
                card_param: cards
                filter:
                  template: >-
                    {%- for state in states.sensor |
                    selectattr('entity_id','search','battery') |
                    selectattr('entity_id','search','spare_bedroom') -%}
                      {{
                        {
                          'type': 'custom:bar-card',
                          'entity': state.entity_id,
                          'name': state.attributes.friendly_name.split(' Battery')[0].split(' battery')[0].split('Spare Bedroom')[1],
                          'card_mod':
                            {
                            'style': 'bar-card-currentbar, bar-card-backgroundbar {
                                      border-radius: 12px !important;
                                      height: 41px !important;
                                      margin-top: -8px !important;
                                      width: 101%;
                                      right: 0.5%;
                                    }
                                    ha-icon {
                                      position: relative;
                                      padding: 11px;
                                      border-radius: 50%;
                                      --mdc-icon-size: 21px;
                                      margin-top: -15px;
                                      right: 4px;
                                    }
                                    {% if states(config.entity) | int <= 10 %}
                                    bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
                                      /* Bar color */
                                      --bar-color: #ff0026 !important;
                                      /* Icon */
                                      --card-mod-icon: mdi:battery-10 !important;
                                    }
                                    @media (prefers-color-scheme: dark) {
                                      /* Dark theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color) !important;

                                      }
                                      bar-card-value {
                                        color: #cccccc !important;
                                      }
                                    }
                                    @media (prefers-color-scheme: light) { 
                                      /* Light theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color)  !important;
                                      }
                                      bar-card-value {
                                        color: #3b3b3b !important;
                                      }
                                    }
                                    {% elif states(config.entity) | int <= 20 %}
                                    bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
                                      /* Bar color */
                                      --bar-color: #ff4d00 !important;
                                      /* Icon */
                                      --card-mod-icon: mdi:battery-20 !important;
                                    }
                                    @media (prefers-color-scheme: dark) {
                                      /* Dark theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color) !important;
                                      }
                                      bar-card-value {
                                        color: #cccccc !important;
                                      }
                                    }
                                    @media (prefers-color-scheme: light) { 
                                      /* Light theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color)  !important;
                                      }
                                      bar-card-value {
                                        color: #3b3b3b !important;
                                      }
                                    }
                                    {% elif states(config.entity) | int <= 30 %}
                                    bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
                                      /* Bar color */
                                      --bar-color: #ff9900 !important;
                                      /* Icon */
                                      --card-mod-icon: mdi:battery-30 !important;
                                    }
                                    @media (prefers-color-scheme: dark) {
                                      /* Dark theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color) !important;
                                        filter: invert(1)
                                      }
                                      bar-card-value {
                                        color: #cccccc !important;
                                        filter: invert(1)
                                      }
                                    }
                                    @media (prefers-color-scheme: light) { 
                                      /* Light theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color)  !important;
                                      }
                                      bar-card-value {
                                        color: #3b3b3b !important;
                                      }
                                    }
                                    {% elif states(config.entity) | int <= 40 %}
                                    bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
                                      /* Bar color */
                                      --bar-color: #ffcc00 !important;
                                      /* Icon */
                                      --card-mod-icon: mdi:battery-40 !important;
                                    }
                                    @media (prefers-color-scheme: dark) {
                                      /* Dark theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color) !important;
                                        filter: invert(1)
                                      }
                                      bar-card-value {
                                        color: #cccccc !important;
                                        filter: invert(1)
                                      }
                                    }
                                    @media (prefers-color-scheme: light) { 
                                      /* Light theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color)  !important;
                                      }
                                      bar-card-value {
                                        color: #3b3b3b !important;
                                      }
                                    }
                                    {% elif states(config.entity) | int <= 50 %}
                                    bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {  
                                      /* Bar color */
                                      --bar-color: #e3eb00 !important;
                                      /* Icon */
                                      --card-mod-icon: mdi:battery-50 !important;
                                    }
                                    @media (prefers-color-scheme: dark) {
                                      /* Dark theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color) !important;
                                        filter: invert(1)
                                      }
                                      bar-card-value {
                                        color: #cccccc !important;
                                        filter: invert(1)
                                      }
                                    }
                                    @media (prefers-color-scheme: light) { 
                                      /* Light theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color)  !important;
                                      }
                                      bar-card-value {
                                        color: #3b3b3b !important;
                                      }
                                    }
                                    {% elif states(config.entity) | int <= 60 %}
                                    bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {  
                                      /* Bar color */
                                      --bar-color: #aaff00 !important;
                                      /* Icon */
                                      --card-mod-icon: mdi:battery-60 !important;
                                    }
                                    @media (prefers-color-scheme: dark) {
                                      /* Dark theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color) !important;
                                        filter: invert(1)
                                      }
                                      bar-card-value {
                                        color: #cccccc !important;
                                        filter: invert(1)
                                      }
                                    }
                                    @media (prefers-color-scheme: light) { 
                                      /* Light theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color)  !important;
                                      }
                                      bar-card-value {
                                        color: #3b3b3b !important;
                                      }
                                    }
                                    {% elif states(config.entity) | int <= 70 %}
                                    bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                                      /* Bar color */
                                      --bar-color: #77ff00 !important;
                                      /* Icon */
                                      --card-mod-icon: mdi:battery-70 !important;
                                    }
                                    @media (prefers-color-scheme: dark) {
                                      /* Dark theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color) !important;
                                        filter: invert(1)
                                      }
                                      bar-card-value {
                                        color: #cccccc !important;
                                        filter: invert(1)
                                      }
                                    }
                                    @media (prefers-color-scheme: light) { 
                                      /* Light theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color)  !important;
                                      }
                                      bar-card-value {
                                        color: #3b3b3b !important;
                                      }
                                    }
                                    {% elif states(config.entity) | int <= 80 %}
                                    bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                                      /* Bar color */
                                      --bar-color: #00ff1a !important;
                                      /* Icon */
                                      --card-mod-icon: mdi:battery-80 !important;
                                    }
                                    @media (prefers-color-scheme: dark) {
                                      /* Dark theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color) !important;
                                        filter: invert(1)
                                      }
                                      bar-card-value {
                                        color: #cccccc !important;
                                        filter: invert(1)
                                      }
                                    }
                                    @media (prefers-color-scheme: light) { 
                                      /* Light theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color)  !important;
                                      }
                                      bar-card-value {
                                        color: #3b3b3b !important;
                                      }
                                    }
                                    {% elif states(config.entity) | int <= 90 %}
                                    bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                                      /* Bar color */
                                      --bar-color: #22c402 !important;
                                      /* Icon */
                                      --card-mod-icon: mdi:battery-90 !important;
                                    }
                                    @media (prefers-color-scheme: dark) {
                                      /* Dark theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color) !important;
                                        filter: invert(1)
                                      }
                                      bar-card-value {
                                        color: #cccccc !important;
                                        filter: invert(1)
                                      }
                                    }
                                    @media (prefers-color-scheme: light) { 
                                      /* Light theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color)  !important;
                                      }
                                      bar-card-value {
                                        color: #3b3b3b !important;
                                      }
                                    }
                                    {% elif states(config.entity) | int <= 100 %}
                                    bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                                      /* Bar color */
                                      --bar-color: #22c402 !important;
                                      /* Icon */
                                      --card-mod-icon: mdi:battery !important;
                                    }
                                    @media (prefers-color-scheme: dark) {
                                      /* Dark theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color) !important;
                                        filter: invert(1)
                                      }
                                      bar-card-value {
                                        color: #cccccc !important;
                                        filter: invert(1)
                                      }
                                    }
                                    @media (prefers-color-scheme: light) { 
                                      /* Light theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color)  !important;
                                      }
                                      bar-card-value {
                                        color: #3b3b3b !important;
                                      }
                                    }
                                    {% else %}
                                    bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                                      /* Bar color */
                                      --bar-color: #0033ff !important
                                      /* Icon */
                                      --card-mod-icon: mdi:bug
                                    }
                                    @media (prefers-color-scheme: dark) {
                                      /* Dark theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color) !important;
                                        filter: invert(1)
                                      }
                                      bar-card-value {
                                        color: #cccccc !important;
                                        filter: invert(1)
                                      }
                                    }
                                    @media (prefers-color-scheme: light) { 
                                      /* Light theme text colors */
                                      bar-card-name {
                                        color: var(--primary-text-color)  !important;
                                      }
                                      bar-card-value {
                                        color: #3b3b3b !important;
                                      }
                                    }
                                    {% endif %}
                                    bar-card-row, ha-icon {
                                      color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
                                      background: color-mix(in srgb, var(--bar-color) 20%, transparent);
                                    }
                                    bar-card-indicator {
                                      color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
                                      top: -8px;
                                    } 
                                    bar-card-name {
                                      margin-top: -27px !important;
                                      font-weight: bold;
                                      left: 0px;
                                    }
                                    bar-card-value {
                                      margin-top: 8px !important;
                                      font-weight: bold;
                                      font-size: 11px;
                                      right: 96.9%;
                                      width: 0px;
                                    }
                                    ha-card {
                                      margin: -4px 0px !important;
                                      height: 60px;
                                    }'
                                  }
                        }
                     }},
                    {%- endfor %}
                sort:
                  method: state
                  numeric: true
                  count: 1
              - type: custom:mushroom-chips-card
                chips:
                  - type: template
                    icon: >-
                      {% if
                      states('input_boolean.spare_bedroom_battery_dropdown') ==
                      'on' %}

                      mdi:chevron-up

                      {% else %}

                      mdi:chevron-down

                      {% endif %}
                    entity: input_boolean.spare_bedroom_battery_dropdown
                    card_mod:
                      style: |
                        ha-card {
                          top: 13px;
                          right: 10px;
                          --chip-icon-size: 23px;
                          border: none !important;
                          box-shadow: none !important;
                          background: transparent !important;
                        }
                alignment: end

EDIT: Updated to work with card mod version 3.4.0 and up. Since just using style: | without card_mod: before is entirely dead now.

11 Likes
2nd Half of Code
      - type: conditional
        conditions:
          - entity: input_boolean.spare_bedroom_battery_dropdown
            state: 'on'
        card:
          type: custom:auto-entities
          card:
            type: custom:stack-in-card
            card_mod:
              style: |
                ha-card {
                  padding-top: 5px;
                  padding-bottom: 5px;
                  margin: -14px 0px 0px 0px;
                  background: transparent;
                  box-shadow: none;
                  border: none;
                }
          card_param: cards
          filter:
            template: >-
              {%- for state in states.sensor |
              selectattr('entity_id','search','battery') |
              selectattr('entity_id','search','spare_bedroom') -%}
                {{
                  {
                    'type': 'custom:bar-card',
                    'entity': state.entity_id,
                    'name': state.attributes.friendly_name.split(' Battery')[0].split(' battery')[0].split('Spare Bedroom')[1],
                    'card_mod':
                      {
                      'style': 'bar-card-currentbar, bar-card-backgroundbar {
                                border-radius: 12px !important;
                                height: 41px !important;
                                margin-top: -8px !important;
                                width: 103%;
                                left: -1.5%;
                              }
                              ha-icon {
                                position: relative;
                                padding: 11px;
                                border-radius: 100px;
                                --mdc-icon-size: 21px;
                                margin-top: -15px;
                                right: 4px;
                              }
                              {% if states(config.entity) | int <= 10 %}
                              bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
                                /* Bar color */
                                --bar-color: #ff0026 !important;
                                /* Icon */
                                --card-mod-icon: mdi:battery-10 !important;
                              }
                              @media (prefers-color-scheme: dark) {
                                /* Dark theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color) !important;

                                }
                                bar-card-value {
                                  color: #cccccc !important;
                                }
                              }
                              @media (prefers-color-scheme: light) { 
                                /* Light theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color)  !important;
                                }
                                bar-card-value {
                                  color: #3b3b3b !important;
                                }
                              }
                              {% elif states(config.entity) | int <= 20 %}
                              bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
                                /* Bar color */
                                --bar-color: #ff4d00 !important;
                                /* Icon */
                                --card-mod-icon: mdi:battery-20 !important;
                              }
                              @media (prefers-color-scheme: dark) {
                                /* Dark theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color) !important;
                                }
                                bar-card-value {
                                  color: #cccccc !important;
                                }
                              }
                              @media (prefers-color-scheme: light) { 
                                /* Light theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color)  !important;
                                }
                                bar-card-value {
                                  color: #3b3b3b !important;
                                }
                              }
                              {% elif states(config.entity) | int <= 30 %}
                              bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
                                /* Bar color */
                                --bar-color: #ff9900 !important;
                                /* Icon */
                                --card-mod-icon: mdi:battery-30 !important;
                              }
                              @media (prefers-color-scheme: dark) {
                                /* Dark theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color) !important;
                                  filter: invert(1)
                                }
                                bar-card-value {
                                  color: #cccccc !important;
                                  filter: invert(1)
                                }
                              }
                              @media (prefers-color-scheme: light) { 
                                /* Light theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color)  !important;
                                }
                                bar-card-value {
                                  color: #3b3b3b !important;
                                }
                              }
                              {% elif states(config.entity) | int <= 40 %}
                              bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {
                                /* Bar color */
                                --bar-color: #ffcc00 !important;
                                /* Icon */
                                --card-mod-icon: mdi:battery-40 !important;
                              }
                              @media (prefers-color-scheme: dark) {
                                /* Dark theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color) !important;
                                  filter: invert(1)
                                }
                                bar-card-value {
                                  color: #cccccc !important;
                                  filter: invert(1)
                                }
                              }
                              @media (prefers-color-scheme: light) { 
                                /* Light theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color)  !important;
                                }
                                bar-card-value {
                                  color: #3b3b3b !important;
                                }
                              }
                              {% elif states(config.entity) | int <= 50 %}
                              bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {  
                                /* Bar color */
                                --bar-color: #e3eb00 !important;
                                /* Icon */
                                --card-mod-icon: mdi:battery-50 !important;
                              }
                              @media (prefers-color-scheme: dark) {
                                /* Dark theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color) !important;
                                  filter: invert(1)
                                }
                                bar-card-value {
                                  color: #cccccc !important;
                                  filter: invert(1)
                                }
                              }
                              @media (prefers-color-scheme: light) { 
                                /* Light theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color)  !important;
                                }
                                bar-card-value {
                                  color: #3b3b3b !important;
                                }
                              }
                              {% elif states(config.entity) | int <= 60 %}
                              bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar {  
                                /* Bar color */
                                --bar-color: #aaff00 !important;
                                /* Icon */
                                --card-mod-icon: mdi:battery-60 !important;
                              }
                              @media (prefers-color-scheme: dark) {
                                /* Dark theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color) !important;
                                  filter: invert(1)
                                }
                                bar-card-value {
                                  color: #cccccc !important;
                                  filter: invert(1)
                                }
                              }
                              @media (prefers-color-scheme: light) { 
                                /* Light theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color)  !important;
                                }
                                bar-card-value {
                                  color: #3b3b3b !important;
                                }
                              }
                              {% elif states(config.entity) | int <= 70 %}
                              bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                                /* Bar color */
                                --bar-color: #77ff00 !important;
                                /* Icon */
                                --card-mod-icon: mdi:battery-70 !important;
                              }
                              @media (prefers-color-scheme: dark) {
                                /* Dark theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color) !important;
                                  filter: invert(1)
                                }
                                bar-card-value {
                                  color: #cccccc !important;
                                  filter: invert(1)
                                }
                              }
                              @media (prefers-color-scheme: light) { 
                                /* Light theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color)  !important;
                                }
                                bar-card-value {
                                  color: #3b3b3b !important;
                                }
                              }
                              {% elif states(config.entity) | int <= 80 %}
                              bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                                /* Bar color */
                                --bar-color: #00ff1a !important;
                                /* Icon */
                                --card-mod-icon: mdi:battery-80 !important;
                              }
                              @media (prefers-color-scheme: dark) {
                                /* Dark theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color) !important;
                                  filter: invert(1)
                                }
                                bar-card-value {
                                  color: #cccccc !important;
                                  filter: invert(1)
                                }
                              }
                              @media (prefers-color-scheme: light) { 
                                /* Light theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color)  !important;
                                }
                                bar-card-value {
                                  color: #3b3b3b !important;
                                }
                              }
                              {% elif states(config.entity) | int <= 90 %}
                              bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                                /* Bar color */
                                --bar-color: #22c402 !important;
                                /* Icon */
                                --card-mod-icon: mdi:battery-90 !important;
                              }
                              @media (prefers-color-scheme: dark) {
                                /* Dark theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color) !important;
                                  filter: invert(1)
                                }
                                bar-card-value {
                                  color: #cccccc !important;
                                  filter: invert(1)
                                }
                              }
                              @media (prefers-color-scheme: light) { 
                                /* Light theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color)  !important;
                                }
                                bar-card-value {
                                  color: #3b3b3b !important;
                                }
                              }
                              {% elif states(config.entity) | int <= 100 %}
                              bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                                /* Bar color */
                                --bar-color: #22c402 !important;
                                /* Icon */
                                --card-mod-icon: mdi:battery !important;
                              }
                              @media (prefers-color-scheme: dark) {
                                /* Dark theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color) !important;
                                  filter: invert(1)
                                }
                                bar-card-value {
                                  color: #cccccc !important;
                                  filter: invert(1)
                                }
                              }
                              @media (prefers-color-scheme: light) { 
                                /* Light theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color)  !important;
                                }
                                bar-card-value {
                                  color: #3b3b3b !important;
                                }
                              }
                              {% else %}
                              bar-card-row bar-card-currentbar, ha-icon, bar-card-backgroundbar { 
                                /* Bar color */
                                --bar-color: #0033ff !important
                                /* Icon */
                                --card-mod-icon: mdi:bug
                              }
                              @media (prefers-color-scheme: dark) {
                                /* Dark theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color) !important;
                                  filter: invert(1)
                                }
                                bar-card-value {
                                  color: #cccccc !important;
                                  filter: invert(1)
                                }
                              }
                              @media (prefers-color-scheme: light) { 
                                /* Light theme text colors */
                                bar-card-name {
                                  color: var(--primary-text-color)  !important;
                                }
                                bar-card-value {
                                  color: #3b3b3b !important;
                                }
                              }
                              {% endif %}
                              bar-card-row ha-icon {
                                color: color-mix(in srgb, var(--bar-color) 100%, transparent);
                                background: color-mix(in srgb, var(--bar-color) 20%, transparent);
                              }
                              bar-card-indicator {
                                color: color-mix(in srgb, var(--bar-color) 100%, transparent) !important;
                                top: -8px;
                              }
                              bar-card-name {
                                margin-top: -27px !important;
                                font-weight: bold;
                                left: 0px;
                              }
                              bar-card-value {
                                margin-top: 8px !important;
                                font-weight: bold;
                                font-size: 11px;
                                right: 97%;
                                width: 0px;
                              }
                              ha-card {
                                margin: -4px 0px !important;
                                height: 60px;
                              }'
                            }
                  }
                }},
              {%- endfor %}
          sort:
            method: state
            numeric: true
            first: 1
            count: 100

EDIT: Updated to work with card mod version 3.4.0 and up. Since just using style: | without card_mod: before is entirely dead now.

5 Likes

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 :slight_smile:

it works with no buttons, 1 button or both of the buttons:
image
it will auto adjust the widths so that everything fits neatly on any screen size. (even in a grid, but i wouldnt recommend having the buttons enabled as there is limited space in a grid).

it also auto adjusts the text color/button icon color, so that it doesnt blend into the slider itself. (still will blend in with the slider background sometimes, but best i can do!).
image

i have tested this with many screen sizes and it seems to work consistently :slight_smile:
(which i am actually really proud of, i have worked on this one for a while to reduce the amount of “magic numbers”).

Light mode:
image

Code slider with text in 1 row option
type: custom:mushroom-light-card
entity: light.bedroom_chest_lamp
name: Standing Light
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
layout: horizontal
collapsible_controls: true
use_light_color: true
card_mod:
  style:
    mushroom-state-info$:
      .container: |
        .primary {
          flex-shrink: 1;
          flex-grow: 1;
          {% if state_attr(config.entity, 'rgb_color') == none %}
            {% if states(config.entity) == 'on' %}
              --primary-text-color: #1a1a1a;
            {% else %}

            {% endif %}
          {% else %}
            {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
              --primary-text-color: #1a1a1a;
            {% else %}
              --primary-text-color: #fafafa;
            {% endif %}
          {% endif %}
        }
        .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 %}

            {% endif %}
          {% else %}
            {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
              --secondary-text-color: #3b3b3b;
            {% else %}
              --secondary-text-color: #c9c9c9;
            {% endif %}
          {% endif %}
        }
      .: |
        .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: -8px;
          {% else %}
          {% endif %}
        }
    mushroom-button:nth-child(2)$: |
      :host {
        z-index: 1;
        margin-right: 5px !important;
        {% if state_attr(config.entity, 'rgb_color') == none %}
          --bg-color: rgba(var(--rgb-disabled),0.5) !important;
          --icon-color: #1a1a1a !important;
        {% else %}
          {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: #1a1a1a !important;
          {% else %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: #dedede !important;
          {% endif %}
        {% endif %}
      }
    mushroom-button:nth-child(3)$: |
      :host {
        z-index: 1;
        {% if state_attr(config.entity, 'rgb_color') == none %}
          --bg-color: rgba(var(--rgb-disabled),0.5) !important;
          --icon-color: #1a1a1a !important;
        {% else %}
          {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: #1a1a1a !important;
          {% else %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: #dedede !important;
          {% endif %}
        {% endif %}
      }
    mushroom-light-brightness-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          width: calc(100% - 80px);
          left: 68px;
          top: 18.2%
        }
    mushroom-light-color-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          width: calc(100% - 80px);
          left: 68px;
          top: 18.2%
        }
    mushroom-light-color-temp-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          width: calc(100% - 80px);
          left: 68px;
          top: 18.2%
        }
    .: |
      .actions {
        display: flex;
        flex-basis: min-content;
        align-items: flex-end !important;
        justify-content: flex-end !important;
        flex-grow: 0;
        flex-shrink: 0;
      }
      mushroom-state-info {
        display: flex;
      }
Code slider with text in 2 rows option
type: custom:mushroom-light-card
entity: light.bedroom_chest_lamp
name: Standing Light
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
layout: horizontal
collapsible_controls: true
use_light_color: true
card_mod:
  style:
    mushroom-state-info$:
      .container: |
        .primary {
          flex-shrink: 1;
          flex-grow: 1;
          {% if state_attr(config.entity, 'rgb_color') == none %}
            {% if states(config.entity) == 'on' %}
              --primary-text-color: #1a1a1a;
            {% else %}

            {% endif %}
          {% else %}
            {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
              --primary-text-color: #1a1a1a;
            {% else %}
              --primary-text-color: #fafafa;
            {% endif %}
          {% endif %}
        }
        .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 %}

            {% endif %}
          {% else %}
            {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
              --secondary-text-color: #3b3b3b;
            {% else %}
              --secondary-text-color: #c9c9c9;
            {% endif %}
          {% endif %}
        }
      .: |
        .container {
          display: flex;
          {% if states(config.entity) == 'on' %}
            z-index: 1;
            align-items: baseline;
            pointer-events: none !important;
            margin-left: 10px;
            margin-right: -8px;
          {% else %}
          {% endif %}
        }
    mushroom-button:nth-child(2)$: |
      :host {
        z-index: 1;
        margin-right: 5px !important;
        {% if state_attr(config.entity, 'rgb_color') == none %}
          --bg-color: rgba(var(--rgb-disabled),0.5) !important;
          --icon-color: #1a1a1a !important;
        {% else %}
          {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: #1a1a1a !important;
          {% else %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: #dedede !important;
          {% endif %}
        {% endif %}
      }
    mushroom-button:nth-child(3)$: |
      :host {
        z-index: 1;
        {% if state_attr(config.entity, 'rgb_color') == none %}
          --bg-color: rgba(var(--rgb-disabled),0.5) !important;
          --icon-color: #1a1a1a !important;
        {% else %}
          {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: #1a1a1a !important;
          {% else %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: #dedede !important;
          {% endif %}
        {% endif %}
      }
    mushroom-light-brightness-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          width: calc(100% - 80px);
          left: 68px;
          top: 18.2%
        }
    mushroom-light-color-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          width: calc(100% - 80px);
          left: 68px;
          top: 18.2%
        }
    mushroom-light-color-temp-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          width: calc(100% - 80px);
          left: 68px;
          top: 18.2%
        }
    .: |
      .actions {
        display: flex;
        flex-basis: min-content;
        align-items: flex-end !important;
        justify-content: flex-end !important;
        flex-grow: 0;
        flex-shrink: 0;
      }
      mushroom-state-info {
        display: flex;
      }
26 Likes

Nice!! Thank you!

I really like this! I had been playing around with expanding the slider and reducing the device name to solve for the wasted space, but using shorter names wasn’t always viable. I tweaked your code a bit to preserve the accessibilty of the slider on the end and make the text a little easier to read when brightness is reduced.

image


card_mod:
  style:
    mushroom-state-info$:
      .container: |
        .primary {
          flex-shrink: 1;
          flex-grow: 1;
          padding-left: 5px;
          {% if state_attr(config.entity, 'rgb_color') == none %}
            {% if states(config.entity) == 'on' %}
              --primary-text-color: #1a1a1a;
            {% else %}

            {% endif %}
          {% else %}
            {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
              text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
              --primary-text-color: #1a1a1a;
            {% else %}
              text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 1}};
              --primary-text-color: #fafafa;
            {% endif %}
          {% endif %}
        }
        .secondary {
          flex-shrink: 1;
          flex-grow: 0;
          margin-right: 10px;
          padding: 0 5px;
          {% if state_attr(config.entity, 'rgb_color') == none %}
            {% if states(config.entity) == 'on' %}
              --secondary-text-color: #1a1a1a;
            {% else %}

            {% endif %}
          {% else %}

            {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
              text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
              --secondary-text-color: #1a1a1a;
            {% else %}
              text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}};
              --secondary-text-color: #fafafa;
            {% endif %}
          {% endif %}
        }
      .: |
        .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: -8px;
          {% else %}
          {% endif %}
        }
    mushroom-button:nth-child(2)$: |
      :host {
        z-index: 1;
        # margin-right: 5px !important;
        {% if state_attr(config.entity, 'rgb_color') == none %}
          --bg-color: rgba(var(--rgb-disabled),0.5) !important;
          --icon-color: #1a1a1a !important;
        {% else %}
          {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: rgba{{state_attr(config.entity,'rgb_color')[0], state_attr(config.entity,'rgb_color')[1], state_attr(config.entity,'rgb_color')[2], 0.9}} !important;
          {% else %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            # --icon-color: #dedede !important;
          {% endif %}
        {% endif %}
      }
    mushroom-button:nth-child(3)$: |
      :host {
        z-index: 1;
        {% if state_attr(config.entity, 'rgb_color') == none %}
          --bg-color: rgba(var(--rgb-disabled),0.5) !important;
          --icon-color: #1a1a1a !important;
        {% else %}
          {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: rgba{{state_attr(config.entity,'rgb_color')[0], state_attr(config.entity,'rgb_color')[1], state_attr(config.entity,'rgb_color')[2], 0.9}} !important;
          {% else %}
            --bg-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}} !important;
            --icon-color: #dedede !important;
          {% endif %}
        {% endif %}
      }
    mushroom-light-brightness-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          {% if (config.show_color_control == true and config.show_color_temp_control == true) %}
            width: calc(100% - 190px);
          {% elif (config.show_color_control == false and config.show_color_temp_control == true) %}
            width: calc(100% - 136px);
          {% elif (config.show_color_control == true and config.show_color_temp_control == false) %}
            width: calc(100% - 136px);
          {% else %}
            width: calc(100% - 80px);
          {% endif %}
          left: 68px;
          top: 18.2%;
        }
        .slider-track-background {
          background-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.75, state_attr(config.entity,'rgb_color')[1] * 0.75, state_attr(config.entity,'rgb_color')[2] * 0.75, 0.5}} !important;
        }
    mushroom-light-color-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          {% if (config.show_color_temp_control == true) %}
            width: calc(100% - 190px);
          {% else %}
            width: calc(100% - 136px);
          {% endif %}
          left: 68px;
          top: 18.2%
        }
    mushroom-light-color-temp-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          {% if (config.show_color_control == true) %}
            width: calc(100% - 190px);
          {% else %}
            width: calc(100% - 136px);
          {% endif %}
          left: 68px;
          top: 18.2%
        }
    .: |
      .actions {
        display: flex;
        flex-basis: min-content;
        align-items: flex-end !important;
        justify-content: flex-end !important;
        flex-grow: 0;
        flex-shrink: 0;
      }
      mushroom-state-info {
        display: flex;
      }

Edit: For some reason, lights without RGB or tunable white would not show correctly. I made an adjustment to the CSS in order to address this. There’s probably a “better” way to align the brightness percentage text using flexbox, but this works well enough:

image

card_mod:
  style:
    mushroom-state-info$:
      .container: |
        .primary {
          {% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
            flex-shrink: 0;
            flex-grow: 0;
          {% else %}
            flex-shrink: 1;
            flex-grow: 1;
          {% endif %}
          padding-left: 5px;
          {% if state_attr(config.entity, 'rgb_color') == none %}
            {% if states(config.entity) == 'on' %}
              text-shadow: 0px 0px 7px orange;
              --primary-text-color: #1a1a1a;
            {% else %}
            {% endif %}
          {% else %}
            {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
              text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
              --primary-text-color: #1a1a1a;
            {% else %}
              text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 1}};
              --primary-text-color: #fafafa;
            {% endif %}
          {% endif %}
        }
        .secondary {
          {% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
            {% if states(config.entity) == 'on' %}
              position: absolute;
              right: 15px;
              top: 23px;
            {% else %}
            {% endif %}
          {% else %}
            flex-shrink: 1;
          {% endif %}
          flex-grow: 0;
          margin-right: 10px;
          padding: 0 5px;
          {% if state_attr(config.entity, 'rgb_color') == none %}
            {% if states(config.entity) == 'on' %}
              text-shadow: 0px 0px 7px orange;
              --secondary-text-color: #1a1a1a;
            {% else %}
            {% endif %}
          {% else %}
            {% if (state_attr(config.entity,'rgb_color')[0] * 0.21 | float) + (state_attr(config.entity,'rgb_color')[1] * 0.72 | float) + (state_attr(config.entity,'rgb_color')[2] * 0.07 | float) >= 100 and state_attr(config.entity, 'rgb_color') != none %}
              text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 1, state_attr(config.entity,'rgb_color')[1] * 1, state_attr(config.entity,'rgb_color')[2] * 1, 1}};
              --secondary-text-color: #1a1a1a;
            {% else %}
              text-shadow: 0px 0px 7px rgba{{state_attr(config.entity,'rgb_color')[0] * 0.5, state_attr(config.entity,'rgb_color')[1] * 0.5, state_attr(config.entity,'rgb_color')[2] * 0.5, 0.5}};
              --secondary-text-color: #fafafa;
            {% endif %}
          {% endif %}
        }
      .: |
        .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: -8px;
          {% else %}
          {% endif %}
        }
    mushroom-light-brightness-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          {% set rgb = (state_attr(config.entity, 'supported_color_modes')|contains('rgb') or state_attr(config.entity, 'supported_color_modes')|contains('xy')) and config.show_color_control != false %}
          {% set color_temp = state_attr(config.entity, 'supported_color_modes')|contains('color_temp') and config.show_color_temp_control != false %}
          {% if (rgb == true and color_temp == true) %}
            width: calc(100% - 190px);
          {% elif (rgb == false and color_temp == true) %}
            width: calc(100% - 136px);
          {% elif (rgb == true and color_temp == false) %}
            width: calc(100% - 136px);
          {% else %}
            width: calc(100% - 80px);
          {% endif %}
          left: 68px;
          top: 18.2%;
        }
        .slider-track-background {
          background-color: rgba{{state_attr(config.entity,'rgb_color')[0] * 0.75, state_attr(config.entity,'rgb_color')[1] * 0.75, state_attr(config.entity,'rgb_color')[2] * 0.75, 0.5}} !important;
        }
    mushroom-light-color-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          {% if (state_attr(config.entity, 'supported_color_modes')|contains('color_temp') == true and config.show_color_temp_control != false) %}
            width: calc(100% - 190px);
          {% else %}
            width: calc(100% - 136px);
          {% endif %}
          left: 68px;
          top: 18.2%
        }
    mushroom-light-color-temp-control$:
      mushroom-slider$: |
        .container {
          position: absolute;
          flex-basis: max-content;
          {% if ((state_attr(config.entity, 'supported_color_modes')|contains('rgb') or state_attr(config.entity, 'supported_color_modes')|contains('xy') == true) and config.show_color_control != false) %}
            width: calc(100% - 190px);
          {% else %}
            width: calc(100% - 136px);
          {% endif %}
          left: 68px;
          top: 18.2%
        }
    .: |
      .actions {
        display: flex;
        flex-basis: min-content;
        align-items: flex-end !important;
        justify-content: flex-end !important;
        {% if state_attr(config.entity, 'supported_color_modes')|contains('brightness') == true %}
          flex-grow: 9;
          flex-shrink: 1;
        {% else %}
          flex-grow: 0;
          flex-shrink: 0;
        {% endif %}
      }
      mushroom-state-info {
        display: flex;
      }
11 Likes

Can I ask: How did you set up which batteries will be shown?

Nice. I really appreciate this as a layout.
A few minor comments I am going to try and fix.

  1. I think the width should be governed by state_attr(config.entity.‘supported_color_modes’) and not whether you say to show/hide controls (that you cannot have maybe). I would be surprised if people do not want to display some control if it is available but then again for generic implementation probably needs both like if light supports HS and you choose to show that control, then …

  2. IMHO … the color of the “buttons” for temp, hs should not have anything to do with the color of the light (greatly simplifying this). The color of the state on the left is already there as well as the bar, the others are buttons and really should not take on characteristics of the rgb_color.

2 Likes