Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-12-20 10:48:44 +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> </hui-root>
${showEnergySelector ${showEnergySelector
? html` ? html`
<ha-card raised class="period-selector"> <ha-card class="period-selector">
<hui-energy-period-selector <hui-energy-period-selector
.hass=${this.hass} .hass=${this.hass}
.collectionKey=${DEFAULT_ENERGY_COLLECTION_KEY} .collectionKey=${DEFAULT_ENERGY_COLLECTION_KEY}
@@ -670,26 +670,43 @@ class PanelEnergy extends LitElement {
justify-content: center; justify-content: center;
} }
hui-root.has-period-selector { hui-root.has-period-selector {
--view-container-padding-bottom: var(--ha-space-16); --view-container-padding-bottom: var(--ha-space-18);
} }
.period-selector { .period-selector {
position: fixed; position: fixed;
bottom: calc(var(--ha-space-2) + var(--safe-area-inset-bottom, 0px)); z-index: 4;
left: var(--mdc-drawer-width, 0); bottom: max(var(--ha-space-4), var(--safe-area-inset-bottom, 0px));
right: var(--safe-area-inset-right, 0px); left: max(
inset-inline-start: var(--mdc-drawer-width, 0); var(--mdc-drawer-width, 0px),
inset-inline-end: var(--safe-area-inset-right, 0px); var(--safe-area-inset-left, 0px)
margin: var(--ha-space-2) auto; );
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))); max-width: calc(min(450px, 100% - var(--ha-space-4)));
box-sizing: border-box; box-sizing: border-box;
padding-left: calc( padding-left: var(--ha-space-2);
var(--ha-space-4) + var(--safe-area-inset-left, 0px)
);
padding-right: 0; padding-right: 0;
padding-inline-start: calc( padding-inline-start: var(--ha-space-4);
var(--ha-space-4) + var(--safe-area-inset-left, 0px)
);
padding-inline-end: 0; 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));
}
} }
`, `,
]; ];