Lovelace Soft UI - Simple and Clean Lovelace Configuration

N-l1 · July 17, 2020, 5:00am

Hi @http_edo13, looks like you missed ha-card. This should work

cards:
  - content: |
      # Weather
    style: 
      .: |
        ha-card {
          --paper-card-background-color: none !important;
          box-shadow: none !important;
        }
      ha-markdown:
      $: |
        h1 {
          font-size: 20px;
          font-weight: bold;
          font-family: Helvetica;
          letter-spacing: '-0.01em';
        }
    type: markdown
  - entity: weather.dark_sky
    style: |
      ha-card {
          background-color: var(--primary-background-color);
          border-radius: 15px;
          margin: 20px;
          box-shadow: 
               {% if is_state('sun.sun', 'above_horizon') %}
                   -8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
               {% else %}
                   -8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
               {% endif %}   
       }
    type: 'custom:simple-weather-card'
type: vertical-stack

http_edo13 · July 17, 2020, 11:50am

N-l1:

cards:
  - content: |
      # Weather
    style: 
      .: |
        ha-card {
          --paper-card-background-color: none !important;
          box-shadow: none !important;
        }
      ha-markdown:
      $: |
        h1 {
          font-size: 20px;
          font-weight: bold;
          font-family: Helvetica;
          letter-spacing: '-0.01em';
        }
    type: markdown
  - entity: weather.dark_sky
    style: |
      ha-card {
          background-color: var(--primary-background-color);
          border-radius: 15px;
          margin: 20px;
          box-shadow: 
               {% if is_state('sun.sun', 'above_horizon') %}
                   -8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
               {% else %}
                   -8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
               {% endif %}   
       }
    type: 'custom:simple-weather-card'
type: vertical-stack

Thank you!

Eldudemeister · July 18, 2020, 8:01pm

Sorry, me again, is there a way to move the smaller button cards onto the next row? At the moment, I have a row of 5 light buttons but I have to scroll across on my phone (iphone 8) to see the final button. Is there a way of moving it onto the row below?
Config is below:

