search

KTibow / lovelace-light-soft-ui-theme

🎨 Home Assistant soft UI light theme, with help from @JuanMTech, @thomasloven, and @N-L1.
MIT License
59 stars 6 forks source link

30px margin on individual element can mess with layout #5

Closed indykoning closed 4 years ago

indykoning commented 4 years ago

First of all thank you so much for baking the soft-ui into a theme, when i first saw it come out i wanted it but it was too much work editing every card, and wouldn't work for me having a random theme every time it turns day or night. Seeing card-mod brought theme support i got excited and lo and behold!

Placing a 30px margin around every card in home assistant causes an issue in my setup though: page_1 The buttons for the entity cards in the horizontal rows are a bit messed up, but can be fixed by overwriting the margins page_2 and the spacing between all cards seem a bit odd.

If i remove the 30px margin on every individual card and rather add

    #columns > .column {
      margin: 0 30px;
    }

to place the margin on the columns, i get this which looks a lot prettier and i hope gets the same effect.

page_1_fix page_2_fix the type-entities card seems a little off in the 2nd picture though.

Maybe you could have a look if it is possible to apply the 30px styling this way. if not that's fine as well, either way great theme!

issue-label-bot[bot] commented 4 years ago

Issue-Label Bot is automatically applying the label bug to this issue, with a confidence of 0.82. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

KTibow commented 4 years ago

Hmm. What about 10px 0 per card and 0 20px per column? That way it would still work well.

KTibow commented 4 years ago

By the way, I think this would be a slightly better custom header config:

custom_header:
  active_tab_color: var(--sidebar-selected-icon-color)
  background: var(--primary-background-color)
  compact_mode: true
  elements_color: var(--primary-text-color)
  notification_dot_color: var(--sidebar-selected-icon-color)
  tab_indicator_color: var(--sidebar-selected-icon-color)
KTibow commented 4 years ago

Fixed. Wait for a bit or select "Update information" (frontend > light soft ui theme > more).