From ee10f9080d1454d53b806e0b4c8969fc0ec28fa6 Mon Sep 17 00:00:00 2001 From: Grzegorz Libiszewski <39136587+Gregman-js@users.noreply.github.com> Date: Thu, 13 Mar 2025 09:20:54 +0100 Subject: [PATCH] Unified safe area (insets) for Android and iOS (#23811) * feat: Introduce new css variables for safe area * feat: Replace all safe area env with variable * fix: CR fix move from derived styles to styles and rename --- demo/src/html/index.html.template | 4 ++-- hassio/src/dashboard/hassio-dashboard.ts | 6 ++--- .../dialogs/network/dialog-hassio-network.ts | 2 +- src/components/ha-dialog.ts | 4 ++-- src/components/ha-md-dialog.ts | 4 ++-- src/components/ha-sidebar.ts | 20 ++++++++-------- src/components/ha-toast.ts | 12 +++++----- .../more-info/controls/more-info-update.ts | 4 ++-- src/dialogs/more-info/ha-more-info-info.ts | 2 +- .../notifications/notification-drawer.ts | 10 ++++---- src/html/index.html.template | 4 ++-- src/layouts/hass-subpage.ts | 8 +++---- src/layouts/hass-tabs-subpage-data-table.ts | 4 ++-- src/layouts/hass-tabs-subpage.ts | 24 +++++++++---------- src/layouts/home-assistant-main.ts | 2 +- .../config/automation/ha-automation-editor.ts | 2 +- .../overview/ha-backup-overview-backups.ts | 2 +- .../config/core/ha-config-section-updates.ts | 2 +- .../core/ha-config-system-navigation.ts | 4 ++-- .../config/dashboard/ha-config-dashboard.ts | 6 ++--- .../mqtt/dialog-mqtt-device-debug-info.ts | 4 ++-- .../entities/entity-registry-settings.ts | 2 +- src/panels/config/info/ha-config-info.ts | 2 +- .../matter/dialog-matter-add-device.ts | 4 ++-- .../repairs/ha-config-repairs-dashboard.ts | 2 +- src/panels/config/scene/ha-scene-editor.ts | 2 +- src/panels/config/script/ha-script-editor.ts | 2 +- .../voice-assistants/dialog-expose-entity.ts | 4 ++-- .../config/zone/dialog-home-zone-detail.ts | 2 +- src/panels/config/zone/dialog-zone-detail.ts | 2 +- .../action/developer-tools-action.ts | 16 ++++++------- .../assist/developer-tools-assist.ts | 8 +++---- .../event/developer-tools-event.ts | 8 +++---- .../ha-panel-developer-tools.ts | 14 +++++------ .../state/developer-tools-state.ts | 8 +++---- .../statistics/developer-tools-statistics.ts | 4 ++-- .../template/developer-tools-template.ts | 12 +++++----- .../developer-yaml-config.ts | 8 +++---- src/panels/energy/ha-panel-energy.ts | 14 +++++------ src/panels/history/ha-panel-history.ts | 2 +- .../unused-entities/hui-unused-entities.ts | 8 +++---- src/panels/lovelace/hui-root.ts | 16 ++++++------- src/panels/lovelace/views/hui-masonry-view.ts | 6 ++--- src/panels/lovelace/views/hui-panel-view.ts | 6 ++--- src/panels/lovelace/views/hui-sidebar-view.ts | 6 ++--- .../media-browser/ha-bar-media-player.ts | 2 +- .../profile/ha-profile-section-general.ts | 2 +- .../profile/ha-profile-section-security.ts | 2 +- src/resources/styles.ts | 20 ++++++++++++++-- 49 files changed, 165 insertions(+), 149 deletions(-) diff --git a/demo/src/html/index.html.template b/demo/src/html/index.html.template index adcae133fb..09a6e7b514 100644 --- a/demo/src/html/index.html.template +++ b/demo/src/html/index.html.template @@ -68,7 +68,7 @@ } #ha-launch-screen .ha-launch-screen-spacer-top { flex: 1; - margin-top: calc( 2 * max(env(safe-area-inset-bottom), 48px) + 46px ); + margin-top: calc( 2 * max(var(--safe-area-inset-bottom), 48px) + 46px ); padding-top: 48px; } #ha-launch-screen .ha-launch-screen-spacer-bottom { @@ -76,7 +76,7 @@ padding-top: 48px; } .ohf-logo { - margin: max(env(safe-area-inset-bottom), 48px) 0; + margin: max(var(--safe-area-inset-bottom), 48px) 0; display: flex; flex-direction: column; align-items: center; diff --git a/hassio/src/dashboard/hassio-dashboard.ts b/hassio/src/dashboard/hassio-dashboard.ts index 531f171541..4cbf3c97b4 100644 --- a/hassio/src/dashboard/hassio-dashboard.ts +++ b/hassio/src/dashboard/hassio-dashboard.ts @@ -132,9 +132,9 @@ class HassioDashboard extends LitElement { } ha-fab.non-tabs { position: fixed; - right: calc(16px + env(safe-area-inset-right)); - bottom: calc(16px + env(safe-area-inset-bottom)); - inset-inline-end: calc(16px + env(safe-area-inset-right)); + right: calc(16px + var(--safe-area-inset-right)); + bottom: calc(16px + var(--safe-area-inset-bottom)); + inset-inline-end: calc(16px + var(--safe-area-inset-right)); inset-inline-start: initial; z-index: 1; } diff --git a/hassio/src/dialogs/network/dialog-hassio-network.ts b/hassio/src/dialogs/network/dialog-hassio-network.ts index fc9e1acf3f..30ee7db3bd 100644 --- a/hassio/src/dialogs/network/dialog-hassio-network.ts +++ b/hassio/src/dialogs/network/dialog-hassio-network.ts @@ -621,7 +621,7 @@ export class DialogHassioNetwork display: flex; justify-content: space-between; padding: 8px; - padding-bottom: max(env(safe-area-inset-bottom), 8px); + padding-bottom: max(var(--safe-area-inset-bottom), 8px); background-color: var(--mdc-theme-surface, #fff); } .warning { diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts index e326e6b19b..20a91e2621 100644 --- a/src/components/ha-dialog.ts +++ b/src/components/ha-dialog.ts @@ -90,7 +90,7 @@ export class HaDialog extends DialogBase { } .mdc-dialog__actions { justify-content: var(--justify-action-buttons, flex-end); - padding-bottom: max(env(safe-area-inset-bottom), 24px); + padding-bottom: max(var(--safe-area-inset-bottom), 24px); } .mdc-dialog__actions span:nth-child(1) { flex: var(--secondary-action-button-flex, unset); @@ -120,7 +120,7 @@ export class HaDialog extends DialogBase { :host([hideactions]) .mdc-dialog .mdc-dialog__content { padding-bottom: max( var(--dialog-content-padding, 24px), - env(safe-area-inset-bottom) + var(--safe-area-inset-bottom) ); } .mdc-dialog .mdc-dialog__surface { diff --git a/src/components/ha-md-dialog.ts b/src/components/ha-md-dialog.ts index 06adb5ad6d..99d830b5b0 100644 --- a/src/components/ha-md-dialog.ts +++ b/src/components/ha-md-dialog.ts @@ -167,10 +167,10 @@ export class HaMdDialog extends MdDialog { @media all and (max-width: 450px), all and (max-height: 500px) { :host(:not([type="alert"])) { min-width: calc( - 100vw - env(safe-area-inset-right) - env(safe-area-inset-left) + 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left) ); max-width: calc( - 100vw - env(safe-area-inset-right) - env(safe-area-inset-left) + 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left) ); min-height: 100%; max-height: 100%; diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts index 680bd37d7f..5bf143addc 100644 --- a/src/components/ha-sidebar.ts +++ b/src/components/ha-sidebar.ts @@ -875,12 +875,12 @@ class HaSidebar extends SubscribeMixin(LitElement) { ); font-size: 20px; align-items: center; - padding-left: calc(4px + env(safe-area-inset-left)); - padding-inline-start: calc(4px + env(safe-area-inset-left)); + padding-left: calc(4px + var(--safe-area-inset-left)); + padding-inline-start: calc(4px + var(--safe-area-inset-left)); padding-inline-end: initial; } :host([expanded]) .menu { - width: calc(256px + env(safe-area-inset-left)); + width: calc(256px + var(--safe-area-inset-left)); } .menu ha-icon-button { color: var(--sidebar-icon-color); @@ -917,12 +917,12 @@ class HaSidebar extends SubscribeMixin(LitElement) { box-sizing: border-box; height: calc(100% - var(--header-height) - 132px); height: calc( - 100% - var(--header-height) - 132px - env(safe-area-inset-bottom) + 100% - var(--header-height) - 132px - var(--safe-area-inset-bottom) ); overflow-x: hidden; background: none; - margin-left: env(safe-area-inset-left); - margin-inline-start: env(safe-area-inset-left); + margin-left: var(--safe-area-inset-left); + margin-inline-start: var(--safe-area-inset-left); margin-inline-end: initial; } @@ -1022,8 +1022,8 @@ class HaSidebar extends SubscribeMixin(LitElement) { .notifications-container, .configuration-container { display: flex; - margin-left: env(safe-area-inset-left); - margin-inline-start: env(safe-area-inset-left); + margin-left: var(--safe-area-inset-left); + margin-inline-start: var(--safe-area-inset-left); margin-inline-end: initial; } .notifications { @@ -1034,8 +1034,8 @@ class HaSidebar extends SubscribeMixin(LitElement) { flex: 1; } .profile { - margin-left: env(safe-area-inset-left); - margin-inline-start: env(safe-area-inset-left); + margin-left: var(--safe-area-inset-left); + margin-inline-start: var(--safe-area-inset-left); margin-inline-end: initial; } .profile paper-icon-item { diff --git a/src/components/ha-toast.ts b/src/components/ha-toast.ts index f0f94cbea4..8fd2dffae2 100644 --- a/src/components/ha-toast.ts +++ b/src/components/ha-toast.ts @@ -14,9 +14,9 @@ export class HaToast extends Snackbar { .mdc-snackbar { margin: 8px; - right: calc(8px + env(safe-area-inset-right)); - bottom: calc(8px + env(safe-area-inset-bottom)); - left: calc(8px + env(safe-area-inset-left)); + right: calc(8px + var(--safe-area-inset-right)); + bottom: calc(8px + var(--safe-area-inset-bottom)); + left: calc(8px + var(--safe-area-inset-left)); } .mdc-snackbar__surface { @@ -33,9 +33,9 @@ export class HaToast extends Snackbar { @media all and (max-width: 450px), all and (max-height: 500px) { .mdc-snackbar { - right: env(safe-area-inset-right); - bottom: env(safe-area-inset-bottom); - left: env(safe-area-inset-left); + right: var(--safe-area-inset-right); + bottom: var(--safe-area-inset-bottom); + left: var(--safe-area-inset-left); } .mdc-snackbar__surface { min-width: 100%; diff --git a/src/dialogs/more-info/controls/more-info-update.ts b/src/dialogs/more-info/controls/more-info-update.ts index 908e34d5e0..dea5cf34ec 100644 --- a/src/dialogs/more-info/controls/more-info-update.ts +++ b/src/dialogs/more-info/controls/more-info-update.ts @@ -434,8 +434,8 @@ class MoreInfoUpdate extends LitElement { position: sticky; bottom: 0; margin: 0 -24px 0 -24px; - margin-bottom: calc(-1 * max(env(safe-area-inset-bottom), 24px)); - padding-bottom: env(safe-area-inset-bottom); + margin-bottom: calc(-1 * max(var(--safe-area-inset-bottom), 24px)); + padding-bottom: var(--safe-area-inset-bottom); box-sizing: border-box; display: flex; flex-direction: column; diff --git a/src/dialogs/more-info/ha-more-info-info.ts b/src/dialogs/more-info/ha-more-info-info.ts index a87d3d06f8..bc2ba2f559 100644 --- a/src/dialogs/more-info/ha-more-info-info.ts +++ b/src/dialogs/more-info/ha-more-info-info.ts @@ -128,7 +128,7 @@ export class MoreInfoInfo extends LitElement { flex-direction: column; flex: 1; padding: 24px; - padding-bottom: max(env(safe-area-inset-bottom), 24px); + padding-bottom: max(var(--safe-area-inset-bottom), 24px); } [data-domain="camera"] .content { diff --git a/src/dialogs/notifications/notification-drawer.ts b/src/dialogs/notifications/notification-drawer.ts index a3c83bcd69..bbb41039eb 100644 --- a/src/dialogs/notifications/notification-drawer.ts +++ b/src/dialogs/notifications/notification-drawer.ts @@ -159,11 +159,11 @@ export class HuiNotificationDrawer extends LitElement { .notifications { overflow-y: auto; padding-top: 16px; - padding-left: env(safe-area-inset-left); - padding-right: env(safe-area-inset-right); - padding-inline-start: env(safe-area-inset-left); - padding-inline-end: env(safe-area-inset-right); - padding-bottom: env(safe-area-inset-bottom); + padding-left: var(--safe-area-inset-left); + padding-right: var(--safe-area-inset-right); + padding-inline-start: var(--safe-area-inset-left); + padding-inline-end: var(--safe-area-inset-right); + padding-bottom: var(--safe-area-inset-bottom); height: calc(100% - 1px - var(--header-height)); box-sizing: border-box; background-color: var(--primary-background-color); diff --git a/src/html/index.html.template b/src/html/index.html.template index 6c2aac0bdf..7ebaf349e6 100644 --- a/src/html/index.html.template +++ b/src/html/index.html.template @@ -44,7 +44,7 @@ } #ha-launch-screen .ha-launch-screen-spacer-top { flex: 1; - margin-top: calc( 2 * max(env(safe-area-inset-bottom), 48px) + 46px ); + margin-top: calc( 2 * max(var(--safe-area-inset-bottom), 48px) + 46px ); padding-top: 48px; } #ha-launch-screen .ha-launch-screen-spacer-bottom { @@ -52,7 +52,7 @@ padding-top: 48px; } .ohf-logo { - margin: max(env(safe-area-inset-bottom), 48px) 0; + margin: max(var(--safe-area-inset-bottom), 48px) 0; display: flex; flex-direction: column; align-items: center; diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts index 2c411b0478..b11215f7ad 100644 --- a/src/layouts/hass-subpage.ts +++ b/src/layouts/hass-subpage.ts @@ -148,10 +148,10 @@ class HassSubpage extends LitElement { #fab { position: absolute; - right: calc(16px + env(safe-area-inset-right)); - inset-inline-end: calc(16px + env(safe-area-inset-right)); + right: calc(16px + var(--safe-area-inset-right)); + inset-inline-end: calc(16px + var(--safe-area-inset-right)); inset-inline-start: initial; - bottom: calc(16px + env(safe-area-inset-bottom)); + bottom: calc(16px + var(--safe-area-inset-bottom)); z-index: 1; display: flex; flex-wrap: wrap; @@ -159,7 +159,7 @@ class HassSubpage extends LitElement { gap: 8px; } :host([narrow]) #fab.tabs { - bottom: calc(84px + env(safe-area-inset-bottom)); + bottom: calc(84px + var(--safe-area-inset-bottom)); } #fab[is-wide] { bottom: 24px; diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts index db63c30c7c..7c4eb6dfef 100644 --- a/src/layouts/hass-tabs-subpage-data-table.ts +++ b/src/layouts/hass-tabs-subpage-data-table.ts @@ -903,10 +903,10 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) { ha-dialog { --mdc-dialog-min-width: calc( - 100vw - env(safe-area-inset-right) - env(safe-area-inset-left) + 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left) ); --mdc-dialog-max-width: calc( - 100vw - env(safe-area-inset-right) - env(safe-area-inset-left) + 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left) ); --mdc-dialog-min-height: 100%; --mdc-dialog-max-height: 100%; diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts index ca930a01b5..8881407b9f 100644 --- a/src/layouts/hass-tabs-subpage.ts +++ b/src/layouts/hass-tabs-subpage.ts @@ -280,7 +280,7 @@ class HassTabsSubpage extends LitElement { z-index: 2; font-size: 12px; width: 100%; - padding-bottom: env(safe-area-inset-bottom); + padding-bottom: var(--safe-area-inset-bottom); } #tabbar:not(.bottom-bar) { @@ -312,12 +312,12 @@ class HassTabsSubpage extends LitElement { .content { position: relative; width: calc( - 100% - env(safe-area-inset-left) - env(safe-area-inset-right) + 100% - var(--safe-area-inset-left) - var(--safe-area-inset-right) ); - margin-left: env(safe-area-inset-left); - margin-right: env(safe-area-inset-right); - margin-inline-start: env(safe-area-inset-left); - margin-inline-end: env(safe-area-inset-right); + margin-left: var(--safe-area-inset-left); + margin-right: var(--safe-area-inset-right); + margin-inline-start: var(--safe-area-inset-left); + margin-inline-end: var(--safe-area-inset-right); overflow: auto; -webkit-overflow-scrolling: touch; } @@ -325,23 +325,23 @@ class HassTabsSubpage extends LitElement { :host([narrow]) .content { height: calc(100% - var(--header-height)); height: calc( - 100% - var(--header-height) - env(safe-area-inset-bottom) + 100% - var(--header-height) - var(--safe-area-inset-bottom) ); } :host([narrow]) .content.tabs { height: calc(100% - 2 * var(--header-height)); height: calc( - 100% - 2 * var(--header-height) - env(safe-area-inset-bottom) + 100% - 2 * var(--header-height) - var(--safe-area-inset-bottom) ); } #fab { position: fixed; - right: calc(16px + env(safe-area-inset-right)); - inset-inline-end: calc(16px + env(safe-area-inset-right)); + right: calc(16px + var(--safe-area-inset-right)); + inset-inline-end: calc(16px + var(--safe-area-inset-right)); inset-inline-start: initial; - bottom: calc(16px + env(safe-area-inset-bottom)); + bottom: calc(16px + var(--safe-area-inset-bottom)); z-index: 1; display: flex; flex-wrap: wrap; @@ -349,7 +349,7 @@ class HassTabsSubpage extends LitElement { gap: 8px; } :host([narrow]) #fab.tabs { - bottom: calc(84px + env(safe-area-inset-bottom)); + bottom: calc(84px + var(--safe-area-inset-bottom)); } #fab[is-wide] { bottom: 24px; diff --git a/src/layouts/home-assistant-main.ts b/src/layouts/home-assistant-main.ts index 831ac020c8..3d0586248a 100644 --- a/src/layouts/home-assistant-main.ts +++ b/src/layouts/home-assistant-main.ts @@ -172,7 +172,7 @@ export class HomeAssistantMain extends LitElement { --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width)); } :host([expanded]) { - --mdc-drawer-width: calc(256px + env(safe-area-inset-left)); + --mdc-drawer-width: calc(256px + var(--safe-area-inset-left)); } :host([modal]) { --mdc-drawer-width: unset; diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index 77ab99ab88..5b0bc9aaf7 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/src/panels/config/automation/ha-automation-editor.ts @@ -1098,7 +1098,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin( } ha-fab { position: relative; - bottom: calc(-80px - env(safe-area-inset-bottom)); + bottom: calc(-80px - var(--safe-area-inset-bottom)); transition: bottom 0.3s; } ha-fab.dirty { diff --git a/src/panels/config/backup/components/overview/ha-backup-overview-backups.ts b/src/panels/config/backup/components/overview/ha-backup-overview-backups.ts index c140713aba..583f6c6d57 100644 --- a/src/panels/config/backup/components/overview/ha-backup-overview-backups.ts +++ b/src/panels/config/backup/components/overview/ha-backup-overview-backups.ts @@ -122,7 +122,7 @@ class HaBackupOverviewBackups extends LitElement { gap: 24px; display: flex; flex-direction: column; - margin-bottom: calc(72px + env(safe-area-inset-bottom)); + margin-bottom: calc(72px + var(--safe-area-inset-bottom)); } .card-actions { display: flex; diff --git a/src/panels/config/core/ha-config-section-updates.ts b/src/panels/config/core/ha-config-section-updates.ts index a79c1693f6..8fd085e024 100644 --- a/src/panels/config/core/ha-config-section-updates.ts +++ b/src/panels/config/core/ha-config-section-updates.ts @@ -195,7 +195,7 @@ class HaConfigSectionUpdates extends LitElement { justify-content: space-between; flex-direction: column; display: flex; - margin-bottom: max(24px, env(safe-area-inset-bottom)); + margin-bottom: max(24px, var(--safe-area-inset-bottom)); } .card-content { diff --git a/src/panels/config/core/ha-config-system-navigation.ts b/src/panels/config/core/ha-config-system-navigation.ts index 3f6675e5b1..36e256c4f7 100644 --- a/src/panels/config/core/ha-config-system-navigation.ts +++ b/src/panels/config/core/ha-config-system-navigation.ts @@ -223,7 +223,7 @@ class HaConfigSystemNavigation extends LitElement { haStyle, css` :host(:not([narrow])) ha-card { - margin-bottom: max(24px, env(safe-area-inset-bottom)); + margin-bottom: max(24px, var(--safe-area-inset-bottom)); } ha-config-section { @@ -235,7 +235,7 @@ class HaConfigSystemNavigation extends LitElement { ha-card { overflow: hidden; margin-bottom: 24px; - margin-bottom: max(24px, env(safe-area-inset-bottom)); + margin-bottom: max(24px, var(--safe-area-inset-bottom)); } ha-card a { diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts index 726434b6de..da2bbfbea5 100644 --- a/src/panels/config/dashboard/ha-config-dashboard.ts +++ b/src/panels/config/dashboard/ha-config-dashboard.ts @@ -363,10 +363,10 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) { haStyle, css` ha-card:last-child { - margin-bottom: env(safe-area-inset-bottom); + margin-bottom: var(--safe-area-inset-bottom); } :host(:not([narrow])) ha-card:last-child { - margin-bottom: max(24px, env(safe-area-inset-bottom)); + margin-bottom: max(24px, var(--safe-area-inset-bottom)); } ha-config-section { margin: auto; @@ -401,7 +401,7 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) { } ha-tip { - margin-bottom: max(env(safe-area-inset-bottom), 8px); + margin-bottom: max(var(--safe-area-inset-bottom), 8px); } .new { diff --git a/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts b/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts index dd6d6a2c52..6e4069db84 100644 --- a/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts +++ b/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts @@ -240,10 +240,10 @@ class DialogMQTTDeviceDebugInfo extends LitElement { @media all and (max-width: 450px), all and (max-height: 500px) { ha-dialog { --mdc-dialog-min-width: calc( - 100vw - env(safe-area-inset-right) - env(safe-area-inset-left) + 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left) ); --mdc-dialog-max-width: calc( - 100vw - env(safe-area-inset-right) - env(safe-area-inset-left) + 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left) ); } } diff --git a/src/panels/config/entities/entity-registry-settings.ts b/src/panels/config/entities/entity-registry-settings.ts index 26dc31f7a4..eb4213132e 100644 --- a/src/panels/config/entities/entity-registry-settings.ts +++ b/src/panels/config/entities/entity-registry-settings.ts @@ -253,7 +253,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) { display: flex; padding: 8px 16px 8px 24px; justify-content: space-between; - padding-bottom: max(env(safe-area-inset-bottom), 8px); + padding-bottom: max(var(--safe-area-inset-bottom), 8px); background-color: var(--mdc-theme-surface, #fff); border-top: 1px solid var(--divider-color); position: sticky; diff --git a/src/panels/config/info/ha-config-info.ts b/src/panels/config/info/ha-config-info.ts index 7823c48a5d..1ae60fc7fc 100644 --- a/src/panels/config/info/ha-config-info.ts +++ b/src/panels/config/info/ha-config-info.ts @@ -322,7 +322,7 @@ class HaConfigInfo extends LitElement { } .pages { - margin-bottom: max(24px, env(safe-area-inset-bottom)); + margin-bottom: max(24px, var(--safe-area-inset-bottom)); padding: 4px 0; } diff --git a/src/panels/config/integrations/integration-panels/matter/dialog-matter-add-device.ts b/src/panels/config/integrations/integration-panels/matter/dialog-matter-add-device.ts index b4ce0b7e68..44649761ed 100644 --- a/src/panels/config/integrations/integration-panels/matter/dialog-matter-add-device.ts +++ b/src/panels/config/integrations/integration-panels/matter/dialog-matter-add-device.ts @@ -222,10 +222,10 @@ class DialogMatterAddDevice extends LitElement { } ha-dialog { --mdc-dialog-min-width: calc( - 100vw - env(safe-area-inset-right) - env(safe-area-inset-left) + 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left) ); --mdc-dialog-max-width: calc( - 100vw - env(safe-area-inset-right) - env(safe-area-inset-left) + 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left) ); } } diff --git a/src/panels/config/repairs/ha-config-repairs-dashboard.ts b/src/panels/config/repairs/ha-config-repairs-dashboard.ts index 5aabf9a51c..f9bc1d393d 100644 --- a/src/panels/config/repairs/ha-config-repairs-dashboard.ts +++ b/src/panels/config/repairs/ha-config-repairs-dashboard.ts @@ -182,7 +182,7 @@ class HaConfigRepairsDashboard extends SubscribeMixin(LitElement) { justify-content: space-between; flex-direction: column; display: flex; - margin-bottom: max(24px, env(safe-area-inset-bottom)); + margin-bottom: max(24px, var(--safe-area-inset-bottom)); } .card-content { diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts index 36f0d1fb8a..77a8cb2d2a 100644 --- a/src/panels/config/scene/ha-scene-editor.ts +++ b/src/panels/config/scene/ha-scene-editor.ts @@ -1254,7 +1254,7 @@ export class HaSceneEditor extends PreventUnsavedMixin( } ha-fab { position: relative; - bottom: calc(-80px - env(safe-area-inset-bottom)); + bottom: calc(-80px - var(--safe-area-inset-bottom)); transition: bottom 0.3s; } ha-alert { diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts index 11e50a36ba..ce65e33f45 100644 --- a/src/panels/config/script/ha-script-editor.ts +++ b/src/panels/config/script/ha-script-editor.ts @@ -1066,7 +1066,7 @@ export class HaScriptEditor extends SubscribeMixin( } ha-fab { position: relative; - bottom: calc(-80px - env(safe-area-inset-bottom)); + bottom: calc(-80px - var(--safe-area-inset-bottom)); transition: bottom 0.3s; } ha-fab.dirty { diff --git a/src/panels/config/voice-assistants/dialog-expose-entity.ts b/src/panels/config/voice-assistants/dialog-expose-entity.ts index d8b523c7ef..2d3efd77ac 100644 --- a/src/panels/config/voice-assistants/dialog-expose-entity.ts +++ b/src/panels/config/voice-assistants/dialog-expose-entity.ts @@ -235,10 +235,10 @@ class DialogExposeEntity extends LitElement { @media all and (max-width: 500px), all and (max-height: 500px) { ha-dialog { --mdc-dialog-min-width: calc( - 100vw - env(safe-area-inset-right) - env(safe-area-inset-left) + 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left) ); --mdc-dialog-max-width: calc( - 100vw - env(safe-area-inset-right) - env(safe-area-inset-left) + 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left) ); --mdc-dialog-min-height: 100%; --mdc-dialog-max-height: 100%; diff --git a/src/panels/config/zone/dialog-home-zone-detail.ts b/src/panels/config/zone/dialog-home-zone-detail.ts index 0a25f8d713..d82eee00b6 100644 --- a/src/panels/config/zone/dialog-home-zone-detail.ts +++ b/src/panels/config/zone/dialog-home-zone-detail.ts @@ -130,7 +130,7 @@ class DialogHomeZoneDetail extends LitElement { @media all and (max-width: 450px), all and (max-height: 500px) { ha-dialog { --mdc-dialog-min-width: calc( - 100vw - env(safe-area-inset-right) - env(safe-area-inset-left) + 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left) ); } } diff --git a/src/panels/config/zone/dialog-zone-detail.ts b/src/panels/config/zone/dialog-zone-detail.ts index 065d1e5149..00e3698e1d 100644 --- a/src/panels/config/zone/dialog-zone-detail.ts +++ b/src/panels/config/zone/dialog-zone-detail.ts @@ -215,7 +215,7 @@ class DialogZoneDetail extends LitElement { @media all and (max-width: 450px), all and (max-height: 500px) { ha-dialog { --mdc-dialog-min-width: calc( - 100vw - env(safe-area-inset-right) - env(safe-area-inset-left) + 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left) ); } } diff --git a/src/panels/developer-tools/action/developer-tools-action.ts b/src/panels/developer-tools/action/developer-tools-action.ts index 30047c43b8..6bf3b34104 100644 --- a/src/panels/developer-tools/action/developer-tools-action.ts +++ b/src/panels/developer-tools/action/developer-tools-action.ts @@ -597,19 +597,19 @@ class HaPanelDevAction extends LitElement { css` .content { padding: 16px; - padding: max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-right)) - max(16px, env(safe-area-inset-bottom)) - max(16px, env(safe-area-inset-left)); + padding: max(16px, var(--safe-area-inset-top)) + max(16px, var(--safe-area-inset-right)) + max(16px, var(--safe-area-inset-bottom)) + max(16px, var(--safe-area-inset-left)); max-width: 1200px; margin: auto; } .button-row { padding: 8px 16px; - padding: max(8px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-right)) - max(8px, env(safe-area-inset-bottom)) - max(16px, env(safe-area-inset-left)); + padding: max(8px, var(--safe-area-inset-top)) + max(16px, var(--safe-area-inset-right)) + max(8px, var(--safe-area-inset-bottom)) + max(16px, var(--safe-area-inset-left)); border-top: 1px solid var(--divider-color); border-bottom: 1px solid var(--divider-color); background: var(--card-background-color); diff --git a/src/panels/developer-tools/assist/developer-tools-assist.ts b/src/panels/developer-tools/assist/developer-tools-assist.ts index a10e169ea2..35b93daa6b 100644 --- a/src/panels/developer-tools/assist/developer-tools-assist.ts +++ b/src/panels/developer-tools/assist/developer-tools-assist.ts @@ -235,10 +235,10 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) { css` .content { padding: 28px 20px 16px; - padding: max(28px, calc(12px + env(safe-area-inset-top))) - max(20px, calc(4px + env(safe-area-inset-right))) - max(16px, env(safe-area-inset-bottom)) - max(20px, calc(4px + env(safe-area-inset-left))); + padding: max(28px, calc(12px + var(--safe-area-inset-top))) + max(20px, calc(4px + var(--safe-area-inset-right))) + max(16px, var(--safe-area-inset-bottom)) + max(20px, calc(4px + var(--safe-area-inset-left))); max-width: 1040px; margin: 0 auto; } diff --git a/src/panels/developer-tools/event/developer-tools-event.ts b/src/panels/developer-tools/event/developer-tools-event.ts index abad0c3701..c31af58dcd 100644 --- a/src/panels/developer-tools/event/developer-tools-event.ts +++ b/src/panels/developer-tools/event/developer-tools-event.ts @@ -148,10 +148,10 @@ class HaPanelDevEvent extends LitElement { .content { gap: 16px; padding: 16px; - padding: max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-right)) - max(16px, env(safe-area-inset-bottom)) - max(16px, env(safe-area-inset-left)); + padding: max(16px, var(--safe-area-inset-top)) + max(16px, var(--safe-area-inset-right)) + max(16px, var(--safe-area-inset-bottom)) + max(16px, var(--safe-area-inset-left)); max-width: 1200px; margin: auto; } diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts index 23b299cfcd..23f60a59c5 100644 --- a/src/panels/developer-tools/ha-panel-developer-tools.ts +++ b/src/panels/developer-tools/ha-panel-developer-tools.ts @@ -127,7 +127,7 @@ class PanelDeveloperTools extends LitElement { z-index: 4; background-color: var(--app-header-background-color); width: var(--mdc-top-app-bar-width, 100%); - padding-top: env(safe-area-inset-top); + padding-top: var(--safe-area-inset-top); color: var(--app-header-text-color, white); border-bottom: var(--app-header-border-bottom, none); -webkit-backdrop-filter: var(--app-header-backdrop-filter, none); @@ -155,17 +155,17 @@ class PanelDeveloperTools extends LitElement { developer-tools-router { display: block; padding-top: calc( - var(--header-height) + 48px + env(safe-area-inset-top) + var(--header-height) + 48px + var(--safe-area-inset-top) ); - padding-bottom: calc(env(safe-area-inset-bottom)); + padding-bottom: calc(var(--safe-area-inset-bottom)); flex: 1 1 100%; max-width: 100%; } paper-tabs { - margin-left: max(env(safe-area-inset-left), 24px); - margin-right: max(env(safe-area-inset-right), 24px); - margin-inline-start: max(env(safe-area-inset-left), 24px); - margin-inline-end: max(env(safe-area-inset-right), 24px); + margin-left: max(var(--safe-area-inset-left), 24px); + margin-right: max(var(--safe-area-inset-right), 24px); + margin-inline-start: max(var(--safe-area-inset-left), 24px); + margin-inline-end: max(var(--safe-area-inset-right), 24px); --paper-tabs-selection-bar-color: var( --app-header-selection-bar-color, var(--app-header-text-color, #fff) diff --git a/src/panels/developer-tools/state/developer-tools-state.ts b/src/panels/developer-tools/state/developer-tools-state.ts index 3137674b23..c119091a73 100644 --- a/src/panels/developer-tools/state/developer-tools-state.ts +++ b/src/panels/developer-tools/state/developer-tools-state.ts @@ -576,10 +576,10 @@ class HaPanelDevState extends LitElement { -moz-user-select: initial; display: block; padding: 16px; - padding: max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-right)) - max(16px, env(safe-area-inset-bottom)) - max(16px, env(safe-area-inset-left)); + padding: max(16px, var(--safe-area-inset-top)) + max(16px, var(--safe-area-inset-right)) + max(16px, var(--safe-area-inset-bottom)) + max(16px, var(--safe-area-inset-left)); } ha-textfield { diff --git a/src/panels/developer-tools/statistics/developer-tools-statistics.ts b/src/panels/developer-tools/statistics/developer-tools-statistics.ts index ac06d1fc9b..0e09a412c0 100644 --- a/src/panels/developer-tools/statistics/developer-tools-statistics.ts +++ b/src/panels/developer-tools/statistics/developer-tools-statistics.ts @@ -792,10 +792,10 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) { ha-dialog { --mdc-dialog-min-width: calc( - 100vw - env(safe-area-inset-right) - env(safe-area-inset-left) + 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left) ); --mdc-dialog-max-width: calc( - 100vw - env(safe-area-inset-right) - env(safe-area-inset-left) + 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left) ); --mdc-dialog-min-height: 100%; --mdc-dialog-max-height: 100%; diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts index 3a4a971744..a817c828ce 100644 --- a/src/panels/developer-tools/template/developer-tools-template.ts +++ b/src/panels/developer-tools/template/developer-tools-template.ts @@ -277,18 +277,18 @@ ${type === "object" .content { gap: 16px; padding: 16px; - padding: max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-right)) - max(16px, env(safe-area-inset-bottom)) - max(16px, env(safe-area-inset-left)); + padding: max(16px, var(--safe-area-inset-top)) + max(16px, var(--safe-area-inset-right)) + max(16px, var(--safe-area-inset-bottom)) + max(16px, var(--safe-area-inset-left)); } .content.horizontal { --code-mirror-max-height: calc( 100vh - var(--header-height) - (var(--paper-font-body1_-_line-height) * 3) - (1em * 2) - - (max(16px, env(safe-area-inset-top)) * 2) - - (max(16px, env(safe-area-inset-bottom)) * 2) - + (max(16px, var(--safe-area-inset-top)) * 2) - + (max(16px, var(--safe-area-inset-bottom)) * 2) - (var(--ha-card-border-width, 1px) * 2) - 179px ); } diff --git a/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts b/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts index 61fcb1375e..863dcda69f 100644 --- a/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts +++ b/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts @@ -250,10 +250,10 @@ export class DeveloperYamlConfig extends LitElement { .content { padding: 28px 20px 16px; - padding: max(28px, calc(12px + env(safe-area-inset-top))) - max(20px, calc(4px + env(safe-area-inset-right))) - max(16px, env(safe-area-inset-bottom)) - max(20px, calc(4px + env(safe-area-inset-left))); + padding: max(28px, calc(12px + var(--safe-area-inset-top))) + max(20px, calc(4px + var(--safe-area-inset-right))) + max(16px, var(--safe-area-inset-bottom)) + max(20px, calc(4px + var(--safe-area-inset-left))); max-width: 1040px; margin: 0 auto; } diff --git a/src/panels/energy/ha-panel-energy.ts b/src/panels/energy/ha-panel-energy.ts index f8f15aeb49..797702a8d8 100644 --- a/src/panels/energy/ha-panel-energy.ts +++ b/src/panels/energy/ha-panel-energy.ts @@ -382,7 +382,7 @@ class PanelEnergy extends LitElement { position: fixed; top: 0; width: var(--mdc-top-app-bar-width, 100%); - padding-top: env(safe-area-inset-top); + padding-top: var(--safe-area-inset-top); z-index: 4; transition: box-shadow 200ms linear; display: flex; @@ -423,12 +423,12 @@ class PanelEnergy extends LitElement { display: flex; min-height: 100vh; box-sizing: border-box; - padding-top: calc(var(--header-height) + env(safe-area-inset-top)); - padding-left: env(safe-area-inset-left); - padding-right: env(safe-area-inset-right); - padding-inline-start: env(safe-area-inset-left); - padding-inline-end: env(safe-area-inset-right); - padding-bottom: env(safe-area-inset-bottom); + padding-top: calc(var(--header-height) + var(--safe-area-inset-top)); + padding-left: var(--safe-area-inset-left); + padding-right: var(--safe-area-inset-right); + padding-inline-start: var(--safe-area-inset-left); + padding-inline-end: var(--safe-area-inset-right); + padding-bottom: var(--safe-area-inset-bottom); } hui-view { flex: 1 1 100%; diff --git a/src/panels/history/ha-panel-history.ts b/src/panels/history/ha-panel-history.ts index c535c4ac8b..62c913539b 100644 --- a/src/panels/history/ha-panel-history.ts +++ b/src/panels/history/ha-panel-history.ts @@ -625,7 +625,7 @@ class HaPanelHistory extends LitElement { .content { padding: 0 16px 16px; - padding-bottom: max(env(safe-area-inset-bottom), 16px); + padding-bottom: max(var(--safe-area-inset-bottom), 16px); } :host([virtualize]) { diff --git a/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts b/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts index a63d3e3a50..35c5623180 100644 --- a/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts +++ b/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts @@ -177,15 +177,15 @@ export class HuiUnusedEntities extends LitElement { .fab { position: sticky; float: var(--float-end); - right: calc(16px + env(safe-area-inset-right)); - bottom: calc(16px + env(safe-area-inset-bottom)); - inset-inline-end: calc(16px + env(safe-area-inset-right)); + right: calc(16px + var(--safe-area-inset-right)); + bottom: calc(16px + var(--safe-area-inset-bottom)); + inset-inline-end: calc(16px + var(--safe-area-inset-right)); inset-inline-start: initial; z-index: 1; } ha-fab { position: relative; - bottom: calc(-80px - env(safe-area-inset-bottom)); + bottom: calc(-80px - var(--safe-area-inset-bottom)); transition: bottom 0.3s; } .fab.selected ha-fab { diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index 8a56f7a9cf..7ac9a64b44 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -969,7 +969,7 @@ class HUIRoot extends LitElement { width: var(--mdc-top-app-bar-width, 100%); -webkit-backdrop-filter: var(--app-header-backdrop-filter, none); backdrop-filter: var(--app-header-backdrop-filter, none); - padding-top: env(safe-area-inset-top); + padding-top: var(--safe-area-inset-top); z-index: 4; transition: box-shadow 200ms linear; } @@ -1064,12 +1064,12 @@ class HUIRoot extends LitElement { display: flex; min-height: 100vh; box-sizing: border-box; - padding-top: calc(var(--header-height) + env(safe-area-inset-top)); - padding-left: env(safe-area-inset-left); - padding-right: env(safe-area-inset-right); - padding-inline-start: env(safe-area-inset-left); - padding-inline-end: env(safe-area-inset-right); - padding-bottom: env(safe-area-inset-bottom); + padding-top: calc(var(--header-height) + var(--safe-area-inset-top)); + padding-left: var(--safe-area-inset-left); + padding-right: var(--safe-area-inset-right); + padding-inline-start: var(--safe-area-inset-left); + padding-inline-end: var(--safe-area-inset-right); + padding-bottom: var(--safe-area-inset-bottom); } hui-view-container > * { flex: 1 1 100%; @@ -1080,7 +1080,7 @@ class HUIRoot extends LitElement { */ .edit-mode hui-view-container { padding-top: calc( - var(--header-height) + 48px + env(safe-area-inset-top) + var(--header-height) + 48px + var(--safe-area-inset-top) ); } .hide-tab { diff --git a/src/panels/lovelace/views/hui-masonry-view.ts b/src/panels/lovelace/views/hui-masonry-view.ts index dc90245e1d..d524cf25a6 100644 --- a/src/panels/lovelace/views/hui-masonry-view.ts +++ b/src/panels/lovelace/views/hui-masonry-view.ts @@ -329,9 +329,9 @@ export class MasonryView extends LitElement implements LovelaceViewElement { ha-fab { position: fixed; - right: calc(16px + env(safe-area-inset-right)); - bottom: calc(16px + env(safe-area-inset-bottom)); - inset-inline-end: calc(16px + env(safe-area-inset-right)); + right: calc(16px + var(--safe-area-inset-right)); + bottom: calc(16px + var(--safe-area-inset-bottom)); + inset-inline-end: calc(16px + var(--safe-area-inset-right)); inset-inline-start: initial; z-index: 1; } diff --git a/src/panels/lovelace/views/hui-panel-view.ts b/src/panels/lovelace/views/hui-panel-view.ts index 17b091a3e3..72ddb347d7 100644 --- a/src/panels/lovelace/views/hui-panel-view.ts +++ b/src/panels/lovelace/views/hui-panel-view.ts @@ -135,11 +135,11 @@ export class PanelView extends LitElement implements LovelaceViewElement { ha-fab { position: fixed; - right: calc(16px + env(safe-area-inset-right)); - bottom: calc(16px + env(safe-area-inset-bottom)); + right: calc(16px + var(--safe-area-inset-right)); + bottom: calc(16px + var(--safe-area-inset-bottom)); z-index: 1; float: var(--float-end); - inset-inline-end: calc(16px + env(safe-area-inset-right)); + inset-inline-end: calc(16px + var(--safe-area-inset-right)); inset-inline-start: initial; } `; diff --git a/src/panels/lovelace/views/hui-sidebar-view.ts b/src/panels/lovelace/views/hui-sidebar-view.ts index a445737a35..bba45ffd47 100644 --- a/src/panels/lovelace/views/hui-sidebar-view.ts +++ b/src/panels/lovelace/views/hui-sidebar-view.ts @@ -242,9 +242,9 @@ export class SideBarView extends LitElement implements LovelaceViewElement { ha-fab { position: fixed; - right: calc(16px + env(safe-area-inset-right)); - bottom: calc(16px + env(safe-area-inset-bottom)); - inset-inline-end: calc(16px + env(safe-area-inset-right)); + right: calc(16px + var(--safe-area-inset-right)); + bottom: calc(16px + var(--safe-area-inset-bottom)); + inset-inline-end: calc(16px + var(--safe-area-inset-right)); inset-inline-start: initial; z-index: 1; } diff --git a/src/panels/media-browser/ha-bar-media-player.ts b/src/panels/media-browser/ha-bar-media-player.ts index be5f24ce26..496bfa8938 100644 --- a/src/panels/media-browser/ha-bar-media-player.ts +++ b/src/panels/media-browser/ha-bar-media-player.ts @@ -570,7 +570,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) { var(--card-background-color, white) ); border-top: 1px solid var(--divider-color); - padding-bottom: env(safe-area-inset-bottom); + padding-bottom: var(--safe-area-inset-bottom); } mwc-linear-progress { diff --git a/src/panels/profile/ha-profile-section-general.ts b/src/panels/profile/ha-profile-section-general.ts index 4cd71d7ed7..90a18e08fe 100644 --- a/src/panels/profile/ha-profile-section-general.ts +++ b/src/panels/profile/ha-profile-section-general.ts @@ -239,7 +239,7 @@ class HaProfileSectionGeneral extends LitElement { display: block; max-width: 600px; margin: 0 auto; - padding-bottom: env(safe-area-inset-bottom); + padding-bottom: var(--safe-area-inset-bottom); } .content > * { diff --git a/src/panels/profile/ha-profile-section-security.ts b/src/panels/profile/ha-profile-section-security.ts index 83b2043138..b6540a09f5 100644 --- a/src/panels/profile/ha-profile-section-security.ts +++ b/src/panels/profile/ha-profile-section-security.ts @@ -98,7 +98,7 @@ class HaProfileSectionSecurity extends LitElement { display: block; max-width: 600px; margin: 0 auto; - padding-bottom: env(safe-area-inset-bottom); + padding-bottom: var(--safe-area-inset-bottom); } .content > * { diff --git a/src/resources/styles.ts b/src/resources/styles.ts index ba0b56164f..4d7aef04d6 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -21,6 +21,22 @@ export const haStyle = css` font-size: var(--paper-font-body1_-_font-size); font-weight: var(--paper-font-body1_-_font-weight); line-height: var(--paper-font-body1_-_line-height); + --safe-area-inset-bottom: var( + --android-safe-area-inset-bottom, + env(safe-area-inset-bottom, 0) + ); + --safe-area-inset-top: var( + --android-safe-area-inset-top, + env(safe-area-inset-top, 0) + ); + --safe-area-inset-left: var( + --android-safe-area-inset-left, + env(safe-area-inset-left, 0) + ); + --safe-area-inset-right: var( + --android-safe-area-inset-right, + env(safe-area-inset-right, 0) + ); } app-header div[sticky] { @@ -163,10 +179,10 @@ export const haStyleDialog = css` @media all and (max-width: 450px), all and (max-height: 500px) { ha-dialog { --mdc-dialog-min-width: calc( - 100vw - env(safe-area-inset-right) - env(safe-area-inset-left) + 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left) ); --mdc-dialog-max-width: calc( - 100vw - env(safe-area-inset-right) - env(safe-area-inset-left) + 100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left) ); --mdc-dialog-min-height: 100%; --mdc-dialog-max-height: 100%;