Old Shopping List Card Design

Share your Projects! Dashboards & Frontend
1

While I appreciate the design changes made in 2022.3 to have more coherent design, i do not like the changes for the shopping list card. The fields take up more space and the background color distracts from the contents.

With the help of the card-mod I was able to restore the old design as much as possible:

type: shopping-list
style:
  ha-textfield:
    $: |
      .mdc-text-field {
        --mdc-text-field-fill-color: var(--card-background-color);
        height: auto !important;
        --text-field-padding: 5px 0px;
      }

image
image824×381 3.5 KB

5 Likes
2

Thanks for this - I’m currently struggling with how to apply my custom font sizes to the new card - any chance you know how ?

3

It works! but now the text is black, on black background. Any ideas to change light gray?

4

hi if you have not solved for the text, i did so

      - type: shopping-list
        style:
          ha-textfield:
            $: |
              .mdc-text-field {
                --mdc-text-field-fill-color: var(--card-background-color);
                height: auto !important;
                --text-field-padding: 5px 0px;
                }
              input {
                color: beige !important;
              }
5

I also don’t like how the look & feel changed in this release. It’s especially bad for the shopping list. I posted a WTH post about it. Please vote: WTH input fields got so big & clunky this year?

6

@bernikr , thanks for you effort! I’m using your configuration for a small shopping list card that I would like to use on my dashboard. Is it possible to make the list more compact? There’s so much space between the items on the list…

Schermafbeelding 2023-10-02 om 19.32.01

          - type: shopping-list
            style:
              ha-textfield:
                $: |
                  .mdc-text-field__input {
                    color: black !important;
                  }
                  .mdc-text-field {
                    --mdc-text-field-fill-color: white;
                    height: auto !important;
                    --text-field-padding: 1px 0px;
                  }
              .: |
                  ha-card {
                    background: white;
                    box-shadow: none;
                    height: 232px !important;
                    max-height: 234px; /* Set a maximum height for the card */
                    overflow-y: auto; /* Enable vertical scrolling if content exceeds max height */
                  } 
                  :host {
                    --mdc-text-field-idle-line-color: black;
                    --mdc-text-field-hover-line-color: cyan;
                    --mdc-theme-primary: black;
                  }
1 Like