🌻 Lovelace UI • Minimalist

[mwolter]

Hello Thomas, great job on the UI. Looking forward to implementing this after the redesign is released.

Question, what’s the recommended approach for multi-function devices? To better follow your design, should the device’s functions be separated on different cards or is all on one card a better approach? Below are a couple of examples.

• Battery-powered temperature and humidity devices are very popular. This would be three items to display and possibly two graphs. To minimize the size of the card, would it be better to have the graphs pop-up when the card is pressed?

• Battery-powered door locks with door open/closed state are also popular. This is also a card with three items. Lock state would be the most important but would be good to have the other two as well.

[schumijo (Jonathan)]

Hello,

I share with you my light popup inspired by this design.
Integration browser_mod and custom_card light-entity-card needed

I just have a small bug with the stick on brightness slider that is not updated when value change. Just close and reopen the popup to update. Seems to be a bug with browser-mod.

To use it, define a tap_action :

tap_action:
    action: fire-dom-event
    browser_mod:
        command: popup
        title: Fermer
        hide_header: true
        card:
        type: custom:button-card
        template: popup_light
        variables:
            entity: "[[[ return variables.entity ]]]"

Popup code :

header_popup:
  template: action_button
  show_name: true
  show_label: true
  styles:
    grid:
      - grid-template-areas: '"i" "n" "l"'
      - grid-template-columns: auto
      - grid-template-rows: min-content min-content min-content
    label:
      - justify-self: center
      - font-weight: bold
      - font-size: 12px
      - filter: opacity(40%)
    card:
      - padding-bottom: 30px

popup_4_items:
  styles:
    grid:
      - grid-template-areas: '"item1" "item2" "item3" "item4"'
      - grid-template-columns: 1fr
      - grid-template-rows: min-content min-content min-content min-content
    card:
      - background: none
      - box-shadow: none
      - padding: 4%

list_2_buttons:
  styles:
    card:
      - box-shadow: none
      - padding: 0px
      - background: none
    grid:
      - grid-template-areas: '"item1 item2"'
      - grid-template-columns: 1fr 1fr
      - grid-template-rows: min-content
      - column-gap: 7px

action_button:
  color: var(--primary-color)
  show_icon: true
  show_name: true
  styles:
    grid:
      - grid-template-areas: '"i" "n"'
      - grid-template-columns: auto
      - grid-template-rows: min-content min-content
    card:
      - background: none
      - box-shadow: none
    icon:
      - color: var(--primary-color)
    img_cell:
      - background-color: var(--card-background-color)
      - border-radius: 50%
      - place-self: center
      - width: 42px
      - height: 42px
      - box-shadow: var(--ha-card-box-shadow)
    name:
      - justify-self: center
      - font-weight: bold
      - font-size: 14px
      - margin-top: 12px

power_button:
  template: action_button
  styles:
    icon:
      - color: var(--card-background-color)
    img_cell:
      - background-color: var(--primary-color)
      - box-shadow: none

back_button:
  template: action_button
  icon: "mdi:arrow-left"
  name: Retour
  styles:
    img_cell:
      - box-shadow: none
  tap_action:
    action: fire-dom-event
    browser_mod:
      command: close_popup
      
