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 { #ha-launch-screen .ha-launch-screen-spacer-top {
flex: 1; 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; padding-top: 48px;
} }
#ha-launch-screen .ha-launch-screen-spacer-bottom { #ha-launch-screen .ha-launch-screen-spacer-bottom {
@ -76,7 +76,7 @@
padding-top: 48px; padding-top: 48px;
} }
.ohf-logo { .ohf-logo {
margin: max(env(safe-area-inset-bottom), 48px) 0; margin: max(var(--safe-area-inset-bottom), 48px) 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;

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

@ -132,9 +132,9 @@ class HassioDashboard extends LitElement {
} }
ha-fab.non-tabs { ha-fab.non-tabs {
position: fixed; position: fixed;
right: calc(16px + env(safe-area-inset-right)); right: calc(16px + var(--safe-area-inset-right));
bottom: calc(16px + env(safe-area-inset-bottom)); bottom: calc(16px + var(--safe-area-inset-bottom));
inset-inline-end: calc(16px + env(safe-area-inset-right)); inset-inline-end: calc(16px + var(--safe-area-inset-right));
inset-inline-start: initial; inset-inline-start: initial;
z-index: 1; z-index: 1;
} }

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

@ -610,7 +610,7 @@ export class DialogHassioNetwork
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 8px; 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); background-color: var(--mdc-theme-surface, #fff);
} }
.warning { .warning {

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

@ -90,7 +90,7 @@ export class HaDialog extends DialogBase {
} }
.mdc-dialog__actions { .mdc-dialog__actions {
justify-content: var(--justify-action-buttons, flex-end); 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) { .mdc-dialog__actions span:nth-child(1) {
flex: var(--secondary-action-button-flex, unset); flex: var(--secondary-action-button-flex, unset);
@ -117,7 +117,7 @@ export class HaDialog extends DialogBase {
:host([hideactions]) .mdc-dialog .mdc-dialog__content { :host([hideactions]) .mdc-dialog .mdc-dialog__content {
padding-bottom: max( padding-bottom: max(
var(--dialog-content-padding, 24px), var(--dialog-content-padding, 24px),
env(safe-area-inset-bottom) var(--safe-area-inset-bottom)
); );
} }
.mdc-dialog .mdc-dialog__surface { .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) { @media all and (max-width: 450px), all and (max-height: 500px) {
:host(:not([type="alert"])) { :host(:not([type="alert"])) {
min-width: calc( 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( 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%; min-height: 100%;
max-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); font-size: var(--ha-font-size-xl);
align-items: center; align-items: center;
padding-left: calc(4px + env(safe-area-inset-left)); padding-left: calc(4px + var(--safe-area-inset-left));
padding-inline-start: calc(4px + env(safe-area-inset-left)); padding-inline-start: calc(4px + var(--safe-area-inset-left));
padding-inline-end: initial; padding-inline-end: initial;
} }
:host([expanded]) .menu { :host([expanded]) .menu {
width: calc(256px + env(safe-area-inset-left)); width: calc(256px + var(--safe-area-inset-left));
} }
.menu ha-icon-button { .menu ha-icon-button {
color: var(--sidebar-icon-color); color: var(--sidebar-icon-color);
@ -735,11 +735,11 @@ class HaSidebar extends SubscribeMixin(LitElement) {
box-sizing: border-box; box-sizing: border-box;
height: calc(100% - var(--header-height) - 132px); height: calc(100% - var(--header-height) - 132px);
height: calc( 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; overflow-x: hidden;
background: none; background: none;
margin-left: env(safe-area-inset-left); margin-left: var(--safe-area-inset-left);
} }
ha-md-list-item { ha-md-list-item {
@ -759,7 +759,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
} }
:host([expanded]) ha-md-list-item { :host([expanded]) ha-md-list-item {
width: 248px; width: 248px;
width: calc(248px - env(safe-area-inset-left)); width: calc(248px - var(--safe-area-inset-left));
} }
ha-md-list-item.selected { ha-md-list-item.selected {

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

@ -14,9 +14,9 @@ export class HaToast extends Snackbar {
.mdc-snackbar { .mdc-snackbar {
margin: 8px; margin: 8px;
right: calc(8px + env(safe-area-inset-right)); right: calc(8px + var(--safe-area-inset-right));
bottom: calc(8px + env(safe-area-inset-bottom)); bottom: calc(8px + var(--safe-area-inset-bottom));
left: calc(8px + env(safe-area-inset-left)); left: calc(8px + var(--safe-area-inset-left));
} }
.mdc-snackbar__surface { .mdc-snackbar__surface {
@ -37,9 +37,9 @@ export class HaToast extends Snackbar {
@media all and (max-width: 450px), all and (max-height: 500px) { @media all and (max-width: 450px), all and (max-height: 500px) {
.mdc-snackbar { .mdc-snackbar {
right: env(safe-area-inset-right); right: var(--safe-area-inset-right);
bottom: env(safe-area-inset-bottom); bottom: var(--safe-area-inset-bottom);
left: env(safe-area-inset-left); left: var(--safe-area-inset-left);
} }
.mdc-snackbar__surface { .mdc-snackbar__surface {
min-width: 100%; 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; position: sticky;
bottom: 0; bottom: 0;
margin: 0 -24px 0 -24px; margin: 0 -24px 0 -24px;
margin-bottom: calc(-1 * max(env(safe-area-inset-bottom), 24px)); margin-bottom: calc(-1 * max(var(--safe-area-inset-bottom), 24px));
padding-bottom: env(safe-area-inset-bottom); padding-bottom: var(--safe-area-inset-bottom);
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; 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-direction: column;
flex: 1; flex: 1;
padding: 24px; padding: 24px;
padding-bottom: max(env(safe-area-inset-bottom), 24px); padding-bottom: max(var(--safe-area-inset-bottom), 24px);
} }
[data-domain="camera"] .content { [data-domain="camera"] .content {

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

@ -159,11 +159,11 @@ export class HuiNotificationDrawer extends LitElement {
.notifications { .notifications {
overflow-y: auto; overflow-y: auto;
padding-top: 16px; padding-top: 16px;
padding-left: env(safe-area-inset-left); padding-left: var(--safe-area-inset-left);
padding-right: env(safe-area-inset-right); padding-right: var(--safe-area-inset-right);
padding-inline-start: env(safe-area-inset-left); padding-inline-start: var(--safe-area-inset-left);
padding-inline-end: env(safe-area-inset-right); padding-inline-end: var(--safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom); padding-bottom: var(--safe-area-inset-bottom);
height: calc(100% - 1px - var(--header-height)); height: calc(100% - 1px - var(--header-height));
box-sizing: border-box; box-sizing: border-box;
background-color: var(--primary-background-color); 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 { #ha-launch-screen .ha-launch-screen-spacer-top {
flex: 1; 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; padding-top: 48px;
} }
#ha-launch-screen .ha-launch-screen-spacer-bottom { #ha-launch-screen .ha-launch-screen-spacer-bottom {
@ -52,7 +52,7 @@
padding-top: 48px; padding-top: 48px;
} }
.ohf-logo { .ohf-logo {
margin: max(env(safe-area-inset-bottom), 48px) 0; margin: max(var(--safe-area-inset-bottom), 48px) 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;

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

@ -148,10 +148,10 @@ class HassSubpage extends LitElement {
#fab { #fab {
position: absolute; position: absolute;
right: calc(16px + env(safe-area-inset-right)); right: calc(16px + var(--safe-area-inset-right));
inset-inline-end: calc(16px + env(safe-area-inset-right)); inset-inline-end: calc(16px + var(--safe-area-inset-right));
inset-inline-start: initial; inset-inline-start: initial;
bottom: calc(16px + env(safe-area-inset-bottom)); bottom: calc(16px + var(--safe-area-inset-bottom));
z-index: 1; z-index: 1;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -159,7 +159,7 @@ class HassSubpage extends LitElement {
gap: 8px; gap: 8px;
} }
:host([narrow]) #fab.tabs { :host([narrow]) #fab.tabs {
bottom: calc(84px + env(safe-area-inset-bottom)); bottom: calc(84px + var(--safe-area-inset-bottom));
} }
#fab[is-wide] { #fab[is-wide] {
bottom: 24px; 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 { ha-dialog {
--mdc-dialog-min-width: calc( --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( --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-min-height: 100%;
--mdc-dialog-max-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; z-index: 2;
font-size: var(--ha-font-size-s); font-size: var(--ha-font-size-s);
width: 100%; width: 100%;
padding-bottom: env(safe-area-inset-bottom); padding-bottom: var(--safe-area-inset-bottom);
} }
#tabbar:not(.bottom-bar) { #tabbar:not(.bottom-bar) {
@ -319,12 +319,12 @@ class HassTabsSubpage extends LitElement {
.content { .content {
position: relative; position: relative;
width: calc( 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-left: var(--safe-area-inset-left);
margin-right: env(safe-area-inset-right); margin-right: var(--safe-area-inset-right);
margin-inline-start: env(safe-area-inset-left); margin-inline-start: var(--safe-area-inset-left);
margin-inline-end: env(safe-area-inset-right); margin-inline-end: var(--safe-area-inset-right);
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
@ -332,31 +332,31 @@ class HassTabsSubpage extends LitElement {
:host([narrow]) .content { :host([narrow]) .content {
height: calc(100% - var(--header-height)); height: calc(100% - var(--header-height));
height: calc( height: calc(
100% - var(--header-height) - env(safe-area-inset-bottom) 100% - var(--header-height) - var(--safe-area-inset-bottom)
); );
} }
:host([narrow]) .content.tabs { :host([narrow]) .content.tabs {
height: calc(100% - 2 * var(--header-height)); height: calc(100% - 2 * var(--header-height));
height: calc( 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 { .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 { :host([narrow]) .content.tabs .fab-bottom-space {
height: calc(80px + env(safe-area-inset-bottom)); height: calc(80px + var(--safe-area-inset-bottom));
} }
#fab { #fab {
position: fixed; position: fixed;
right: calc(16px + env(safe-area-inset-right)); right: calc(16px + var(--safe-area-inset-right));
inset-inline-end: calc(16px + env(safe-area-inset-right)); inset-inline-end: calc(16px + var(--safe-area-inset-right));
inset-inline-start: initial; inset-inline-start: initial;
bottom: calc(16px + env(safe-area-inset-bottom)); bottom: calc(16px + var(--safe-area-inset-bottom));
z-index: 1; z-index: 1;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -364,7 +364,7 @@ class HassTabsSubpage extends LitElement {
gap: 8px; gap: 8px;
} }
:host([narrow]) #fab.tabs { :host([narrow]) #fab.tabs {
bottom: calc(84px + env(safe-area-inset-bottom)); bottom: calc(84px + var(--safe-area-inset-bottom));
} }
#fab[is-wide] { #fab[is-wide] {
bottom: 24px; 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)); --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width));
} }
:host([expanded]) { :host([expanded]) {
--mdc-drawer-width: calc(256px + env(safe-area-inset-left)); --mdc-drawer-width: calc(256px + var(--safe-area-inset-left));
} }
:host([modal]) { :host([modal]) {
--mdc-drawer-width: unset; --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 { ha-fab {
position: relative; position: relative;
bottom: calc(-80px - env(safe-area-inset-bottom)); bottom: calc(-80px - var(--safe-area-inset-bottom));
transition: bottom 0.3s; transition: bottom 0.3s;
} }
ha-fab.dirty { 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; gap: 24px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: calc(72px + env(safe-area-inset-bottom)); margin-bottom: calc(72px + var(--safe-area-inset-bottom));
} }
.card-actions { .card-actions {
display: flex; display: flex;

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

@ -251,7 +251,7 @@ class HaConfigBackupOverview extends LitElement {
gap: 24px; gap: 24px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: calc(env(safe-area-inset-bottom) + 72px); margin-bottom: calc(var(--safe-area-inset-bottom) + 72px);
} }
.card-actions { .card-actions {
display: flex; 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; justify-content: space-between;
flex-direction: column; flex-direction: column;
display: flex; display: flex;
margin-bottom: max(24px, env(safe-area-inset-bottom)); margin-bottom: max(24px, var(--safe-area-inset-bottom));
} }
ha-config-updates { ha-config-updates {
margin-bottom: 8px; margin-bottom: 8px;

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

@ -223,7 +223,7 @@ class HaConfigSystemNavigation extends LitElement {
haStyle, haStyle,
css` css`
:host(:not([narrow])) ha-card { :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 { ha-config-section {
@ -235,7 +235,7 @@ class HaConfigSystemNavigation extends LitElement {
ha-card { ha-card {
overflow: hidden; overflow: hidden;
margin-bottom: 24px; margin-bottom: 24px;
margin-bottom: max(24px, env(safe-area-inset-bottom)); margin-bottom: max(24px, var(--safe-area-inset-bottom));
} }
ha-card a { ha-card a {

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

@ -387,10 +387,10 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
haStyle, haStyle,
css` css`
ha-card:last-child { 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 { :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 { ha-config-section {
margin: auto; margin: auto;
@ -425,7 +425,7 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
} }
ha-tip { ha-tip {
margin-bottom: max(env(safe-area-inset-bottom), 8px); margin-bottom: max(var(--safe-area-inset-bottom), 8px);
} }
.new { .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) { @media all and (max-width: 450px), all and (max-height: 500px) {
ha-dialog { ha-dialog {
--mdc-dialog-min-width: calc( --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( --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; display: flex;
padding: 8px 16px 8px 24px; padding: 8px 16px 8px 24px;
justify-content: space-between; 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); background-color: var(--mdc-theme-surface, #fff);
border-top: 1px solid var(--divider-color); border-top: 1px solid var(--divider-color);
position: sticky; position: sticky;

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

@ -366,7 +366,7 @@ class HaConfigInfo extends LitElement {
} }
.pages { .pages {
margin-bottom: max(24px, env(safe-area-inset-bottom)); margin-bottom: max(24px, var(--safe-area-inset-bottom));
padding: 4px 0; 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 { ha-dialog {
--mdc-dialog-min-width: calc( --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( --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) { @media all and (max-width: 500px), all and (max-height: 500px) {
ha-dialog { ha-dialog {
--mdc-dialog-min-width: calc( --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( --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-min-height: 100%;
--mdc-dialog-max-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; justify-content: space-between;
flex-direction: column; flex-direction: column;
display: flex; display: flex;
margin-bottom: max(24px, env(safe-area-inset-bottom)); margin-bottom: max(24px, var(--safe-area-inset-bottom));
} }
.card-content { .card-content {

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

@ -1251,7 +1251,7 @@ export class HaSceneEditor extends PreventUnsavedMixin(
} }
ha-fab { ha-fab {
position: relative; position: relative;
bottom: calc(-80px - env(safe-area-inset-bottom)); bottom: calc(-80px - var(--safe-area-inset-bottom));
transition: bottom 0.3s; transition: bottom 0.3s;
} }
ha-alert { ha-alert {

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

@ -1056,7 +1056,7 @@ export class HaScriptEditor extends SubscribeMixin(
} }
ha-fab { ha-fab {
position: relative; position: relative;
bottom: calc(-80px - env(safe-area-inset-bottom)); bottom: calc(-80px - var(--safe-area-inset-bottom));
transition: bottom 0.3s; transition: bottom 0.3s;
} }
ha-fab.dirty { 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) { @media all and (max-width: 500px), all and (max-height: 500px) {
ha-dialog { ha-dialog {
--mdc-dialog-min-width: calc( --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( --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-min-height: 100%;
--mdc-dialog-max-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) { @media all and (max-width: 450px), all and (max-height: 500px) {
ha-dialog { ha-dialog {
--mdc-dialog-min-width: calc( --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) { @media all and (max-width: 450px), all and (max-height: 500px) {
ha-dialog { ha-dialog {
--mdc-dialog-min-width: calc( --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` css`
.content { .content {
padding: 16px; padding: 16px;
padding: max(16px, env(safe-area-inset-top)) padding: max(16px, var(--safe-area-inset-top))
max(16px, env(safe-area-inset-right)) max(16px, var(--safe-area-inset-right))
max(16px, env(safe-area-inset-bottom)) max(16px, var(--safe-area-inset-bottom))
max(16px, env(safe-area-inset-left)); max(16px, var(--safe-area-inset-left));
max-width: 1200px; max-width: 1200px;
margin: auto; margin: auto;
} }
.button-row { .button-row {
padding: 8px 16px; padding: 8px 16px;
padding: max(8px, env(safe-area-inset-top)) padding: max(8px, var(--safe-area-inset-top))
max(16px, env(safe-area-inset-right)) max(16px, var(--safe-area-inset-right))
max(8px, env(safe-area-inset-bottom)) max(8px, var(--safe-area-inset-bottom))
max(16px, env(safe-area-inset-left)); max(16px, var(--safe-area-inset-left));
border-top: 1px solid var(--divider-color); border-top: 1px solid var(--divider-color);
border-bottom: 1px solid var(--divider-color); border-bottom: 1px solid var(--divider-color);
background: var(--card-background-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` css`
.content { .content {
padding: 28px 20px 16px; padding: 28px 20px 16px;
padding: max(28px, calc(12px + env(safe-area-inset-top))) padding: max(28px, calc(12px + var(--safe-area-inset-top)))
max(20px, calc(4px + env(safe-area-inset-right))) max(20px, calc(4px + var(--safe-area-inset-right)))
max(16px, env(safe-area-inset-bottom)) max(16px, var(--safe-area-inset-bottom))
max(20px, calc(4px + env(safe-area-inset-left))); max(20px, calc(4px + var(--safe-area-inset-left)));
max-width: 1040px; max-width: 1040px;
margin: 0 auto; margin: 0 auto;
} }

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

@ -148,10 +148,10 @@ class HaPanelDevEvent extends LitElement {
.content { .content {
gap: 16px; gap: 16px;
padding: 16px; padding: 16px;
padding: max(16px, env(safe-area-inset-top)) padding: max(16px, var(--safe-area-inset-top))
max(16px, env(safe-area-inset-right)) max(16px, var(--safe-area-inset-right))
max(16px, env(safe-area-inset-bottom)) max(16px, var(--safe-area-inset-bottom))
max(16px, env(safe-area-inset-left)); max(16px, var(--safe-area-inset-left));
max-width: 1200px; max-width: 1200px;
margin: auto; 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; z-index: 4;
background-color: var(--app-header-background-color); background-color: var(--app-header-background-color);
width: var(--mdc-top-app-bar-width, 100%); 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); color: var(--app-header-text-color, white);
border-bottom: var(--app-header-border-bottom, none); border-bottom: var(--app-header-border-bottom, none);
-webkit-backdrop-filter: var(--app-header-backdrop-filter, none); -webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
@ -157,9 +157,9 @@ class PanelDeveloperTools extends LitElement {
developer-tools-router { developer-tools-router {
display: block; display: block;
padding-top: calc( 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%; flex: 1 1 100%;
max-width: 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; -moz-user-select: initial;
display: block; display: block;
padding: 16px; padding: 16px;
padding: max(16px, env(safe-area-inset-top)) padding: max(16px, var(--safe-area-inset-top))
max(16px, env(safe-area-inset-right)) max(16px, var(--safe-area-inset-right))
max(16px, env(safe-area-inset-bottom)) max(16px, var(--safe-area-inset-bottom))
max(16px, env(safe-area-inset-left)); max(16px, var(--safe-area-inset-left));
} }
ha-textfield { 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 { ha-dialog {
--mdc-dialog-min-width: calc( --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( --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-min-height: 100%;
--mdc-dialog-max-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 { .content {
gap: 16px; gap: 16px;
padding: 16px; padding: 16px;
padding: max(16px, env(safe-area-inset-top)) padding: max(16px, var(--safe-area-inset-top))
max(16px, env(safe-area-inset-right)) max(16px, var(--safe-area-inset-right))
max(16px, env(safe-area-inset-bottom)) max(16px, var(--safe-area-inset-bottom))
max(16px, env(safe-area-inset-left)); max(16px, var(--safe-area-inset-left));
} }
.content.horizontal { .content.horizontal {
--code-mirror-max-height: calc( --code-mirror-max-height: calc(
100vh - var(--header-height) - (var(--ha-line-height-normal) * 3) - 100vh - var(--header-height) - (var(--ha-line-height-normal) * 3) -
(1em * 2) - (max(16px, env(safe-area-inset-top)) * 2) - (1em * 2) - (max(16px, var(--safe-area-inset-top)) * 2) -
(max(16px, env(safe-area-inset-bottom)) * 2) - (max(16px, var(--safe-area-inset-bottom)) * 2) -
(var(--ha-card-border-width, 1px) * 2) - 179px (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 { .content {
padding: 28px 20px 16px; padding: 28px 20px 16px;
padding: max(28px, calc(12px + env(safe-area-inset-top))) padding: max(28px, calc(12px + var(--safe-area-inset-top)))
max(20px, calc(4px + env(safe-area-inset-right))) max(20px, calc(4px + var(--safe-area-inset-right)))
max(16px, env(safe-area-inset-bottom)) max(16px, var(--safe-area-inset-bottom))
max(20px, calc(4px + env(safe-area-inset-left))); max(20px, calc(4px + var(--safe-area-inset-left)));
max-width: 1040px; max-width: 1040px;
margin: 0 auto; margin: 0 auto;
} }

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

@ -487,7 +487,7 @@ class PanelEnergy extends LitElement {
position: fixed; position: fixed;
top: 0; top: 0;
width: var(--mdc-top-app-bar-width, 100%); 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; z-index: 4;
transition: box-shadow 200ms linear; transition: box-shadow 200ms linear;
display: flex; display: flex;
@ -528,12 +528,12 @@ class PanelEnergy extends LitElement {
display: flex; display: flex;
min-height: 100vh; min-height: 100vh;
box-sizing: border-box; box-sizing: border-box;
padding-top: calc(var(--header-height) + env(safe-area-inset-top)); padding-top: calc(var(--header-height) + var(--safe-area-inset-top));
padding-left: env(safe-area-inset-left); padding-left: var(--safe-area-inset-left);
padding-right: env(safe-area-inset-right); padding-right: var(--safe-area-inset-right);
padding-inline-start: env(safe-area-inset-left); padding-inline-start: var(--safe-area-inset-left);
padding-inline-end: env(safe-area-inset-right); padding-inline-end: var(--safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom); padding-bottom: var(--safe-area-inset-bottom);
} }
hui-view { hui-view {
flex: 1 1 100%; flex: 1 1 100%;

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

@ -626,7 +626,7 @@ class HaPanelHistory extends LitElement {
.content { .content {
padding: 0 16px 16px; padding: 0 16px 16px;
padding-bottom: max(env(safe-area-inset-bottom), 16px); padding-bottom: max(var(--safe-area-inset-bottom), 16px);
} }
:host([virtualize]) { :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 { .fab {
position: sticky; position: sticky;
float: var(--float-end); float: var(--float-end);
right: calc(16px + env(safe-area-inset-right)); right: calc(16px + var(--safe-area-inset-right));
bottom: calc(16px + env(safe-area-inset-bottom)); bottom: calc(16px + var(--safe-area-inset-bottom));
inset-inline-end: calc(16px + env(safe-area-inset-right)); inset-inline-end: calc(16px + var(--safe-area-inset-right));
inset-inline-start: initial; inset-inline-start: initial;
z-index: 1; z-index: 1;
} }
ha-fab { ha-fab {
position: relative; position: relative;
bottom: calc(-80px - env(safe-area-inset-bottom)); bottom: calc(-80px - var(--safe-area-inset-bottom));
transition: bottom 0.3s; transition: bottom 0.3s;
} }
.fab.selected ha-fab { .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%); width: var(--mdc-top-app-bar-width, 100%);
-webkit-backdrop-filter: var(--app-header-backdrop-filter, none); -webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
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; z-index: 4;
transition: box-shadow 200ms linear; transition: box-shadow 200ms linear;
} }
@ -1153,12 +1153,12 @@ class HUIRoot extends LitElement {
display: flex; display: flex;
min-height: 100vh; min-height: 100vh;
box-sizing: border-box; box-sizing: border-box;
padding-top: calc(var(--header-height) + env(safe-area-inset-top)); padding-top: calc(var(--header-height) + var(--safe-area-inset-top));
padding-left: env(safe-area-inset-left); padding-left: var(--safe-area-inset-left);
padding-right: env(safe-area-inset-right); padding-right: var(--safe-area-inset-right);
padding-inline-start: env(safe-area-inset-left); padding-inline-start: var(--safe-area-inset-left);
padding-inline-end: env(safe-area-inset-right); padding-inline-end: var(--safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom); padding-bottom: var(--safe-area-inset-bottom);
} }
hui-view-container > * { hui-view-container > * {
flex: 1 1 100%; flex: 1 1 100%;
@ -1169,7 +1169,7 @@ class HUIRoot extends LitElement {
*/ */
.edit-mode hui-view-container { .edit-mode hui-view-container {
padding-top: calc( padding-top: calc(
var(--header-height) + 48px + env(safe-area-inset-top) var(--header-height) + 48px + var(--safe-area-inset-top)
); );
} }
.hide-tab { .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 { ha-fab {
position: fixed; position: fixed;
right: calc(16px + env(safe-area-inset-right)); right: calc(16px + var(--safe-area-inset-right));
bottom: calc(16px + env(safe-area-inset-bottom)); bottom: calc(16px + var(--safe-area-inset-bottom));
inset-inline-end: calc(16px + env(safe-area-inset-right)); inset-inline-end: calc(16px + var(--safe-area-inset-right));
inset-inline-start: initial; inset-inline-start: initial;
z-index: 1; 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 { ha-fab {
position: fixed; position: fixed;
right: calc(16px + env(safe-area-inset-right)); right: calc(16px + var(--safe-area-inset-right));
bottom: calc(16px + env(safe-area-inset-bottom)); bottom: calc(16px + var(--safe-area-inset-bottom));
z-index: 1; z-index: 1;
float: var(--float-end); 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; 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 { ha-fab {
position: fixed; position: fixed;
right: calc(16px + env(safe-area-inset-right)); right: calc(16px + var(--safe-area-inset-right));
bottom: calc(16px + env(safe-area-inset-bottom)); bottom: calc(16px + var(--safe-area-inset-bottom));
inset-inline-end: calc(16px + env(safe-area-inset-right)); inset-inline-end: calc(16px + var(--safe-area-inset-right));
inset-inline-start: initial; inset-inline-start: initial;
z-index: 1; 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) var(--card-background-color, white)
); );
border-top: 1px solid var(--divider-color); border-top: 1px solid var(--divider-color);
padding-bottom: env(safe-area-inset-bottom); padding-bottom: var(--safe-area-inset-bottom);
} }
mwc-linear-progress { mwc-linear-progress {

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

@ -284,7 +284,7 @@ class HaProfileSectionGeneral extends LitElement {
display: block; display: block;
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
padding-bottom: env(safe-area-inset-bottom); padding-bottom: var(--safe-area-inset-bottom);
} }
.content > * { .content > * {

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

@ -98,7 +98,7 @@ class HaProfileSectionSecurity extends LitElement {
display: block; display: block;
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
padding-bottom: env(safe-area-inset-bottom); padding-bottom: var(--safe-area-inset-bottom);
} }
.content > * { .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) { @media all and (max-width: 450px), all and (max-height: 500px) {
ha-dialog { ha-dialog {
--mdc-dialog-min-width: calc( --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( --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-min-height: 100%;
--mdc-dialog-max-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; --float-end: right;
--margin-title-ltr: 0 0 0 24px; --margin-title-ltr: 0 0 0 24px;
--margin-title-rtl: 0 24px 0 0; --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)
);
} }
`; `;