🔹 Card-mod - Add css styles to any lovelace card

olympia · June 29, 2023, 3:40pm

Hi,

I am using a logbook card to list events from my alarm.
I would like to decrease the line spacing between the lines, but I can’t figure out how this was doable.
The code I am using is below. Is this actually possible (I was trying to use all kind of ways I am using for other cards, but none works for this).

type: custom:logbook-card
entity: sensor.dscalarm_event
title: ''
max_items: 10
hidden_state:
  - ''
  - '*Special'
  - '*Periodic test trans'
  - unavailable
show:
  end_date: false
  start_date: false
  duration: false
  icon: false
card_mod:
  style: |
    :host {
      text-align: left;
      font-size: 14px;
      }
    ha-card {
      margin: -5px;
      background: none;
      box-shadow: none;
      border-width: 0;
      padding-top: 10px;
      padding-left: 10px;
      --primary-text-color: rgb(180,180,180);
      }

arganto · June 29, 2023, 4:04pm

Don’t just do it via trial and error, but only what is needed. And what is needed, you will see in the dev-tools. Let me give an example. Open the logbook card and open dev tools in browser. Then click on the arrow and select the line in the logbook card and the dev tools will select and highlight.

So each line has a class item and is directly below ha-card element and not within a shadow root. So the easiest way to change.

Then have a look how the space is currently defined for this class

ah, via padding-top and padding-bottom 5px.

Combine both information and just do

    card_mod:
      style: |
        .item {
          padding-top: 50px !important;
          padding-bottom: 50px !important;
        }

(in your case add to the rest).

Done. And a. much faster as with trial and error or via “trying to use all kind of ways I am using for other cards” and b. less need to ask.

guensen0 · June 29, 2023, 5:02pm

thanks, but that wasn’t the problem

olympia · June 29, 2023, 5:33pm

Many thanks! I could indeed get it working by using .item!

…and really really helpful explanation, I was always wondering how to check this!
However, I don’t see what do you mean by “open the logbook card”. If I open devtools in the browser for the whole page, then I get lost in it almost immediately… So how can I reproduce do view you show on the screenshot.

arganto · June 29, 2023, 5:36pm

then hover until you find the best fitting ancore, here the row:

and click. With this the dom will show the clicked element.

olympia · June 29, 2023, 6:10pm

Thank you very much @arganto! This was really very helpful filling a knowledge gap I had for long!

guensen0 · June 29, 2023, 6:12pm

now its working… card_mod was one level too high:


type: custom:auto-entities
card:
  show_name: true
  show_icon: true
  show_state: false
  type: glance
  style:
    .entities .entity:
      $: |
        state-badge {
          margin-top: 0px;
          margin-bottom: 0px;
        }
  columns: 24
  state_color: false
card_param: entities
filter:
  include:
    - entity_id: sensor.forecast_new_h*
  exclude: null
sort:
  method: entity_id
  numeric: true
show_empty: true
view_layout:
  grid-area: header
card_mod:
  style: |
    ha-card {
     background: rgb(0,0,0,0) !important;
    }
    .entity {
      border-left: 0.1em solid #aaaaaa;
    }
    .entity:nth-of-type(24)  {
      border-right: 0.1em solid #aaaaaa;
    } 
    {%- for i in range(1,25) -%}
      .entity:nth-of-type({{i}})  {
        padding: 0 0 7em;
        margin: 0 0 7em;
      }
    {% endfor %}

LeiChat · June 30, 2023, 10:53am

How may I target the icon on the mushroom-media-player-card but NOT the play control button icon please?

card_mod:
  style: |-
    :host {    
      --card-mod-icon-color: 
      {% if is_state('media_player.kitchen','playing') %}        
        #FFC107;
        {% else %}
        #3F51B5;
      {% endif %} 
      }

LeiChat · June 30, 2023, 3:27pm

To partly answer my own question… this works for the icon but not the shape-color (circular background). But… with this and my previous attempt, when the state changes back to paused (from playing) the icon color remains amber for a while.

card_mod:
  style: |-
    mushroom-shape-icon {           
      {% if is_state('media_player.kitchen','playing') %}        
        --card-mod-icon-color: #FFC107;   
        --card-mod-shape-color: #FFC107;
      {% endif %} 
      }

MrGrey · July 1, 2023, 10:12pm

Border style for input_datetime set as time?

