UI-Lovelace-Minimalist/UI

main page text didn`t align since this week !!!

yuhuanfan opened this issue · 1 comments

未标题-1

---
custom_card_welcome_scenes:
  variables:
    ulm_weather: "[[[ return variables.ulm_weather]]]"
    ulm_language: "[[[ return hass['language']; ]]]"
    entity_1:
      entity_id: ""
      color: >
        [[[
          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
          var color = colors[Math.floor(Math.random() * colors.length)];
          return color;
        ]]]
    entity_2:
      entity_id: ""
      color: >
        [[[
          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
          var color = colors[Math.floor(Math.random() * colors.length)];
          return color;
        ]]]
    entity_3:
      entity_id: ""
      color: >
        [[[
          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
          var color = colors[Math.floor(Math.random() * colors.length)];
          return color;
        ]]]
    entity_4:
      entity_id: ""
      color: >
        [[[
          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
          var color = colors[Math.floor(Math.random() * colors.length)];
          return color;
        ]]]
    entity_5:
      entity_id: ""
      color: >
        [[[
          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
          var color = colors[Math.floor(Math.random() * colors.length)];
          return color;
        ]]]
    entity_6:
      entity_id: ""
      color: >
        [[[
          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
          var color = colors[Math.floor(Math.random() * colors.length)];
          return color;
        ]]]
    entity_7:
      entity_id: ""
      color: >
        [[[
          var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
          var color = colors[Math.floor(Math.random() * colors.length)];
          return color;
        ]]]
  template:
    - "ulm_language_variables"
    - "ulm_translation_engine"
  show_icon: false
  show_name: false
  show_label: true
  styles:
    grid:
      - grid-template-areas: >
          [[[
            if(variables.ulm_card_welcome_scenes_collapse && states[variables.ulm_card_welcome_scenes_collapse].state == 'on'){
              return "\'item1\' ";
            } else {
              return "\'item1\' \'item4\'";
            }
          ]]]
      - grid-template-columns: "1fr"
      - grid-template-rows: "min-content min-content"
      - row-gap: "0px"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "10px"
    custom_fields:
      item3:
        - display: >
            [[[
              if(variables.ulm_card_welcome_scenes_collapse && states[variables.ulm_card_welcome_scenes_collapse].state == 'on'){
                return "none";
              } else {
                return "block";
              }
            ]]]
      item4:
        - display: >
            [[[
              if(variables.ulm_card_welcome_scenes_collapse && states[variables.ulm_card_welcome_scenes_collapse].state == 'on'){
                return "none";
              } else {
                return "block";
              }
            ]]]
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template: "card_topbar_welcome"
        variables:
          ulm_card_welcome_scenes_collapse: "[[[ return variables.ulm_card_welcome_scenes_collapse ]]]"
          ulm_weather: "[[[ return variables.ulm_weather]]]"
          ulm_language: "[[[ return variables.ulm_language ]]]"
        styles:
          card:
            - border-radius: "none"
            - box-shadow: "none"
            - padding: "4px"
    item2:
      card:
        type: "custom:button-card"
        show_icon: false
        show_label: false
        show_name: false
        show_entity_picture: false
        name: |
          [[[
            var today = new Date();
            var time = today.getHours()
            let welcome = '';
            if (time >= '18'){
              welcome = variables.ulm_evening;
            } else if (time >= '12'){
              welcome = variables.ulm_afternoon;
            } else if (time >= '5'){
              welcome = variables.ulm_morning;
            } else {
              welcome = variables.ulm_hello;
            }
            return welcome + ', ' + user.name + '!';
          ]]]
        styles:
          name:
            - align-self: "start"
            - justify-self: "start"
            - font-weight: "bold"
            - font-size: "24px"
            - margin-left: "16px"
          grid:
            - grid-template-areas: "'i n' 'i l'"
            - grid-template-columns: "min-content auto"
            - grid-template-rows: "min-content min-content"
            - text-align: "start"
          card:
            - box-shadow: "none"
            - padding-bottom: "8px"
    item3:
      card:
        type: "custom:button-card"
        show_icon: false
        show_label: false
        show_name: false
        show_entity_picture: false
        name: "[[[ return variables.ulm_translation_scenes ]]]"
        icon: "mdi:dots-vertical"
        styles:
          icon:
            - height: "20px"
            - filter: "opacity(50%)"
          name:
            - align-self: "start"
            - justify-self: "start"
            - font-weight: "bold"
            - font-size: "18px"
            - margin-left: "16px"
          grid:
            - grid-template-areas: "'n i'"
            - grid-template-columns: "6fr 1fr"
            - grid-template-rows: "min-content min-content"
            - text-align: "start"
          card:
            - box-shadow: "none"
            - padding-bottom: "0px"
            - bottom: "10px"
    item4:
      card:
        type: "custom:button-card"
        template: >
          [[[
            if(variables?.entity_1?.entity_id != ""){
              return 'card_scenes_welcome'
            } else {
              return 'card_scenes_welcome_auto'
            }
          ]]]
        styles:
          card:
            - border-radius: "none"
            - box-shadow: "none"
            - padding: "4px"
        variables:
          entity_1: "[[[ return variables.entity_1]]]"
          entity_2: "[[[ return variables.entity_2]]]"
          entity_3: "[[[ return variables.entity_3]]]"
          entity_4: "[[[ return variables.entity_4]]]"
          entity_5: "[[[ return variables.entity_5]]]"
          entity_6: "[[[ return variables.entity_6]]]"
          entity_7: "[[[ return variables.entity_7]]]"
card_title_welcome:
  tap_action:
    action: "none"
  show_icon: false
  show_label: true
  show_name: true
  styles:
    card:
      - background-color: "rgba(0,0,0,0)"
      - box-shadow: "none"
      - height: "auto"
      - width: "auto"
      - margin-top: "-10px"
      - margin-left: "16px"
      - margin-bottom: "-15px"
    grid:
      - grid-template-areas: "'n' 'l'"
      - grid-template-columns: "1fr"
      - grid-template-rows: "min-content min-content"
    name:
      - justify-self: "start"
      - font-weight: "bold"
      - font-size: "20px"
    label:
      - justify-self: "start"
      - font-weight: "bold"
      - font-size: "1rem"
      - opacity: "0.4"

# pill
card_scenes_pill_welcome:
  show_icon: false
  show_label: false
  show_name: false
  state:
    - operator: "template"
      value: >
        [[[
          return (entity.state !== 'on' && entity.state !== 'playing' && entity.state != variables?.state)
        ]]]
      styles:
        card:
          - overflow: "visible"
          - box-shadow: "none"
  styles:
    grid:
      - grid-template-areas: "'item1'"
      - grid-template-columns: "min-content"
      - grid-template-rows: "1fr 1fr"
      - row-gap: "12px"
      - justify-items: "center"
      - column-gap: "auto"
    card:
      - border-radius: "50px"
      - place-self: "center"
      - width: "52px"
      - height: "84px"
      - box-shadow: >
          [[[
            if (hass.themes.darkMode){
              return "0px 2px 4px 0px rgba(0,0,0,0.80)";
            } else {
              return "var(--box-shadow)";
            }
          ]]]
  color: "var(--google-grey)"
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        show_icon: true
        show_label: false
        show_name: false
        tap_action:
          action: >
            [[[
              if(variables?.nav_path){
                return "navigate"
              } else {
                return "call-service"
              }
            ]]]
          service: >
            [[[
              if(entity.entity_id.startsWith("scene.")){
                return "scene.turn_on"
              }
              else if(entity.entity_id.startsWith("media_player.")){
                return "media_player.media_play_pause"
              }
              else if(entity.entity_id.startsWith("input_select.")){
                return "input_select.select_option"
              } else {
                return "homeassistant.toggle"
              }
            ]]]
          navigation_path: "[[[ return variables?.nav_path; ]]]"
          service_data: |
            [[[
              var obj;
              if( entity.entity_id.startsWith("input_select.") )
                obj = { entity_id: entity.entity_id, option: variables.state };
              else
                obj = { entity_id: entity.entity_id };
              return obj;
            ]]]
        styles:
          grid:
            - grid-template-areas: "i"
          icon:
            - color: >
                [[[
                  var color = variables?.color
                  if(hass.themes.darkMode){var color = "#FAFAFA";}
                  return `rgba(var(--color-${color}), 1)`;
                ]]]
            - width: "20px"
          img_cell:
            - background-color: >
                [[[
                  var color = variables?.color
                  var opacity = '0.20'
                  if(hass.themes.darkMode){var opacity = '1'}
                  return `rgba(var(--color-${color}), ${opacity})`;
                ]]]
            - border-radius: "50%"
            - width: "42px"
            - height: "42px"
          card:
            - box-shadow: "none"
            - border-radius: "50px"
            - padding: "5px"
        state:
          - operator: "template"
            value: >
              [[[
                return (entity.state !== 'on' && entity.state !== 'playing' && entity.state != variables?.state)
              ]]]
            styles:
              card:
                - overflow: "visible"
                - box-shadow: >
                    [[[
                      if (hass.themes.darkMode){
                        return "0px 2px 4px 0px rgba(0,0,0,0.80)";
                      } else {
                        return "var(--box-shadow)";
                      }
                    ]]]
    item2:
      card:
        type: "custom:button-card"
        show_icon: false
        show_label: false
        tap_action:
          action: >
            [[[
              if(variables?.nav_path){
                return "navigate"
              } else {
                return "call-service"
              }
            ]]]
          navigation_path: "[[[ return variables?.nav_path; ]]]"
          service: >
            [[[
              if(entity.entity_id.startsWith("scene.")){
                return "scene.turn_on"
              }
              else if(entity.entity_id.startsWith("media_player.")){
                return "media_player.media_play_pause"
              }
              else if(entity.entity_id.startsWith("input_select.")){
                return "input_select.select_option"
              } else {
                return "homeassistant.toggle"
              }
            ]]]
          service_data: |
            [[[
              var obj;
              if( entity.entity_id.startsWith("input_select.") )
                obj = { entity_id: entity.entity_id, option: variables.state };
              else
                obj = { entity_id: entity.entity_id };
              return obj;
            ]]]
        styles:
          grid:
            - grid-template-areas: "n"
          name:
            - justify-self: "center"
            - font-weight: "bold"
            - font-size: "9.5px"
            - padding-bottom: "7px"
            - overflow: "[[[return (entity.state !== 'on' && entity.state !== 'playing' && entity.state != variables?.state) ? 'visible' : 'hidden']]]"
          card:
            - box-shadow: "none"
            - padding: "0px 5px 5px 5px"
            - margin-top: "-5px"
            - border-radius: "50px"
            - overflow: "[[[return (entity.state !== 'on' && entity.state !== 'playing' && entity.state != variables?.state) ? 'visible' : 'hidden']]]"
card_topbar_welcome:
  show_icon: false
  show_name: false
  show_label: false
  styles:
    grid:
      - grid-template-areas: "item1 item3"
      - justify-content: "space-between"
      - display: "flex"
    card:
      - border-radius: "none"
      - box-shadow: "none"
      - padding: "12px"
      - background: "none"
  custom_fields:
    item1:
      card:
        type: "custom:button-card"
        template: "chips"
        entity: "[[[ return variables.ulm_card_welcome_scenes_collapse ]]]"
        icon: "mdi:chevron-up"
        show_icon: true
        styles:
          grid:
            - grid-template-areas: "'i'"
          card:
            - box-shadow: >
                [[[
                  if (hass.themes.darkMode){
                    return "0px 2px 4px 0px rgba(0,0,0,0.80)";
                  } else {
                    return "var(--box-shadow)";
                  }
                ]]]
        state:
          - value: "on"
            icon: "mdi:chevron-down"
            styles:
              icon:
                - color: "rgb(var(--color-theme))"
        tap_action:
          action: "call-service"
          service: "input_boolean.toggle"
          service_data:
            entity_id: "[[[ return variables.ulm_card_welcome_scenes_collapse ]]]"
    item2:
      card:
        type: "custom:button-card"
        template: "chip_weather_date"
        entity: "[[[ return variables.ulm_weather]]]"
        variables:
          ulm_weather: "[[[ return variables.ulm_weather ]]]"
          ulm_language: "[[[ return variables.ulm_language ]]]"
        styles:
          card:
            - width: "100px"
            - box-shadow: >
                [[[
                  if (hass.themes.darkMode){
                    return "0px 2px 4px 0px rgba(0,0,0,0.80)";
                  } else {
                    return "var(--box-shadow)";
                  }
                ]]]
    item3:
      card:
        type: "custom:button-card"
        tap_action:
          action: "navigate"
          navigation_path: "/config/dashboard"
        template: "chip_mdi_icon_only"
        variables:
          ulm_chip_mdi_icon_only_icon: "mdi:cog-outline"
        styles:
          card:
            - align-self: "end"
            - box-shadow: >
                [[[
                  if (hass.themes.darkMode){
                    return "0px 2px 4px 0px rgba(0,0,0,0.80)";
                  } else {
                    return "var(--box-shadow)";
                  }
                ]]]
# auto-entities
card_scenes_welcome_auto:
  show_icon: false
  show_name: true
  show_label: false
  variables:
    colors: >
      [[[
        var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink'];
        var color = colors[Math.floor(Math.random() * colors.length)];
        return color;
      ]]]
  styles:
    grid:
      - grid-template-areas: "item1"
      - display: "flex"
      - justify-content: "center"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "12px"
  custom_fields:
    item1:
      card:
        type: "custom:auto-entities"
        card:
          type: "grid"
          columns: 5
          square: false
        card_param: "cards"
        sort:
          count: 5
        filter:
          include:
            - domain: "light"
              options:
                type: "custom:button-card"
                template: "card_scenes_pill_welcome"
                custom_fields:
                  item1:
                    card:
                      type: "custom:button-card"
                      entity: "this.entity_id"
                      styles:
                        icon:
                          - color: >
                              [[[
                                var color = variables.colors
                                if(hass.themes.darkMode){var color = "#FAFAFA";}
                                return `rgba(var(--color-${color}), 1)`;
                              ]]]
                          - width: "20px"
                        img_cell:
                          - background-color: >
                              [[[
                                var color = variables.colors
                                var opacity = '0.20'
                                if(hass.themes.darkMode){var opacity = '1'}
                                return `rgba(var(--color-${color}), ${opacity})`;
                              ]]]
                  item2:
                    card:
                      type: "custom:button-card"
                      entity: "this.entity_id"
  - type: vertical-stack
    cards:
      - type: "custom:button-card"
        template: "custom_card_welcome_scenes"
        triggers_update: input_boolean.welcome_toggle
        entity: input_boolean.welcome_toggle
        variables:
          ulm_card_welcome_scenes_collapse: input_boolean.welcome_toggle #OPTIONAl --> uncomment also entity or triggers_update
          ulm_weather: "weather.openweathermap"
          ulm_language: "en-US"
          entity_1:
            entity_id: "binary_sensor.ec4d3ed96ef5_motion"
            icon: "mdi:home-lightning-bolt-outline" #OPTIONAL
            name: "Home" #OPTIONAL
            color: "blue"
            nav_path: "home"
          entity_2:
            entity_id: "climate.can_ting_1_02"
            icon: "mdi:air-conditioner" #OPTIONAL
            name: "Climate" #OPTIONAL
            color: "red"
            nav_path: "climate"
          entity_3:
            entity_id: "vacuum.deebot_t9_power"
            icon: "mdi:vacuum" #OPTIONAL
            name: "Vacuum" #OPTIONAL
            color: "green"
            nav_path: "vacuum"
          entity_4:
            entity_id: "script.popup_frigate_card"
            icon: "mdi:cctv" #OPTIONAL
            name: "Camera" #OPTIONAL
            color: "purple"
          entity_5:
            entity_id: "vacuum.deebot_t9_power"
            icon: "mdi:transmission-tower-export" #OPTIONAL
            name: "Energy" #OPTIONAL
            color: "yellow"
            nav_path: "energy"
          entity_6:
            entity_id: "script.popup_memory_card"
            icon: "mdi:chart-line" #OPTIONAL
            name: "Memory" #OPTIONAL
            color: "pink"
          entity_7:
            entity_id: "script.popup_weather_card"
            icon: "mdi:weather-partly-cloudy" #OPTIONAL
            name: "Weather" #OPTIONAL
            color: "yellow"