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

[Ildar_Gabdullin]

(continuation of this post)

Additional styling:
Create a new view with a “panel mode”:

title: mdc_height_transp
path: mdc_height_transp
badges: []
cards:
  - type: entities
    entities:
      - entity: input_number.test_number_2
        name: default
      - type: section
      - entity: input_number.test_number_2
        name: compact + no right padding
        card_mod:
          style:
            ha-textfield $: |
              .mdc-text-field {
                height: 40px !important;
              }
            .: |
              :host {
                --text-field-padding: 0px 0px 0px 16px;
              }
      - entity: input_number.test_number_2
        name: + transparent
        card_mod:
          style:
            hui-generic-entity-row $: |
              .info {
                text-overflow: unset !important;
                white-space: unset !important;
              }          
            ha-textfield $: |
              .mdc-text-field {
                height: 40px !important;
              }
            .: |
              :host {
                --mdc-text-field-idle-line-color: transparent;
                --mdc-text-field-hover-line-color: transparent;
                --mdc-theme-primary: transparent;
                --text-field-padding: 0px 0px 0px 16px;
                --mdc-text-field-fill-color: var(--card-background-color);
              }
      - entity: input_number.test_number_2
        name: + transparent + underline
        card_mod:
          style:
            hui-generic-entity-row $: |
              .info {
                text-overflow: unset !important;
                white-space: unset !important;
              }          
            ha-textfield $: |
              .mdc-text-field {
                height: 40px !important;
              }
            .: |
              :host {
                --text-field-padding: 0px 0px 0px 16px;
                --mdc-text-field-fill-color: var(--card-background-color);
              }
      - entity: input_number.test_number_2
        name: + transparent + border
        card_mod:
          style:
            hui-generic-entity-row $: |
              .info {
                text-overflow: unset !important;
                white-space: unset !important;
              }          
            ha-textfield $: |
              .mdc-text-field {
                height: 40px !important;
                border: 1px solid rgba(127,127,127,0.5);
                border-radius: 4px !important;
              }
            .: |
              :host {
                --mdc-text-field-idle-line-color: transparent;
                --mdc-text-field-hover-line-color: transparent;
                --mdc-theme-primary: transparent;
                --text-field-padding: 0px 0px 0px 16px;
                --mdc-text-field-fill-color: var(--card-background-color);
              }
      - entity: input_number.test_number_2
        name: + transparent + no ripple
        card_mod:
          style:
            hui-generic-entity-row $: |
              .info {
                text-overflow: unset !important;
                white-space: unset !important;
              }          
            ha-textfield $: |
              .mdc-text-field {
                height: 40px !important;
              }
              .mdc-text-field__ripple {
                display: none;
              }
            .: |
              :host {
                --mdc-text-field-idle-line-color: transparent;
                --mdc-text-field-hover-line-color: transparent;
                --mdc-theme-primary: transparent;
                --text-field-padding: 0px 0px 0px 16px;
                --mdc-text-field-fill-color: var(--card-background-color);
              }
      - entity: input_number.test_number_2
        name: + transparent + border + no ripple
        card_mod:
          style:
            hui-generic-entity-row $: |
              .info {
                text-overflow: unset !important;
                white-space: unset !important;
              }          
            ha-textfield $: |
              .mdc-text-field {
                height: 40px !important;
                border: 1px solid rgba(127,127,127,0.5);
                border-radius: 4px !important;
              }
              .mdc-text-field__ripple {
                display: none;
              }
            .: |
              :host {
                --mdc-text-field-idle-line-color: transparent;
                --mdc-text-field-hover-line-color: transparent;
                --mdc-theme-primary: transparent;
                --text-field-padding: 0px 0px 0px 16px;
                --mdc-text-field-fill-color: var(--card-background-color);
              }
      - entity: input_number.test_number_2
        name: + transparent + border on hover + no ripple
        card_mod:
          style:
            hui-generic-entity-row $: |
              .info {
                text-overflow: unset !important;
                white-space: unset !important;
              }          
            ha-textfield $: |
              .mdc-text-field {
                height: 40px !important;
                border-radius: 4px !important;
                border: 1px solid transparent;
              }
              .mdc-text-field:hover {
                border: 1px solid rgba(127,127,127,0.5);
              }
              .mdc-text-field__ripple {
                display: none;
              }
            .: |
              :host {
                --mdc-text-field-idle-line-color: transparent;
                --mdc-text-field-hover-line-color: transparent;
                --mdc-theme-primary: transparent;
                --text-field-padding: 0px 0px 0px 16px;
                --mdc-text-field-fill-color: var(--card-background-color);
              }
      - entity: input_number.test_number_2
        name: + transparent + shifted to right 
        card_mod:
          style:
            hui-generic-entity-row $: |
              .info {
                text-overflow: unset !important;
                white-space: unset !important;
              }          
            ha-textfield $: |
              .mdc-text-field {
                height: 40px !important;
              }
            .: |
              :host {
                --mdc-text-field-idle-line-color: transparent;
                --mdc-text-field-hover-line-color: transparent;
                --mdc-theme-primary: transparent;
                --text-field-padding: 0px 0px 0px 16px;
                --mdc-text-field-fill-color: var(--card-background-color);
                margin-right: -16px;
              }

      - type: section
      - &ref_sensor_row
        entity: sensor.processor_use
        name: sensor

      #########################################################################################
      - type: section
        label: with UoM
      - entity: input_number.test_value_uom
        name: compact
        card_mod:
          style:
            ha-textfield $: |
              .mdc-text-field {
                height: 40px !important;
              }
      - entity: input_number.test_value_uom
        name: + transparent
        card_mod:
          style:
            ha-textfield $: |
              .mdc-text-field {
                height: 40px !important;
              }
            .: |
              :host {
                --mdc-text-field-idle-line-color: transparent;
                --mdc-text-field-hover-line-color: transparent;
                --mdc-theme-primary: transparent;
                --mdc-text-field-fill-color: var(--card-background-color);
              }
      - entity: input_number.test_value_uom
        name: compact + no right padding
        card_mod:
          style:
            hui-generic-entity-row $: |
              .info {
                text-overflow: unset !important;
                white-space: unset !important;
              }          
            ha-textfield $: |
              .mdc-text-field {
                height: 40px !important;
              }
            .: |
              :host {
                --text-field-padding: 0px 0px 0px 16px;
              }
      - entity: input_number.test_value_uom
        name: compact + no UoM-paddings
        card_mod:
          style:
            hui-generic-entity-row $: |
              .info {
                text-overflow: unset !important;
                white-space: unset !important;
              }          
            ha-textfield $: |
              .mdc-text-field {
                height: 40px !important;
              }
            .: |
              :host {
                --text-field-suffix-padding-left: 0px;
                --text-field-suffix-padding-right: 0px;
              }
      - entity: input_number.test_value_uom
        name: + no right padding
        card_mod:
          style:
            ha-textfield $: |
              .mdc-text-field {
                height: 40px !important;
              }
            .: |
              :host {
                --text-field-padding: 0px 0px 0px 16px;
                --text-field-suffix-padding-left: 0px;
                --text-field-suffix-padding-right: 0px;
              }
      - entity: input_number.test_value_uom
        name: + transparent
        card_mod:
          style:
            ha-textfield $: |
              .mdc-text-field {
                height: 40px !important;
              }
            .: |
              :host {
                --mdc-text-field-idle-line-color: transparent;
                --mdc-text-field-hover-line-color: transparent;
                --mdc-theme-primary: transparent;
                --mdc-text-field-fill-color: var(--card-background-color);
                --text-field-padding: 0px 0px 0px 16px;
                --text-field-suffix-padding-left: 0px;
                --text-field-suffix-padding-right: 0px;
              }
      - entity: input_number.test_value_uom
        name: + underline
        card_mod:
          style:
            ha-textfield $: |
              .mdc-text-field {
                height: 40px !important;
              }
            .: |
              :host {
                --mdc-text-field-fill-color: var(--card-background-color);
                --text-field-padding: 0px 0px 0px 16px;
                --text-field-suffix-padding-left: 0px;
                --text-field-suffix-padding-right: 0px;
              }
      - entity: input_number.test_value_uom
        name: + border + no underline + custom UoM-paddings
        card_mod:
          style:
            hui-generic-entity-row $: |
              .info {
                text-overflow: unset !important;
                white-space: unset !important;
                font-size: 10px;
              }          
            ha-textfield $: |
              .mdc-text-field {
                height: 40px !important;
                border: 1px solid rgba(127,127,127,0.5);
                border-radius: 4px !important;
              }
            .: |
              :host {
                --mdc-text-field-idle-line-color: transparent;
                --mdc-text-field-hover-line-color: transparent;
                --mdc-theme-primary: transparent;
                --mdc-text-field-fill-color: var(--card-background-color);
                --text-field-padding: 0px 0px 0px 16px;
                --text-field-suffix-padding-left: 0px;
                --text-field-suffix-padding-right: 8px;
              }
      - type: section
      - *ref_sensor_row

  ######################################################################################################################

  - type: entities
    entities:
      - entity: input_select.test_value
        name: default
      - type: section
      - entity: input_select.test_value
        name: compact
        card_mod:
          style:
            ha-select $: |
              .mdc-select__anchor {
                height: 40px !important;
              }
              .mdc-select__selected-text-container {
                align-self: end;
              }
            .: |
              ha-select {
                height: 40px;
              }
      - entity: input_select.test_value
        name: compact + transparent
        card_mod:
          style:
            ha-select $: |
              .mdc-select__anchor {
                height: 40px !important;
              }
              .mdc-select__selected-text-container {
                align-self: end;
              }
              .mdc-line-ripple::after,
              .mdc-line-ripple::before {
                border-bottom-style: none !important;
              }
            .: |
              ha-select {
                height: 40px;
              }
              :host {
                --mdc-select-fill-color: transparent;
              }
      - entity: input_select.test_value
        name: compact + transparent + underline
        card_mod:
          style:
            ha-select $: |
              .mdc-select__anchor {
                height: 40px !important;
              }
              .mdc-select__selected-text-container {
                align-self: end;
              }
            .: |
              ha-select {
                height: 40px;
              }
              :host {
                --mdc-select-fill-color: transparent;
              }
      - entity: input_select.test_value
        name: compact + transparent + border
        card_mod:
          style:
            ha-select $: |
              .mdc-select__anchor {
                height: 40px !important;
                border: 1px solid rgba(127,127,127,0.5);
                border-radius: 8px !important;
              }
              .mdc-select__selected-text-container {
                align-self: end;
              }
              .mdc-line-ripple::after,
              .mdc-line-ripple::before {
                border-bottom-style: none !important;
              }
            .: |
              ha-select {
                height: 40px;
              }
              :host {
                --mdc-select-fill-color: transparent;
              }
      - entity: input_select.test_value
        name: compact + transparent + no ripple
        card_mod:
          style:
            ha-select $: |
              .mdc-select__anchor {
                height: 40px !important;
              }
              .mdc-select__selected-text-container {
                align-self: end;
              }
              .mdc-line-ripple::after,
              .mdc-line-ripple::before {
                border-bottom-style: none !important;
              }
              .mdc-select__ripple {
                display: none !important;
              }
            .: |
              ha-select {
                height: 40px;
              }
              :host {
                --mdc-select-fill-color: transparent;
              }
      - entity: input_select.test_value
        name: compact + transparent + border + no ripple
        card_mod:
          style:
            ha-select $: |
              .mdc-select__anchor {
                height: 40px !important;
                border: 1px solid rgba(127,127,127,0.5);
                border-radius: 8px !important;
              }
              .mdc-select__selected-text-container {
                align-self: end;
              }
              .mdc-line-ripple::after,
              .mdc-line-ripple::before {
                border-bottom-style: none !important;
              }
              .mdc-select__ripple {
                display: none !important;
              }
            .: |
              ha-select {
                height: 40px;
              }
              :host {
                --mdc-select-fill-color: transparent;
              }
      - entity: input_select.test_value
        name: compact + transparent + border on hover + no ripple
        card_mod:
          style:
            ha-select $: |
              .mdc-select__anchor {
                height: 40px !important;
                border-radius: 8px !important;
                border: 1px solid transparent;
              }
              .mdc-select__anchor:hover {
                border: 1px solid rgba(127,127,127,0.5);
              }
              .mdc-select__selected-text-container {
                align-self: end;
              }
              .mdc-line-ripple::after,
              .mdc-line-ripple::before {
                border-bottom-style: none !important;
              }
              .mdc-select__ripple {
                display: none !important;
              }
            .: |
              ha-select {
                height: 40px;
              }
              :host {
                --mdc-select-fill-color: transparent;
              }
      - sun.sun
      - type: section
      - sun.sun
      - type: section
        label: '-'
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - type: section
      - sun.sun

  ######################################################################################################################

  - type: entities
    entities:
      - entity: input_text.test_text
        name: default
      - type: section
      - entity: input_text.test_text
        name: compact
        card_mod:
          style:
            ha-textfield $: |
              .mdc-text-field {
                height: 40px !important;
              }
              .mdc-text-field__input {
                align-self: end;
              }
            .: |
              ha-textfield {
                height: 40px;
              }
      - entity: input_text.test_text
        name: compact + transparent
        card_mod:
          style:
            ha-textfield $: |
              .mdc-text-field {
                height: 40px !important;
              }
              .mdc-text-field__input {
                align-self: end;
              }
              .mdc-line-ripple::after,
              .mdc-line-ripple::before {
                border-bottom-style: none !important;
              }
            .: |
              ha-textfield {
                height: 40px;
              }
              :host {
                --mdc-text-field-fill-color: transparent;
              }
      - entity: input_text.test_text
        name: compact + transparent + underline
        card_mod:
          style:
            ha-textfield $: |
              .mdc-text-field {
                height: 40px !important;
              }
              .mdc-text-field__input {
                align-self: end;
              }
            .: |
              ha-textfield {
                height: 40px;
              }
              :host {
                --mdc-text-field-fill-color: transparent;
              }
      - entity: input_text.test_text
        name: compact + transparent + border
        card_mod:
          style:
            ha-textfield $: |
              .mdc-text-field {
                height: 40px !important;
                border: 1px solid rgba(127,127,127,0.5);
                border-radius: 8px !important;
              }
              .mdc-text-field__input {
                align-self: end;
              }
              .mdc-line-ripple::after,
              .mdc-line-ripple::before {
                border-bottom-style: none !important;
              }
            .: |
              ha-textfield {
                height: 40px;
              }
              :host {
                --mdc-text-field-fill-color: transparent;
              }
      - entity: input_text.test_text
        name: compact + transparent + no ripple
        card_mod:
          style:
            ha-textfield $: |
              .mdc-text-field {
                height: 40px !important;
              }
              .mdc-text-field__input {
                align-self: end;
              }
              .mdc-line-ripple::after,
              .mdc-line-ripple::before {
                border-bottom-style: none !important;
              }
              .mdc-text-field__ripple {
                display: none !important;
              }
            .: |
              ha-textfield {
                height: 40px;
              }
              :host {
                --mdc-text-field-fill-color: transparent;
              }
      - entity: input_text.test_text
        name: compact + transparent + border + no ripple
        card_mod:
          style:
            ha-textfield $: |
              .mdc-text-field {
                height: 40px !important;
                border: 1px solid rgba(127,127,127,0.5);
                border-radius: 8px !important;

              }
              .mdc-text-field__input {
                align-self: end;
              }
              .mdc-line-ripple::after,
              .mdc-line-ripple::before {
                border-bottom-style: none !important;
              }
              .mdc-text-field__ripple {
                display: none !important;
              }
            .: |
              ha-textfield {
                height: 40px;
              }
              :host {
                --mdc-text-field-fill-color: transparent;
              }
      - entity: input_text.test_text
        name: compact + transparent + border on hover + no ripple
        card_mod:
          style:
            ha-textfield $: |
              .mdc-text-field {
                height: 40px !important;
                border-radius: 8px !important;
                border: 1px solid transparent;
              }
              .mdc-text-field:hover {
                border: 1px solid rgba(127,127,127,0.5);
              }
              .mdc-text-field__input {
                align-self: end;
              }
              .mdc-line-ripple::after,
              .mdc-line-ripple::before {
                border-bottom-style: none !important;
              }
              .mdc-text-field__ripple {
                display: none !important;
              }
            .: |
              ha-textfield {
                height: 40px;
              }
              :host {
                --mdc-text-field-fill-color: transparent;
              }
      - sun.sun
      - type: section
      - sun.sun
      - type: section
        label: '-'
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - type: section
      - sun.sun
  - type: entities
    entities:
      - entity: input_number.test_number_2
        name: default
      - type: section
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - type: section
      - sun.sun
      - type: section
        label: '-'
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - type: section
      - sun.sun