I’ve been recreating and learning from the plethora of fine examples posted by Ildar and I’ve run into a snag. I’m trying to recreate, “test time” as seen at the bottom of post 3388.

I’ve checked older methods, newer methods, indenting, typos, etc., and I end up with no border (or worse ).

Please, what am I missing?

type: entities
entities:
  - entity: input_datetime.test_time
    card_mod:
      style:
        ha-time-input $ ha-base-time-input $:
          ha-textfield:
            $: |
              .mdc-text-field {
                height: 40px !important;
              }
              .mdc-line-ripple::after,
              .mdc-line-ripple::before {
                border-bottom-style: none !important;
              }
          ha-select $: |
            .mdc-select__anchor {
              height: 40px !important;
            }
            .mdc-line-ripple::after,
            .mdc-line-ripple::before {
              border-bottom-style: none !important;
            }
          .: |
            ha-time-input {
              height: 38px;
              border: 1px solid rgba(127,127,127,0.5);
              border-radius: 4px !important;
            }
        .: |
          :host {
            --mdc-text-field-fill-color: transparent;
            --mdc-select-fill-color: transparent;            
          }

Thank you.

Adrian85 · July 2, 2023, 1:02pm

Hi there,
I’m totaly lost.

This is my actuall lovelace yaml:

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  align: center
cards:
  - type: horizontal-stack
    cards:
      - type: custom:vertical-stack-in-card
        title: Beleuchtung
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-light-card
              - type: custom:mushroom-light-card
              - type: custom:mushroom-number-card
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-light-card
              - type: custom:mushroom-light-card
              - type: custom:mushroom-light-card
              - type: custom:mushroom-light-card
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-light-card
              - type: custom:mushroom-light-card
              - type: custom:mushroom-light-card
              - type: custom:mushroom-light-card
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-light-card
              - type: custom:mushroom-light-card
              - type: custom:mushroom-light-card
              - type: custom:mushroom-light-card
          - type: custom:mushroom-light-card
      - type: vertical-stack
        cards:
          - type: custom:vertical-stack-in-card
            title: Wetter
            cards:
              - type: weather-forecast
            secondary_info_attribute: friendly_name
          - type: custom:vertical-stack-in-card
            title: Sonos
            cards:
view_layout:
  grid-area: main

i would like to apply following CSS to the card-header class:
In my themes.yaml:

No-borders:
  ha-card-border-color: rgba(0,0,0,0) ## transparent
  ha-card-border-style: none
  card-mod-theme: No-borders
  card-mod-card: | 
    .card-header {
      text-align: center;
      display: block !important;
      font-variant: small-caps;
      border-bottom: 1px solid var(--bg-color3);
      margin-bottom: 24px;
      padding: 8px;
      line-height: 20px;
      background: #802a2a;
    }
    ha-card div.options {
      border: none;
    }

I’ve tried multiple things, no way to get the css to apply.
Have someone a solution?

tommi32 · July 3, 2023, 6:24am

Hi there
I need help with horizontal stack cards, with custom aspects (widths 2/3 for first card, and 1/3 for second card)
I was going out from this code:

type: custom:mod-card
card_mod:
  style:
    hui-horizontal-stack-card $: |
      hui-entity-card:nth-of-type(1) {
        flex-grow: 2 !important; 
      }
      hui-entity-card:nth-of-type(2) {
        flex-grow: 1 !important; 
      }
card:
  type: horizontal-stack
  cards:
    - type: entity
      entity: sun.sun
    - type: entity
      entity: sun.sun

It work well, but i want to use mini media player card with picture entity card

type: custom:mod-card
card_mod:
  style:
    hui-horizontal-stack-card $: |
      hui:picture-entity-card:nth-of-type(1) {
        flex-grow: 1 !important; 
      }
      hui:mini-media-player-card:nth-of-type(2) {
        flex-grow: 2 !important; 
      }
card:
  type: horizontal-stack
  cards:
    - type: picture-entity
      show_state: false
      show_name: false
      camera_view: auto
      entity: camera.stb_obyvacka_6
    - type: custom:mini-media-player
      name: STB Obývačka 2
      entity: media_player.stb_obyvacka_2
      artwork: material
      info: scroll

