Mushroom Inspiration!

[kbrown01]

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.

[TheWanderingTurkey]

I’m actually using this with decluttering-card and wanted the option to disable the controls for a couple of lights that erroneously report RGB support despite being temperature/brightness only, but I agree that this is a super specific use case not generally applicable to most people. My non-decluttered (“cluttered”? lol!) version looks like this:

type: custom:mushroom-light-card
entity: light.craft_room_wall_sconce
name: Wall Sconce
icon: mdi:wall-sconce
show_brightness_control: true
show_color_control: >-
  {{ state_attr(config.entity, 'supported_color_modes')|contains('rgb') or
  state_attr(config.entity, 'supported_color_modes')|contains('xy') }}
show_color_temp_control: >-
  {{ state_attr(config.entity, 'supported_color_modes')|contains('color_temp')
  }}
use_light_color: true
collapsible_controls: true
fill_container: true
tap_action:
  action: toggle
hold_action:
  action: more-info
double_tap_action:
  action: none
layout: horizontal
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 {
        {% 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 {
        {% 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;
          {% set rgb = (config.show_color_control != false) %}
          {% set color_temp = (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 (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 (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;
        flex-grow: 0;
        flex-shrink: 0;
      }
      mushroom-state-info {
        display: flex;
      }

If you want the righthand buttons to follow the default color scheme rather than the RGB of the light, you could remove the mushroom-button:nth-child(2)$ and mushroom-button:nth-child(3)$ sections. I’ve tried both ways and I’m on the fence about which I prefer, but I see the appeal!

[kbrown01]

I like it. I also use decluttering (in fact this entire thing is 7 decluttering cards). These actually include other decluttering cards for mushroom-light, mushroom-chip for quick colors and currently custom button until I change them to mushroom for the 8 modes built-in plus speed control of the modes. SO easy to manage this way, decluttering is the best!

Going to make the modification now to extend the slider bar for the RGBW lights.

[madlan]

Sorry, was viewing the wrong group when I composed - previous issue was resolved with some hacking about at the css.

[madlan]

Here’s what I’ve managed to create from Rhys cards and the guide from Dimitri to replace my ui minimalist layout:
Dark:

Light:

Room Card: Room card with card mod (no UI minimalist) - Pastebin.com

card mod changes to Rhys top bar:

card_mod:
  style: |
    ha-card {
      /* Set padding of card */
      padding: 8px 8px 12px;

      /* Move card up to match header card */
      margin-top: -8px;

      /* Styling of card background */
      background: color-mix(in srgb, var(--card-background-color) 40%, var(--primary-background-color)) !important;
      border-radius: var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px) 0px 0px ;

      transition: all 0s;
    }
    /* Make card sticky at top of page */
    :host {
      position: sticky;
      z-index: 9;
      top: 0px;
    }

I’ve only just started rooms, but will be using the light control from Tyler, which will work great in rooms that have two ceiling lights:

Light control: Mushroom Cards - Build a beautiful dashboard easily 🍄 - #7498 by Numotiv

[WebPower (Karoly Papp)]

Hi, if you feel like it, insert the code here like everyone else who posts examples here.

[madlan]

Hi Karoly, certainly, I’m just cleaning it up a bit then I’ll update the post with the code + sources.

[Mobiledude (Ronin)]

Looking forward to your code. In the end they are starting to look like eachother

[AlexGreenUK (Alex Green)]

Would you care sharing the yaml and theme? It’s the perfect theme I have been looking for.

Thanks

[Noah]

I’ve been using your theme for a few months now, it makes it much easier to use on mobile.
Since version 2023.10, however, it no longer seems to work. Have you already created a new version?

[mase]

could you show what‘s not working?
don‘t have any problems on my side

[ingo.niehues]

Mushroom-inspired Home Energy Card

Made with Button-Card and ApexCharts-Card.

The card shows

• the house-consumed energy in the center area
• the energy consumed from grid on the left area
• the energy consumed from your pv / home-battery on the right area

The colors will automaticly match your energy-dashboard-colors.

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

Variables:

• house_consumed_entity = entity that has the daily value of your house consumption
• house_consumed_label = text to display for that entity
• from_grid_entity = entity that has the daily value of energy from grid for your house consumption
• from_grid_label = text to display for that entity
• from_pv_entity = entity that has the daily value of energy from your pv / your home-battery for your house consumption
• from_pv_label = text to display for that entity

YAML-Code

type: custom:button-card
variables:
  house_consumed_entity: sensor.house_consumed_daily
  house_consumed_label: Haus
  from_grid_entity: sensor.grid_imported_daily
  from_grid_label: aus Netz
  from_pv_entity: sensor.hausverbrauch_aus_solar_heute
  from_pv_label: von PV
show_name: false
show_state: false
show_icon: false
styles:
  card:
    - padding: 3px
    - border: none
    - box-shadow: none
  grid:
    - grid-template-areas: '"karte"'
    - grid-template-columns: 100%
    - grid-template-rows: 100%
  custom_fields:
    karte:
      - filter: opacity(100%)
      - overflow: visible
custom_fields:
  karte:
    card:
      type: custom:stack-in-card
      card_mod:
        style: |
          ha-card {
            padding: 0px;
          }
      mode: vertical
      keep:
        background: false
        border_radius: true
        box_shadow: false
        margin: false
        outer_padding: false
      cards:
        - type: grid
          columns: 3
          square: false
          cards:
            - type: custom:button-card
              size: 100%
              entity: '[[[ return variables.from_grid_entity ]]]'
              icon: mdi:transmission-tower-export
              show_icon: true
              show_name: false
              show_state: true
              show_label: true
              label: '[[[ return variables.from_grid_label ]]]'
              styles:
                grid:
                  - grid-template-areas: '"i s" "i l"'
                  - grid-template-rows: 1fr 1fr
                  - grid-template-columns: 4rem auto
                card:
                  - height: 80px
                  - box-shadow: none
                  - border: none
                  - padding: 0px 0px 0px 0px
                icon:
                  - height: 3rem
                  - color: var(--energy-grid-consumption-color)
                state:
                  - font-weight: bold
                  - font-size: 1rem
                  - align-self: end
                  - text-align: center
                  - color: var(--energy-grid-consumption-color)
                label:
                  - font-size: 0.8rem
                  - align-self: start
            - type: vertical-stack
              cards:
                - type: custom:apexcharts-card
                  card_mod:
                    style: |
                      ha-card {
                        background: none;
                        border: none;
                        box-shadow: none;
                        height: 80px;
                        padding: 0px;
                      }
                  stacked: true
                  chart_type: donut
                  header:
                    show: false
                    floating: true
                  apex_config:
                    plotOptions:
                      pie:
                        customScale: 1.8
                    chart:
                      height: 85px
                      offsetX: 0
                      offsetY: 18
                    legend:
                      show: false
                  series:
                    - entity: '[[[ return variables.from_pv_entity ]]]'
                      color: var(--energy-solar-color)
                      show:
                        datalabels: false
                    - entity: '[[[ return variables.from_grid_entity ]]]'
                      color: var(--energy-grid-consumption-color)
                      show:
                        datalabels: false
                - type: custom:button-card
                  entity: '[[[ return variables.house_consumed_entity ]]]'
                  layout: vertical
                  show_name: false
                  show_state: true
                  show_icon: true
                  show_label: true
                  label: '[[[ return variables.house_consumed_label ]]]'
                  styles:
                    card:
                      - height: 60px
                      - margin-top: '-70px'
                      - background: none
                      - border: none
                      - box-shadow: none
                    state:
                      - font-weight: bold
                      - font-size: 0.8rem
                    label:
                      - font-size: 0.8rem
                    icon:
                      - height: 1.5rem
                      - color: grey
            - type: custom:button-card
              size: 100%
              entity: '[[[ return variables.from_pv_entity ]]]'
              icon: mdi:recycle
              show_icon: true
              show_name: false
              show_state: true
              show_label: true
              label: '[[[ return variables.from_pv_label ]]]'
              styles:
                grid:
                  - grid-template-areas: '"s i" "l i"'
                  - grid-template-rows: 1fr 1fr
                  - grid-template-columns: auto 4rem
                card:
                  - height: 80px
                  - box-shadow: none
                  - border: none
                  - padding: 0px 0px 0px 0px
                icon:
                  - height: 3rem
                  - color: var(--energy-solar-color)
                state:
                  - font-weight: bold
                  - font-size: 1rem
                  - align-self: end
                  - color: var(--energy-solar-color)
                label:
                  - font-size: 0.8rem
                  - align-self: start

[ingo.niehues]

Mushroom-inspired Solar Energy Card

Made with Button-Card and ApexCharts-Card.

The card shows

• the energy produced by your pv in the center area
• the energy fed to grid in the left area
• the energy that goes to your home / home-battery in the right area

The colors will automaticly match your energy-dashboard-colors.

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

Variables:

• solar_produced_entity = entity that has the daily value of your pv production
• solar_produced_label = text to display for that entity
• to_grid_entity = entity that has the daily value of energy fed to grid from your pv
• to_grid_label = text to display for that entity
• to_home_entity = entity that has the daily value of energy to your home / home-battery from pv
• to_home_label = text to display for that entity

YAML-Code

type: custom:button-card
variables:
  solar_produced_entity: sensor.solar_produced_daily
  solar_produced_label: Solar
  to_grid_entity: sensor.grid_exported_daily
  to_grid_label: ins Netz
  to_home_entity: sensor.stromeigenverbrauch_heute
  to_home_label: ins Haus
show_name: false
show_state: false
show_icon: false
styles:
  card:
    - padding: 3px
    - border: none
    - box-shadow: none
  grid:
    - grid-template-areas: '"karte"'
    - grid-template-columns: 100%
    - grid-template-rows: 100%
  custom_fields:
    karte:
      - filter: opacity(100%)
      - overflow: visible
custom_fields:
  karte:
    card:
      type: custom:stack-in-card
      card_mod:
        style: |
          ha-card {
            padding: 0px 0px 0px 0px;
          }
      mode: vertical
      keep:
        background: false
        border_radius: true
        box_shadow: false
        margin: false
        outer_padding: false
      cards:
        - type: grid
          columns: 3
          square: false
          cards:
            - type: custom:button-card
              label: '[[[ return variables.to_grid_label ]]]'
              size: 100%
              entity: '[[[ return variables.to_grid_entity ]]]'
              icon: mdi:transmission-tower-import
              show_icon: true
              show_name: false
              show_state: true
              show_label: true
              styles:
                grid:
                  - grid-template-areas: '"i s" "i l"'
                  - grid-template-rows: 1fr 1fr
                  - grid-template-columns: 4rem auto
                card:
                  - height: 80px
                  - box-shadow: none
                  - border: none
                  - padding: 0px 0px 0px 0px
                icon:
                  - height: 3rem
                  - color: var(--energy-grid-return-color)
                  - transform: rotateY(180deg)
                state:
                  - font-weight: bold
                  - font-size: 1rem
                  - align-self: end
                  - text-align: center
                  - color: var(--energy-grid-return-color)
                label:
                  - font-size: 0.8rem
                  - align-self: start
            - type: vertical-stack
              cards:
                - type: custom:apexcharts-card
                  card_mod:
                    style: |
                      ha-card {
                        background: none;
                        border: none;
                        box-shadow: none;
                        height: 80px;
                        padding: 0px;
                      }
                  stacked: true
                  chart_type: donut
                  header:
                    show: false
                    floating: true
                  apex_config:
                    plotOptions:
                      pie:
                        customScale: 1.8
                    chart:
                      height: 85px
                      offsetX: 0
                      offsetY: 18
                    legend:
                      show: false
                  series:
                    - entity: '[[[ return variables.to_home_entity ]]]'
                      color: var(--energy-battery-out-color)
                      show:
                        datalabels: false
                    - entity: '[[[ return variables.to_grid_entity ]]]'
                      color: var(--energy-grid-return-color)
                      show:
                        datalabels: false
                - type: custom:button-card
                  entity: '[[[ return variables.solar_produced_entity ]]]'
                  layout: vertical
                  show_name: false
                  show_state: true
                  show_icon: true
                  show_label: true
                  label: '[[[ return variables.solar_produced_label ]]]'
                  styles:
                    card:
                      - height: 60px
                      - margin-top: '-70px'
                      - background: none
                      - border: none
                      - box-shadow: none
                    state:
                      - font-weight: bold
                      - font-size: 0.8rem
                    label:
                      - font-size: 0.8rem
                    icon:
                      - height: 1.5rem
                      - color: darkorange
            - type: custom:button-card
              size: 100%
              entity: '[[[ return variables.to_home_entity ]]]'
              icon: mdi:home-battery
              show_icon: true
              show_name: false
              show_state: true
              show_label: true
              label: '[[[ return variables.to_home_label ]]]'
              styles:
                grid:
                  - grid-template-areas: '"s i" "l i"'
                  - grid-template-rows: 1fr 1fr
                  - grid-template-columns: auto 4rem
                card:
                  - height: 80px
                  - box-shadow: none
                  - border: none
                  - padding: 0px 0px 0px 0px
                icon:
                  - height: 3rem
                  - color: var(--energy-battery-out-color)
                state:
                  - font-weight: bold
                  - font-size: 1rem
                  - align-self: end
                  - color: var(--energy-battery-out-color)
                label:
                  - font-size: 0.8rem
                  - align-self: start

[briis (Bjarne Riis)]

I really like the above designs, thanks. They look great on a Web Page, but when I see them on the Home Assistant App on an iPhone 15 Pro Max, the Apex Chart is off. Any idea?

[SteffenDE (Steffen)]

Hi,

get you every working this in an auto-entities template. I’m using differnet popups and create all lights with a group but the card_mod is not working there (maybe formating problem).

Any ideas?

                      - type: custom:auto-entities
                        show_empty: true
                        card:
                          type: entities
                        sort:
                          methode: name
                        filter:
                          template: >-
                            {% set elements = expand('group.grp_licht_wz') |
                            map(attribute = "entity_id") | list %}   [ {% for
                            element in expand(elements) %} 
                                 {{-
                                    {
                                      'type': 'custom:mushroom-light-card',
                                      'entity': element.entity_id,
                                      'layout': 'horizontal',
                                      'use_light_color': true,
                                      'show_brightness_control': true,
                                      'show_color_temp_control': true,
                                      'show_color_control': true,
                                      'collapsible_controls': true,
                                      '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;
                                            }
                                            mushroom-shape-icon {
                                              --icon-border-radius: var(--control-border-radius);
                                            }
                                            ha-card {
                                              --icon-symbol-size: 30px;
                                            }
                                          "
                                      }
                                    }
                                 -}},
                              {% endfor %} ]

[ingo.niehues]

mh… could you please try this?

type: custom:button-card
variables:
  solar_produced_entity: sensor.solar_produced_daily
  solar_produced_label: Solar
  to_grid_entity: sensor.grid_exported_daily
  to_grid_label: ins Netz
  to_home_entity: sensor.stromeigenverbrauch_heute
  to_home_label: ins Haus
show_name: false
show_state: false
show_icon: false
styles:
  card:
    - padding: 0px
  grid:
    - grid-template-areas: '"karte"'
    - grid-template-columns: 100%
    - grid-template-rows: 100%
  custom_fields:
    karte:
      - filter: opacity(100%)
      - overflow: visible
custom_fields:
  karte:
    card:
      type: custom:stack-in-card
      card_mod:
        style: |
          ha-card {
            padding: 0px 0px 0px 0px;
          }
      mode: vertical
      keep:
        background: false
        border_radius: true
        box_shadow: false
        margin: false
        outer_padding: false
      cards:
        - type: grid
          columns: 3
          square: false
          cards:
            - type: custom:button-card
              label: '[[[ return variables.to_grid_label ]]]'
              size: 100%
              entity: '[[[ return variables.to_grid_entity ]]]'
              icon: mdi:transmission-tower-import
              show_icon: true
              show_name: false
              show_state: true
              show_label: true
              styles:
                grid:
                  - grid-template-areas: '"i s" "i l"'
                  - grid-template-rows: 1fr 1fr
                  - grid-template-columns: 4rem auto
                card:
                  - height: 80px
                  - box-shadow: none
                  - border: none
                  - padding: 0px 0px 0px 0px
                icon:
                  - height: 3rem
                  - color: var(--energy-grid-return-color)
                  - transform: rotateY(180deg)
                state:
                  - font-weight: bold
                  - font-size: 1rem
                  - align-self: end
                  - text-align: center
                  - color: var(--energy-grid-return-color)
                label:
                  - font-size: 0.8rem
                  - align-self: start
            - type: vertical-stack
              cards:
                - type: custom:apexcharts-card
                  card_mod:
                    style: |
                      ha-card {
                        background: none;
                        border: none;
                        box-shadow: none;
                        height: 80px;
                        padding: 0px;
                      }
                  stacked: true
                  chart_type: donut
                  header:
                    show: false
                    floating: true
                  apex_config:
                    plotOptions:
                      pie:
                        customScale: 1.8
                    chart:
                      height: 85px
                      offsetX: 0
                      offsetY: 18
                    legend:
                      show: false
                  series:
                    - entity: '[[[ return variables.to_home_entity ]]]'
                      color: var(--energy-battery-out-color)
                      show:
                        datalabels: false
                    - entity: '[[[ return variables.to_grid_entity ]]]'
                      color: var(--energy-grid-return-color)
                      show:
                        datalabels: false
                - type: custom:button-card
                  entity: '[[[ return variables.solar_produced_entity ]]]'
                  layout: vertical
                  show_name: false
                  show_state: true
                  show_icon: true
                  show_label: true
                  label: '[[[ return variables.solar_produced_label ]]]'
                  styles:
                    grid:
                      - grid-template-areas: '"top" "i" "s" "l" "bottom"'
                      - grid-template-columns: 100%
                      - grid-template-rows: 1fr 1fr auto auto 1fr
                    card:
                      - height: 80px
                      - margin-top: '-80px'
                      - background: none
                      - border: none
                      - box-shadow: none
                    state:
                      - font-weight: bold
                      - font-size: 0.8rem
                    label:
                      - font-size: 0.8rem
                    icon:
                      - height: 1.5rem
                      - color: darkorange
            - type: custom:button-card
              size: 100%
              entity: '[[[ return variables.to_home_entity ]]]'
              icon: mdi:home-battery
              show_icon: true
              show_name: false
              show_state: true
              show_label: true
              label: '[[[ return variables.to_home_label ]]]'
              styles:
                grid:
                  - grid-template-areas: '"s i" "l i"'
                  - grid-template-rows: 1fr 1fr
                  - grid-template-columns: auto 4rem
                card:
                  - height: 80px
                  - box-shadow: none
                  - border: none
                  - padding: 0px 0px 0px 0px
                icon:
                  - height: 3rem
                  - color: var(--energy-battery-out-color)
                state:
                  - font-weight: bold
                  - font-size: 1rem
                  - align-self: end
                  - color: var(--energy-battery-out-color)
                label:
                  - font-size: 0.8rem
                  - align-self: start

Does this work better?

[briis (Bjarne Riis)]

No. That gives the same result.

[ingo.niehues]

Which “Theme” do you use?

[ingo.niehues]

My Card puts a button-card over (overlapping) the apex-charts-card. I think the problem may have to do with paddings or margins (which are defined by a “theme”)

[briis (Bjarne Riis)]

I use the Default Theme. Tried switching to the Mushroom Theme, with the same result.
Does it work for you in the App? What Theme are you using? I could install that and see if this fixes it.