Home-Assistant
/
frontend
mirror of https://github.com/home-assistant/frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
pull/25560/head
Grzegorz Libiszewski 2025-05-22 07:11:04 +02:00 committed by GitHub
parent 754829a836
commit c3e155a95c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
52 changed files with 164 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demo/src/html/index.html.template
View File

@ -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;

6
hassio/src/dashboard/hassio-dashboard.ts
View File

@ -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;
}

2
hassio/src/dialogs/network/dialog-hassio-network.ts
View File

@ -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 {

4
src/components/ha-dialog.ts
View File

@ -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 {

4
src/components/ha-md-dialog.ts
View File

@ -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%;

12
src/components/ha-sidebar.ts
View File

@ -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 {

12
src/components/ha-toast.ts
View File

@ -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%;

4
src/dialogs/more-info/controls/more-info-update.ts
View File

@ -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;

2
src/dialogs/more-info/ha-more-info-info.ts
View File

@ -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 {

10
src/dialogs/notifications/notification-drawer.ts
View File

@ -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);

4
src/html/index.html.template
View File

@ -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;

8
src/layouts/hass-subpage.ts
View File

@ -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;

4
src/layouts/hass-tabs-subpage-data-table.ts
View File

@ -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%;

28
src/layouts/hass-tabs-subpage.ts
View File

@ -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;

2
src/layouts/home-assistant-main.ts
View File

@ -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;

2
src/panels/config/automation/ha-automation-editor.ts
View File

@ -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 {

2
src/panels/config/backup/components/overview/ha-backup-overview-backups.ts
View File

@ -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;

2
src/panels/config/backup/ha-config-backup-overview.ts
View File

@ -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;

2
src/panels/config/core/ha-config-section-updates.ts
View File

@ -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;

4
src/panels/config/core/ha-config-system-navigation.ts
View File

@ -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 {

6
src/panels/config/dashboard/ha-config-dashboard.ts
View File

@ -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 {

4
src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts
View File

@ -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)
);
}
}

2
src/panels/config/entities/entity-registry-settings.ts
View File

@ -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;

2
src/panels/config/info/ha-config-info.ts
View File

@ -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;
}

4
src/panels/config/integrations/integration-panels/matter/dialog-matter-add-device.ts
View File

@ -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)
);
}
}

4
src/panels/config/integrations/integration-panels/zwave_js/add-node/dialog-zwave_js-add-node.ts
View File

@ -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%;

2
src/panels/config/repairs/ha-config-repairs-dashboard.ts
View File

@ -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 {

2
src/panels/config/scene/ha-scene-editor.ts
View File

@ -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 {

2
src/panels/config/script/ha-script-editor.ts
View File

@ -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 {

4
src/panels/config/voice-assistants/dialog-expose-entity.ts
View File

@ -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%;

2
src/panels/config/zone/dialog-home-zone-detail.ts
View File

@ -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)
);
}
}

2
src/panels/config/zone/dialog-zone-detail.ts
View File

@ -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)
);
}
}

16
src/panels/developer-tools/action/developer-tools-action.ts
View File

@ -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);

8
src/panels/developer-tools/assist/developer-tools-assist.ts
View File

@ -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;
}

8
src/panels/developer-tools/event/developer-tools-event.ts
View File

@ -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;
}

6
src/panels/developer-tools/ha-panel-developer-tools.ts
View File

@ -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%;
}

8
src/panels/developer-tools/state/developer-tools-state.ts
View File

@ -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 {

4
src/panels/developer-tools/statistics/developer-tools-statistics.ts
View File

@ -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%;

12
src/panels/developer-tools/template/developer-tools-template.ts
View File

@ -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
);
}

8
src/panels/developer-tools/yaml_configuration/developer-yaml-config.ts
View File

@ -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;
}

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

@ -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%;

2
src/panels/history/ha-panel-history.ts
View File

@ -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]) {

8
src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts
View File

@ -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 {

16
src/panels/lovelace/hui-root.ts
View File

@ -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 {

6
src/panels/lovelace/views/hui-masonry-view.ts
View File

@ -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;
}

6
src/panels/lovelace/views/hui-panel-view.ts
View File

@ -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;
}
`;

6
src/panels/lovelace/views/hui-sidebar-view.ts
View File

@ -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;
}

2
src/panels/media-browser/ha-bar-media-player.ts
View File

@ -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 {

2
src/panels/profile/ha-profile-section-general.ts
View File

@ -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 > * {

2
src/panels/profile/ha-profile-section-security.ts
View File

@ -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 > * {

4
src/resources/styles.ts
View File

@ -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%;

18
src/resources/theme/main.globals.ts
View File

@ -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)
);
}
`;