popup_light:
  template: popup_4_items
  custom_fields:
    item1:
      card:
        type: custom:button-card
        template: header_popup
        icon: mdi:lightbulb
        name: Lumière
        show_label: none
        styles:
          icon:
            - color: var(--color-theme)
    item2:
      card:
        type: custom:state-switch
        entity: hash
        default: color
        transition: flip
        transition_time: 300
        states:
          brightness:
            type: custom:button-card
            styles:
              grid:
                - grid-template-areas: '"item1"'
                - grid-template-columns: 1fr
                - grid-template-rows: min-content
              card:
                - background: none
                - box-shadow: none
                - padding: 4%
              custom_fields:
                item2:
                  - background-color: blue
                  - border-radius: 12px
                  - position: absolute
                  - left: 64%
                  - top: >
                      [[[
                        var bri = states[variables.entity].attributes.brightness;
                        return Math.round(bri ? (80-(72*bri/256)) : '80') + '%';
                      ]]]
                  - height: 25px
                  - width: 45px
                  - font-size: 11px
                  - line-height: 25px
                  - color: white
            custom_fields:
              item1:
                card:
                  type: "custom:slider-card"
                  entity: "[[[ return variables.entity ]]]"
                  radius: 20px
                  rotate: 270
                  containerHeight: 320px
                  width: 250px
                  height: 100px
                  top: 100px
                  left: 17%
                  thumbHorizontalPadding: 0px
                  thumbWidth: 0px
                  mainSliderColor: rgba(var(--color-theme),0.1)
                  mainSliderColorOff: rgba(var(--color-theme),0.1)
                  secondarySliderColor: var(--color-theme)
                  secondarySliderColorOff: var(--color-theme)
                  card_mod:
                    style: |
                      ha-card {
                        background: none !important;
                        box-shadow: none !important;
                      }
                      .off {
                        border: 1px solid rgba(var(--color-theme),0.3) !important;
                      }
                      .on {
                        border: 1px solid rgba(var(--color-theme),0.3) !important;
                      }
              item2: >
                [[[
                  var bri = states[variables.entity].attributes.brightness;
                  return Math.round(bri ? (bri/256*100) : '0') + '%';
                ]]]
          #####
          color:
            type: custom:light-entity-card
            entity: "[[[ return variables.entity ]]]"
            persist_features: true
            brightness: false
            color_temp: false
            white_value: false
            hide_header: true
            effects_list: false
            card_mod:
              style:
                ".control":
                  $: |
                    #interactionLayer{ z-index: 1; filter: opacity(0.6);}
                    #backgroundLayer{
                      filter: blur(20px);
                    }
                .: |
                  ha-card {
                    background: none !important;
                    box-shadow: none !important;
                    padding: 10px 0 10px 0 !important;
                  }
    item3:
      card:
        type: custom:button-card
        template: list_2_buttons
        styles:
          card:
            - padding-top: 30px
        custom_fields:
          item1:
            card:
              icon: "mdi:lightbulb-on"
              name: Luminosité
              type: "custom:button-card"
              template: action_button
              tap_action:
                action: navigate
                navigation_path: "#brightness"
              state:
                - operator: template
                  value: >
                    [[[ return new URL(window.location.href).hash !== '#color' ]]]
                  styles:
                    icon:
                      - color: "rgba(var(--color-blue),1)"
                    img_cell:
                      - background-color: "rgba(var(--color-blue), 0.2)"
          item2:
            card:
              icon: "mdi:palette"
              name: Couleur
              type: "custom:button-card"
              template: action_button
              tap_action:
                action: navigate
                navigation_path: "#color"
              state:
                - operator: template
                  value: >
                    [[[ return new URL(window.location.href).hash === '#color' ]]]
                  styles:
                    icon:
                      - color: "rgba(var(--color-blue),1)"
                    img_cell:
                      - background-color: "rgba(var(--color-blue), 0.2)"
    item4:
      card:
        type: custom:button-card
        template: list_3_buttons
        styles:
          card:
            - padding-top: 30px
        custom_fields:
          item1:
            card:
              type: "custom:button-card"
              template: back_button
          item2:
            card:
              icon: "mdi:power"
              name: >
                [[[
                  if (states[variables.entity].state == 'on') return 'Allumé'; 
                  else return 'Eteindre'; 
                ]]]
              type: "custom:button-card"
              template: power_button
              entity: "[[[ return variables.entity ]]]"
              tap_action:
                action: toggle

[schumijo (Jonathan)]

And a second “generic” popup (I called it “generic” because it can be easily changed to display only values without graph, more than 2 values, etc… )

Custom_card apexcharts-card needed

To use it, define a tap_action and set variable as your needs :

            tap_action:
              action: fire-dom-event
              browser_mod:
                command: popup
                hide_header: true
                card:
                  type: custom:button-card
                  template: popup_2_entity_graph
                  variables:
                    ulm_icon: "mdi:fire"
                    ulm_title: "Gaz"
                    ulm_label: ""
                    ulm_entity1: "sensor.gazpar_energy_m3"
                    ulm_entity1_name: "Consommation"
                    ulm_entity1_icon: "mdi:gauge"
                    ulm_entity2: "sensor.gazpar_energy_price"
                    ulm_entity2_name: "Prix"
                    ulm_entity2_icon: "mdi:currency-eur"

