Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-12-19 18:28:42 +00:00
Code Activity

Improve shadow and border for energy date picker (#28566)

Browse Source 
* Improve shadow and border for energy date picker

* Use variable

* Fix z-index

* Fix margin

* Improve mobile margin
This commit is contained in:
Paul Bottein
2025-12-16 13:05:47 +01:00
committed by GitHub
parent 4a486ff28b
commit 24a797e46a
1 changed files with 31 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/panels/energy/ha-panel-energy.ts
View File

@@ -255,7 +255,7 @@ class PanelEnergy extends LitElement {
</hui-root>
${showEnergySelector
? html`
<ha-card raised class="period-selector">
<ha-card class="period-selector">
<hui-energy-period-selector
.hass=${this.hass}
.collectionKey=${DEFAULT_ENERGY_COLLECTION_KEY}
@@ -670,26 +670,43 @@ class PanelEnergy extends LitElement {
justify-content: center;
}
hui-root.has-period-selector {
--view-container-padding-bottom: var(--ha-space-16);
--view-container-padding-bottom: var(--ha-space-18);
}
.period-selector {
position: fixed;
bottom: calc(var(--ha-space-2) + var(--safe-area-inset-bottom, 0px));
left: var(--mdc-drawer-width, 0);
right: var(--safe-area-inset-right, 0px);
inset-inline-start: var(--mdc-drawer-width, 0);
inset-inline-end: var(--safe-area-inset-right, 0px);
margin: var(--ha-space-2) auto;
z-index: 4;
bottom: max(var(--ha-space-4), var(--safe-area-inset-bottom, 0px));
left: max(
var(--mdc-drawer-width, 0px),
var(--safe-area-inset-left, 0px)
);
right: var(--safe-area-inset-right, 0);
inset-inline-start: max(
var(--mdc-drawer-width, 0px),
var(--safe-area-inset-left, 0px)
);
inset-inline-end: var(--safe-area-inset-right, 0);
margin: 0 auto;
max-width: calc(min(450px, 100% - var(--ha-space-4)));
box-sizing: border-box;
padding-left: calc(
var(--ha-space-4) + var(--safe-area-inset-left, 0px)
);
padding-left: var(--ha-space-2);
padding-right: 0;
padding-inline-start: calc(
var(--ha-space-4) + var(--safe-area-inset-left, 0px)
);
padding-inline-start: var(--ha-space-4);
padding-inline-end: 0;
--ha-card-box-shadow:
0px 3px 5px -1px rgba(0, 0, 0, 0.2),
0px 6px 10px 0px rgba(0, 0, 0, 0.14),
0px 1px 18px 0px rgba(0, 0, 0, 0.12);
--ha-card-border-color: var(--divider-color);
--ha-card-border-width: var(--ha-card-border-width, 1px);
}
@media all and (max-width: 450px), all and (max-height: 500px) {
hui-root.has-period-selector {
--view-container-padding-bottom: var(--ha-space-14);
}
.period-selector {
bottom: max(var(--ha-space-2), var(--safe-area-inset-bottom, 0px));
}
}
`,
];