cards:
  - entity: light.cubby_light
    hold_action:
      action: more-info
      haptic: medium
    icon: 'mdi:lamp'
    name: Cubby
    show_icon: true
    show_name: true
    state:
      - styles:
          icon:
            - color: 'var(--paper-item-icon-active-color)  '
        value: 'on'
    style: |
      ha-card {
        margin: 5px;  
        margin-left: 6.5px;
        box-shadow: 
         {% if is_state('sun.sun', 'above_horizon') and is_state('light.cubby_light', 'on') %}
           inset -4px -4px 8px 0 rgba(255,255,255,.5), inset 4px 4px 8px 0 rgba(0,0,0,.03);
         {% elif is_state('sun.sun', 'above_horizon') and is_state('light.cubby_light', 'off') %}                      
           -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
         {% elif is_state('sun.sun', 'below_horizon') and is_state('light.cubby_light', 'on') %}                      
           inset -4px -4px 10px 0 rgba(50, 50, 50,.5), inset 4px 4px 12px 0 rgba(0,0,0,.3); 
         {% elif is_state('sun.sun', 'below_horizon') and is_state('light.cubby_light', 'off') %}   
           -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
         {% endif %}                      
      }
      @media only screen and (max-width: 600px) {
         ha-card {
           margin: 3px; 
           margin-left: 4px;                   
         }
      }
      @media only screen and (min-width: 1200px) {
         ha-card {
           margin: 8px;  
           margin-left: 11px;               
         }
      }
    styles:
      card:
        - width: 80px
        - height: 80px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
    tap_action:
      action: toggle
      haptic: light
    type: 'custom:button-card'
  - entity: group.decklights
    hold_action:
      action: more-info
      haptic: medium
    icon: 'mdi:spotlight'
    name: Deck
    show_icon: true
    show_name: true
    state:
      - styles:
          icon:
            - color: 'var(--paper-item-icon-active-color)  '
        value: 'on'
    style: |
      ha-card {
        margin: 5px;  
        margin-left: 6.5px;
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') and is_state('switch.plug_01_relay_1', 'on') %}
            inset -4px -4px 8px 0 rgba(255,255,255,.5), inset 4px 4px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'above_horizon') and is_state('switch.plug_01_relay_1', 'off') %}                      
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') and is_state('switch.plug_01_relay_1', 'on') %}                      
            inset -4px -4px 10px 0 rgba(50, 50, 50,.5), inset 4px 4px 12px 0 rgba(0,0,0,.3); 
          {% elif is_state('sun.sun', 'below_horizon') and is_state('switch.plug_01_relay_1', 'off') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}                      
      }
      @media only screen and (max-width: 600px) {
         ha-card {
           margin: 3px; 
           margin-left: 4px;                   
         }
      }
      @media only screen and (min-width: 1200px) {
         ha-card {
           margin: 8px;  
           margin-left: 11px;               
         }
      }
    styles:
      card:
        - width: 80px
        - height: 80px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
    tap_action:
      action: toggle
      haptic: light
    type: 'custom:button-card'
  - entity: light.bulb
    hold_action:
      action: more-info
      haptic: medium
    icon: 'mdi:door'
    name: Front Door
    show_icon: true
    show_name: true
    state:
      - styles:
          icon:
            - color: 'var(--paper-item-icon-active-color)  '
        value: 'on'
    style: |
      ha-card {
        margin: 5px;                
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') and is_state('light.bulb', 'on') %}
            inset -4px -4px 8px 0 rgba(255,255,255,.5), inset 4px 4px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'above_horizon') and is_state('light.bulb', 'off') %}                      
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') and is_state('light.bulb', 'on') %}                      
            inset -4px -4px 10px 0 rgba(50, 50, 50,.5), inset 4px 4px 12px 0 rgba(0,0,0,.3); 
          {% elif is_state('sun.sun', 'below_horizon') and is_state('light.bulb', 'off') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}                           
      }
      @media only screen and (max-width: 600px) {
         ha-card {
           margin: 3px; 
           margin-left: 4px;                   
         }
      }
      @media only screen and (min-width: 1200px) {
         ha-card {
           margin: 8px;  
           margin-left: 11px;               
         }
      }
    styles:
      card:
        - width: 80px
        - height: 80px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
    tap_action:
      action: toggle
      haptic: light
    type: 'custom:button-card'
  - entity: light.bedside_light
    hold_action:
      action: more-info
      haptic: medium
    icon: 'mdi:bed-double'
    name: Bedside
    show_icon: true
    show_name: true
    state:
      - styles:
          icon:
            - color: 'var(--paper-item-icon-active-color)  '
        value: 'on'
    style: |
      ha-card {
        margin: 5px;  
        box-shadow: 
          {% if is_state('sun.sun', 'above_horizon') and is_state('light.bedside_light', 'on') %}
            inset -4px -4px 8px 0 rgba(255,255,255,.5), inset 4px 4px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'above_horizon') and is_state('light.bedside_light', 'off') %}                      
            -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
          {% elif is_state('sun.sun', 'below_horizon') and is_state('light.bedside_light', 'on') %}                      
            inset -4px -4px 10px 0 rgba(50, 50, 50,.5), inset 4px 4px 12px 0 rgba(0,0,0,.3); 
          {% elif is_state('sun.sun', 'below_horizon') and is_state('light.bedside_light', 'off') %}   
            -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
          {% endif %}     
      }
      @media only screen and (max-width: 600px) {
         ha-card {
           margin: 3px; 
           margin-left: 4px;                   
         }
      }
      @media only screen and (min-width: 1200px) {
         ha-card {
           margin: 8px;  
           margin-left: 11px;               
         }
      }
    styles:
      card:
        - width: 80px
        - height: 80px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
    tap_action:
      action: toggle
      haptic: light
    type: 'custom:button-card'
  - entity: light.wled
    hold_action:
      action: more-info
      haptic: medium
    icon: 'mdi:bed-single-outline'
    name: Jasper
    show_icon: true
    show_name: true
    state:
      - styles:
          icon:
            - color: 'var(--paper-item-icon-active-color)  '
        value: 'on'
    style: |
      ha-card {
        margin: 5px;  
        margin-left: 6.5px;
        box-shadow: 
         {% if is_state('sun.sun', 'above_horizon') and is_state('light.wled', 'on') %}
           inset -4px -4px 8px 0 rgba(255,255,255,.5), inset 4px 4px 8px 0 rgba(0,0,0,.03);
         {% elif is_state('sun.sun', 'above_horizon') and is_state('light.wled', 'off') %}                      
           -5px -5px 8px 0 rgba(255,255,255,.5),5px 5px 8px 0 rgba(0,0,0,.03);
         {% elif is_state('sun.sun', 'below_horizon') and is_state('light.wled', 'on') %}                      
           inset -4px -4px 10px 0 rgba(50, 50, 50,.5), inset 4px 4px 12px 0 rgba(0,0,0,.3); 
         {% elif is_state('sun.sun', 'below_horizon') and is_state('light.wled', 'off') %}   
           -5px -5px 8px 0 rgba(50, 50, 50,.5),5px 5px 8px 0 rgba(0,0,0,.15);
         {% endif %}                      
      }
      @media only screen and (max-width: 600px) {
         ha-card {
           margin: 3px; 
           margin-left: 4px;                   
         }
      }
      @media only screen and (min-width: 1200px) {
         ha-card {
           margin: 8px;  
           margin-left: 11px;               
         }
      }
    styles:
      card:
        - width: 80px
        - height: 80px
        - border-radius: 15px
        - background-color: var(--primary-background-color)
      icon:
        - color: var(--primary-text-color)
    tap_action:
      action: toggle
      haptic: light
    type: 'custom:button-card'
type: horizontal-stack

N-l1 · July 19, 2020, 7:19pm

Hi @Eldudemeister, no worries, glad to help. If you only access the UI from your phone, you can adjust the size of each button (so more will fit) by changing the width + height or by changing the margin. This, however, will probably mess up the sizing of the card on any other display. A better method would be responsive sizing by adjusting the margin here (shrink it to 2 or 1.5px)

      @media only screen and (max-width: 600px) {
         ha-card {
           margin: 3px; 
           margin-left: 4px;                   
         }
      }