The card has 4 columns:
– 4th - contains “sun” entity rows and used as a “scale”;
– 1st - contains rows for input_number (“box mode”);
– 2nd - contains rows for input_select;
– 3rd - contains rows for input_text.

Note: the card does not contain rows for input_datetime - just because my screen may show 4 columns maximum (3 for helpers, 1 for a “scale”); examples for input_datetime will be considered later.

What we can see here:
1.All rows have same height (except 1st rows in each column which are input_number, input_select & input_text rows with a default height) - since every input_number, input_select & input_text has a customized height (see “Styling a height” topic above).

2.All other input_number, input_select & input_text rows have custom styles as described below.

3.Regarding the right padding for a value:
Chrome:
Only the last row for input_number w/o UoM has a same right padding as a conventional sensor row:

This right offset is used for a “up/down” control:

Unfortunately this looks totally differently on MacOS & iOS - compare it by yourself…

Alternatively - use a style to display a field’s boundaries since the right boundary has the same right padding as a conventional sensor row:

You can use styles Nos 1, 4, 6.

Firefox:

Since the “up/down” control is always displayed - choose any style (Nos 1…8).

4.Regarding the right padding for a UoM, horizontal spacing between a value & UoM:
Chrome:

You can use styles Nos 5…8.

Firefox:

