In der Light Karte die icon Größe ändern

Dashboard/Cards/Frontend
1

Hi,

kann man in der Light karte die icon Grösse ändern?
So wie in der Button Karte? Ich finde nichts dazu, ich hab gebastelt aber das ist keine zufrieden stellende Lösung, passt dann nur bei einer Auflösung :slight_smile:

  - type: horizontal-stack
    cards:
      - type: light
        entity: light.shellydimmer2_ec64c9c4f5f4
        card_mod:
          style: |
            ha-icon-button.more-info {
            display: none;
            }            
             ha-card {
             background-color: transparent;
             box-shadow: none;
             border: none;
             width: 140px !important;
             margin-left: 20px
             }
2

Ich bin bei dem Thema ein ganzes Stück weiter hänge jetzt aber bei der Umsetzung.

So funktioniert das ganze:

type: custom:mushroom-light-card
entity: light.flur
icon: mdi:lightbulb
layout: vertical
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        background: transparent !important;
        box-shadow: none;
        border: none;
        }
    .: |
      ha-state-icon {        
        color: {% if is_state(config.entity, 'on') %} orange {% else %} steelblue {% endif %} !important;
        }
       ha-card {
       background-color: transparent;
       box-shadow: none;
       border: none;
       }
       :host {
        --mush-icon-size: 70px;
        }

Aber ich hab keine Ahnung wie ich das jetzt richtig einbinde.
Ich probier seit Stunden, da fehlt mir einfach das Hintergrundwissen…
Das Ganze soll hier eingebunden werden, also bei der ersten Custom:mushroom-light-card

