💡 UI eXtension - Add CSS styles to (almost) any part of the Home Assistant UI

[Mariusthvdb (Marius)]

ok so I may have found it.

its messy complex, as the height is set on more than 1 element, and the grid is in play too.
as always, the resource for these cards needs to be checked, but in this case also for the dashboard techniques of grid_options and layout_options

while at it, I figured les also compare with a type: heading card, for which I also have a class in UIX theming, all with the same styling as used throughout my dashboards. meaning, the only challenge is finding the right element to target, the rest is just c&p of properties…

      :host(.class-heading) .container {
        background: var(--header-background);
        --ha-heading-card-title-color: var(--text-color-off);
        --ha-heading-card-title-font-size: 20px;
        --ha-heading-card-title-font-weight: 400;
        height: var(--header-height);
        padding: 0 12px;
        box-shadow: var(--ha-card-box-shadow);
      }

and config for the card in the view:

      - type: heading
        uix:
          class: class-heading
          style: |
            .content {
              --mdc-icon-size: 22px !important;
            }
        heading: Printers
        heading_style: title
        icon: mdi:printer
        tap_action:
          action: navigate
          navigation_path: /ui-sub-views/printers

its pixel perfect, and has the advantage of the moving arrow when hovering, indicating the card takes you somewhere (now why doesnt the shortcut card do that… its sole purpose…)

back to the shortcut card, we have to set --row-height, and make grid follow that.

making the class to

      :host(.class-shortcut-style-as-header) ha-card {
        --tile-color: var(--text-color-off);
        --ha-tile-info-primary-color: var(--text-color-off);
        --ha-tile-info-primary-font-size: 20px;
        --ha-tile-info-primary-font-weight: 400;
        background: var(--header-background);
        box-shadow: var(--box-shadow) !important;
        --row-height: var(--header-height);
      }

and only set the card to follow that in the grid options

      - type: shortcut
        uix:
          class: class-shortcut-style-as-header
        tap_action:
          action: navigate
          navigation_path: /ui-sub-views/printers
        label: Printers >
        icon: mdi:printer
#         layout_options:
#           grid_columns: full
        grid_options:
          rows: auto #required for setting height to --row-height
          columns: full #required, layout_options non functional if using grid_options 

result:
top is the adjusted shortcut card (I always have bigger icons in my card-header/ heading cards)
bottom the shortcut card now being the exact same size.
(note the > is a character here, and not an icon like in the heading card. Also I need to adjust the padding a bit)

explanation for the section div by @dcapslock :

the section div any card is in will have height also based on --row-height (in section context so card UIX can’t manage) UNLESS you set card height to auto (this controls the section div the card is in getting class fit-rows ).

which makes sense, just not something I am used to thinking about when styling…

setting paddings to the icon helps:

      - type: shortcut
        uix:
          class: class-shortcut-style-as-header
          style: |
            ha-tile-icon {
              padding-left: 2px;
              padding-right: 0;
            }

decided to take out that > again, as it just doesn’t cut it. If I want that effect, I suppose I need to add a pseudo element after the label for it…