Same recommendation - use styles Nos 5…8 if you don’t hate these wide fields, otherwise try to decrease a field’s width - or do not use Firefox…

---

Custom styles for input_number w/o UoM:
1.Custom height + removed right padding.
2.Same as (1) + transparent (removed underline, transparent background).
3.Same as (2) + default underline.
4.Same as (2) + border.
5.Same as (2) + removed “ripple” effect.
6.Same as (5) + border.
7.Same as (5) + border on hover.
8.Same as (2) + field shifted to right.

Styles for input_number with UoM:
1.Custom height.
2.Same as (1) + transparent (removed underline, transparent background).
3.Same as (1) + removed right padding.
4.Same as (1) + removed paddings for UoM.
5.Same as (4) + removed right padding.
6.Same as (5) + transparent (removed underline, transparent background).
7.Same as (6) + underline.
8.Same as (5) + border + custom paddings for UoM.

Styles for input_select:
1.Custom height, compacted name (label) and value.
2.Same as (1) + transparent (removed underline, transparent background).
3.Same as (2) + default underline.
4.Same as (2) + border.
5.Same as (2) + removed “ripple” effect.
6.Same as (5) + border.
7.Same as (5) + border on hover.

Same for input_text:

Notes:
1.This style is used to wrap long names for input_number rows and may be omitted:

            hui-generic-entity-row $: |
              .info {
                text-overflow: unset !important;
                white-space: unset !important;
              }

2.These test entities are used for this demo:
– input_number.test_number_2 - any helper in a “box” mode;
– input_number.test_value_uom - any helper in a “box” mode with UoM;
– input_select.test_value - any helper;
– input_text.test_text - any helper;
– sensor.processor_use - any sensor (better with UoM) (here I am using one from a “sysmonitor” platform).

---

Chosen styles may be specified in card-mod-theme, check the example below:

  card-mod-row-yaml: |

    hui-generic-entity-row:
      ha-textfield $: |
        .mdc-text-field {
          height: 40px !important;
          border: 1px solid rgba(127,127,127,0.5);
          border-radius: 4px !important;
        }
        .mdc-text-field__input {
          {% if config is defined %}
            {% if config.entity is defined %}
              {% if config.entity.startswith('input_text.') %}
                align-self: end;
              {% endif %}
            {% endif %}
          {% endif %}
        }
        .mdc-line-ripple::after,
        .mdc-line-ripple::before {
          border-bottom-style: none !important;
        }
      ha-select $: |
        .mdc-select__anchor {
          height: 40px !important;
          border: 1px solid rgba(127,127,127,0.5);
          border-radius: 4px !important;
        }
        .mdc-select__selected-text-container {
          align-self: end;
        }
        .mdc-line-ripple::after,
        .mdc-line-ripple::before {
          border-bottom-style: none !important;
        }

    .: |

      ha-select {
        height: 40px;
        --mdc-select-fill-color: transparent;
      }
      ha-textfield {
        height: 40px;
        --text-field-padding: 0px 0px 0px 16px;
        --text-field-suffix-padding-left: 0px;
        --text-field-suffix-padding-right: 8px;
        --mdc-text-field-fill-color: transparent;
      }

(continuation in this post)

[echo_Mark]

Hello, I would appreciate some help please, I’ve tried everything I could think of and can’t get this to work.
I am using Mushroom, specifically the title-card. I would like to decrease the space between cards. Using the inspector, I can see that what’s determining the space is:

--title-padding: var(--mush-title-padding, 24px 12px 16px);

This falls within:

<mushroom-title-card dark-mode="">

And there is the #shadow-toot (open) element above.
How would I go about changing those values?

[Ildar_Gabdullin]

(continuation of this post)

