dow_time_warning_card_template.yaml

button_card_templates:
  dow_time_warning_card:
    variables:
      var_dow: ''
      var_time: ''
      var_critical_input_boolean: ''
      var_warning_input_boolean: ''
    custom_fields:
      dow: |
        [[[
          return `<span style="color: var(--text-color-sensor);">${states[variables.var_dow].state}</span>`
        ]]]
      time: |
        [[[
          return `<span style="color: var(--text-color-sensor);">${states[variables.var_time].state}</span>`
        ]]]    
    show_name: false
    show_state: false
    triggers_update:
      - sensor.time
    state:
      - styles:
          card:
            - background-color: '#d8daea'
            - color: black
          icon:
            - animation: blink 3s ease infinite
            - color: black
        value: 'on'
      - operator: template
        styles:
          card:
            - background-color: '#ff6666'
            - color: black
          icon:
            - animation: blink 3s ease infinite
            - color: black
        value: >
          [[[ return states[variables.var_critical_input_boolean].state === 'on'
          ]]]
      - operator: template
        styles:
          card:
            - background-color: '#ffb366'
            - color: black
          icon:
            - animation: blink 3s ease infinite
            - color: black
        value: >
          [[[ return states[variables.var_warning_input_boolean].state === 'on'
          ]]]
      - styles:
          icon:
            - color: white
        value: 'off'
    styles:
      custom_fields:
        dow:
          - padding-top: 5px
          - padding-bottom: 2px
          - padding-left: 10px
          - align-self: middle
          - justify-self: start
          - font-size: .7em
          - line-height: 115%
        time:
          - padding-left: 10px
          - padding-bottom: 2px
          - align-self: middle
          - justify-self: start
          - text-transform: uppercase
          - font-weight: bold
          - font-size: .9em
          - line-height: 115%
      grid:
        - grid-template-areas: '"i" "dow" "time"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
      name:
        - justify-self: start
        - line-height: 115%
      state:
        - justify-self: start
        - line-height: 115%
      card:
        - height: 100px
        - font-family: Sf Display
        - border-radius: var(--custom-button-card-border-radius)
        - border: |
            [[[
              return (variables.state === 'on' || states[variables.var_critical_input_boolean].state == 'on' || states[variables.var_warning_input_boolean].state === 'on') ?
                'none' :
                '1px solid rgba(255, 255, 255, 0.3)';
            ]]]
        - '-webkit-tap-highlight-color': rgba(0,0,0,0)
        - transition: none
        - padding: 1%
        - '--mdc-ripple-color': |
            [[[
              return (variables.state === 'on') ?
                'rgb(0, 0, 0)' :
                'rgba(255, 255, 255, 0.3)';
            ]]]
        - color: |
            [[[
              return (variables.state === 'on') ?
                'rgba(0, 0, 0, 0.6)' :
                'rgba(255, 255, 255, 0.3)';
            ]]]
        - background-color: |
            [[[
              return (variables.state === 'on') ?
                'rgba(255, 255, 255, 0.8)' :
                'rgba(115, 115, 115, 0.2)';
            ]]]
    extra_styles: |
      #name, #state, #time, #dow {
        font-size: 1.34vw;
        letter-spacing: 0.05vw;
      }
      /* portrait */
      @media screen and (max-width: 1200px) {
        #name, #state, #time, #dow {
          font-size: 2vw;
          letter-spacing: 0.05vw;
        }
      }
      /* phone */
      @media screen and (max-width: 800px) {
        #name, #state, #time, #dow {
          font-size: 3.1vw;
          letter-spacing: 0.12vw;
        }
      }
      @keyframes card_bounce {
        0% {
          transform: scale(1);
        }
        15% {
          transform: scale(0.9);
        }
        25% {
          transform: scale(1);
        }
        30% {
          transform: scale(0.98);
        }
        100% {
          transform: scale(1);
        }
      }