type: vertical-stack
cards:
  - type: markdown
    content: |
      ---
      # <font size=4px> <center> Wohnzimmer </font> </center>
    card_mod:
      style: |
        ha-card {
          background-color: transparent;
          box-shadow: none;
          margin-top: -20px; 
          margin-bottom: -100px;
          border: none;
        }
  - type: horizontal-stack
    cards:
      - type: vertical-stack
        cards:
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: none
            icon: mdi:thermostat
            show_state: false
            icon_height: 70px
            entity: sensor.temp_wohnzimmer
            hold_action:
              action: none
            name: " "
            card_mod:
              style: >
                :host {

                {% if is_state('binary_sensor.thermostat_wohnraum_status', 'on')
                %}

                --card-mod-icon-color: orange;

                {% else %}

                --card-mod-icon-color: steelblue

                {% endif %}

                }          

                ha-card {
                  background-color: transparent;
                  box-shadow: none;
                  border: none;
                  }
          - graph: line
            type: sensor
            detail: 2
            entity: sensor.temp_wohnzimmer
            icon: "  "
            name: " "
            card_mod:
              style: |
                ha-card {
                background-color: transparent;
                box-shadow: none;
                border: none;
                margin-top: -23px;
                }        
      - type: vertical-stack
        cards:
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: none
            name: " "
            icon: phu:echo-dot-gen-4
            show_state: false
            icon_height: 70px
            entity: sensor.echo_wohnzimmer_temperature
            hold_action:
              action: none
            card_mod:
              style: >
                :host {

                {% if is_state('binary_sensor.thermostat_wohnraum_status', 'on')
                %}

                --card-mod-icon-color: orange;

                {% else %}

                --card-mod-icon-color: steelblue

                {% endif %}

                }          

                ha-card {
                  background-color: transparent;
                  box-shadow: none;
                  border: none;
                  }
          - graph: line
            type: sensor
            detail: 2
            entity: sensor.echo_wohnzimmer_temperature
            icon: "  "
            name: " "
            card_mod:
              style: |
                ha-card {
                background-color: transparent;
                box-shadow: none;
                border: none;
                margin-top: -23px;
                }        
  - type: custom:mushroom-climate-card
    entity: climate.wohnraum
    card_mod:
      style: >
        ha-card { background: linear-gradient(to bottom, rgba(0, 0,0, 0) 10%,
        rgba(0, 0, 0, 0) 100%); border: none;  margin-top: -35px;  }
    primary_info: none
    secondary_info: none
    icon_type: none
    show_temperature_control: true
  - type: markdown
    content: "---"
    card_mod:
      style: |
        ha-card {
          background-color: transparent;
          box-shadow: none;
          margin-top: -20px; 
          margin-bottom: -100px;
          border: none;
        }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-light-card
        entity: light.flur
        icon: mdi:lightbulb
        layout: vertical
        card_mod:
          style: |
            ha-card {
              background-color: transparent !important;  # Wichtiger Punkt, um sicherzustellen, dass der Hintergrund transparent ist.
              box-shadow: none !important;               # Keine Schatten, falls gewünscht.
              border: none !important;                   # Kein Rand, falls gewünscht.
            }

            ha-state-icon {
              color: {% if is_state(entity, 'on') %} orange {% else %} steelblue {% endif %} !important; # Zustandssymbolfarbe
              background-color: transparent !important;  # Hintergrundfarbe für das Zustandssymbol
            }

            :host {
              --mush-icon-size: 70px;                    # Icon-Größe
            }
  - type: markdown
    content: "---"
    card_mod:
      style: |
        ha-card {
          background-color: transparent;
          box-shadow: none;
          margin-top: -20px; 
          margin-bottom: -100px;
          border: none;
        }
  - type: horizontal-stack
    cards:
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: switch.shellyplus1pm_d4d4da08c180_switch_0
        show_state: true
        icon_height: 70px
        card_mod:
          style: |
            ha-card {
            background-color: transparent;
            box-shadow: none;
            border: none;
            }        
        icon: mdi:television
      - type: vertical-stack
        cards:
          - type: entity
            entity: sensor.multimedia_power_stromi
            card_mod:
              style: |
                ha-card {
                background-color: transparent;
                box-shadow: none;
                border: none;
                margin-top: -10px;
                }
            state_color: false
            icon: " "
          - type: entity
            entity: sensor.shellyplus1pm_d4d4da08c180_switch_0_energy
            name: " "
            card_mod:
              style: |
                ha-card {
                background-color: transparent;
                box-shadow: none;
                border: none;
                margin-top: -25px;
                }
            state_color: false
            icon: " "
  - type: markdown
    content: |
      ---
      # <font size=3px> Tür </font> </center>
    card_mod:
      style: |
        ha-card {
          background-color: transparent;
          box-shadow: none;
          margin-top: -20px; 
          margin-bottom: -100px;
          border: none;
        }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-cover-card
        entity: cover.shellyplus2pm_e86beae77e3c
        layout: vertical
        show_position_control: true
        show_tilt_position_control: false
        show_buttons_control: true
        icon_type: icon
        fill_container: false
        tap_action:
          action: none
        hold_action:
          action: none
        name: " "
        card_mod:
          style: |
            :host {
             --mush-icon-size: 70px;
             }
             ha-card {
             background-color: transparent;
             box-shadow: none;
             border: none;
              }
      - type: vertical-stack
        cards:
          - type: entity
            entity: sensor.rollo_tur_power_stromi
            name: " "
            card_mod:
              style: |
                ha-card {
                background-color: transparent;
                box-shadow: none;
                border: none;
                margin-top: -10px;
                }
            state_color: false
            icon: " "
          - type: entity
            entity: sensor.shellyplus2pm_e86beae77e3c_energy
            name: " "
            card_mod:
              style: |
                ha-card {
                background-color: transparent;
                box-shadow: none;
                border: none;
                margin-top: -25px;
                }
            state_color: false
            icon: " "
  - type: markdown
    content: |
      ---
      # <font size=3px> Terasse </font> </center>
    card_mod:
      style: |
        ha-card {
          background-color: transparent;
          box-shadow: none;
          margin-top: -20px; 
          margin-bottom: -100px;
          border: none;
        }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-cover-card
        layout: vertical
        show_position_control: true
        show_tilt_position_control: false
        show_buttons_control: true
        name: " "
        icon_type: icon
        fill_container: false
        tap_action:
          action: none
        hold_action:
          action: none
        entity: cover.shellyplus2pm_fcb467339390
        card_mod:
          style: |
            :host {
             --mush-icon-size: 70px;
             }
             ha-card {
             background-color: transparent;
             box-shadow: none;
             border: none;
             }
      - type: vertical-stack
        cards:
          - type: entity
            entity: sensor.rollo_tur_power_stromi
            name: " "
            card_mod:
              style: |
                ha-card {
                background-color: transparent;
                box-shadow: none;
                border: none;
                margin-top: -10px;
                }
            state_color: false
            icon: " "
          - type: entity
            entity: sensor.shellyplus2pm_fcb467339390_energy
            name: " "
            card_mod:
              style: |
                ha-card {
                background-color: transparent;
                box-shadow: none;
                border: none;
                margin-top: -25px;
                }
            state_color: false
            icon: " "
  - type: markdown
    content: "---"
    card_mod:
      style: |
        ha-card {
          background-color: transparent;
          box-shadow: none;
          margin-top: -20px; 
          margin-bottom: -100px;
          border: none;
        }
  - type: horizontal-stack
    cards:
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: toggle
        show_state: true
        icon_height: 70px
        icon: mdi:power-plug
        entity: switch.shellyplus1pm_80646fd1a068_switch_0
        card_mod:
          style: |
            ha-card {
            background-color: transparent;
            box-shadow: none;
            border: none;
            }        
      - type: vertical-stack
        cards:
          - type: entity
            entity: sensor.steckdose_wohnzimmer_power_stromi
            name: " "
            card_mod:
              style: |
                ha-card {
                background-color: transparent;
                box-shadow: none;
                border: none;
                margin-top: -10px;
                }
            state_color: false
            icon: " "
          - type: entity
            entity: sensor.shellyplus1pm_80646fd1a068_switch_0_energy
            name: " "
            card_mod:
              style: |
                ha-card {
                background-color: transparent;
                box-shadow: none;
                border: none;
                margin-top: -25px;
                }
            state_color: false
            icon: " "
  - type: markdown
    content: "---"
    card_mod:
      style: |
        ha-card {
          background-color: transparent;
          box-shadow: none;
          margin-top: -20px; 
          margin-bottom: -100px;
          border: none;
        }

Vielen Dank für die Hilfe…

3

Ist das bereits dein code oder ein Beispiel?

Anbei der entscheidende Part:

card_mod:
  style: |
    ha-card {
 
    :host {
      --mush-icon-symbol-size: 0.7em;
      --mush-icon-size: 35px;
    }

Wenn du mit den Werten spielst, siehst du die Veränderung bereits in der Ansicht.

4

Du hast mich falsch verstanden, der erste code funktioniert genau so wie ich möchte, ich bekomme den code nur nicht in meinem Gesamtcode untergebracht. (Der lange im 2te code)
Wenn ich den einfach so da reinkopiere funktioniert nicht mehr, Dann bekomme ich den Hintergrund nicht unsichtbar und der Button hat auch wieder einen kreis.

5

gibt es inzwischen im normalen Editor eine Option zur vergößerung der Icons außer mit dem Code zu arbeiten ?
Grüße Daniel