Similarly - input_datetime rows may be added to the test card as a separate column (5 columns does not fit in my screen):

  - type: entities
    entities:
      - entity: input_datetime.test_datetime
        name: default
      - type: section

      - entity: input_datetime.test_datetime
        name: compact
        card_mod:
          style:
            ha-date-input $:
              ha-textfield $: |
                .mdc-text-field {
                  height: 40px !important;
                }
                .mdc-text-field__input {
                  align-self: end;
                }
            .: |
              ha-date-input {
                height: 40px;
              }
            ha-time-input $ ha-base-time-input $:
              ha-textfield:
                $: |
                  .mdc-text-field {
                    height: 40px !important;
                  }
              ha-select $: |
                .mdc-select__anchor {
                  height: 40px !important;
                }

      - entity: input_datetime.test_datetime
        name: compact + transparent
        card_mod:
          style:
            ha-date-input:
              $:
                ha-textfield $: |
                  .mdc-text-field {
                    height: 40px !important;
                  }
                  .mdc-text-field__input {
                    align-self: end;
                  }
                  .mdc-line-ripple::after,
                  .mdc-line-ripple::before {
                    border-bottom-style: none !important;
                  }
              .: |
                ha-date-input {
                  height: 40px;
                }
            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;
                }
            .: |
              :host {
                --mdc-text-field-fill-color: transparent;
                --mdc-select-fill-color: transparent;
              }

      - entity: input_datetime.test_datetime
        name: compact + transparent + underline
        card_mod:
          style:
            ha-date-input:
              $:
                ha-textfield $: |
                  .mdc-text-field {
                    height: 40px !important;
                  }
                  .mdc-text-field__input {
                    align-self: end;
                  }
              .: |
                ha-date-input {
                  height: 40px;
                }
            ha-time-input $ ha-base-time-input $:
              ha-textfield:
                $: |
                  .mdc-text-field {
                    height: 40px !important;
                  }
              ha-select $: |
                .mdc-select__anchor {
                  height: 40px !important;
                }
            .: |
              :host {
                --mdc-text-field-fill-color: transparent;
                --mdc-select-fill-color: transparent;
              }

      - entity: input_datetime.test_datetime
        name: compact + transparent + border
        card_mod:
          style:
            ha-date-input:
              $:
                ha-textfield $: |
                  .mdc-text-field {
                    height: 40px !important;
                    border: 1px solid rgba(127,127,127,0.5);
                    border-radius: 4px !important;
                  }
                  .mdc-text-field__input {
                    align-self: end;
                  }
                  .mdc-line-ripple::after,
                  .mdc-line-ripple::before {
                    border-bottom-style: none !important;
                  }
              .: |
                ha-date-input {
                  height: 40px;
                }
            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;
              }

      - entity: input_datetime.test_datetime
        name: compact + transparent + no ripple
        card_mod:
          style:
            ha-date-input:
              $:
                ha-textfield $: |
                  .mdc-text-field {
                    height: 40px !important;
                  }
                  .mdc-text-field__input {
                    align-self: end;
                  }
                  .mdc-line-ripple::after,
                  .mdc-line-ripple::before {
                    border-bottom-style: none !important;
                  }
                  .mdc-text-field__ripple {
                    display: none !important;
                  }
              .: |
                ha-date-input {
                  height: 40px;
                }
            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;
                  }
                  .mdc-text-field__ripple {
                    display: none !important;
                  }
              ha-select $: |
                .mdc-select__anchor {
                  height: 40px !important;
                }
                .mdc-line-ripple::after,
                .mdc-line-ripple::before {
                  border-bottom-style: none !important;
                }
                .mdc-select__ripple {
                  display: none !important;
                }
            .: |
              :host {
                --mdc-text-field-fill-color: transparent;
                --mdc-select-fill-color: transparent;
              }

      - entity: input_datetime.test_datetime
        name: compact + transp. + border + no ripple
        card_mod:
          style:
            ha-date-input:
              $:
                ha-textfield $: |
                  .mdc-text-field {
                    height: 40px !important;
                    border: 1px solid rgba(127,127,127,0.5);
                    border-radius: 4px !important;
                  }
                  .mdc-text-field__input {
                    align-self: end;
                  }
                  .mdc-line-ripple::after,
                  .mdc-line-ripple::before {
                    border-bottom-style: none !important;
                  }
                  .mdc-text-field__ripple {
                    display: none !important;
                  }
              .: |
                ha-date-input {
                  height: 40px;
                }
            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;
                    }
                    .mdc-text-field__ripple {
                      display: none !important;
                    }
                ha-select $: |
                  .mdc-select__anchor {
                    height: 40px !important;
                  }
                  .mdc-line-ripple::after,
                  .mdc-line-ripple::before {
                    border-bottom-style: none !important;
                  }
                  .mdc-select__ripple {
                    display: 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;
              }

      - entity: input_datetime.test_datetime
        name: compact + transp. + border on hover + no ripple
        card_mod:
          style:
            ha-date-input:
              $:
                ha-textfield $: |
                  .mdc-text-field {
                    height: 40px !important;
                    border: 1px solid transparent;
                    border-radius: 4px !important;
                  }
                  .mdc-text-field:hover {
                    border: 1px solid rgba(127,127,127,0.5);
                  }
                  .mdc-text-field__input {
                    align-self: end;
                  }
                  .mdc-line-ripple::after,
                  .mdc-line-ripple::before {
                    border-bottom-style: none !important;
                  }
                  .mdc-text-field__ripple {
                    display: none !important;
                  }
              .: |
                ha-date-input {
                  height: 40px;
                }
            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;
                    }
                    .mdc-text-field__ripple {
                      display: none !important;
                    }
                ha-select $: |
                  .mdc-select__anchor {
                    height: 40px !important;
                  }
                  .mdc-line-ripple::after,
                  .mdc-line-ripple::before {
                    border-bottom-style: none !important;
                  }
                  .mdc-select__ripple {
                    display: none !important;
                  }
              .: |
                ha-time-input {
                  height: 38px;
                  border: 1px solid transparent;
                  border-radius: 4px !important;
                }
                ha-time-input:hover {
                  border: 1px solid rgba(127,127,127,0.5);
                }
            .: |
              :host {
                --mdc-text-field-fill-color: transparent;
                --mdc-select-fill-color: transparent;
              }

      - sun.sun
      - type: section

Styles for input_datetime rows:
1.Custom height, compacted name (label) and value.
2.Same as (1) + transparent (removed underline, transparent background).
3.Same as (2) + default underline.
4.Same as (2) + border.
5.Same as (2) + removed “ripple” effect.
6.Same as (5) + border.
7.Same as (5) + border on hover.

Notes:
1.For this demo you need any input_datetime helper for “datetime”.
2.Possible styles for input_datetime are provided here - part 1, part 2.
3.This demo does not contain examples for “time” & “date” helpers.
4.Results for “date” & “time” will be similar; the only exception - do not add a “align-self: end;” style since it is supposed to be used for “datetime” only.

---

Chosen styles may be specified in card-mod-theme, check the example below (note - there is a conditional " align-self: end" style):

  card-mod-row-yaml: |

    hui-generic-entity-row:
      ha-date-input $:
        ha-textfield $: |
          .mdc-text-field {
            height: 40px !important;
            border: 1px solid rgba(127,127,127,0.5);
            border-radius: 4px !important;
          }
          .mdc-text-field__input {
            {% if config is defined %}
              {% if config.entity is defined %}
                {% if state_attr(config.entity,'has_time') %}
                  align-self: end;
                {% endif %}
              {% endif %}
            {% endif %}
          }
          .mdc-line-ripple::after,
          .mdc-line-ripple::before {
            border-bottom-style: none !important;
          }
        .: |
          ha-textfield {
            display: flex;
          }
      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-date-input {
        height: 40px;
        --mdc-text-field-fill-color: transparent;
        --mdc-select-fill-color: transparent;
        flex-grow: 10;
      }
      ha-time-input {
        height: 38px;
        border: 1px solid rgba(127,127,127,0.5);
        border-radius: 4px !important;
        --mdc-text-field-fill-color: transparent;
        --mdc-select-fill-color: transparent;
      }

Result with this theme (combined with a similar theme for input_number, input_select, input_text):

[ThomasBl (Thomas Blankschein)]

Hello, thanks for this powerful tool.
Unfortunately, for me card-mod is a little bit unreliable. I use two Raspi 3B+ with displays for my smart home. The lovelace ui is displayed with chromium. The card-mod modifications are not always shown. I can reproduce this with my desktop computer using chrome. If I reload the page with F5, every now and then the mod is not applied. I added an example here.
The date and time string should be showed with bold font. As you can see, in the working case card-mod is part of the source code. After pressing F5 some times, the font is normal and the card-mod has disappeared from the source code.
What can I do?

[Ildar_Gabdullin]

Post a code for the mod which is unstable.

[Ildar_Gabdullin]

Styling an "input_datetime" row (part 1) (part 2 is here)

Notes:
1.There are 3 types of input_datetime entity:
– date & time;
– date;
– time.
This tutorial contains examples for each type.
2.A user may use either “12H (AM/PM)” or “24H” time format. Both cases are considered.
3.Screenshots are made in Chrome.

---

Colored name (time, date):
Two methods are available:
– using a short “:host” navigation;
– using a detailed DOM navigation.

Note: these styles do not affect on “secondary-info”.

code

      - type: entities
        entities:
          - entity: input_datetime.test_time
            name: method 1
            card_mod: &ref_host
              style: |
                :host {
                  color: red;
                }
          - entity: input_datetime.test_date
            name: method 1
            card_mod: *ref_host
          - entity: input_datetime.test_date
            name: method 1
            secondary_info: last-changed
            card_mod: *ref_host
          - type: section
          - entity: input_datetime.test_time
            name: method 2
            card_mod: &ref_dom
              style:
                hui-generic-entity-row $: |
                  .info {
                    color: red;
                  }
          - entity: input_datetime.test_date
            name: method 2
            card_mod: *ref_dom
          - entity: input_datetime.test_date
            name: method 2
            secondary_info: last-changed
            card_mod: *ref_dom
          - type: section
          - entity: input_datetime.test_time
            name: default
          - entity: input_datetime.test_date
            name: default

