diff --git a/src/core/features/h5p/components/h5p-iframe/core-h5p-iframe.html b/src/core/features/h5p/components/h5p-iframe/core-h5p-iframe.html
index acb3d16ff..52020bec3 100644
--- a/src/core/features/h5p/components/h5p-iframe/core-h5p-iframe.html
+++ b/src/core/features/h5p/components/h5p-iframe/core-h5p-iframe.html
@@ -1,4 +1,4 @@
-
+
diff --git a/src/core/features/mainmenu/pages/menu/menu.scss b/src/core/features/mainmenu/pages/menu/menu.scss
index 3bb190a5e..53f005f0d 100644
--- a/src/core/features/mainmenu/pages/menu/menu.scss
+++ b/src/core/features/mainmenu/pages/menu/menu.scss
@@ -51,12 +51,14 @@
ion-tab-bar {
order: -1;
width: var(--menutabbar-size);
- height: 100%;
+ height: calc(100% - var(--ion-safe-area-top) - var(--ion-safe-area-bottom));
flex-direction: column;
@include border-end(var(--border));
box-shadow: 3px 0 3px rgba(var(--drop-shadow));
border-top: 0;
+ @include padding(var(--ion-safe-area-top), 0px, var(--ion-safe-area-bottom), var(--ion-safe-area-left));
+
ion-tab-button {
width: 100%;
height: auto;
@@ -68,6 +70,7 @@
}
.core-network-message {
+ --network-message-height: 16px;
position: absolute;
bottom: 0;
left: 0;
@@ -80,6 +83,7 @@
height: 0;
transition: all 500ms ease-in-out;
opacity: .8;
+ z-index: 12;
}
.core-online-message,
@@ -100,7 +104,8 @@
.core-network-message {
visibility: visible;
- height: 16px;
+ height: var(--network-message-height);
+ padding-bottom: calc(var(--ion-safe-area-bottom, 0px) + var(--network-message-height));
pointer-events: none;
}
}
diff --git a/src/core/features/siteplugins/components/plugin-content/core-siteplugins-plugin-content.html b/src/core/features/siteplugins/components/plugin-content/core-siteplugins-plugin-content.html
index 95f612eff..2126b11fb 100644
--- a/src/core/features/siteplugins/components/plugin-content/core-siteplugins-plugin-content.html
+++ b/src/core/features/siteplugins/components/plugin-content/core-siteplugins-plugin-content.html
@@ -1,4 +1,4 @@
-
+
diff --git a/src/core/features/tag/pages/search/search.html b/src/core/features/tag/pages/search/search.html
index e4b26e7bd..5afa3e371 100644
--- a/src/core/features/tag/pages/search/search.html
+++ b/src/core/features/tag/pages/search/search.html
@@ -10,7 +10,7 @@
-
+
-
+
diff --git a/src/core/features/viewer/components/text/text.html b/src/core/features/viewer/components/text/text.html
index cda8ec03e..10248ad3f 100644
--- a/src/core/features/viewer/components/text/text.html
+++ b/src/core/features/viewer/components/text/text.html
@@ -18,7 +18,7 @@
-
+
{{ 'core.copytoclipboard' | translate }}
diff --git a/src/theme/globals.mixins.scss b/src/theme/globals.mixins.scss
index 52031a533..c871f18b3 100644
--- a/src/theme/globals.mixins.scss
+++ b/src/theme/globals.mixins.scss
@@ -50,100 +50,93 @@
}
@mixin border-start($px, $type: null, $color: null) {
- @include ltr() {
- border-left: $px $type $color;
- }
+ border-left: $px $type $color;
@include rtl() {
+ border-left: unset;
border-right: $px $type $color;
}
}
@mixin border-end($px, $type: null, $color: null) {
- @include ltr() {
- border-right: $px $type $color;
- }
+ border-right: $px $type $color;
@include rtl() {
+ border-right: unset;
border-left: $px $type $color;
}
}
@mixin safe-area-border-start($px, $type, $color) {
- $safe-area-position: calc(constant(safe-area-inset-left) + #{$px});
- $safe-area-position-env: calc(env(safe-area-inset-left) + #{$px});
+ $safe-area-position: calc(var(--ion-safe-area-left) + #{$px});
- @include border-start($px, $type, $color);
- @media screen and (orientation: landscape) {
- @include border-start($safe-area-position, $type, $color);
- @include border-start($safe-area-position-env, $type, $color);
- }
+ @include border-start($safe-area-position, $type, $color);
}
@mixin safe-area-border-end($px, $type, $color) {
- $safe-area-position: calc(constant(safe-area-inset-right) + #{$px});
- $safe-area-position-env: calc(env(safe-area-inset-right) + #{$px});
+ $safe-area-position: calc(var(--ion-safe-area-right) + #{$px});
- @include border-end($px, $type, $color);
- @media screen and (orientation: landscape) {
- @include border-end($safe-area-position, $type, $color);
- @include border-end($safe-area-position-env, $type, $color);
- }
+ @include border-end($safe-area-position, $type, $color);
}
@mixin safe-area-margin-horizontal($start, $end: $start) {
$safe-area-end: null;
$safe-area-start: null;
- $safe-area-start-env: null;
- $safe-area-end-env: null;
@if ($end) {
- $safe-area-end: calc(constant(safe-area-inset-right) + #{$end});
- $safe-area-end-env: calc(env(safe-area-inset-right) + #{$end});
+ $safe-area-end: calc(var(--ion-safe-area-right) + #{$end});
}
@if ($start) {
- $safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
- $safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});
+ $safe-area-start: calc(var(--ion-safe-area-left) + #{$start});
}
- @include margin-horizontal($start, $end);
+ @include margin-horizontal($safe-area-start, $safe-area-end);
+}
- @media screen and (orientation: landscape) {
- @include margin-horizontal($safe-area-start, $safe-area-end);
- @include margin-horizontal($safe-area-start-env, $safe-area-end-env);
+@mixin safe-area-margin-start($start, $end) {
+ $safe-area-start: calc(var(--ion-safe-area-left) + #{$start});
+
+ @include margin-horizontal($safe-area-start, $end);
+}
+
+@mixin safe-area-margin-end($start, $end) {
+ $safe-area-end: calc(var(--ion-safe-area-right) + #{$end});
+
+ @include margin-horizontal($start, $safe-area-end);
+}
+
+@mixin safe-area-padding-horizontal($start, $end: $start) {
+ $safe-area-end: null;
+ $safe-area-start: null;
+
+ @if ($end) {
+ $safe-area-end: calc(var(--ion-safe-area-right) + #{$end});
}
+ @if ($start) {
+ $safe-area-start: calc(var(--ion-safe-area-left) + #{$start});
+ }
+
+ @include padding-horizontal($safe-area-start, $safe-area-end);
}
@mixin safe-area-padding-start($start, $end) {
- $safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
- $safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});
+ $safe-area-start: calc(var(--ion-safe-area-left) + #{$start});
- @include padding-horizontal($start, $end);
-
- @media screen and (orientation: landscape) {
- @include padding-horizontal($safe-area-start, $end);
- @include padding-horizontal($safe-area-start-env, $end);
- }
+ @include padding-horizontal($safe-area-start, $end);
}
@mixin safe-area-padding-end($start, $end) {
- $safe-area-end: calc(constant(safe-area-inset-right) + #{$end});
- $safe-area-end-env: calc(env(safe-area-inset-right) + #{$end});
+ $safe-area-end: calc(var(--ion-safe-area-right) + #{$end});
- @include padding-horizontal($start, $end);
-
- @media screen and (orientation: landscape) {
- @include padding-horizontal($start, $safe-area-end);
- @include padding-horizontal($start, $safe-area-end-env);
- }
+ @include padding-horizontal($start, $safe-area-end);
}
@mixin safe-area-position($top: null, $end: null, $bottom: null, $start: null) {
- @include position-horizontal($start, $end);
- @include safe-position-horizontal($start, $end);
- top: $top;
- bottom: $bottom;
+ $safe-area-start: calc(var(--ion-safe-area-left) + #{$start});
+ $safe-area-end: calc(var(--ion-safe-area-right) + #{$end});
+
+ @include position($top, $safe-area-end, $bottom, $safe-area-start);
}
@mixin core-headings() {
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 86eb108f3..90437ec03 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -234,6 +234,10 @@ ion-header ion-toolbar {
}
}
+ion-footer ion-toolbar.ion-color-contrast {
+ background-color: var(--contrast-background);
+}
+
// Ionic icon.
ion-icon {
position: relative;
@@ -374,6 +378,44 @@ ion-list.list-md {
padding: 0;
}
+// Safe areas
+.safe-area-padding,
+.safe-area-padding-horizontal {
+ @include padding-horizontal(var(--ion-safe-area-left), var(--ion-safe-area-right));
+}
+
+.safe-area-margin,
+.safe-margin-horizontal {
+ @include margin-horizontal(var(--ion-safe-area-left), var(--ion-safe-area-right));
+}
+
+.ion-padding.safe-area-padding-horizontal {
+ @include safe-area-padding-horizontal(16px, 16px);
+}
+
+.ion-margin.safe-margin-horizontal {
+ @include safe-area-margin-horizontal(16px, 16px);
+}
+
+ion-tabs.placement-side .tabs-inner {
+ --ion-safe-area-left: 0px;
+}
+
+ion-tabs.placement-bottom .tabs-inner {
+ --ion-safe-area-bottom: 0px;
+}
+
+
+core-split-view.menu-and-content {
+ .menu {
+ --ion-safe-area-right: 0px;
+ }
+
+ .content-outlet {
+ --ion-safe-area-left: 0px;
+ }
+}
+
// Header.
ion-header {
z-index: 12; // To hide ion-slides on scroll.
@@ -393,6 +435,17 @@ body.core-iframe-fullscreen ion-router-outlet {
ion-tab-bar.mainmenu-tabs {
display: none;
+
+ // Restore original safe area.
+ .tabs-inner {
+ @supports (padding-left: constant(safe-area-inset-left)) {
+ --ion-safe-area-left: constant(safe-area-inset-left);
+ }
+
+ @supports (padding-left: env(safe-area-inset-left)) {
+ --ion-safe-area-left: env(safe-area-inset-left);
+ }
+ }
}
--core-header-toolbar-height: 48px;
@@ -411,9 +464,12 @@ body.core-iframe-fullscreen ion-router-outlet {
.ion-page {
flex-direction: row-reverse;
ion-header {
- width: var(--core-header-toolbar-height);
+ width: calc(var(--core-header-toolbar-height), var(--ion-safe-area-right));
+ @include safe-area-padding-horizontal(null, 0px);
+ background: var(--core-header-toolbar-background);
ion-toolbar {
+ padding: 0;
height: 100%;
--padding-start: 0px;
--padding-end: 0px;
@@ -442,6 +498,8 @@ body.core-iframe-fullscreen ion-router-outlet {
@media only screen and (min-height: 400px) and (min-width: 300px) {
.core-modal-lateral {
+ --ion-safe-area-left: 0px;
+ --ion-safe-area-right: 0px;
.modal-wrapper {
position: absolute;
@@ -478,6 +536,13 @@ body.core-iframe-fullscreen ion-router-outlet {
[aria-current="page"],
.item.item-current {
@include safe-area-border-start(var(--selected-item-border-width), solid, var(--selected-item-color));
+ > * {
+ --ion-safe-area-left: 0px;
+ }
+
+ &::part(native) {
+ --ion-safe-area-left: 0px;
+ }
}
.item.item-file {
@@ -727,10 +792,14 @@ core-block ion-item-divider .core-button-spinner {
// Horizontal scrolling elements
.core-horizontal-scroll {
- display: flex;
- flex-flow: nowrap;
+ display: block;
overflow-x: scroll;
- flex-direction: row;
+ .safe-area-pseudo-padding-start {
+ @include padding-horizontal(var(--ion-safe-area-left), 0px);
+ }
+ .safe-area-pseudo-padding-end {
+ @include padding-horizontal(0px, var(--ion-safe-area-right));
+ }
}
// Text formats.