Popup code:

action_button:
  color: var(--primary-color)
  show_icon: true
  show_name: true
  styles:
    grid:
      - grid-template-areas: '"i" "n"'
      - grid-template-columns: auto
      - grid-template-rows: min-content min-content
    card:
      - background: none
      - box-shadow: none
    icon:
      - color: var(--primary-color)
    img_cell:
      - background-color: var(--card-background-color)
      - border-radius: 50%
      - place-self: center
      - width: 42px
      - height: 42px
      - box-shadow: var(--ha-card-box-shadow)
    name:
      - justify-self: center
      - font-weight: bold
      - font-size: 14px
      - margin-top: 12px
      
back_button:
  template: action_button
  icon: "mdi:arrow-left"
  name: Retour
  styles:
    img_cell:
      - box-shadow: none
  tap_action:
    action: fire-dom-event
    browser_mod:
      command: close_popup

header_popup:
  template: action_button
  show_name: true
  show_label: true
  styles:
    grid:
      - grid-template-areas: '"i" "n" "l"'
      - grid-template-columns: auto
      - grid-template-rows: min-content min-content min-content
    label:
      - justify-self: center
      - font-weight: bold
      - font-size: 12px
      - filter: opacity(40%)
    card:
      - padding-bottom: 30px

list_3_buttons:
  styles:
    card:
      - box-shadow: none
      - padding: 0px
      - background: none
    grid:
      - grid-template-areas: '"item1 item2 item3"'
      - grid-template-columns: 1fr 1fr 1fr
      - grid-template-rows: min-content
      - column-gap: 7px

popup_4_items:
  styles:
    grid:
      - grid-template-areas: '"item1" "item2" "item3" "item4"'
      - grid-template-columns: 1fr
      - grid-template-rows: min-content min-content min-content min-content
    card:
      - background: none
      - box-shadow: none
      - padding: 4%
      
popup_2_entity_graph:
  template: popup_4_items
  custom_fields:
    item1:
      card:
        type: custom:button-card
        template: header_popup
        icon: "[[[ return variables.ulm_icon ]]]"
        name: "[[[ return variables.ulm_title ]]]"
        label: "[[[ return variables.ulm_label ]]]"
        styles:
          icon:
            - color: var(--color-theme)
    item2:
      card:
        type: grid
        columns: 2
        square: false
        cards:
          - type: "custom:button-card"
            entity: "[[[ return variables.ulm_entity1 ]]]"
            label: >
              [[[ return states[variables.ulm_entity1].state + states[variables.ulm_entity1].attributes.unit_of_measurement ]]]
            name: "[[[ return variables.ulm_entity1_name ]]]"
            icon: "[[[ return variables.ulm_entity1_icon ]]]"
            template:
              - icon_info_bg
            styles:
              icon:
                - color: "var(--color-theme)"
          - type: "custom:button-card"
            entity: "[[[ return variables.ulm_entity2 ]]]"
            label: >
              [[[ return states[variables.ulm_entity2].state + states[variables.ulm_entity2].attributes.unit_of_measurement ]]]
            name: "[[[ return variables.ulm_entity2_name ]]]"
            icon: "[[[ return variables.ulm_entity2_icon ]]]"
            template:
              - icon_info_bg
            styles:
              icon:
                - color: "var(--color-theme)"
    item3:
      card:
        type: vertical-stack
        cards:
          - type: entities
            entities:
              - type: section
                label: Statistiques
            card_mod:
              style: |
                ha-card{
                  background: none !important;
                  box-shadow: none !important;
                  margin-bottom: -25px !important;
                  text-align: start !important;
                }
          - type: custom:apexcharts-card
            graph_span: 7d
            # layout: minimal
            all_series_config:
              stroke_width: 3
              type: area
              opacity: 0.2
            series:
              - entity: "[[[ return variables.ulm_entity1 ]]]"
                color: blue
                fill_raw: last
            card_mod:
              style: |
                ha-card{
                  background: none !important;
                  box-shadow: none !important;
                }
                .wrapper{
                  background: var(--card-background-color) !important;
                  border-radius: 20px !important;
                  box-shadow: var(--box-shadow) !important;
                }
    item4:
      card:
        type: custom:button-card
        template: list_3_buttons
        styles:
          card:
            - padding-top: 30px
        custom_fields:
          item2:
            card:
              type: "custom:button-card"
              template: back_button