How to style several rows:

Note that a common style may be overwritten for some particular entity.

code

      - type: entities
        card_mod:
          style:
            .card-content:
              div:
                hui-input-datetime-entity-row $ hui-generic-entity-row $: |
                  .info {
                    color: orange;
                  }
        entities:
          - entity: input_datetime.test_time
            name: Can't overwrite
            style: &ref_cannot_be_overwritten|
              :host {
                color: red !important;
              }
          - entity: input_datetime.test_time
            name: Overwritten style
            card_mod: &ref_overwritten
              style:
                hui-generic-entity-row $: |
                  .info {
                    color: red !important;
                  }
          - entity: input_datetime.test_time
            name: common style
          - entity: input_datetime.test_time
            name: common style
          - type: section
          - entity: input_datetime.test_date
            name: Can't overwrite
            style: *ref_cannot_be_overwritten
          - entity: input_datetime.test_date
            name: Overwritten style
            card_mod: *ref_overwritten
          - entity: input_datetime.test_date
            name: common style
          - entity: input_datetime.test_date
            name: common style

Colored name (datetime):
Two methods are available:
– using a CSS property with a detailed DOM navigation;
– using a CSS variable.

Notes:
1.The 1st method - allows to change a color permanently (whether the input field is selected or not).
2.The 2nd method - the name’s color changes if an input field is selected (from “--mdc-text-field-label-ink-color” to “--mdc-theme-primary”).
3.A popup window to select a date is not shown on a video.

code

      - type: entities
        entities:
          - entity: input_datetime.test_datetime
            name: Colored name (method 1)
            card_mod:
              style:
                hui-generic-entity-row ha-date-input $:
                  ha-textfield $: |
                    span#label {
                      color: red;
                    }
          - entity: input_datetime.test_datetime
            name: Colored name (method 2)
            card_mod:
              style:
                hui-generic-entity-row ha-date-input $:
                  ha-textfield $: |
                    span#label {
                      --mdc-text-field-label-ink-color: magenta;
                      --mdc-theme-primary: orange;
                    }
          - entity: input_datetime.test_datetime
            name: default

How to style several rows:

Note that a common style may be overwritten for some particular entity.

code

      - type: entities
        card_mod:
          style:
            .card-content:
              div:
                hui-input-datetime-entity-row $ hui-generic-entity-row ha-date-input $:
                  ha-textfield $: |
                    span#label {
                      --mdc-text-field-label-ink-color: magenta;
                      --mdc-theme-primary: orange;
                    }
        entities:
          - entity: input_datetime.test_datetime
            name: Cannot be overwritten
            card_mod:
              style: |
                :host {
                  --mdc-text-field-label-ink-color: cyan;
                  --mdc-theme-primary: green;
                }
          - entity: input_datetime.test_datetime
            name: Overwritten style
            card_mod:
              style:
                hui-generic-entity-row ha-date-input $:
                  ha-textfield $: |
                    span#label {
                      color: red;
                    }
          - entity: input_datetime.test_datetime
            name: Colored name (common)

Colored secondary_info (time, date):

code

      - type: entities
        entities:
          - entity: input_datetime.test_time
            name: Colored secondary_info
            secondary_info: last-changed
            card_mod: &ref_colored
              style:
                hui-generic-entity-row $: |
                  .info .secondary ha-relative-time {
                    color: orange !important;
                  }
          - entity: input_datetime.test_time
            name: Different colors
            secondary_info: last-changed
            card_mod: &ref_different
              style:
                hui-generic-entity-row $: |
                  .info .secondary ha-relative-time {
                    color: orange !important;
                  }
                  .info {
                    color: red;
                  }
          - entity: input_datetime.test_time
            secondary_info: last-changed
            name: default
          - entity: input_datetime.test_time
            name: default
          - type: section
          - entity: input_datetime.test_date
            name: Colored secondary_info
            secondary_info: last-changed
            card_mod: *ref_colored
          - entity: input_datetime.test_date
            name: Different colors
            secondary_info: last-changed
            card_mod: *ref_different
          - entity: input_datetime.test_date
            secondary_info: last-changed
            name: default
          - entity: input_datetime.test_date
            name: default

How to style several rows:

Note that a common style may be overwritten for some particular entity.

code

      - type: entities
        card_mod:
          style:
            .card-content:
              div:
                hui-input-datetime-entity-row $ hui-generic-entity-row $: |
                  .info .secondary ha-relative-time {
                    color: cyan !important;
                  }
        entities:
          - entity: input_datetime.test_time
            secondary_info: last-changed
            name: common style
          - entity: input_datetime.test_time
            name: overwritten style
            secondary_info: last-changed
            card_mod: &ref_overwritten
              style:
                hui-generic-entity-row $: |
                  .info .secondary ha-relative-time {
                    color: orange !important;
                  }
          - entity: input_datetime.test_time
            secondary_info: last-changed
            name: common style
          - entity: input_datetime.test_time
            name: default
          - type: section
          - entity: input_datetime.test_date
            secondary_info: last-changed
            name: common style
          - entity: input_datetime.test_date
            name: overwritten style
            secondary_info: last-changed
            card_mod: *ref_overwritten
          - entity: input_datetime.test_date
            secondary_info: last-changed
            name: common style
          - entity: input_datetime.test_date
            name: default

Colored main icon:
Two methods are available:
– using a CSS variable;
– using a CSS property with a detailed DOM navigation.

code

      - type: entities
        entities:
          - entity: input_datetime.test_time
            name: method 1
            card_mod: &ref_colored_1
              style: |
                :host {
                  --paper-item-icon-color: red;
                }
          - entity: input_datetime.test_time
            name: method 2
            card_mod: &ref_colored_2
              style:
                hui-generic-entity-row $: |
                  state-badge {
                    color: red;
                  }      
          - entity: input_datetime.test_time
            name: default
          - type: section
          - entity: input_datetime.test_datetime
            name: method 1
            card_mod: *ref_colored_1
          - entity: input_datetime.test_datetime
            name: method 2
            card_mod: *ref_colored_2
          - entity: input_datetime.test_datetime
            name: default
          - type: section
          - entity: input_datetime.test_date
            name: method 1
            card_mod: *ref_colored_1
          - entity: input_datetime.test_date
            name: method 2
            card_mod: *ref_colored_2
          - entity: input_datetime.test_date
            name: default

How to style several rows:

Note that a common style may be overwritten for some particular entity.

code

      - type: entities
        card_mod:
          style: |
            ha-card {
              --paper-item-icon-color: cyan;
            }
        entities:
          - entity: input_datetime.test_time
            name: overwritten style
            card_mod: &ref_overwritten
              style: |
                :host {
                  --paper-item-icon-color: red;
                }
          - &ref_row_time
            entity: input_datetime.test_time
            name: common style
          - *ref_row_time
          - type: section
          - entity: input_datetime.test_datetime
            name: overwritten style
            card_mod: *ref_overwritten
          - &ref_row_datetime
            entity: input_datetime.test_datetime
            name: common style
          - *ref_row_datetime
          - type: section
          - entity: input_datetime.test_date
            name: overwritten style
            card_mod: *ref_overwritten
          - &ref_row_date
            entity: input_datetime.test_date
            name: common style
          - *ref_row_date

Some other styles for the main icon - resized icon, hidden icon:

