Merge pull request #3676 from taku0/safe-area-inset

src/assets/css/librarybrowser.scss

@@ -175,6 +175,9 @@
     flex-direction: column;
     contain: layout style paint;
     transition: background ease-in-out 0.5s;
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+    padding-top: env(safe-area-inset-top);
 }
 
 .layout-tv .skinHeader {
@@ -1146,10 +1149,12 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
 
 .padded-left {
     padding-left: 3.3%;
+    padding-left: max(env(safe-area-inset-left), 3.3%);
 }
 
 .padded-right {
     padding-right: 3.3%;
+    padding-right: max(env(safe-area-inset-right), 3.3%);
 }
 
 .padded-top {
@@ -1173,6 +1178,7 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
 @media all and (min-height: 31.25em) {
     .padded-right-withalphapicker {
         padding-right: 7.5%;
+        padding-right: max(env(safe-area-inset-left), 7.5%);
     }
 }
 

src/assets/css/site.scss

@@ -84,6 +84,7 @@ div[data-role="page"] {
 .pageWithAbsoluteTabs .pageTabContent {
     /* provides room for the music controls */
     padding-bottom: 5em !important;
+    padding-bottom: calc(env(safe-area-inset-bottom) + 5em) !important;
 }
 
 .readOnlyContent {

src/assets/css/videoosd.scss

@@ -12,8 +12,11 @@
     right: 0;
     position: fixed;
     background: linear-gradient(0deg, rgba(16, 16, 16, 0.75) 0%, rgba(16, 16, 16, 0) 100%);
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
     padding-top: 7.5em;
     padding-bottom: 1.75em;
+    padding-bottom: max(env(safe-area-inset-bottom), 1.75em);
     display: flex;
     flex-direction: row;
     justify-content: center;

src/components/alphaPicker/style.scss

@@ -12,6 +12,7 @@
 .alphaPicker-fixed {
     position: fixed;
     bottom: 5.5em;
+    bottom: max(env(safe-area-inset-bottom), 5.5em);
 }
 
 .alphaPickerRow {
@@ -45,6 +46,7 @@
 @media all and (max-height: 50em) {
     .alphaPicker-fixed {
         bottom: 5em;
+        bottom: max(env(safe-area-inset-bottom), 5em);
     }
 
     .alphaPickerButton-vertical {
@@ -104,15 +106,18 @@
 
 .alphaPicker-fixed.alphaPicker-tv {
     bottom: 1%;
+    bottom: max(env(safe-area-inset-bottom), 1%);
 }
 
 .alphaPicker-fixed-right {
     right: 0.4em;
+    right: max(env(safe-area-inset-right), 0.4em);
 }
 
 @media all and (min-width: 62.5em) {
     .alphaPicker-fixed-right {
         right: 1em;
+        right: max(env(safe-area-inset-right), 1em);
     }
 }
 

src/components/appFooter/appFooter.scss

@@ -6,6 +6,13 @@
     bottom: 0;
     transition: transform 180ms linear;
     contain: layout style;
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+    padding-bottom: env(safe-area-inset-bottom);
+}
+
+.appfooter:empty {
+    padding: 0;
 }
 
 .appfooter.headroom--unpinned {

src/components/multiSelect/multiSelect.scss

@@ -14,7 +14,13 @@
     top: 0;
     left: 0;
     right: 0;
-    padding: 1em 0.5em;
+    padding-left: 0.5em;
+    padding-left: max(env(safe-area-inset-left), 0.5em);
+    padding-right: 0.5em;
+    padding-right: max(env(safe-area-inset-right), 0.5em);
+    padding-top: 1em;
+    padding-top: max(env(safe-area-inset-top), 1em);
+    padding-bottom: 1em;
     display: flex;
     align-items: center;
     z-index: 99999;

src/components/remotecontrol/remotecontrol.scss

@@ -195,7 +195,10 @@
     height: 4.2em;
     right: 0;
     padding-left: 7.3%;
+    padding-left: max(env(safe-area-inset-left), 7.3%);
     padding-right: 7.3%;
+    padding-right: max(env(safe-area-inset-right), 7.3%);
+    padding-bottom: env(safe-area-inset-bottom);
 }
 
 .layout-desktop .playlistSectionButton,

src/components/toast/toast.scss

@@ -4,7 +4,12 @@
     bottom: 0;
     pointer-events: none;
     z-index: 9999999;
-    padding: 1em;
+    padding-left: 1em;
+    padding-left: max(env(safe-area-inset-left), 1em);
+    padding-right: 1em;
+    padding-top: 1em;
+    padding-bottom: 1em;
+    padding-bottom: max(env(safe-area-inset-bottom), 1em);
     display: flex;
     flex-direction: column;
 }

src/elements/emby-scroller/emby-scroller.scss

@@ -4,7 +4,9 @@
 
 .emby-scroller {
     margin-left: 3.3%;
+    margin-left: max(env(safe-area-inset-left), 3.3%);
     margin-right: 3.3%;
+    margin-right: max(env(safe-area-inset-right), 3.3%);
 }
 
 /* align first card in scroller to heading */
@@ -21,7 +23,9 @@
 .layout-tv .emby-scroller,
 .layout-mobile .emby-scroller {
     padding-left: 3.3%;
+    padding-left: max(env(safe-area-inset-left), 3.3%);
     padding-right: 3.3%;
+    padding-right: max(env(safe-area-inset-right), 3.3%);
     margin-left: 0;
     margin-right: 0;
 }

src/index.html

@@ -102,6 +102,7 @@
             bottom: 0;
             z-index: 1;
             width: 0.8em;
+            padding-left: env(safe-area-inset-left);
         }
 
         @-webkit-keyframes fadein {

src/libraries/navdrawer/navdrawer.scss

@@ -4,6 +4,8 @@
     top: 0;
     bottom: 0;
     contain: strict;
+    box-sizing: border-box;
+    padding-left: env(safe-area-inset-left);
 }
 
 .touch-menu-la {

src/plugins/htmlVideoPlayer/style.scss

@@ -7,6 +7,10 @@
     display: flex;
     align-items: center;
     background: #000 !important;
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
 }
 
 .videoPlayerContainer-onTop {
@@ -58,6 +62,9 @@ video[controls]::-webkit-media-controls {
     right: 0;
     color: #fff;
     font-size: 170%;
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+    padding-bottom: env(safe-area-inset-bottom);
 }
 
 .videoSubtitlesInner {

src/plugins/youtubePlayer/style.scss

@@ -7,6 +7,10 @@
     right: 0;
     display: flex;
     align-items: center;
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
 }
 
 .youtubePlayerContainer.onTop {