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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
| cards:
- cards: null
color: gold
entity: light.hue_1_2
hold_action:
action: more-info
icon: 'mdi:track-light'
show_last_changed: false
show_name: false
show_state: true
size: 1.7em
state:
- styles:
card:
- filter: opacity(50%)
- width: 110px
- height: 110px
icon:
- filter: grayscale(100%)
value: 'off'
- styles:
card:
- filter: opacity(50%)
- width: 110px
- height: 110px
value: 'on'
style: |
ha-card {
background-color: var(--background);
border-radius: 15px;
margin: 10px;
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 %}
}
styles:
card:
- font-size: 11.2px
- padding: 16px 16px 0px 16px
grid:
- grid-template-areas: '"i n" "s s" "l l"'
- grid-template-columns: 40% auto
- grid-template-rows: 1fr min-content min-content
- grid-row-gap: 16px
icon:
- text-align: left
- margin-right: 0.6em
- margin-left: 0px
img_cell:
- font-size: 14px
- justify-content: left
label:
- opacity: 0.8
- font-size: 11.2px
name:
- font-size: 16.8px
- max-height: 1.4em
- min-height: 1.4em
- opacity: 0.75
- justify-self: end
state:
- font-size: 2.4em
- font-weight: 300
type: 'custom:button-card'
- cards: null
color: gold
entity: light.hue_2_2
hold_action:
action: more-info
icon: 'mdi:track-light'
show_last_changed: false
show_name: false
show_state: true
size: 1.7em
state:
- styles:
card:
- filter: opacity(50%)
- width: 110px
- height: 110px
icon:
- filter: grayscale(100%)
value: 'off'
- styles:
card:
- filter: opacity(50%)
- width: 110px
- height: 110px
value: 'on'
style: |
ha-card {
background-color: var(--background);
border-radius: 15px;
margin: 10px;
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 %}
}
styles:
card:
- font-size: 11.2px
- padding: 16px 16px 0px 16px
grid:
- grid-template-areas: '"i n" "s s" "l l"'
- grid-template-columns: 40% auto
- grid-template-rows: 1fr min-content min-content
- grid-row-gap: 16px
icon:
- text-align: left
- margin-right: 0.6em
- margin-left: 0px
img_cell:
- font-size: 14px
- justify-content: left
label:
- opacity: 0.8
- font-size: 11.2px
name:
- font-size: 16.8px
- max-height: 1.4em
- min-height: 1.4em
- opacity: 0.75
- justify-self: end
state:
- font-size: 2.4em
- font-weight: 300
type: 'custom:button-card'
style: |
ha-card {
background-color: var(--background);
border-radius: 15px;
height: 110px
width: 110px
margin: 1px;
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 %}
}
title: Lampen Bank
type: horizontal-stack |