code

      - type: entities
        entities:
          - entity: input_datetime.test_time
            name: resized icon
            card_mod: &ref_card_mod_resize_host
              style: |
                :host {
                  --mdc-icon-size: 40px;
                }
          - entity: input_datetime.test_time
            name: hidden icon
            card_mod: &ref_card_mod_hide_icon
              style:
                hui-generic-entity-row $: |
                  state-badge {
                    display: none;
                  }
          - type: section
          - entity: input_datetime.test_datetime
            name: resized all icons
            card_mod: *ref_card_mod_resize_host
          - entity: input_datetime.test_datetime
            name: resized main icon
            card_mod: &ref_card_mod_resize_main_icon
              style:
                hui-generic-entity-row $: |
                  state-badge {
                    --mdc-icon-size: 40px;
                  }      
          - entity: input_datetime.test_datetime
            name: hidden main icon
            card_mod: *ref_card_mod_hide_icon
          - type: section
          - entity: input_datetime.test_date
            name: resized all icons
            card_mod: *ref_card_mod_resize_host
          - entity: input_datetime.test_date
            name: resized main icon
            card_mod: *ref_card_mod_resize_main_icon
          - entity: input_datetime.test_date
            name: hidden main icon
            card_mod: *ref_card_mod_hide_icon

Colored value:
Two methods are available:
– using a “:host” navigation;
– using a detailed DOM navigation.

Notes:
1.The 1st method - may be used to define a same color for all “text” fields (date, time) and another color for a “select” field (“AM/PM”).
2.The 2nd method - may be used to define colors individually for all “text” fields (date, time) and another color for a “select” field (“AM/PM”).

code

      - type: entities
        entities:
          - entity: input_datetime.test_time
            name: method 1
            card_mod:
              style: |
                :host {
                  --mdc-text-field-ink-color: red;
                  --mdc-select-ink-color: cyan;
                }
          - entity: input_datetime.test_time
            name: method 2
            card_mod:
              style:
                ha-time-input $ ha-base-time-input $: |
                  ha-textfield:nth-of-type(1) {
                    --mdc-text-field-ink-color: red;
                  }
                  ha-textfield:nth-of-type(2) {
                    --mdc-text-field-ink-color: orange;
                  }
                  ha-select {
                    --mdc-select-ink-color: cyan;
                  }
          - entity: input_datetime.test_time
            name: default
          - type: section
          - entity: input_datetime.test_datetime
            name: method 1
            card_mod:
              style: |
                :host {
                  --mdc-text-field-ink-color: red;
                  --mdc-select-ink-color: cyan;
                }
          - entity: input_datetime.test_datetime
            name: method 2
            card_mod:
              style:
                ha-date-input $: |
                  ha-textfield {
                    --mdc-text-field-ink-color: red;
                  }
                ha-time-input $ ha-base-time-input $: |
                  ha-textfield:nth-of-type(1) {
                    --mdc-text-field-ink-color: red;
                  }
                  ha-textfield:nth-of-type(2) {
                    --mdc-text-field-ink-color: orange;
                  }
                  ha-select {
                    --mdc-select-ink-color: cyan;
                  }
          - entity: input_datetime.test_datetime
            name: default
          - type: section
          - entity: input_datetime.test_date
            name: method 1
            card_mod:
              style: |
                :host {
                  --mdc-text-field-ink-color: red;
                }
          - entity: input_datetime.test_date
            name: method 2
            card_mod:
              style:
                ha-date-input $: |
                  ha-textfield {
                    --mdc-text-field-ink-color: red;
                  }
          - entity: input_datetime.test_date
            name: default

Colored field’s background:

code

      - type: entities
        entities:
          - entity: input_datetime.test_time
            name: colored background
            card_mod:
              style: |
                :host {
                  --mdc-text-field-fill-color: lightgreen;
                  --mdc-select-fill-color: magenta;
                }
          - entity: input_datetime.test_time
            name: default
          - type: section
          - entity: input_datetime.test_datetime
            name: colored background
            card_mod:
              style: |
                :host {
                  --mdc-text-field-fill-color: lightgreen;
                  --mdc-select-fill-color: magenta;
                }
          - entity: input_datetime.test_datetime
            name: colored background
            card_mod:
              style: |
                ha-date-input {
                  --mdc-text-field-fill-color: orange;
                }
                ha-time-input {
                  --mdc-text-field-fill-color: cyan;
                  --mdc-select-fill-color: magenta;
                }
          - entity: input_datetime.test_datetime
            name: default
          - type: section
          - entity: input_datetime.test_date
            name: colored background
            card_mod:
              style: |
                :host {
                  --mdc-text-field-fill-color: lightgreen;
                }
          - entity: input_datetime.test_date
            name: default

Colored underline:
The underline had 3 possible states:
– a default (static) state;
– the input field is hovered by a mouse;
– the input field is selected by a mouse.

There are CSS variables for each state.
In the example below:
– the 1st row is modded by using these CSS variables;
– the 2nd row is modded by changing CSS properties with a detailed DOM navigation;
– the 3rd row has transparent underlines.

code

      - type: entities
        entities:
          - entity: input_datetime.test_time
            name: method 1
            card_mod:
              style: |
                :host {
                  --mdc-text-field-idle-line-color: red;
                  --mdc-text-field-hover-line-color: cyan;
                  --mdc-select-idle-line-color: red;
                  --mdc-select-hover-line-color: cyan;
                  --mdc-theme-primary: magenta;
                }
          - entity: input_datetime.test_time
            name: method 2
            card_mod:
              style:
                ha-time-input $ ha-base-time-input $:
                  ha-textfield:
                    $: &ref_style_underline_time |
                      .mdc-line-ripple::before {
                        border-bottom-color: red !important;
                      }
                      .mdc-line-ripple::after {
                        border-bottom-color: magenta !important;
                      }
                  ha-select $: *ref_style_underline_time
          - entity: input_datetime.test_time
            name: no underline
            card_mod:
              style:
                ha-time-input $ ha-base-time-input $:
                  ha-textfield:
                    $: &ref_style_no_underline_time |
                      .mdc-line-ripple::before,
                      .mdc-line-ripple::after {
                        border-bottom-style: none !important;
                      }
                  ha-select $: *ref_style_no_underline_time
          - entity: input_datetime.test_time
            name: default
          - type: section
          - entity: input_datetime.test_datetime
            name: method 1
            card_mod:
              style: |
                :host {
                  --mdc-text-field-idle-line-color: red;
                  --mdc-text-field-hover-line-color: cyan;
                  --mdc-select-idle-line-color: red;
                  --mdc-select-hover-line-color: cyan;
                  --mdc-theme-primary: magenta;
                }
          - entity: input_datetime.test_datetime
            name: method 2
            card_mod:
              style:
                ha-time-input $ ha-base-time-input $:
                  ha-textfield:
                    $: &ref_style_underline_datetime |
                      .mdc-line-ripple::before {
                        border-bottom-color: red !important;
                      }
                      .mdc-line-ripple::after {
                        border-bottom-color: magenta !important;
                      }
                  ha-select $: *ref_style_underline_datetime
                ha-date-input $ ha-textfield $: *ref_style_underline_datetime
          - entity: input_datetime.test_datetime
            name: no underline
            card_mod:
              style:
                ha-time-input $ ha-base-time-input $:
                  ha-textfield:
                    $: &ref_style_no_underline_datetime |
                      .mdc-line-ripple::before,
                      .mdc-line-ripple::after {
                        border-bottom-style: none !important;
                      }
                  ha-select $: *ref_style_no_underline_datetime
                ha-date-input $ ha-textfield $: *ref_style_no_underline_datetime
          - entity: input_datetime.test_datetime
            name: default
          - type: section
          - entity: input_datetime.test_date
            name: method 1
            card_mod:
              style: |
                :host {
                  --mdc-text-field-idle-line-color: red;
                  --mdc-text-field-hover-line-color: cyan;
                  --mdc-theme-primary: magenta;
                }
          - entity: input_datetime.test_date
            name: method 2
            card_mod:
              style:
                ha-date-input $ ha-textfield $: |
                  .mdc-line-ripple::before {
                    border-bottom-color: red !important;
                  }
                  .mdc-line-ripple::after {
                    border-bottom-color: magenta !important;
                  }
          - entity: input_datetime.test_date
            name: no underline
            card_mod:
              style:
                ha-date-input $ ha-textfield $: |
                  .mdc-line-ripple::before,
                  .mdc-line-ripple::after {
                    border-bottom-style: none !important;
                  }
          - entity: input_datetime.test_date
            name: default

