Allow to hide each text element

[AitorDB]

Keeping the current visibility as default, we could allow each text element to be hidden.

Context: https://www.reddit.com/r/homeassistant/comments/ne2mx4/sun_card_for_home_assistant/gyeip4x Context: https://www.reddit.com/r/homeassistant/comments/ne2mx4/sun_card_for_home_assistant/gyepgsc

[kongo09]

Trying this out with card_mod gives an even simpler and cleaner result. Looking forward to this.

[sylviepipi]

Hide all text and add a clock. Then my panels looks to same as my iwatch

[MartinHenriksson]

How was this acheived with card_mod? I can't seem to get it to apply.

[kongo09]

Try this:

type: custom:sun-card
language: de
card_mod:
  style: |
    div.sun-card {
      padding: 1.3em 0;
    }
    div.sun-card-header {
      padding: 0 2em;
    }
    .sun-card-text-subtitle {
      font-size: inherit !important;
      font-weight: 300 !important;
    }
    .sun-card-text-time {
      font-weight: bold !important;
    }
    div.sun-card-text-container {
      align-items: inherit;
    }
    div.sun-card-text-container:nth-child(1) {
      text-align: left;
    }
    div.sun-card-text-container:nth-child(2) {
      text-align: right;
    }
    div.sun-card-footer {
      display: none;
    }

[MartinHenriksson]

Thanks for the reply kongo, I did also reach out in the discord for Home Assistant and there was someone whom assisted me there to come to this result:

card_mod:
  style: |
    .sun-card-header span {
     font-size: var(--mdc-typography-body1-font-size) !important;
     padding-bottom: 0px !important;
    }
    .sun-card-text-subtitle {
      color: var(--secondary-text-color) !important;
    }
    .sun-card-footer span {
      font-size: var(--mdc-typography-body1-font-size) !important;
    }
    .sun-card-footer-row {
      padding-top: 0px !important
    }

Again, thanks for taking the time!