Card-mod + lovalace-more-info-card CSS styling

Configuration Frontend
1

Hello,

since the standard tile card doesn’t support vertical slider feature for covers I try to use lovelace-more-info-card CSS styling it with Card-mod especially hiding elements of the more-info dialog that are not needed.

So far I was only able to hide the state-card-content element by using:

        - type: horizontal-stack
          cards:
            - type: custom:more-info-card
              entity: cover.reluxa1
              card_mod:
                style: |
                  .type-custom-more-info-card {
                    state-card-content { display: none;}
                  }

            - type: custom:more-info-card
              entity: cover.reluxa2
            - type: custom:more-info-card
              entity: cover.reluxa3

reluxa
reluxa595×776 25.8 KB

Unfortunately the rest of the unneeded elements (ha-more-info-state-header, ha-icon-button-group) simply do not get hidden with similar approach. I’m not sure if it’s because of the #shadow-root(s) with no part attribute defined on the parent level (to be able to use in CSS the ::part solution) or because of something else.

Does anyone have a working solution for this or any hint on what am I doing wrong?

Thanks.