---

More examples here.

[Ildar_Gabdullin]

Styling an "input_datetime" row (part 2) (part 1 is here)

Styling “calendar” icon:

code

      - type: entities
        entities:
          - entity: input_datetime.test_datetime
            name: colored (method 1)
            card_mod: &ref_card_mod_colored_1
              style: |
                ha-date-input {
                  --secondary-text-color: cyan;
                }
          - entity: input_datetime.test_datetime
            name: colored (method 2)
            card_mod: &ref_card_mod_colored_2
              style:
                ha-date-input $: |
                  ha-svg-icon {
                    color: red !important;
                  }
          - entity: input_datetime.test_datetime
            name: resized
            card_mod: &ref_card_mod_resized
              style:
                ha-date-input $: |
                  ha-svg-icon {
                    --mdc-icon-size: 40px;
                  }
          - entity: input_datetime.test_datetime
            name: hidden
            card_mod: &ref_card_mod_hidden
              style:
                ha-date-input $: |
                  ha-svg-icon {
                    display: none;
                  }
          - entity: input_datetime.test_datetime
            name: default
          - type: section
          - entity: input_datetime.test_date
            name: colored (method 1)
            card_mod: *ref_card_mod_colored_1
          - entity: input_datetime.test_date
            name: colored (method 2)
            card_mod: *ref_card_mod_colored_2
          - entity: input_datetime.test_date
            name: resized
            card_mod: *ref_card_mod_resized
          - entity: input_datetime.test_date
            name: hidden
            card_mod: *ref_card_mod_hidden
          - entity: input_datetime.test_date
            name: default

Colored “expand” button:

code

      - type: entities
        entities:
          - entity: input_datetime.test_time
            name: colored button
            card_mod: &ref_card_mod_colored_expand_button
              style:
                ha-time-input $ ha-base-time-input $ ha-select $: |
                  .mdc-select__dropdown-icon {
                    --mdc-select-dropdown-icon-color: cyan;
                    --mdc-theme-primary: magenta;
                  }
          - entity: input_datetime.test_time
            name: default
          - type: section
          - entity: input_datetime.test_datetime
            name: colored button
            card_mod: *ref_card_mod_colored_expand_button
          - entity: input_datetime.test_datetime
            name: default

Alignment of input fields:
Dependingly on a current local settings (“12H AM/PM” or “24H” time format), the input_datetime row is displayed differently.
Two methods may be used - see a difference between them:

code

  - type: entities
    entities:
      - entity: input_datetime.test_datetime
        name: method 1
        card_mod:
          style: |
            ha-date-input {
              margin-left: auto !important;
            }
      - entity: input_datetime.test_datetime
        name: method 2
        card_mod:
          style:
            ha-date-input $: |
              ha-textfield {
                display: flex;
              }
            .: |
              ha-date-input {
                flex-grow: 10;
              }
      - entity: input_datetime.test_datetime
        name: default

Wrapping a long name:

code

  - type: entities
    entities:
      - entity: input_datetime.test_time
        name: &ref_long_name long long long long long long long long long long
        secondary_info: last-changed
        card_mod: &ref_card_mod_wrapping_text
          style: 
            hui-generic-entity-row $: |
              .info {
                text-overflow: unset !important;
                white-space: unset !important;
              }
      - entity: input_datetime.test_time
        name: *ref_long_name
        card_mod: *ref_card_mod_wrapping_text
      - entity: input_datetime.test_time
        secondary_info: last-changed
        name: *ref_long_name
      - entity: input_datetime.test_time
        name: *ref_long_name
      - type: section
      - entity: input_datetime.test_date
        name: *ref_long_name
        secondary_info: last-changed
        card_mod: *ref_card_mod_wrapping_text
      - entity: input_datetime.test_date
        name: *ref_long_name
        card_mod: *ref_card_mod_wrapping_text
      - entity: input_datetime.test_date
        secondary_info: last-changed
        name: *ref_long_name
      - entity: input_datetime.test_date
        name: *ref_long_name

Changing a row’s height (time, date):

code

  - type: entities
    entities:
      - entity: input_datetime.test_time
        name: custom height
        card_mod:
          style:
            ha-time-input $ ha-base-time-input $:
              ha-textfield:
                $: |
                  .mdc-text-field {
                    height: 40px !important;
                  }
              ha-select $: |
                .mdc-select__anchor {
                  height: 40px !important;
                }
      - entity: input_datetime.test_time
        name: default
      - type: section
      - entity: input_datetime.test_date
        name: custom height
        card_mod:
          style:
            ha-date-input $ ha-textfield $: |
              .mdc-text-field {
                height: 40px !important;
              }
      - entity: input_datetime.test_date
        name: default

Making the name hidden or more compact (datetime):
Since the row has a bigger height than other entity rows, we may want to make a row more compact.
First, we need to customize the row’s height.
Next, there are 2 options for a name & a value:
– remove the name;
– place the name and the value closer to each other.

code

  - type: entities
    entities:
      - entity: input_datetime.test_datetime
        name: custom height
        card_mod:
          style:
            ha-date-input $:
              ha-textfield $: |
                .mdc-text-field {
                  height: 40px !important;
                }
                .mdc-text-field__input {
                  align-self: center;
                }
                span#label {
                  display: none;
                }
            .: |
              ha-date-input {
                height: 40px;
              }
            ha-time-input $ ha-base-time-input $:
              ha-textfield:
                $: |
                  .mdc-text-field {
                    height: 40px !important;
                  }
              ha-select:
                $: |
                  .mdc-select__anchor {
                    height: 40px !important;
                  }
      - entity: input_datetime.test_datetime
        name: custom
        card_mod:
          style:
            ha-date-input $:
              ha-textfield $: |
                .mdc-text-field {
                  height: 40px !important;
                }
                .mdc-text-field__input {
                  align-self: end;
                }
            .: |
              ha-date-input {
                height: 40px;
              }
            ha-time-input $ ha-base-time-input $:
              ha-textfield:
                $: |
                  .mdc-text-field {
                    height: 40px !important;
                  }
              ha-select:
                $: |
                  .mdc-select__anchor {
                    height: 40px !important;
                  }
      - entity: input_datetime.test_datetime
        name: default

How to disable a row:
Two methods are available:
– the row is displayed as disabled;
– the row only has a read-only input field.