You can find out more about it in a similar issue here, and in other closed issues on GitHub. Let me know if you need more help.

Eldudemeister · July 20, 2020, 9:15pm

Thanks for this, is there a way to move a button onto the next line instead? I’ve tried changing the margin but it doesnt change on my phone…

N-l1 · July 22, 2020, 12:43am

You can always just create another card for the second row. However, if you would like to do it responsively, you would probably need something like state-switch. E.g. display one single row with 5 buttons when the screen size is big; then if the screen size is small, display 2 rows, one with 4 button and another with a single button

Harry-1976 · July 22, 2020, 7:19pm

If you upgraded to 0.113 and have ‘broken’ markdown cards: see release notes -> breaking changes -> frontend: themes

invinciberry · July 23, 2020, 5:46pm

A few questions:

How can and middle align the text on the right of the icons under Home to the icon itself? How can I move them down a bit?
The description “There are currently no lights on” is updated every minute. Is there any way for it to update as I turn on/off a light?
Sensor element’s bottom half is not rounded.

Capture

KTibow · July 24, 2020, 2:26am

As for that:
1.

First way with card-mod: Just change the margin attribute.
- To keep the existing 20px on the left and right, but to change the top margin: 40px 20px (first is top/bottom).
- To control each one: 10px 20px 30px 40px (clockwise starting from top)
Second way with button-card:

show_icon: false
show_name: false
style: |
  ha-card {
    --paper-card-background-color: none !important;
    box-shadow: none !important;
  }
styles:
  card:
    - width: 5px
    - height: 45px
type: 'custom:button-card'
# Modify height as needed

If you’re using a template sensor, then ~~specify entity_id as a string or list of strings.~~ In 0.115, if not auto-detected, check out Heads up! Upcoming breaking change in the Template integration. I don’t know how to do it client-side.
Use mod-card, just add a card: to the top, indent everything using Ctrl/Command + ] except style, and add type: 'custom:mod-card'

invinciberry · July 24, 2020, 1:35pm

Thanks for your reply! I got the first on fixed and working with adjusting the margin attribute. I will try fix the second later but I can’t get the sensor card working.

I managed to warp it into a mod-card and both shadow and margin attribute works but not the rounded corners. Here is my code.

type: 'custom:mod-card'
style: |
  ha-card {
    margin: 10px;
    border-radius: 15px;
    background-color: var(--primary-background-color);
    box-shadow: 
      {% if is_state('sun.sun', 'above_horizon') %}
        -8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
      {% elif is_state('sun.sun', 'below_horizon') %}
        -8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
      {% endif %}                 
  }  
card:
  type: sensor
  entity: sensor.frigate_coral_fps
  graph: line

invinciberry · July 24, 2020, 1:35pm

I replied down below.

KTibow · July 24, 2020, 2:42pm

Based on what you previously posted:

card:
  entity: sensor.frigate_coral_fps
  graph: line
  style: |
    ha-card {
      background-color: var(--primary-background-color);
      border-radius: 15px;
      box-shadow: {% if is_state('sun.sun', 'above_horizon') %}
          -8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
        {% else %}
          -8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
        {% endif %}
    }
  type: sensor
style: |
  ha-card {
    margin: 10px;
  }
type: 'custom:mod-card'

invinciberry · July 24, 2020, 3:28pm

I just tried it, the bottom part of the card is still not rounded.

invinciberry · July 24, 2020, 3:29pm

I just tried it, the bottom part of the card is still not rounded.

Harry-1976 · July 24, 2020, 9:00pm

@invinciberry Could you try this part to look like:


      box-shadow:
        {% if is_state('sun.sun', 'above_horizon') %}
          -8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
        {% else %}
          -8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
        {% endif %}

You could also try mini graph card.

invinciberry · July 25, 2020, 1:48am

It works! Thanks!

KTibow · July 25, 2020, 3:49pm

Self-promotion (for the sake of it): I made some themes based off of JuanMTech’s, but I added soft UI styling.

Features:

Can instantly add soft-ui to an auto-generated dashboard, without needing to edit it (and disable auto-generation).
Works with auto-generated dashboards and handmade ones
Works with badges
Gives cards in dashboards and cards everywhere soft UI
Adds a compact header with no work required

They’re available as default HACS repos. Here’s the links on GitHub:

Harry-1976 · July 26, 2020, 8:29am

@N-l1 I noticed you put your old automations in a singular new one. I tried it but it gives me an error:

Says missed a comma in this line: {% if states('sun.sun') == "above_horizon" %}
I just don’t see the error though. I’m sure you do

NovaG · July 26, 2020, 8:36am

Good work, it certainly adds a bit of flair to cards. I just started making my remote card.

I few more color choices would be nice though.

N-l1 · July 26, 2020, 7:18pm

I’ve updated the automation to use the new choose feature instead of using templates, should work now (if you are on >= 0.113)