[FreakLikeMe]

This Is great! list_3buttons code isn’t there so i changed it to list_2_buttons. Also are you sure you cant fix the bug that it doesn’t update? I’ve been using this light popup card and it works over there.

[schumijo (Jonathan)]

Oups you’re right. You can find list_3_button in my generic popup code.
I will take a look but this card is only a slider and mine is working well

[paddy0174 (Patrick)]

Good evening to all of you!
It took a little longer than the promised “few days”, but as it turned out, it was a little more work, than expected. But nonetheless, if I may present to you

UI-Lovelace-Minimalist v1.0.0-beta.5 | first public beta

To be honest, as most developers, I’m not sure if everything is ready and working flawless, but here we are. There has to be a release at some point. And here it is!

So what’s new you ask?

• We implemented a new structure for the files - easier maintainance and updates
• While at it, a few bugs were fixed, and some code needed to be re-written, to fit the new structure
• The new structure was necessary, among other things, to accomodate the development and use of custom_cards. Now everybody can develop a custom_card and it can easily be added by copying a folder or using the generator. At the moment we have around five custom_cards ready for use, five waiting for a review, but both already included in the download.
• The implementation of custom_cards had a nice little side effect: you can now extend the main template with your own code, without disturbing updates to the main “theme”
• It is now possible to use language variables. So all strings, that won’t get delivered from HA can be changed to your language. This works as well in custom_cards, so authors can provide you with your own language, too.
• A few new cards, not known from the thread here, like a collapsable light-slider, a horizontal light-slider or a welcome card, that can be configured to deliver you news and notifications from your HA installation.
• There is now a dedicated Github repository for the “theme” and the wiki page (a Jekyll page, take a look at the repo)
• The most noteable (at least the most time consuming) part is our new wiki. First planned as an enhanced readme, it grew in the last weeks from a Github hosted wiki to now a hosted (thanks Netlify!) wiki page with 21 pages. You can find there:
  • Installation guides (UI- and yaml-mode)
  • An example page (this unfortunately is not ready yet, input is always welcome!)
  • Guides to setup your first page, update, upgrade from a previous version and more
  • Developer corner to support the development of this “theme” (eg. custom_cards)

What you can as well find in the new wiki, are our CodeGenerators. These are mainly for people, who use or want to use UI-mode for their installation. UI-mode is not our first choice, as it is harder to handle in the long run, but that’s entirely your choice! Our main templates without language variables and custom-cards are already 1500 lines long… But that’s the point, don’t let that worry you, that’s why we have our generators.

In the first one you can configure which language you want to use, which custom-cards you want to install and at the push of a button you get your code, ready to copy and paste it into your raw-config-editor. Always with the newest code from the repo automatically added.

With the second one you can configure which cards you want to see as a code example and the generator brings it to you. This is not a complete generation of code, ready to use and fitting your system. But it will give you a nice start into the use of this “theme”.

Let me add a short disclaimer here: this is a beta version for a reason. Everything is tested and looked ok, but you never know, especially with a first public release. And that’s why we haven’t made this a stable release. There will be issues and errors, and we will try our best to resolve these in a timely manner, but we can’t rule these out upfront. So please bear with us! Better help by trying things out and report issues here or at Github.

This is only a start, and if I haven’t miscounted, there are around ten or twelve cards in this thread already, that need to be included (permission preconditioned). I personally would love to see this “theme” in HACS for an even easier install, lovelace-gen is another thing to think about and I sincerely hope people like what has already been done here in the mindset of open-source and contribute and add to this fantastic work @Tben started! On the top of my list is a little code cleaning as well, these 1500 lines need to (and will) get smaller!

All input is welcome, the repo is ready for you to fork and work on it, or just leave a post here in this thread, if you have something great to share. It is always appreciated!

And now, after a long introduction speech, here are the links for you to explore:

The new Github repository: GitHub - UI-Lovelace-Minimalist/UI: UI-Lovelace-Minimalist is a "theme" for HomeAssistant

And here is the wiki page: https://ui-lovelace-minimalist.netlify.app/

[fastender]

sexy. i love it.

[chintito4ever]

Awesome ! Thank you so much