code

  - type: entities
    entities:
      - entity: input_boolean.test_boolean
        name: Lock input_datetime
      - entity: input_datetime.test_time
        name: disabled
        tap_action:
          action: none
        card_mod:
          style: |
            :host {
              {% if is_state('input_boolean.test_boolean','on') %}
                --mdc-text-field-ink-color: var(--disabled-text-color);
                color: var(--disabled-text-color);
                --mdc-text-field-idle-line-color: var(--disabled-text-color);
                --mdc-select-ink-color: var(--disabled-text-color);
                --mdc-select-idle-line-color: var(--disabled-text-color);
                --mdc-select-dropdown-icon-color: var(--disabled-text-color);
                --paper-item-icon-color: var(--disabled-text-color);
                pointer-events: none;
              {% endif %}
            }
      - entity: input_datetime.test_time
        name: read-only
        tap_action:
          action: none
        card_mod:
          style: |
            :host {
              {% if is_state('input_boolean.test_boolean','on') %}
                pointer-events: none;
              {% endif %}
            }
      - type: section
      - entity: input_datetime.test_datetime
        name: disabled
        tap_action:
          action: none
        card_mod:
          style: |
            :host {
              {% if is_state('input_boolean.test_boolean','on') %}
                --mdc-text-field-ink-color: var(--disabled-text-color);
                --mdc-text-field-label-ink-color: var(--disabled-text-color);
                --mdc-text-field-idle-line-color: var(--disabled-text-color);
                --mdc-select-ink-color: var(--disabled-text-color);
                --mdc-select-idle-line-color: var(--disabled-text-color);
                --mdc-select-dropdown-icon-color: var(--disabled-text-color);
                --paper-item-icon-color: var(--disabled-text-color);
                --secondary-text-color: var(--disabled-text-color);
                pointer-events: none;
              {% endif %}
            }
      - entity: input_datetime.test_datetime
        name: read-only
        tap_action:
          action: none
        card_mod:
          style: |
            :host {
              {% if is_state('input_boolean.test_boolean','on') %}
                pointer-events: none;
              {% endif %}
            }
      - type: section
      - entity: input_datetime.test_date
        name: disabled
        tap_action:
          action: none
        card_mod:
          style: |
            :host {
              {% if is_state('input_boolean.test_boolean','on') %}
                --mdc-text-field-ink-color: var(--disabled-text-color);
                --mdc-text-field-label-ink-color: var(--disabled-text-color);
                --mdc-text-field-idle-line-color: var(--disabled-text-color);
                --paper-item-icon-color: var(--disabled-text-color);
                --secondary-text-color: var(--disabled-text-color);
                pointer-events: none;
              {% endif %}
            }
      - entity: input_datetime.test_date
        name: read-only
        tap_action:
          action: none
        card_mod:
          style: |
            :host {
              {% if is_state('input_boolean.test_boolean','on') %}
                pointer-events: none;
              {% endif %}
            }

---

Short list of CSS variables available for “textfield” & “select” controls:

---

More examples here.

[ThomasBl (Thomas Blankschein)]

Both of my mods are affected:

type: entity
entity: sensor.date_time
name: Datum & Uhrzeit
icon: calendar-clock
card_mod: null
style: |
  ha-card {
    font-weight: bold;
  }

type: entity
entity: sensor.abfallnaechster
icon: mdi:trash-can
name: Nächste Abfuhrtermin
card_mod: null
style: |
  ha-card {
  {% if is_state(config.entity, "Morgen") %}
    color: orange;
  {% elif is_state(config.entity, "Heute") %}
    color: red;
    font-weight: bold;
    --mdc-icon-size: 50px;
  {% endif %}
  }
  .header .icon {
  {% if is_state(config.entity, "Morgen") %}
    color: orange;
  {% elif is_state(config.entity, "Heute") %}
    color: red;
  {% endif %}
  }

[arganto]

@ThomasBl

card_mod: null
style: |

First of all have a look here

card_mod: null
style: |

and do it as expected:

card_mod:
  style: |

[ThomasBl (Thomas Blankschein)]

Tried it in the code editor, but “null” is automatically added after saving:

[Ildar_Gabdullin]

@ThomasBl

but “null” is automatically added after saving:

Because “style” keyword is wrongly indented.

@ThomasBl

  ha-card {
    ...
    font-weight: bold;

I suggest you to specify this style to a particular element instead of the whole card (anyway currently it does not affect all elements, only some of them).

Check 1st post → link at the bottom → styles for Entity card.

BTW, your code works stable in my setup:
– replaced your sensor with some input_boolean;
– used a “if … else …” construction instead of your “if … elif …”.
Just in case - clean a browser’s cache, check if the latest card-mod is installed.

[Ildar_Gabdullin]

@parautenbach

@parautenbach

I don’t fancy the date and time picker changes from a few releases ago: They’re too high for my taste, so I’m trying to change it. I don’t know if there are theme variables for this (I failed to find any), so I’ve been experimenting with card mod.

If you are still interested - styling height for MDC input helpers.

[parautenbach (Pieter Rautenbach)]

You rock, @Ildar_Gabdullin – thanks!

I went with your compact version for input_datetime.

I removed the align-self: end bit, because it seems to do something weird in my case, because the vertical alignment ends up misaligned. Doesn’t matter though, because it looks fine.

Here are the details nonetheless.

Without:

With:

My current code:

     - type: entities
       title: Schedule
       show_header_toggle: false
       entities:
         - entity: input_datetime.wake_up_time
           name: Wake-up Time
           card_mod:
             style:
               ha-date-input $:
                 ha-textfield $: |
                   .mdc-text-field {
                     height: 40px !important;
                   }
               .: |
                 ha-date-input {
                   height: 40px;
                 }
               ha-time-input $ ha-base-time-input $:
                 ha-textfield:
                   $: |
                     .mdc-text-field {
                       height: 40px !important;
                     }
                 ha-select $: |
                   .mdc-select__anchor {
                     height: 40px !important;
                   }
         - entity: input_datetime.vacation_start
           name: Vacation Start
           card_mod:
             style:
               ha-date-input $:
                 ha-textfield $: |
                   .mdc-text-field {
                     height: 40px !important;
                   }
               .: |
                 ha-date-input {
                   height: 40px;
                 }
               ha-time-input $ ha-base-time-input $:
                 ha-textfield:
                   $: |
                     .mdc-text-field {
                       height: 40px !important;
                     }
                 ha-select $: |
                   .mdc-select__anchor {
                     height: 40px !important;
                   }
         - entity: input_datetime.vacation_end
           name: Vacation End
           card_mod:
             style:
               ha-date-input $:
                 ha-textfield $: |
                   .mdc-text-field {
                     height: 40px !important;
                   }
               .: |
                 ha-date-input {
                   height: 40px;
                 }
               ha-time-input $ ha-base-time-input $:
                 ha-textfield:
                   $: |
                     .mdc-text-field {
                       height: 40px !important;
                     }
                 ha-select $: |
                   .mdc-select__anchor {
                     height: 40px !important;
                   }
         - entity: binary_sensor.workday
           name: Workday Today
         - entity: binary_sensor.workday_tomorrow
           name: Workday Tomorrow

[Ildar_Gabdullin]

@parautenbach

I removed the align-self: end

There are 3 types of “input_datetime” - “datetime”, “date” & “time”.
That code is supposed to be used ONLY with “datetime” type - check this theme:

          .mdc-text-field__input {
            {% if config is defined %}
              {% if config.entity is defined %}
                {% if state_attr(config.entity,'has_time') %}
                  align-self: end;
                {% endif %}
              {% endif %}
            {% endif %}
          }

This post is dedicated to a “same height” issue only, it has a code for all three types - “date”, “time” & “datetime”. (initially I was going to describe everything in this post only but failed due to “not more than XXXX chars” limitation and then had to split it to 3 posts)
This post is dedicated to different modded looks for “datetime” type only; for “date” & “time” it will work with ONLY one exception for “align-self: end”.
Full list of styles - part 1, part 2.

[parautenbach (Pieter Rautenbach)]

Thanks, I’ll have another good read through it all again tomorrow with a clear head. I see what you mean though.

[ThomasBl (Thomas Blankschein)]

Thanks for your help.
Changing the code (using .info .value instead of ha-card) didn’t improve the F5-reliability.

But I have figured out something. The card-mod documentation recommends to add the following snippet in configuration.yaml to improve the performance:

frontend:
  extra_module_url:
    - /config/www/community/lovelace-card-mod/card-mod.js

If I remove this code, everything works reliable, even on every F5 refresh.

[Ildar_Gabdullin]

@ThomasBl

The card-mod documentation recommends to add the following snippet in configuration.yaml to improve the performance:

I myself not sure about this “extra_module_url”; check this issue.
Also, you should probably create a new issue for your problem

[arganto]

@ThomasBl

- /config/www/community/lovelace-card-mod/card-mod.js

And is this really your local path, where HA is able to find the js-file?

[Mandoliinimies]

Hi,

I was wondering if it is possible to change the background of this page https://omatnaytot.hsl.fi/view?cont=I+s7VFLd12Bg6yHSQkWwAQ== using card-mod and webpage-card?

[Ildar_Gabdullin]

At least you should start with trying it by yourself and then post a code for your attempt.
IMHO this should NOT be possible with iframe due to security reasons.