The cards are working, but with aspect 1/2 and 1/2.
I thing the problem will be in lines:
hui:picture-entity-card:nth-of-type(1) {
and
hui:mini-media-player-card:nth-of-type(2) {

Can you give me some hints??

arganto · July 3, 2023, 7:27am

Without test. Is the element really here : instead of - (have a look in the dev tools of your browser). And secondly, why n-th of type 2 if you have only 1?

FuzzyB3ar · July 4, 2023, 8:56am

Wizards of the HA, please assist me with my styles here. I cannot figure out what I am doing wrong.
Below is the code and attached is a picture. I am trying to get the lines between the various blocks to change colour dependant on the state of various sensors. I am not getting any errors, simply those lines are not coming up at all.

Any advice?

type: picture-elements
image: local/pictures/GX Touch 50_HA12.png
card_mod:
  style: |
    @keyframes my-blink {
      0% {opacity: 0;}
      50% {opacity: 1;}
      100% {opacity: 0;}
    }
    ha-card {
      --paper-item-icon-grid-color-check: {% if states('sensor.victron_vebus_activein_l1_power_227') > "0" %} red {% else %} none {% endif %};
      --paper-item-icon-gridIcon-color-check: {% if states('sensor.victron_vebus_activein_l1_power_227') > "0" %} white {% else %} red {% endif %};
      --paper-item-icon-acloads-color-check: {% if states('sensor.victron_vebus_out_l1_power_227') > "0" %} blue {% else %} red {% endif %};
      --paper-item-icon-acloadsIcon-color-check: {% if states('sensor.victron_vebus_out_l1_power_227') > 0 %} white {% else %} red {% endif %};
      --paper-item-icon-battery-color-check: {% if states('sensor.victron_system_battery_power') > "0" %} blue {% else %} blue {% endif %};
      --paper-item-icon-batteryIcon-color-check: {% if states('sensor.victron_system_battery_soc') > "60" %} white {% else %} white {% endif %};
      --paper-item-icon-pv-color-check: {% if states('sensor.victron_system_dc_pv_power') > "0" %} orange {% else %} none {% endif %};
      --paper-item-icon-pvIcon-color-check: {% if states('sensor.victron_system_dc_pv_power') > "0" %} white {% else %} red {% endif %};
      --paper-item-icon-vebus--color-check: {% if states('sensor.victron_vebus_state_246') > "0" %} yellow {% else %} red {% endif %};

    }
elements:
  - type: state-label
    name: Red Grid Block - Grid Name
    entity: sensor.blank_blank
    prefix: GRID
    style:
      top: 2%
      left: 11%
      color: rgb(255,255,255)
      font-family: Arial
      font-size: 130%
      font-weight: bold
      transform: rotate(0deg)
    tap_action:
      action: none
  - type: state-label
    name: Red Grid Block - Eskom Grid Watt
    entity: sensor.victron_vebus_activein_l1_power_227
    style:
      top: 20%
      left: 19%
      font-size: 130%
      font-weight: bold
    tap_action:
      action: none
  - type: state-label
    name: Red Grid Block - Loadshedding Name
    entity: sensor.blank_blank
    prefix: Stage
    style:
      top: 22%
      left: 15%
      color: rgb(255,255,255)
      font-family: Arial
      font-size: 90%
      font-weight: bold
      transform: rotate(0deg)
    tap_action:
      action: none
  - type: state-label
    name: Red Grid Block - Load Shedding
    entity: sensor.load_shedding_stage_eskom
    style:
      top: 33.75%
      left: 21%
      font-size: 75%
      font-weight: bold
    tap_action:
      action: none
  - type: state-icon
    name: Red Grid Block - Icon
    icon: mdi:transmission-tower
    entity: sensor.victron_vebus_activein_l1_power_227
    style:
      left: 7%
      top: 30%
      transform: translate(-50%, -50%) scale(2, 2)
      opacity: 0.6
      '--paper-item-icon-color': var(--paper-item-icon-gridIcon-color-check)
    tap_action:
      action: none
  - type: state-icon
    name: Red Grid Block - Line
    icon: mdi:lightning-bolt1
    entity: sensor.victron_vebus_activein_l1_power_227
    style:
      top: 22.98%
      left: 35.1%
      width: 6.6%
      height: 4px
      background-color: var(--paper-item-icon-grid-color-check)
      transform: translate(-50%, -50%)
      animation: my-blink 2s linear infinite
      animation-fill-mode: both
  - type: icon
    name: Red Grid Block - Dot on Grid
    icon: mdi:circle
    style:
      top: 19.4%
      left: 28.5%
      color: var(--paper-item-icon-grid-color-check)
      transform: scale(0.5)
      animation: my-blink 2s linear infinite
      animation-fill-mode: both
  - type: icon
    name: Red Grid Block - Dot on Victron
    icon: mdi:circle
    style:
      top: 19.4%
      left: 36.9%
      color: var(--paper-item-icon-grid-color-check)
      transform: scale(0.5)
      animation: my-blink 2s linear infinite
      animation-fill-mode: both
  - type: state-label
    name: Victron Block - Vebus State
    entity: sensor.blank_blank
    prefix: Inverter
    style:
      top: 7%
      left: 50%
      font-size: 130%
      font-weight: bold
    tap_action:
      action: none
  - type: state-icon
    name: Victron Block - Icon
    icon: mdi:flash-triangle
    entity: sensor.grid_power
    style:
      left: 42%
      top: 37%
      transform: translate(-50%, -50%) scale(1.5, 1.5)
      '--paper-item-icon-color': var(--paper-item-icon-vebus--color-check)
    tap_action:
      action: none
  - type: state-label
    name: Green AC Block - Grid Name
    entity: sensor.blank_blank
    prefix: AC Loads
    style:
      top: 2%
      left: 72%
      color: rgb(255,255,255)
      font-family: Arial
      font-size: 130%
      font-weight: bold
      transform: rotate(0deg)
    tap_action:
      action: none
  - type: state-label
    name: Green AC Block - AC Loads
    entity: sensor.victron_vebus_out_l1_power_227
    style:
      top: 20%
      left: 82%
      font-size: 130%
      font-weight: bold
    tap_action:
      action: none
  - type: state-icon
    name: Green AC Block - Icon
    icon: mdi:home-lightning-bolt
    entity: sensor.victron_vebus_out_l1_power_227
    style:
      left: 92%
      top: 31%
      transform: translate(-50%, -50%) scale(2, 2)
      opacity: 0.6
      '--paper-item-icon-color': var(--paper-item-icon-acloadsIcon-color-check)
    tap_action:
      action: none
  - type: state-icon
    name: Green AC Block - Grid Line
    icon: mdi:arrow-right1
    entity: sensor.victron_vebus_out_l1_power_227
    style:
      top: 22.96%
      left: 64.66%
      width: 6.8%
      height: 4px
      background-color: var(--paper-item-icon-acloads-color-check)
      transform: translate(-50%, -50%)
      animation: my-blink 2s linear infinite
      animation-fill-mode: both
  - type: icon
    name: Green AC Block - Dot on Victron
    icon: mdi:circle
    style:
      top: 19.3%
      left: 57.8%
      color: var(--paper-item-icon-acloads-color-check)
      transform: scale(0.5)
      animation: my-blink 2s linear infinite
      animation-fill-mode: both
  - type: icon
    name: Green AC Block - Dot on AC Loads
    icon: mdi:circle
    style:
      top: 19.3%
      left: 66.5%
      color: var(--paper-item-icon-acloads-color-check)
      transform: scale(0.5)
      animation: my-blink 2s linear infinite
      animation-fill-mode: both
  - type: state-label
    name: Blue Battery Block - Battery SOC
    entity: sensor.blank_blank
    prefix: Battery
    style:
      top: 50%
      left: 18%
      font-size: 130%
      font-weight: bold
    tap_action:
      action: none
  - type: state-label
    name: Blue Battery Block - Battery SOC
    entity: sensor.victron_system_battery_soc
    style:
      top: 60%
      left: 18%
      font-size: 130%
      font-weight: bold
    tap_action:
      action: none
  - type: state-label
    name: Blue Battery Block - Battery Power
    entity: sensor.victron_system_battery_power
    style:
      top: 68%
      left: 18%
      font-size: 90%
      font-weight: bold
    tap_action:
      action: none
  - type: state-label
    name: Blue Battery Block - Battery Voltage
    entity: sensor.victron_battery_voltage
    style:
      top: 73%
      left: 25%
      font-size: 80%
      font-weight: bold
    tap_action:
      action: none
  - type: state-label
    name: Blue Battery Block - Battery Current
    entity: sensor.victron_battery_current
    style:
      top: 78%
      left: 25%
      font-size: 80%
      font-weight: bold
    tap_action:
      action: none
  - type: state-icon
    name: Blue Battery Block - Icon
    icon: mdi:car-battery
    entity: sensor.victron_vebus_out_l1_power_227
    style:
      left: 8%
      top: 75%
      transform: translate(-50%, -50%) scale(2, 2)
      opacity: 0.6
      '--paper-item-icon-color': var(--paper-item-icon-batteryIcon-color-check)
    tap_action:
      action: none
  - type: state-icon
    name: Blue Battery Block - Battery V-Line
    icon: mdi:lightning-bol
    entity: sensor.victron_system_battery_power
    style:
      top: 52.5%
      left: 50.1%
      width: 1.2%
      height: 70px
      background-color: var(--paper-item-icon-battery-color-check)
      transform: translate(-50%, -50%)
      animation: my-blink 2s infinite
      animation-fill-mode: both
  - type: icon
    name: Blue Battery Block - Dot on Victron V-Line
    icon: mdi:circle
    style:
      top: 37%
      left: 47.63%
      color: var(--paper-item-icon-battery-color-check)
      transform: scale(0.5)
      animation: my-blink 2s linear infinite
      animation-fill-mode: both
  - type: state-icon
    name: Blue Battery Block - Battery H-Line
    icon: mdi:lightning-bolt1
    entity: sensor.victron_system_battery_power
    style:
      top: 66.9%
      left: 38.6%
      width: 15%
      height: 4px
      background-color: var(--paper-item-icon-battery-color-check)
      transform: translate(-50%, -50%)
      animation: my-blink 2s linear infinite
      animation-fill-mode: both
  - type: icon
    name: Blue Battery Block - Dot on Battery
    icon: mdi:circle
    style:
      top: 63.3%
      left: 27.8%
      color: var(--paper-item-icon-battery-color-check)
      transform: scale(0.5)
      animation: my-blink 2s linear infinite
      animation-fill-mode: both
  - type: state-label
    name: Blue Battery Block - Battery Hours Left
    entity: sensor.seconds_to_hours
    style:
      top: 78%
      left: 50%
      font-size: 180%
      font-weight: bold
    tap_action:
      action: none
  - type: state-label
    name: Yellow PV Block - Grid Name
    entity: sensor.blank_blank
    prefix: PV
    style:
      top: 47%
      left: 79%
      color: rgb(255,255,255)
      font-family: Arial
      font-size: 130%
      font-weight: bold
      transform: rotate(0deg)
    tap_action:
      action: none
  - type: state-label
    name: Yellow PV Block - PV Main
    entity: sensor.victron_system_dc_pv_power
    style:
      top: 61%
      left: 84%
      font-size: 110%
      font-weight: bold
    tap_action:
      action: none
  - type: state-label
    name: Yellow PV Block - Mppt 2
    entity: sensor.solar_yield_today
    style:
      top: 73%
      left: 81%
      font-size: 80%
      font-weight: bold
    tap_action:
      action: none
  - type: state-label
    name: Yellow PV Block - Mppt 3
    entity: sensor.solar_max_power_today
    style:
      top: 79%
      left: 81%
      font-size: 80%
      font-weight: bold
    tap_action:
      action: none
  - type: state-icon
    name: Yellow PV Block - Icon
    icon: mdi:solar-power-variant
    entity: sensor.victron_system_dc_pv_power
    style:
      left: 92%
      top: 74%
      transform: translate(-50%, -50%) scale(2, 2)
      opacity: 0.6
      '--paper-item-icon-color': var(--paper-item-icon-pvIcon-color-check)
    tap_action:
      action: none
  - type: state-icon
    name: Yellow PV Block - PV Line
    icon: mdi:lightning-bolt1
    entity: sensor.victron_system_dc_pv_power
    style:
      top: 66.75%
      left: 61.3%
      width: 15.2%
      height: 4px
      background-color: var(--paper-item-icon-pv-color-check)
      transform: translate(-50%, -50%)
      animation: my-blink 2s infinite
      animation-fill-mode: both
  - type: icon
    name: Yellow PV Block - Dot on PV
    icon: mdi:circle
    style:
      top: 63.1%
      left: 67.3%
      color: var(--paper-item-icon-pv-color-check)
      transform: scale(0.5)
      animation: my-blink 2s linear infinite
      animation-fill-mode: both
  - type: state-label
    name: Grey Block - Name Next Loadshedding
    entity: sensor.blank_blank
    prefix: Next Loadshedding
    style:
      top: 83%
      left: 37%
      color: white
      font-family: Arial
      font-size: 77%
      font-weight: bold
      transform: rotate(0deg)
    tap_action:
      action: none
  - type: state-label
    name: Grey Block - Next Loadshedding
    entity: calendar.load_shedding_forecast
    attribute: start_time
    style:
      top: 94%
      left: 50%
      transform: translate(-50%, -50%)
      font-size: 15px
      font-weight: bold
    tap_action:
      action: none
  - type: service-button
    name: Grey Block - Charge Batteries Button
    title: Charge
    style:
      top: 92%
      left: 16%
      '--mdc-theme-primary': blue
    service: switch.toggle
    service_data:
      entity_id: switch.keep_batteries_charged
![Screenshot 2023-07-04 105609|690x421](upload://i2D4jgrAGRPqpqy3UCyMQ4K6rYQ.png)

Ildar_Gabdullin · July 4, 2023, 9:16am

Here 440 lines of my code, now sort it out.

P.S. If you want people to help you - simplify this. Provide a SHORT (< 20-30 line) code snippet which does not work, + correct your screenshot.

MrSir · July 10, 2023, 11:19am

Hi all, I’ve been scrolling this thread for hours and after much trial and error can’t seem to accomplish what I’m out to do.
I have a state-icon within a picture-elements card. I’d like to customise the colour of the icon depending on its state. I want to use some custom colours, and not the ‘dashboard-wide’ colour scheme that HA is trying to force me into.

This is my base card (sorry about the non-reproducible image…)
I’m just trying to change the colour of the ‘sleep’ status in the top left corner as a starting point.

  - type: picture-elements
    image: /local/model_3_grey_wide.png
    elements:
        - type: state-icon
          entity: binary_sensor.asleep
          icon: mdi:sleep
          style:
            top: 1%
            left: 1%
            transform: none

It looks like (using the inspector) that the var(--state-binary_sensor-active-color); is responsible for the colour, but I’d like to change it to an arbitrary value (e.g. a hex code).

My attempts at changing the colour have all ended in failure. Any helpful hints appreciated!

alexeiw123 · July 13, 2023, 12:34am

I’ve got a mushroom light card where I’m changing the icon using card-mod based on a template

card_mod:
  style: |
    :host {
      --card-mod-icon:
        {% if states('binary_sensor.range_motion_occupancy') == 'on' %} mdi:motion-sensor
        {% else %} mdi:motion-sensor-off
        {% endif %};
      --card-mod-icon-color:
        {% if states('binary_sensor.range_motion_occupancy') == 'on' %} orange
        {% else %} lightgrey
        {% endif %};
    }

Below shows how I’ve got this with individual cards and what I’m trying to achieve on one card.

motion detected, light on

motion cleared, light on, timer running

motion cleared, light off

My question is, how do I get card-mod to only change the icon on the left, and not the one on the right as well (which is either for colour temperature or brightness)

boardlord1 · July 13, 2023, 9:53am

A little help wanted I’ve a mini-graph card that displays both temperature (with graph) and humidity (without graph), with reduced font size:

Code:

type: custom:mini-graph-card
name: Bedroom
entities:
  - entity: sensor.average_mi_bedroom_temperature
  - entity: sensor.mi_bedroom_fce8_humidity
    show_state: true
    show_graph: false
line_color: dodgerblue
card_mod:
  style: |
    ha-card {
    .states.flex .state .state__value.ellipsis {
      font-size: 21px;
      align-self: center;
    }

I’d like bring the two values closer together (centre-aligned) so that they’ll fit on a mobile dashboard as well. Thanks in advance for your help!

arganto · July 13, 2023, 1:32pm

Do you have a screenshot where it is not fitting? I currently don’t get it, because the left is always left aligned and the right is right aligned and it is so close together as it is needed per size.

arganto · July 13, 2023, 1:34pm

You have to assign the color to the item you want to change and not change the variable wich is only used in both places. As I’m not using mushroom, I cannot point you to the DOM elements, but my hint is right though. Not change --card-mod-icon-color in :host, but color: of the item you want to have another color.