[Depechie (Glenn Versweyveld)]

Works like a charm @paddy0174 thx for the great work!!

[CM000n (Simon)]

Wow, thank you so much for this great work! It must have taken quite a bit of time.

If I find time this weekend, I’ll have to try this out right away.

I still have two small questions:
Do I see it right that currently no Dark Theme is included? And is there a recommendation how many cards you can use within a horizontal stack? Should I always start a new horizontal stack after 2 cards? In my short test, it looks with more cards and the desktop theme currently still a bit strange imho

button_card_templates: !include_dir_merge_named minimalist-templates/
views:
  - title: Zu Hause
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            template: edge
          - type: custom:button-card
            template: title
            name: Zu Hause
          - type: custom:button-card
            template: edge
  - title: Beleuchtung
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            template: edge
          - type: custom:button-card
            template: title
            name: Beleuchtung
          - type: custom:button-card
            template: edge
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            template: edge
          - type: custom:button-card
            template: title
            label: 'Wohnzimmer' 
          - type: custom:button-card
            template: edge
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            template: edge
          - type: 'custom:button-card'
            template: card_light
            entity: light.wohnzimmer_deckenlampe
          - type: 'custom:button-card'
            template: card_light
            entity: light.wohnzimmer_lightstrip
          - type: 'custom:button-card'
            template: card_light
            entity: light.stehlampe_wohnzimmer_links
          - type: 'custom:button-card'
            template: card_light
            entity: light.wohnzimmer_stehlampe_rechts
          - type: custom:button-card
            template: edge
  - title: Geräte
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            template: edge
          - type: custom:button-card
            template: title
            name: Geräte
          - type: custom:button-card
            template: edge

[massaquah (Adrian)]

Great theme!!
I played around with the different templates for an hour or so and I can’t get the light slider cards to work.
They simply don’t show.

[paddy0174 (Patrick)]

@massaquah
What code did you use for the light-card? This card needs an entity to be set, otherwise it won’t show. Could you provide the code (or a screenshot if in UI-mode) that you’re using. Preferable with a few lines before and after the card.

  # this should be the code in UI-mode
  type: 'custom:button-card'
  template: card_light
  entity: light.my_livingroom_light

@CM000n
There is no recomendation, because it changes with the layout and the things you use the button for.

In theory, all these buttons use the same settings for their width. It entirely depends, how many you put into one row. Taking this as an example, I first tried the second row with three buttons, but the text (label) didn’t fit into the button. So two it was in the end. With the first row, the text fit with three buttons, and I only had three buttons to show, so three it was.

What I’ve read here in this thread, most people use this “theme” in combination with layout-card and on their mobile. So there is only one column and with some kind of fixed width. I will try to come up with some kind of guide on how to set up layout-card and use this “theme” with a one, two and three column based layout, but that will take a while.

[CM000n (Simon)]

OK, got it. Thank you very much. I think I’ll just play around a bit and try a few things.

It would be really cool to have a collection of complete configuration examples somewhere though, right? Maybe in the future we can link some repos of people using the theme in the great tutorial we have now? But no need to rush

Again, thank you very much!

[massaquah (Adrian)]

The normal light card is working, only the different light-slider cards are not:

- type: vertical-stack    ###Wohnzimmer###
        cards:
          - type: 'custom:button-card'
            template: card_title
            name: Wohnzimmer
            label: 'Unsere Entspannungs-Oase'
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                template: card_graph
                variables:
                  ulm_card_graph_color: "var(--google-blue)"
                  ulm_card_graph_name: Temperatur Wohnzimmer
                  ulm_card_graph_entity: sensor.temp_sonoff_wohnzimmer_temperature
              - type: 'picture-glance'
                image: /local/img/living.jpg
                theme: ios-dark-mode-blue-red
                aspect_ratio: 72%
                entities:
                   - entity: binary_sensor.contact_sonoff_wohnzimmer
                   - entity: light.light_hue_wohnzimmer_fenster
                   - entity: light.light_hue_wohnzimmer_stehlampe
                     icon: mdi:lamp-outline
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-border-radius: 15px;
                    }
          - type: custom:button-card
            template: edge
          - type: 'custom:button-card'
            template: card_binary_sensor_alert
            variables:
              - ulm_card_binary_sensor_alert: true
            entity: binary_sensor.contact_sonoff_wohnzimmer
            show_last_changed: true
          - type: 'custom:button-card'
            template: card_light
            entity: light.light_hue_wohnzimmer_stehlampe
          - type: 'custom:button-card'
            template: card_light_slider_horizontal
            variables:
              ulm_card_light_slider_horizontal_name: Stehlampe
            entity: light.light_hue_wohnzimmer_stehlampe
          - type: 'custom:button-card'
            template: card_light_slider
            variables:
              ulm_card_light_slider_name: Fensterlampe
            entity: light.light_hue_wohnzimmer_fenster

