Merge branch 'master' into hadicharara/added-support-for-rtl-layouts

src/assets/css/librarybrowser.scss

@@ -219,6 +219,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 {
@@ -1366,20 +1369,24 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
 .padded-left {
     [dir="ltr"] & {
         padding-left: 3.3%;
+        padding-left: max(env(safe-area-inset-left), 3.3%);
     }
 
     [dir="rtl"] & {
         padding-right: 3.3%;
+        padding-right: max(env(safe-area-inset-right), 3.3%);
     }
 }
 
 .padded-right {
     [dir="ltr"] & {
         padding-right: 3.3%;
+        padding-right: max(env(safe-area-inset-right), 3.3%);
     }
 
     [dir="rtl"] & {
         padding-left: 3.3%;
+        padding-left: max(env(safe-area-inset-left), 3.3%);
     }
 }
 
@@ -1404,6 +1411,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;
@@ -112,10 +115,6 @@
     padding: 0 0.8em;
 }
 
-.layout-desktop .osdControls {
-    max-width: calc(100vh * 1.77 - 2vh);
-}
-
 .videoOsdBottom .buttons {
     padding: 0.25em 0 0;
     display: -webkit-box;