From c3e155a95c6280f693856a5891e193e18f4ffc38 Mon Sep 17 00:00:00 2001 From: Grzegorz Libiszewski <39136587+Gregman-js@users.noreply.github.com> Date: Thu, 22 May 2025 07:11:04 +0200 Subject: [PATCH] Unified safe area (insets) for Android and iOS (#24689) * feat: Introduce new css variables for safe area * feat: Replace all safe area env with variable --- 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 | 12 ++++---- 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 | 28 +++++++++---------- src/layouts/home-assistant-main.ts | 2 +- .../config/automation/ha-automation-editor.ts | 2 +- .../overview/ha-backup-overview-backups.ts | 2 +- .../backup/ha-config-backup-overview.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 +-- .../add-node/dialog-zwave_js-add-node.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 | 6 ++-- .../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 | 4 +-- src/resources/theme/main.globals.ts | 18 ++++++++++++ 52 files changed, 164 insertions(+), 146 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 f9b3a61613..862b81769a 100644 --- a/hassio/src/dialogs/network/dialog-hassio-network.ts +++ b/hassio/src/dialogs/network/dialog-hassio-network.ts @@ -610,7 +610,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 64d5565cc8..933a70efef 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: 12px 24px max(env(safe-area-inset-bottom), 12px) 24px; + padding: 12px 24px max(var(--safe-area-inset-bottom), 12px) 24px; } .mdc-dialog__actions span:nth-child(1) { flex: var(--secondary-action-button-flex, unset); @@ -117,7 +117,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 61e6ae6a94..3aaf8e1a20 100644 --- a/src/components/ha-md-dialog.ts +++ b/src/components/ha-md-dialog.ts @@ -168,10 +168,10 @@ export class HaMdDialog extends Dialog { @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 cf7753752d..64476ae81a 100644 --- a/src/components/ha-sidebar.ts +++ b/src/components/ha-sidebar.ts @@ -702,12 +702,12 @@ class HaSidebar extends SubscribeMixin(LitElement) { ); font-size: var(--ha-font-size-xl); 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); @@ -735,11 +735,11 @@ 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-left: var(--safe-area-inset-left); } ha-md-list-item { @@ -759,7 +759,7 @@ class HaSidebar extends SubscribeMixin(LitElement) { } :host([expanded]) ha-md-list-item { width: 248px; - width: calc(248px - env(safe-area-inset-left)); + width: calc(248px - var(--safe-area-inset-left)); } ha-md-list-item.selected { diff --git a/src/components/ha-toast.ts b/src/components/ha-toast.ts index 8946aee00c..4f6be82b24 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 { @@ -37,9 +37,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 f303233e47..4bb768c1c7 100644 --- a/src/dialogs/more-info/controls/more-info-update.ts +++ b/src/dialogs/more-info/controls/more-info-update.ts @@ -471,8 +471,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 0517dd206c..5662726d2d 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 9859e09325..11be4952a6 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 98b0af1f01..dba3b154bd 100644 --- a/src/layouts/hass-tabs-subpage-data-table.ts +++ b/src/layouts/hass-tabs-subpage-data-table.ts @@ -878,10 +878,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 c5955570a0..fd75686860 100644 --- a/src/layouts/hass-tabs-subpage.ts +++ b/src/layouts/hass-tabs-subpage.ts @@ -287,7 +287,7 @@ class HassTabsSubpage extends LitElement { z-index: 2; font-size: var(--ha-font-size-s); width: 100%; - padding-bottom: env(safe-area-inset-bottom); + padding-bottom: var(--safe-area-inset-bottom); } #tabbar:not(.bottom-bar) { @@ -319,12 +319,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; } @@ -332,31 +332,31 @@ 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) ); } .content .fab-bottom-space { - height: calc(64px + env(safe-area-inset-bottom)); + height: calc(64px + var(--safe-area-inset-bottom)); } :host([narrow]) .content.tabs .fab-bottom-space { - height: calc(80px + env(safe-area-inset-bottom)); + height: calc(80px + 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; @@ -364,7 +364,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 eeb66d9fa1..75d5a54765 100644 --- a/src/layouts/home-assistant-main.ts +++ b/src/layouts/home-assistant-main.ts @@ -182,7 +182,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 b6e2da8732..5fae94ede3 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/src/panels/config/automation/ha-automation-editor.ts @@ -1117,7 +1117,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/backup/ha-config-backup-overview.ts b/src/panels/config/backup/ha-config-backup-overview.ts index 6a4fb1bb68..6e37724882 100644 --- a/src/panels/config/backup/ha-config-backup-overview.ts +++ b/src/panels/config/backup/ha-config-backup-overview.ts @@ -251,7 +251,7 @@ class HaConfigBackupOverview extends LitElement { gap: 24px; display: flex; flex-direction: column; - margin-bottom: calc(env(safe-area-inset-bottom) + 72px); + margin-bottom: calc(var(--safe-area-inset-bottom) + 72px); } .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 7e3813d9c3..ba334d7f3d 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)); } ha-config-updates { margin-bottom: 8px; diff --git a/src/panels/config/core/ha-config-system-navigation.ts b/src/panels/config/core/ha-config-system-navigation.ts index 3fc8684347..85e9425884 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 eb83876aa3..fcfa1550ac 100644 --- a/src/panels/config/dashboard/ha-config-dashboard.ts +++ b/src/panels/config/dashboard/ha-config-dashboard.ts @@ -387,10 +387,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; @@ -425,7 +425,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 b531b5e2d3..08fd1cd604 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 9c91e4b612..89871ba7ac 100644 --- a/src/panels/config/entities/entity-registry-settings.ts +++ b/src/panels/config/entities/entity-registry-settings.ts @@ -252,7 +252,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 943e7dd33e..6f3763abe7 100644 --- a/src/panels/config/info/ha-config-info.ts +++ b/src/panels/config/info/ha-config-info.ts @@ -366,7 +366,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/integrations/integration-panels/zwave_js/add-node/dialog-zwave_js-add-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/add-node/dialog-zwave_js-add-node.ts index 245a7ba841..7723a7f39a 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/add-node/dialog-zwave_js-add-node.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/add-node/dialog-zwave_js-add-node.ts @@ -1109,10 +1109,10 @@ class DialogZWaveJSAddNode extends SubscribeMixin(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/repairs/ha-config-repairs-dashboard.ts b/src/panels/config/repairs/ha-config-repairs-dashboard.ts index 67c352775c..cbbe39f394 100644 --- a/src/panels/config/repairs/ha-config-repairs-dashboard.ts +++ b/src/panels/config/repairs/ha-config-repairs-dashboard.ts @@ -183,7 +183,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 752463acb7..d118cbf9c9 100644 --- a/src/panels/config/scene/ha-scene-editor.ts +++ b/src/panels/config/scene/ha-scene-editor.ts @@ -1251,7 +1251,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 2ff834755e..0e422ae834 100644 --- a/src/panels/config/script/ha-script-editor.ts +++ b/src/panels/config/script/ha-script-editor.ts @@ -1056,7 +1056,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 ed1f790fa4..05819a20ee 100644 --- a/src/panels/config/voice-assistants/dialog-expose-entity.ts +++ b/src/panels/config/voice-assistants/dialog-expose-entity.ts @@ -236,10 +236,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 fd38101a02..610b53be71 100644 --- a/src/panels/developer-tools/action/developer-tools-action.ts +++ b/src/panels/developer-tools/action/developer-tools-action.ts @@ -601,19 +601,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 45dd691c79..7cf30d9905 100644 --- a/src/panels/developer-tools/assist/developer-tools-assist.ts +++ b/src/panels/developer-tools/assist/developer-tools-assist.ts @@ -236,10 +236,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 7b268aef88..a75ab05a85 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 a3cef59da7..6bf2112393 100644 --- a/src/panels/developer-tools/ha-panel-developer-tools.ts +++ b/src/panels/developer-tools/ha-panel-developer-tools.ts @@ -129,7 +129,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); @@ -157,9 +157,9 @@ 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%; } diff --git a/src/panels/developer-tools/state/developer-tools-state.ts b/src/panels/developer-tools/state/developer-tools-state.ts index 047b4aaaa2..5b9596b3a0 100644 --- a/src/panels/developer-tools/state/developer-tools-state.ts +++ b/src/panels/developer-tools/state/developer-tools-state.ts @@ -596,10 +596,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 83f71b8a2e..a171eb1a24 100644 --- a/src/panels/developer-tools/statistics/developer-tools-statistics.ts +++ b/src/panels/developer-tools/statistics/developer-tools-statistics.ts @@ -800,10 +800,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 7e40413082..e43b12cdd7 100644 --- a/src/panels/developer-tools/template/developer-tools-template.ts +++ b/src/panels/developer-tools/template/developer-tools-template.ts @@ -276,17 +276,17 @@ ${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(--ha-line-height-normal) * 3) - - (1em * 2) - (max(16px, env(safe-area-inset-top)) * 2) - - (max(16px, env(safe-area-inset-bottom)) * 2) - + (1em * 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 047fe5e9ff..b74587916b 100644 --- a/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts +++ b/src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts @@ -251,10 +251,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 e0f692b5c8..e416d2d01d 100644 --- a/src/panels/energy/ha-panel-energy.ts +++ b/src/panels/energy/ha-panel-energy.ts @@ -487,7 +487,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; @@ -528,12 +528,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 b52f3eaf19..12d18e4286 100644 --- a/src/panels/history/ha-panel-history.ts +++ b/src/panels/history/ha-panel-history.ts @@ -626,7 +626,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 392f439f73..6f3c9dfa0b 100644 --- a/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts +++ b/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts @@ -164,15 +164,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 d56652b3e6..44ca521c0a 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -1002,7 +1002,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; } @@ -1153,12 +1153,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%; @@ -1169,7 +1169,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 80541e9efb..084ff7f9ba 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 2f64ccc4de..c05ae5a403 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 66d5def2e0..718616840c 100644 --- a/src/panels/media-browser/ha-bar-media-player.ts +++ b/src/panels/media-browser/ha-bar-media-player.ts @@ -565,7 +565,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 4e9ebea2cb..a14043f625 100644 --- a/src/panels/profile/ha-profile-section-general.ts +++ b/src/panels/profile/ha-profile-section-general.ts @@ -284,7 +284,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 f6207007cb..c279d44ced 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -161,10 +161,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%; diff --git a/src/resources/theme/main.globals.ts b/src/resources/theme/main.globals.ts index 3c4b6c9cdb..a71b51c00a 100644 --- a/src/resources/theme/main.globals.ts +++ b/src/resources/theme/main.globals.ts @@ -26,6 +26,24 @@ export const mainStyles = css` --float-end: right; --margin-title-ltr: 0 0 0 24px; --margin-title-rtl: 0 24px 0 0; + + /* safe-area-insets */ + --safe-area-inset-top: var( + --android-safe-area-inset-top, + env(safe-area-inset-top, 0) + ); + --safe-area-inset-bottom: var( + --android-safe-area-inset-bottom, + env(safe-area-inset-bottom, 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) + ); } `;