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 (#23811) 

* feat: Introduce new css variables for safe area

* feat: Replace all safe area env with variable

* fix: CR fix move from derived styles to styles and rename
pull/24625/head
Grzegorz Libiszewski 2025-03-13 09:20:54 +01:00 committed by GitHub
parent 4f9ec622bf
commit ee10f9080d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
49 changed files with 165 additions and 149 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

@ -621,7 +621,7 @@ export class DialogHassioNetwork
display: flex;
justify-content: space-between;
padding: 8px;
padding-bottom: max(env(safe-area-inset-bottom), 8px);
padding-bottom: max(var(--safe-area-inset-bottom), 8px);
background-color: var(--mdc-theme-surface, #fff);
}
.warning {

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-bottom: max(env(safe-area-inset-bottom), 24px);
padding-bottom: max(var(--safe-area-inset-bottom), 24px);
}
.mdc-dialog__actions span:nth-child(1) {
flex: var(--secondary-action-button-flex, unset);
@ -120,7 +120,7 @@ export class HaDialog extends DialogBase {
:host([hideactions]) .mdc-dialog .mdc-dialog__content {
padding-bottom: max(
var(--dialog-content-padding, 24px),
env(safe-area-inset-bottom)
var(--safe-area-inset-bottom)
);
}
.mdc-dialog .mdc-dialog__surface {

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

@ -167,10 +167,10 @@ export class HaMdDialog extends MdDialog {
@media all and (max-width: 450px), all and (max-height: 500px) {
:host(:not([type="alert"])) {
min-width: calc(
100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
max-width: calc(
100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
min-height: 100%;
max-height: 100%;

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

@ -875,12 +875,12 @@ class HaSidebar extends SubscribeMixin(LitElement) {
);
font-size: 20px;
align-items: center;
padding-left: calc(4px + env(safe-area-inset-left));
padding-inline-start: calc(4px + env(safe-area-inset-left));
padding-left: calc(4px + var(--safe-area-inset-left));
padding-inline-start: calc(4px + var(--safe-area-inset-left));
padding-inline-end: initial;
}
:host([expanded]) .menu {
width: calc(256px + env(safe-area-inset-left));
width: calc(256px + var(--safe-area-inset-left));
}
.menu ha-icon-button {
color: var(--sidebar-icon-color);
@ -917,12 +917,12 @@ class HaSidebar extends SubscribeMixin(LitElement) {
box-sizing: border-box;
height: calc(100% - var(--header-height) - 132px);
height: calc(
100% - var(--header-height) - 132px - env(safe-area-inset-bottom)
100% - var(--header-height) - 132px - var(--safe-area-inset-bottom)
);
overflow-x: hidden;
background: none;
margin-left: env(safe-area-inset-left);
margin-inline-start: env(safe-area-inset-left);
margin-left: var(--safe-area-inset-left);
margin-inline-start: var(--safe-area-inset-left);
margin-inline-end: initial;
}
@ -1022,8 +1022,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
.notifications-container,
.configuration-container {
display: flex;
margin-left: env(safe-area-inset-left);
margin-inline-start: env(safe-area-inset-left);
margin-left: var(--safe-area-inset-left);
margin-inline-start: var(--safe-area-inset-left);
margin-inline-end: initial;
}
.notifications {
@ -1034,8 +1034,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
flex: 1;
}
.profile {
margin-left: env(safe-area-inset-left);
margin-inline-start: env(safe-area-inset-left);
margin-left: var(--safe-area-inset-left);
margin-inline-start: var(--safe-area-inset-left);
margin-inline-end: initial;
}
.profile paper-icon-item {

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 {
@ -33,9 +33,9 @@ export class HaToast extends Snackbar {
@media all and (max-width: 450px), all and (max-height: 500px) {
.mdc-snackbar {
right: env(safe-area-inset-right);
bottom: env(safe-area-inset-bottom);
left: env(safe-area-inset-left);
right: var(--safe-area-inset-right);
bottom: var(--safe-area-inset-bottom);
left: var(--safe-area-inset-left);
}
.mdc-snackbar__surface {
min-width: 100%;

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

@ -434,8 +434,8 @@ class MoreInfoUpdate extends LitElement {
position: sticky;
bottom: 0;
margin: 0 -24px 0 -24px;
margin-bottom: calc(-1 * max(env(safe-area-inset-bottom), 24px));
padding-bottom: env(safe-area-inset-bottom);
margin-bottom: calc(-1 * max(var(--safe-area-inset-bottom), 24px));
padding-bottom: var(--safe-area-inset-bottom);
box-sizing: border-box;
display: flex;
flex-direction: column;

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

@ -903,10 +903,10 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
ha-dialog {
--mdc-dialog-min-width: calc(
100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
--mdc-dialog-max-width: calc(
100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
--mdc-dialog-min-height: 100%;
--mdc-dialog-max-height: 100%;

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

@ -280,7 +280,7 @@ class HassTabsSubpage extends LitElement {
z-index: 2;
font-size: 12px;
width: 100%;
padding-bottom: env(safe-area-inset-bottom);
padding-bottom: var(--safe-area-inset-bottom);
}
#tabbar:not(.bottom-bar) {
@ -312,12 +312,12 @@ class HassTabsSubpage extends LitElement {
.content {
position: relative;
width: calc(
100% - env(safe-area-inset-left) - env(safe-area-inset-right)
100% - var(--safe-area-inset-left) - var(--safe-area-inset-right)
);
margin-left: env(safe-area-inset-left);
margin-right: env(safe-area-inset-right);
margin-inline-start: env(safe-area-inset-left);
margin-inline-end: env(safe-area-inset-right);
margin-left: var(--safe-area-inset-left);
margin-right: var(--safe-area-inset-right);
margin-inline-start: var(--safe-area-inset-left);
margin-inline-end: var(--safe-area-inset-right);
overflow: auto;
-webkit-overflow-scrolling: touch;
}
@ -325,23 +325,23 @@ class HassTabsSubpage extends LitElement {
:host([narrow]) .content {
height: calc(100% - var(--header-height));
height: calc(
100% - var(--header-height) - env(safe-area-inset-bottom)
100% - var(--header-height) - var(--safe-area-inset-bottom)
);
}
:host([narrow]) .content.tabs {
height: calc(100% - 2 * var(--header-height));
height: calc(
100% - 2 * var(--header-height) - env(safe-area-inset-bottom)
100% - 2 * var(--header-height) - var(--safe-area-inset-bottom)
);
}
#fab {
position: fixed;
right: calc(16px + env(safe-area-inset-right));
inset-inline-end: calc(16px + env(safe-area-inset-right));
right: calc(16px + var(--safe-area-inset-right));
inset-inline-end: calc(16px + var(--safe-area-inset-right));
inset-inline-start: initial;
bottom: calc(16px + env(safe-area-inset-bottom));
bottom: calc(16px + var(--safe-area-inset-bottom));
z-index: 1;
display: flex;
flex-wrap: wrap;
@ -349,7 +349,7 @@ class HassTabsSubpage extends LitElement {
gap: 8px;
}
:host([narrow]) #fab.tabs {
bottom: calc(84px + env(safe-area-inset-bottom));
bottom: calc(84px + var(--safe-area-inset-bottom));
}
#fab[is-wide] {
bottom: 24px;

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

@ -172,7 +172,7 @@ export class HomeAssistantMain extends LitElement {
--mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width));
}
:host([expanded]) {
--mdc-drawer-width: calc(256px + env(safe-area-inset-left));
--mdc-drawer-width: calc(256px + var(--safe-area-inset-left));
}
:host([modal]) {
--mdc-drawer-width: unset;

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

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

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/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));
}
.card-content {

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

@ -363,10 +363,10 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
haStyle,
css`
ha-card:last-child {
margin-bottom: env(safe-area-inset-bottom);
margin-bottom: var(--safe-area-inset-bottom);
}
:host(:not([narrow])) ha-card:last-child {
margin-bottom: max(24px, env(safe-area-inset-bottom));
margin-bottom: max(24px, var(--safe-area-inset-bottom));
}
ha-config-section {
margin: auto;
@ -401,7 +401,7 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
}
ha-tip {
margin-bottom: max(env(safe-area-inset-bottom), 8px);
margin-bottom: max(var(--safe-area-inset-bottom), 8px);
}
.new {

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

@ -253,7 +253,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
display: flex;
padding: 8px 16px 8px 24px;
justify-content: space-between;
padding-bottom: max(env(safe-area-inset-bottom), 8px);
padding-bottom: max(var(--safe-area-inset-bottom), 8px);
background-color: var(--mdc-theme-surface, #fff);
border-top: 1px solid var(--divider-color);
position: sticky;

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

@ -322,7 +322,7 @@ class HaConfigInfo extends LitElement {
}
.pages {
margin-bottom: max(24px, env(safe-area-inset-bottom));
margin-bottom: max(24px, var(--safe-area-inset-bottom));
padding: 4px 0;
}

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

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

@ -182,7 +182,7 @@ class HaConfigRepairsDashboard extends SubscribeMixin(LitElement) {
justify-content: space-between;
flex-direction: column;
display: flex;
margin-bottom: max(24px, env(safe-area-inset-bottom));
margin-bottom: max(24px, var(--safe-area-inset-bottom));
}
.card-content {

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

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

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

@ -1066,7 +1066,7 @@ export class HaScriptEditor extends SubscribeMixin(
}
ha-fab {
position: relative;
bottom: calc(-80px - env(safe-area-inset-bottom));
bottom: calc(-80px - var(--safe-area-inset-bottom));
transition: bottom 0.3s;
}
ha-fab.dirty {

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

@ -235,10 +235,10 @@ class DialogExposeEntity extends LitElement {
@media all and (max-width: 500px), all and (max-height: 500px) {
ha-dialog {
--mdc-dialog-min-width: calc(
100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
--mdc-dialog-max-width: calc(
100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
--mdc-dialog-min-height: 100%;
--mdc-dialog-max-height: 100%;

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

@ -597,19 +597,19 @@ class HaPanelDevAction extends LitElement {
css`
.content {
padding: 16px;
padding: max(16px, env(safe-area-inset-top))
max(16px, env(safe-area-inset-right))
max(16px, env(safe-area-inset-bottom))
max(16px, env(safe-area-inset-left));
padding: max(16px, var(--safe-area-inset-top))
max(16px, var(--safe-area-inset-right))
max(16px, var(--safe-area-inset-bottom))
max(16px, var(--safe-area-inset-left));
max-width: 1200px;
margin: auto;
}
.button-row {
padding: 8px 16px;
padding: max(8px, env(safe-area-inset-top))
max(16px, env(safe-area-inset-right))
max(8px, env(safe-area-inset-bottom))
max(16px, env(safe-area-inset-left));
padding: max(8px, var(--safe-area-inset-top))
max(16px, var(--safe-area-inset-right))
max(8px, var(--safe-area-inset-bottom))
max(16px, var(--safe-area-inset-left));
border-top: 1px solid var(--divider-color);
border-bottom: 1px solid var(--divider-color);
background: var(--card-background-color);

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

@ -235,10 +235,10 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) {
css`
.content {
padding: 28px 20px 16px;
padding: max(28px, calc(12px + env(safe-area-inset-top)))
max(20px, calc(4px + env(safe-area-inset-right)))
max(16px, env(safe-area-inset-bottom))
max(20px, calc(4px + env(safe-area-inset-left)));
padding: max(28px, calc(12px + var(--safe-area-inset-top)))
max(20px, calc(4px + var(--safe-area-inset-right)))
max(16px, var(--safe-area-inset-bottom))
max(20px, calc(4px + var(--safe-area-inset-left)));
max-width: 1040px;
margin: 0 auto;
}

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

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

@ -127,7 +127,7 @@ class PanelDeveloperTools extends LitElement {
z-index: 4;
background-color: var(--app-header-background-color);
width: var(--mdc-top-app-bar-width, 100%);
padding-top: env(safe-area-inset-top);
padding-top: var(--safe-area-inset-top);
color: var(--app-header-text-color, white);
border-bottom: var(--app-header-border-bottom, none);
-webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
@ -155,17 +155,17 @@ class PanelDeveloperTools extends LitElement {
developer-tools-router {
display: block;
padding-top: calc(
var(--header-height) + 48px + env(safe-area-inset-top)
var(--header-height) + 48px + var(--safe-area-inset-top)
);
padding-bottom: calc(env(safe-area-inset-bottom));
padding-bottom: calc(var(--safe-area-inset-bottom));
flex: 1 1 100%;
max-width: 100%;
}
paper-tabs {
margin-left: max(env(safe-area-inset-left), 24px);
margin-right: max(env(safe-area-inset-right), 24px);
margin-inline-start: max(env(safe-area-inset-left), 24px);
margin-inline-end: max(env(safe-area-inset-right), 24px);
margin-left: max(var(--safe-area-inset-left), 24px);
margin-right: max(var(--safe-area-inset-right), 24px);
margin-inline-start: max(var(--safe-area-inset-left), 24px);
margin-inline-end: max(var(--safe-area-inset-right), 24px);
--paper-tabs-selection-bar-color: var(
--app-header-selection-bar-color,
var(--app-header-text-color, #fff)

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

@ -576,10 +576,10 @@ class HaPanelDevState extends LitElement {
-moz-user-select: initial;
display: block;
padding: 16px;
padding: max(16px, env(safe-area-inset-top))
max(16px, env(safe-area-inset-right))
max(16px, env(safe-area-inset-bottom))
max(16px, env(safe-area-inset-left));
padding: max(16px, var(--safe-area-inset-top))
max(16px, var(--safe-area-inset-right))
max(16px, var(--safe-area-inset-bottom))
max(16px, var(--safe-area-inset-left));
}
ha-textfield {

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

@ -792,10 +792,10 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
ha-dialog {
--mdc-dialog-min-width: calc(
100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
--mdc-dialog-max-width: calc(
100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
--mdc-dialog-min-height: 100%;
--mdc-dialog-max-height: 100%;

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

@ -277,18 +277,18 @@ ${type === "object"
.content {
gap: 16px;
padding: 16px;
padding: max(16px, env(safe-area-inset-top))
max(16px, env(safe-area-inset-right))
max(16px, env(safe-area-inset-bottom))
max(16px, env(safe-area-inset-left));
padding: max(16px, var(--safe-area-inset-top))
max(16px, var(--safe-area-inset-right))
max(16px, var(--safe-area-inset-bottom))
max(16px, var(--safe-area-inset-left));
}
.content.horizontal {
--code-mirror-max-height: calc(
100vh - var(--header-height) -
(var(--paper-font-body1_-_line-height) * 3) - (1em * 2) -
(max(16px, env(safe-area-inset-top)) * 2) -
(max(16px, env(safe-area-inset-bottom)) * 2) -
(max(16px, var(--safe-area-inset-top)) * 2) -
(max(16px, var(--safe-area-inset-bottom)) * 2) -
(var(--ha-card-border-width, 1px) * 2) - 179px
);
}

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

@ -250,10 +250,10 @@ export class DeveloperYamlConfig extends LitElement {
.content {
padding: 28px 20px 16px;
padding: max(28px, calc(12px + env(safe-area-inset-top)))
max(20px, calc(4px + env(safe-area-inset-right)))
max(16px, env(safe-area-inset-bottom))
max(20px, calc(4px + env(safe-area-inset-left)));
padding: max(28px, calc(12px + var(--safe-area-inset-top)))
max(20px, calc(4px + var(--safe-area-inset-right)))
max(16px, var(--safe-area-inset-bottom))
max(20px, calc(4px + var(--safe-area-inset-left)));
max-width: 1040px;
margin: 0 auto;
}

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

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

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

@ -625,7 +625,7 @@ class HaPanelHistory extends LitElement {
.content {
padding: 0 16px 16px;
padding-bottom: max(env(safe-area-inset-bottom), 16px);
padding-bottom: max(var(--safe-area-inset-bottom), 16px);
}
:host([virtualize]) {

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

@ -177,15 +177,15 @@ export class HuiUnusedEntities extends LitElement {
.fab {
position: sticky;
float: var(--float-end);
right: calc(16px + env(safe-area-inset-right));
bottom: calc(16px + env(safe-area-inset-bottom));
inset-inline-end: calc(16px + env(safe-area-inset-right));
right: calc(16px + var(--safe-area-inset-right));
bottom: calc(16px + var(--safe-area-inset-bottom));
inset-inline-end: calc(16px + var(--safe-area-inset-right));
inset-inline-start: initial;
z-index: 1;
}
ha-fab {
position: relative;
bottom: calc(-80px - env(safe-area-inset-bottom));
bottom: calc(-80px - var(--safe-area-inset-bottom));
transition: bottom 0.3s;
}
.fab.selected ha-fab {

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

@ -969,7 +969,7 @@ class HUIRoot extends LitElement {
width: var(--mdc-top-app-bar-width, 100%);
-webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
backdrop-filter: var(--app-header-backdrop-filter, none);
padding-top: env(safe-area-inset-top);
padding-top: var(--safe-area-inset-top);
z-index: 4;
transition: box-shadow 200ms linear;
}
@ -1064,12 +1064,12 @@ class HUIRoot extends LitElement {
display: flex;
min-height: 100vh;
box-sizing: border-box;
padding-top: calc(var(--header-height) + env(safe-area-inset-top));
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
padding-inline-start: env(safe-area-inset-left);
padding-inline-end: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-top: calc(var(--header-height) + var(--safe-area-inset-top));
padding-left: var(--safe-area-inset-left);
padding-right: var(--safe-area-inset-right);
padding-inline-start: var(--safe-area-inset-left);
padding-inline-end: var(--safe-area-inset-right);
padding-bottom: var(--safe-area-inset-bottom);
}
hui-view-container > * {
flex: 1 1 100%;
@ -1080,7 +1080,7 @@ class HUIRoot extends LitElement {
*/
.edit-mode hui-view-container {
padding-top: calc(
var(--header-height) + 48px + env(safe-area-inset-top)
var(--header-height) + 48px + var(--safe-area-inset-top)
);
}
.hide-tab {

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

@ -570,7 +570,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
var(--card-background-color, white)
);
border-top: 1px solid var(--divider-color);
padding-bottom: env(safe-area-inset-bottom);
padding-bottom: var(--safe-area-inset-bottom);
}
mwc-linear-progress {

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

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

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

20
src/resources/styles.ts
View File

@ -21,6 +21,22 @@ export const haStyle = css`
font-size: var(--paper-font-body1_-_font-size);
font-weight: var(--paper-font-body1_-_font-weight);
line-height: var(--paper-font-body1_-_line-height);
--safe-area-inset-bottom: var(
--android-safe-area-inset-bottom,
env(safe-area-inset-bottom, 0)
);
--safe-area-inset-top: var(
--android-safe-area-inset-top,
env(safe-area-inset-top, 0)
);
--safe-area-inset-left: var(
--android-safe-area-inset-left,
env(safe-area-inset-left, 0)
);
--safe-area-inset-right: var(
--android-safe-area-inset-right,
env(safe-area-inset-right, 0)
);
}
app-header div[sticky] {
@ -163,10 +179,10 @@ export const haStyleDialog = css`
@media all and (max-width: 450px), all and (max-height: 500px) {
ha-dialog {
--mdc-dialog-min-width: calc(
100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
--mdc-dialog-max-width: calc(
100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
);
--mdc-dialog-min-height: 100%;
--mdc-dialog-max-height: 100%;