Problem solved: I was missing the my-cards addon.

[fastender]

Actually, I wanted to stay away from designing the Dashboard, because it is very time-consuming, but I have to say that your installation worked perfectly and was also easy.

I have a few concerns:

1. could a popup screen be integrated, similar to the one here: 🌻 Lovelace UI • Minimalist - #318 by schumijo

2. could a blur effect be added to the background when a popup is displayed.

3. on my Mac the darkmode is automatically activated, here the background would have to be modified. →see picture above

4. could the initial letter be capitalised, at least for people from Germany? Instead of “geschlossen”, therefore “Geschlossen”, →see picture above (not mandatory, but would look nice)

5. is there any plan to animate the icons?

Regardless, I must thank you for all your efforts. You have really created something beautiful and I look forward to using your theme in the future. Many Thanks, merci beaucoup.

Edit:
6. Light Slider Card (collapse): ulm_card_light_slider_collapse_name; somehow this does not work, cannot change the name.

[CM000n (Simon)]

Thanks again for your tips! I think I’ll try CSS grids for now. That really gives me great control over where individual cards are positioned and how the layout looks on different screen sizes. Whereas for now i just played around a bit for the desktop screen size:

button_card_templates: !include_dir_merge_named minimalist-templates/

kiosk_mode:
  kiosk: true

views:
  - type: custom:grid-layout
    title: _home
    path: 0
    layout:
      #default
      grid-gap: 5px 5px
      grid-template-columns: 0 repeat(5, 1fr) 0
      grid-template-rows: 2% repeat(7, 3%) 0
      grid-template-areas: |
        ".  chips       chips         chips         chips         chips       ."
        ".  t1          t1            t1            t1            t1          ."
        ".  navigation  navigation    navigation    navigation    navigation  ."
        ".  t2          t2            t2            t2            t2          ."
        ".  persons     persons       persons       persons       persons     ."
        ".  .           .             .             .             .           ."
        ".  .           .             .             .             .           ."
        ".  .           .             .             .             .           ."
        ".  .           .             .             .             .           ."
      mediaquery:
        #phone
        "(max-width: 800px)":
          grid-gap: 5px 5px
          grid-template-columns: 0 repeat(5, 1fr) 0
          grid-template-rows: 2% repeat(7, 3%) 0
          grid-template-areas: |
            ".  chips       chips         chips         chips         chips       ."
            ".  t1          t1            t1            t1            t1          ."
            ".  navigation  navigation    navigation    navigation    navigation  ."
            ".  t2          t2            t2            t2            t2          ."
            ".  persons     persons       persons       persons       persons     ."
            ".  .           .             .             .             .           ."
            ".  .           .             .             .             .           ."
            ".  .           .             .             .             .           ."
            ".  .           .             .             .             .           ."
        #portrait
        "(max-width: 1200px)":
          grid-gap: 5px 5px
          grid-template-columns: 0 repeat(5, 1fr) 0
          grid-template-rows: 2% repeat(7, 3%) 0
          grid-template-areas: |
            ".  chips       chips         chips         chips         chips       ."
            ".  t1          t1            t1            t1            t1          ."
            ".  navigation  navigation    navigation    navigation    navigation  ."
            ".  t2          t2            t2            t2            t2          ."
            ".  persons     persons       persons       persons       persons     ."
            ".  .           .             .             .             .           ."
            ".  .           .             .             .             .           ."
            ".  .           .             .             .             .           ."
            ".  .           .             .             .             .           ."
    cards:
      - type: grid
        view_layout:
          grid-area: chips
        cards:

          - type: 'custom:button-card'
            template: chip_temperature
            variables:
              ulm_chip_temperature_inside: sensor.steckdose_spulmaschine_temperature
              ulm_chip_temperature_outside: sensor.dwd_weather_kraichtal_gochsheim_temperature
              ulm_chip_temperature_weather: weather.dwd_weather_kraichtal_gochsheim

      - type: grid
        view_layout:
          grid-area: t1
        cards:

          - type: custom:button-card
            template: title
            name: Zu Hause

      - type: grid
        view_layout:
          grid-area: navigation
        cards:

          - type: custom:button-card
            template: card_navigate
            variables:
              ulm_card_navigate_path: /lovelace-minimalist/1
              ulm_card_navigate_title: Beleuchtung
              ulm_card_navigate_icon: mdi:lamps-outline

          - type: custom:button-card
            template: card_navigate
            variables:
              ulm_card_navigate_path: /lovelace-minimalist/2
              ulm_card_navigate_title: Geräte
              ulm_card_navigate_icon: mdi:devices

      - type: grid
        view_layout:
          grid-area: t2
        cards:

          - type: custom:button-card
            template: title
            name: Anwesenheit
            label: 'Personen'

      - type: grid
        view_layout:
          grid-area: t2
        cards:

          - type: custom:button-card
            template: title
            name: Anwesenheit
            label: 'Personen'

      - type: grid
        view_layout:
          grid-area: persons
        columns: 5
        cards:

          - type: 'custom:button-card'
            template: card_person
            variables:
              ulm_card_person_entity: person.simon
              ulm_card_person_use_entity_picture: false
              ulm_card_person_zone1: Simon Arbeit

          - type: 'custom:button-card'
            template: card_person
            variables:
              ulm_card_person_entity: person.lisa
              ulm_card_person_use_entity_picture: false
              ulm_card_person_zone1: Lisa Arbeit

          - type: 'custom:button-card'
            template: card_person
            variables:
              ulm_card_person_entity: person.lisa
              ulm_card_person_use_entity_picture: false
              ulm_card_person_zone1: Lisa Arbeit

          - type: 'custom:button-card'
            template: card_person
            variables:
              ulm_card_person_entity: person.lisa
              ulm_card_person_use_entity_picture: false
              ulm_card_person_zone1: Lisa Arbeit

