Fix styles

[AitorDB]

Fix styles to use Home assistant theme where possible and improve how it looks in general. More context: https://www.reddit.com/r/homeassistant/comments/ne2mx4/sun_card_for_home_assistant/gyelt6z

[kongo09]

I've used the following styles to make the look fit better with the overall HA theme and the custom:weather-card which sits right next to it:

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;
    }

results in (including the weather-card):

I also disabled the footer and removed the padding of the graph similar to what the mini-graph-card is doing.

[techathome21]

I've used the following styles to make the look fit better with the overall HA theme and the custom:weather-card which sits right next to it:

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;
    }

results in (including the weather-card):

I also disabled the footer and removed the padding of the graph similar to what the mini-graph-card is doing.

Hi, can you please tell me how do you remove the footer of the sun card?

[kongo09]

how do you remove the footer

Apologies, I must have made a copy-paste error. Here is the complete configuration including footer removal:

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;
    }

[techathome21]

how do you remove the footer

Apologies, I must have made a copy-paste error. Here is the complete configuration including footer removal:

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;
    }

Thank you very much, that's exactly what i wanted. regards