ha-card-weather-conditions icon indicating copy to clipboard operation
ha-card-weather-conditions copied to clipboard

Why these big numbers?

Open mfabiani53 opened this issue 4 years ago • 4 comments

How i can lower the size of the numbers about temperature?

Schermata 2020-06-10 alle 20 56 04 Actually i have this style, but only since latest release i get those big numbers.

            style: |
              ha-card {
                font-size: 14px;
                font-family: 'Georgia';
                font-weight: normal;
              }

mfabiani53 avatar Jun 10 '20 18:06 mfabiani53

you need to change the .temp and .tempc css classes. For example:

            style: |
              .temp {
                ....
              }
              .tempc {
                ....
              }

See: https://github.com/r-renato/ha-card-weather-conditions/blob/master/src/ha-style-summary.ts

r-renato avatar Jun 10 '20 19:06 r-renato

Ok, can you give me some hints about how to make that number more visible? I am not so good with css... I also tried your examples, but without changing nothing, my card is always the same... Surely i am wrong in something, but don't know where to check...

mfabiani53 avatar Jun 10 '20 21:06 mfabiani53

You need to adjust the font size (e.g.: 49px -> 39px -> ...)

          style: |
              .temp {
                font-size: calc(49px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
              }
              .tempc {
                ....
              }

r-renato avatar Jun 11 '20 07:06 r-renato

Sorry, but i changed the style in this way:

          - type: custom:ha-card-weather-conditions
            style: |
              ha-card {
                font-size: 14px;
                font-family: 'Georgia';
                font-weight: normal;
              }
              .icon.bigger {
                width: 10em;
                height: 10em;
                margin-top: -4em;
                position: absolute;
                left: 0em;
              } 
              .title {
                position: absolute;
                left: calc(140px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
                top: 0.6em;
                font-weight: 300;
                font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
                color: var(--primary-text-color);
              }
              .moon {
                position: absolute;
                left: calc(115px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
                top: calc(63px - (26 - 14) * ((100vw - 300px) / (1600 - 300)));
                font-weight: 300;
                font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
                color: var(--primary-text-color);
                line-height:20px;
                display: inline-block;
              }
              .temp {
                position: absolute;
                // top: 0.65em;
                font-weight: 300;
                font-size: calc(39px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
                color: var(--primary-text-color);
                right: 1em;
                margin-top: 2px;
              }
              .tempc {
                position: absolute;
                font-weight: 300;
                font-size: calc(12px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
                // font-size: 1.5em;
                vertical-align: super;
                color: var(--primary-text-color);
                right: 1em;
                margin-top: -11px;
                margin-right: 7px;
              } 

But nothing changed i have always the same big number... i tried 39px, 29px, 19px but no way... Maybe it's my fault as i told you about my knowledge in css styiling...

This is what i get when changing font-size to 39 from 49px

Schermata 2020-06-11 alle 11 32 53 Same as before...

mfabiani53 avatar Jun 11 '20 09:06 mfabiani53