[massaquah (Adrian)]

Can anyone confirm that the Power Outlet Card is working?

[mwolter]

Seeing the same background issue with card_light_slider_collapse as @fastender when using dark mode.

Also appears to be an issue with card_light_slider_horizontal.

[huiz13]

How would I make a light card spin, so I can use it with a fan.

[mwolter]

Resolved the issues by changing the following templates.

card_light_slider:
  variables:
    ulm_card_light_slider_name: "[[[ return entity.attributes.friendly_name ]]]"
  show_icon: false
  show_name: false
  show_label: false
  state:
    - operator: template
      value: "[[[ return entity.state == 'on' ]]]"
      styles:
        card:
          - background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
  styles:
    grid:
      - grid-template-areas: '"item1" "item2"'
      - grid-template-columns: 1fr
      - grid-template-rows: min-content min-content
      - row-gap: 12px
    card:
      - border-radius: var(--border-radius)
      - box-shadow: var(--box-shadow)
      - padding: 12px
  custom_fields:
    item1:
      card:
        type: 'custom:button-card'
        variables:
          slider_background_color: 'rgba(0,0,0,0)'
        template:
          - icon_info
          - light
        entity: "[[[ return entity.entity_id ]]]"
        name: "[[[ return variables.ulm_card_light_slider_name ]]]"
        styles:
          card:
            - box-shadow: none
            - border-radius: var(--border-radius) var(--border-radius) 0px 0px
            - padding: 0px
    item2:
      card:
        type: 'custom:my-slider'
        entity: '[[[ return entity.entity_id ]]]'
        radius: 14px
        height: 42px
        mainSliderColor: rgba(var(--color-yellow),1)
        secondarySliderColor: rgba(var(--color-yellow),0.2)
        mainSliderColorOff: rgba(var(--color-theme),0.05)
        secondarySliderColorOff: rgba(var(--color-theme),0.05)
        thumbHorizontalPadding: '0px'
        thumbVerticalPadding: '0px'   
        thumbWidth: 0px
        card_mod:
        style: |
          ha-card {
            border-radius: 14px;
            box-shadow: none;
          }
