creative-button-card-templates/title.yaml at master · wfurphy/creative-button-card-templates · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
####{ CreativeBC }####| Title |####[ github.com/wfurphy/creative-button-card-templates ]####>
# ::{ Update 0.3 }:: Added `resizable` addon, add `{bool} uppercase` variable to control text-transform }

###################[ title_info ]#######################################################>
title_info:
  template:
    - cbcjs
    - info_mini
    - transparent
  variables:
    width: 45px
  styles:
    icon:
      - opacity: "[[[ return variables._item.opacity ?? '0.2' ]]]"
      - color: "[[[ return variables._item.color ?? 'var(--accent-color)' ]]]"

title:
  icon: 'mdi:'
  template:
    - cbcjs
    - style_helper
    - no_actions
    - resizable
  variables:
    mirror: false
    color: var(--cbc-title-color, var(--primary-background-color))
    background_color: var(--cbc-title-background-color, var(--accent-color))
    text_color: var(--cbc-title-text-color, var(--cbc-title-color, '#ffffff'))
    icon_size: 155% # v.03 Added ability to set icon_size
    uppercase: true # v0.3 Added ability to control uppercase
    show_tab: false
    offset: 0
    opacity: var(--cbc-title-opacity, 0.4) # v0.3 Changed to background color opactiy not whole card ###>
    info: []
  custom_fields:
    i1:
      force_recreate: true
      card:
        type: custom:button-card
        template: title_info
        entity: "[[[ return variables.info[0]?.entity ]]]"
        variables:
          _item: "[[[ return variables.info[0] ?? '' ]]]"
          layout: "[[[ return variables.info[0]?.layout ?? 'stack' ]]]"
    i2:
      force_recreate: true
      card:
        type: custom:button-card
        template: title_info
        entity: "[[[ return variables.info[1]?.entity ]]]"
        variables:
          _item: "[[[ return variables.info[1] ?? '' ]]]"
          layout: "[[[ return variables.info[1]?.layout ?? 'stack' ]]]"
    i3:
      force_recreate: true
      card:
        type: custom:button-card
        template: title_info
        entity: "[[[ return variables.info[2]?.entity ]]]"
        variables:
          _item: "[[[ return variables.info[2] ?? '' ]]]"
          layout: "[[[ return variables.info[2]?.layout ?? 'stack' ]]]"
  styles:
    grid:
      - position: relative
      - grid-template-areas: >-
          [[[
            const ic = variables.info.length ? ' i3 i2 i1 ' : ' '
            const icm = variables.info.length ? ' i1 i2 i3 ' : ' '
            return variables.mirror ? `\"i${ic}n\"` : `\"n${icm}i\"`
          ]]]
      - grid-template-columns: >-
          [[[
            const ic = variables.info.length ? ' 1fr 1fr 1fr ' : ' '
            return variables.mirror ? `2fr${ic}5fr` : `5fr${ic}2fr`
          ]]]
      - grid-template-rows: 1fr
      - justify-items: start
      - align-items: center
      - padding: 4px
      - overflow: visible
    card:
      - cursor: default
      - --mdc-ripple-press-opacity: 0
      - min-height: 40px
      - height: "[[[ return variables.height ?? '45px' ]]]"
      - margin-left: "[[[ return variables.offset ]]]"
      - background-color: "[[[ return `rgb(from ${variables.background_color} r g b / ${variables.opacity})` ]]]"
      - box-shadow: none
      - border: none
      - border-radius: "[[[ return variables.mirror ? '10px 0 0 10px' : '0 10px 10px 0' ]]]"
      - border: >
          [[[
            if(variables.show_tab) {
              return variables.mirror ? `0 5px 0 0 solid ${variables.color}` : `0 0 0 5px solid ${variables.color}`
            }

            return 'none'
          ]]]
      - text-align: "[[[ return variables.mirror ? 'right' : 'left' ]]]"
      - padding: 0
    name:
      - opactiy: 1
      - justify-self: "[[[ return variables.mirror ? 'end' : 'start' ]]]"
      - text-transform: "[[[ return variables.uppercase ? 'uppercase' : 'none' ]]]"
      - margin-left: 10px
      - letter-spacing: 2px
      - line-height: 18px
      - font-size: 14px
      - text-align: "[[[ return variables.mirror ? 'right' : 'left' ]]]"
      - overflow: visible
      - color: "[[[ return variables.text_color ]]]"
    icon:
      - opacity: 1
      - position: absolute
      - color: "[[[ return variables.color ]]]"
      - justify-self: "[[[ return variables.mirror ? 'start' : 'end' ]]]"
      - text-align: "[[[ return variables.mirror ? 'left' : 'right' ]]]"
      - overflow: visible
      - height: "[[[ return variables.icon_size ]]]"
      - width: "[[[ return variables.icon_size ]]]"
      - max-height: 500%
    custom_fields:
      i1:
        - display: "[[[ return variables.info.length && variables.info[0]?.entity ? 'block' : 'none' ]]]"
      i2:
        - display: "[[[ return variables.info.length >= 2 && variables.info[1]?.entity ? 'block' : 'none' ]]]"
      i3:
        - display: "[[[ return variables.info.length == 3 && variables.info[2]?.entity ? 'block' : 'none' ]]]"

#########################################################################/