-
-
Notifications
You must be signed in to change notification settings - Fork 109
/
styles.js
164 lines (156 loc) · 3.84 KB
/
styles.js
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
import { css } from 'lit-element'
// prettier-ignore
export default css`
:host {
--st-font-size-xl: var(--paper-font-display3_-_font-size);
--st-font-size-l: var(--paper-font-display2_-_font-size);
--st-font-size-m: var(--paper-font-title_-_font-size);
--st-font-size-title: var(--ha-card-header-font-size, 24px);
--st-font-size-sensors: var(--paper-font-subhead_-_font-size, 16px);
--st-spacing: 4px;
--st-mode-active-background: var(--primary-color);
--st-mode-active-color: #fff;
--st-mode-background: #dff4fd;
}
ha-card {
-webkit-font-smoothing: var(
--paper-font-body1_-_-webkit-font-smoothing
);
font-size: var(--paper-font-body1_-_font-size);
font-weight: var(--paper-font-body1_-_font-weight);
line-height: var(--paper-font-body1_-_line-height);
padding-bottom: calc(var(--st-spacing) * 2);
}
ha-card.no-header {
padding: calc(var(--st-spacing) * 4) 0;
}
.not-found {
flex: 1;
background-color: yellow;
padding: calc(var(--st-spacing) * 4);
}
.body {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
place-items: center;
padding: 0 calc(var(--st-spacing) * 4);
padding-bottom: calc(var(--st-spacing) * 2);
}
.main {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.sensors {
display: grid;
grid: auto-flow / 1fr 2fr;
grid-gap: var(--st-spacing);
font-size: var(--st-font-size-sensors);
}
.sensor-heading {
text-align: right;
font-weight: 300;
padding-right: 8px;
padding-bottom: 4px;
}
.sensors td {
padding-bottom: 4px;
}
.sensors:empty {
display: none;
}
header {
display: flex;
flex-direction: row;
align-items: center;
padding: calc(var(--st-spacing) * 6)
calc(var(--st-spacing) * 4)
calc(var(--st-spacing) * 4);
}
.header__icon {
margin-right: calc(var(--st-spacing) * 2);
color: var(--paper-item-icon-color, #44739e);
}
.header__title {
font-size: var(--st-font-size-title);
line-height: var(--st-font-size-title);
-webkit-font-smoothing: var(
--paper-font-headline_-_-webkit-font-smoothing
);
font-weight: normal;
margin: 0;
align-self: left;
}
.current-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.current--value {
margin: 0;
font-size: var(--st-font-size-xl);
font-weight: 400;
line-height: var(--st-font-size-xl);
}
.current--value.updating {
color: var(--google-red-500);
}
.current--unit {
font-size: var(--st-font-size-m);
}
.thermostat-trigger {
padding: 0px;
}
.clickable {
cursor: pointer;
}
.modes {
display: grid;
grid-template-columns: auto;
grid-auto-flow: column;
grid-gap: 2px;
margin-top: calc(var(--st-spacing) * 2);
padding: var(--st-spacing);
}
.modes.heading {
grid-template-columns: min-content;
}
.mode-title {
padding: 0 16px;
place-self: center;
font-size: var(--st-font-size-sensors);
font-weight: 300;
white-space: nowrap;
}
.mode-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: center;
min-height: 24px;
padding: var(--st-spacing) 0;
background: var(--st-mode-background);
color: var(--sidebar-selected-icon-color);
cursor: pointer;
border-radius: var(--st-spacing);
}
.mode-item:hover {
background: var(--st-mode-active-background);
color: var(--st-mode-active-color);
opacity: 0.5;
}
.mode-item.active, .mode-item.active:hover {
background: var(--st-mode-active-background);
color: var(--st-mode-active-color);
opacity: 1;
}
.mode__icon {
--iron-icon-width: 24px;
--iron-icon-height: 24px;
display: block;
}
`