card_light_slider_collapse:
  variables:
    ulm_card_light_slider_collapse_name: "[[[ return entity.attributes.friendly_name ]]]"
  show_icon: false
  show_name: false
  show_label: false
  state:
    - operator: template
      value: "[[[ return entity.state == 'on' ]]]"
      styles:
        grid:
          - row-gap: 12px
        card:
          - background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
  styles:
    grid:
      - grid-template-areas: '"item1" "item2"'
      - grid-template-columns: 1fr
      - grid-template-rows: min-content min-content
    card:
      - border-radius: var(--border-radius)
      - box-shadow: var(--box-shadow)
      - padding: 12px
  custom_fields:
    item1:
      card:
        type: 'custom:button-card'
        variables:
          slider_background_color: 'rgba(0,0,0,0)'
        template:
          - icon_info
          - light
        entity: "[[[ return entity.entity_id ]]]"
        name: "[[[ return variables.ulm_card_light_slider_name ]]]"
        styles:
          card:
            - box-shadow: none
            - border-radius: var(--border-radius) var(--border-radius) 0px 0px
            - padding: 0px
        state:
          - styles:
              card:
                - background: transparent
            value: 'on'
    item2:
      card:
        type: conditional
        conditions:
          - entity: "[[[ return entity.entity_id ]]]"
            state: 'on'
        card:
          type: 'custom:my-slider'
          entity: '[[[ return entity.entity_id ]]]'
          radius: 14px
          height: 42px
          mainSliderColor: rgba(var(--color-yellow),1)
          secondarySliderColor: rgba(var(--color-yellow),0.2)
          mainSliderColorOff: rgba(var(--color-theme),0.05)
          secondarySliderColorOff: rgba(var(--color-theme),0.05)
          thumbHorizontalPadding: '0px'
          thumbVerticalPadding: '0px'   
          thumbWidth: 0px
          card_mod:
          style: |
            ha-card {
              border-radius: 14px;
              box-shadow: none;
            }
card_light_slider_horizontal:
  variables:
    ulm_card_light_slider_horizontal_name: "[[[ return entity.attributes.friendly_name ]]]"
  show_icon: false
  show_name: false
  show_label: false
  state:
    - operator: template
      value: "[[[ return entity.state == 'on' ]]]"
      styles:
        card:
          - background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
  styles:
    grid:
      - grid-template-areas: '"item1 item2"'
      - grid-template-columns: 1fr 1fr
      - grid-template-rows: 1fr
    card:
      - border-radius: var(--border-radius)
      - box-shadow: var(--box-shadow)
      - padding: 12px
  custom_fields:
    item1:
      card:
        type: 'custom:button-card'
        variables:
          slider_background_color: 'rgba(0,0,0,0)'
        template:
          - icon_info
          - light
        entity: "[[[ return entity.entity_id ]]]"
        name: "[[[ return variables.ulm_card_light_slider_name ]]]"
        styles:
          card:
            - box-shadow: none
            - border-radius: var(--border-radius) var(--border-radius) 0px 0px
            - padding: 0px
    item2:
      card:
        type: 'custom:my-slider'
        entity: '[[[ return entity.entity_id ]]]'
        radius: 14px
        height: 42px
        mainSliderColor: rgba(var(--color-yellow),1)
        secondarySliderColor: rgba(var(--color-yellow),0.2)
        mainSliderColorOff: rgba(var(--color-theme),0.05)
        secondarySliderColorOff: rgba(var(--color-theme),0.05)
        thumbHorizontalPadding: '0px'
        thumbVerticalPadding: '0px'   
        thumbWidth: 0px
        card_mod:
        style: |
          ha-card {
            border-radius: 14px;
            box-shadow: none;
          }
yellow:
  variables:
    slider_background_color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
  state:
    - styles:
        icon:
          - color: 'rgba(var(--color-yellow),1)'
        label:
          - color: 'rgba(var(--color-yellow-text),1)'
        name:
          - color: 'rgba(var(--color-yellow-text),1)'
        img_cell:
          - background-color: 'rgba(var(--color-yellow), 0.2)'
        card:
          - background-color: '[[[ return variables.slider_background_color ]]]'
      value: 'on'