Skip to content

Commit 292753a

Browse files
DBuitDBuit
authored
style changes
1 parent ce754fe commit 292753a

File tree

2 files changed

+40
-24
lines changed

2 files changed

+40
-24
lines changed

‎dist/sidebar-card.js

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2924,20 +2924,22 @@ class SidebarCard extends LitElement {
29242924
${clock ? html `<h1 class="clock${title ? ' with-title' : ''}" style="${textColor ? 'color:' + textColor : ''}">${this.hass.states['sensor.time'].state}</h1>` : html ``}
29252925
${title ? html `<h1 style="${textColor ? 'color:' + textColor : ''}">${title}</h1>` : html ``}
29262926
2927-
${this.config.template ? html `
2928-
<ul class="template" style="${textColor ? 'color:' + textColor : ''}">
2929-
${this.templateLines.map(line => {
2930-
return html `<li>${line}</li>`;
2931-
})}
2932-
</ul>
2933-
` : html ``}
29342927
${sidebarMenu.length > 0 ? html `
29352928
<ul class="sidebarMenu" style="${sidebarMenuColor ? 'color:' + sidebarMenuColor : ''}">
29362929
${sidebarMenu.map(sidebarMenuItem => {
29372930
return html `<li @click="${e => this._menuAction(e)}" data-path="${sidebarMenuItem.navigation_path ? sidebarMenuItem.navigation_path : ''}" data-menuitem="${JSON.stringify(sidebarMenuItem)}" data->${sidebarMenuItem.name}</li>`;
29382931
})}
29392932
</ul>
29402933
` : html ``}
2934+
2935+
${this.config.template ? html `
2936+
<ul class="template" style="${textColor ? 'color:' + textColor : ''}">
2937+
${this.templateLines.map(line => {
2938+
return html `<li>${line}</li>`;
2939+
})}
2940+
</ul>
2941+
` : html ``}
2942+
29412943
</div>
29422944
`;
29432945
}
@@ -3030,14 +3032,17 @@ class SidebarCard extends LitElement {
30303032
}
30313033
.sidebarMenu {
30323034
list-style:none;
3033-
margin: 0;
3034-
padding: 0;
3035+
margin: 20px 0;
3036+
padding: 20px 0;
3037+
border-top: 1px solid rgba(255,255,255,0.2);
3038+
border-bottom: 1px solid rgba(255,255,255,0.2);
30353039
}
30363040
.sidebarMenu li {
30373041
padding: 10px 20px;
30383042
border-radius: 12px;
30393043
color:inherit;
3040-
font-size:20px;
3044+
font-size:18px;
3045+
line-height:18px;
30413046
font-weight:300;
30423047
white-space: normal;
30433048
display:block;
@@ -3048,12 +3053,14 @@ class SidebarCard extends LitElement {
30483053
30493054
h1 {
30503055
margin-top:0;
3051-
margin-bottom: 30px;
3056+
margin-bottom: 20px;
30523057
font-size: 32px;
3058+
line-height: 32px;
30533059
font-weight: 300;
30543060
}
30553061
h1.clock {
30563062
font-size:60px;
3063+
line-height: 60px;
30573064
}
30583065
h1.clock.with-title {
30593066
margin-bottom:0;
@@ -3067,7 +3074,8 @@ class SidebarCard extends LitElement {
30673074
.template li {
30683075
display:block;
30693076
color:inherit;
3070-
font-size:20px;
3077+
font-size:18px;
3078+
line-height:18px;
30713079
font-weight:300;
30723080
white-space: normal;
30733081
}

‎src/sidebar-card.ts

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -47,20 +47,22 @@ class SidebarCard extends LitElement {
4747
${clock ? html `<h1 class="clock${title ? ' with-title':''}" style="${textColor ? 'color:'+textColor : ''}">${this.hass.states['sensor.time'].state}</h1>`: html ``}
4848
${title ? html `<h1 style="${textColor ? 'color:'+textColor : ''}">${title}</h1>`: html ``}
4949
50-
${this.config.template ? html`
51-
<ul class="template" style="${textColor ? 'color:'+textColor : ''}">
52-
${this.templateLines.map(line => {
53-
return html`<li>${line}</li>`;
54-
})}
55-
</ul>
56-
` : html``}
5750
${sidebarMenu.length > 0 ? html`
5851
<ul class="sidebarMenu" style="${sidebarMenuColor ? 'color:'+sidebarMenuColor : ''}">
5952
${sidebarMenu.map(sidebarMenuItem => {
6053
return html`<li @click="${e => this._menuAction(e)}" data-path="${sidebarMenuItem.navigation_path ? sidebarMenuItem.navigation_path : ''}" data-menuitem="${JSON.stringify(sidebarMenuItem)}" data->${sidebarMenuItem.name}</li>`;
6154
})}
6255
</ul>
6356
` : html ``}
57+
58+
${this.config.template ? html`
59+
<ul class="template" style="${textColor ? 'color:'+textColor : ''}">
60+
${this.templateLines.map(line => {
61+
return html`<li>${line}</li>`;
62+
})}
63+
</ul>
64+
` : html``}
65+
6466
</div>
6567
`;
6668
}
@@ -162,14 +164,17 @@ class SidebarCard extends LitElement {
162164
}
163165
.sidebarMenu {
164166
list-style:none;
165-
margin: 0;
166-
padding: 0;
167+
margin: 20px 0;
168+
padding: 20px 0;
169+
border-top: 1px solid rgba(255,255,255,0.2);
170+
border-bottom: 1px solid rgba(255,255,255,0.2);
167171
}
168172
.sidebarMenu li {
169173
padding: 10px 20px;
170174
border-radius: 12px;
171175
color:inherit;
172-
font-size:20px;
176+
font-size:18px;
177+
line-height:18px;
173178
font-weight:300;
174179
white-space: normal;
175180
display:block;
@@ -180,12 +185,14 @@ class SidebarCard extends LitElement {
180185
181186
h1 {
182187
margin-top:0;
183-
margin-bottom: 30px;
188+
margin-bottom: 20px;
184189
font-size: 32px;
190+
line-height: 32px;
185191
font-weight: 300;
186192
}
187193
h1.clock {
188194
font-size:60px;
195+
line-height: 60px;
189196
}
190197
h1.clock.with-title {
191198
margin-bottom:0;
@@ -199,7 +206,8 @@ class SidebarCard extends LitElement {
199206
.template li {
200207
display:block;
201208
color:inherit;
202-
font-size:20px;
209+
font-size:18px;
210+
line-height:18px;
203211
font-weight:300;
204212
white-space: normal;
205213
}

0 commit comments

Comments
 (0)