添加底部安全区域适配ios pwa，要等官仓PR miniflux/v2#2548 通过才生效

rootknight · Mar 21, 2024 · 8b1f28e · 8b1f28e
1 parent f170cfa
commit 8b1f28e
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 10 deletions.
diff --git a/style.css b/style.css
@@ -57,7 +57,8 @@
       width: 40px;
       height: 40px;
       position: fixed;
-      bottom: 8px;
+      bottom: calc(8px + constant(safe-area-inset-bottom));
+      bottom: calc(8px + env(safe-area-inset-bottom));
       left: 0;
       transform: translateX(24px);
       @media screen and (min-width: 821px) {
@@ -71,7 +72,8 @@
       width: 40px;
       height: 40px;
       position: fixed;
-      bottom: 8px;
+      bottom: calc(8px + constant(safe-area-inset-bottom));
+      bottom: calc(8px + env(safe-area-inset-bottom));
       left: 25%;
       transform: translateX(0);
       @media screen and (min-width: 821px) {
@@ -85,7 +87,8 @@
       width: 40px;
       height: 40px;
       position: fixed;
-      bottom: 8px;
+      bottom: calc(8px + constant(safe-area-inset-bottom));
+      bottom: calc(8px + env(safe-area-inset-bottom));
       left: 75%;
       transform: translateX(-42px);
       @media screen and (min-width: 821px) {
@@ -99,7 +102,8 @@
       width: 40px;
       height: 40px;
       position: fixed;
-      bottom: 8px;
+      bottom: calc(8px + constant(safe-area-inset-bottom));
+      bottom: calc(8px + env(safe-area-inset-bottom));
       left: 100%;
       transform: translateX(-64px);
       @media screen and (min-width: 821px) {
@@ -1582,7 +1586,8 @@ main .pagination-entry-bottom {
   bottom: 0;
   width: 100%;
   max-width: 820px;
-  height: 56px;
+  height: calc(56px + constant(safe-area-inset-bottom));
+  height: calc(56px + env(safe-area-inset-bottom));
   background: var(--body-background);
   padding: 16px 5px;
   margin: 0;
@@ -1639,6 +1644,12 @@ main .pagination-entry-bottom {
       }
     }
     & .pagination-next {
+      position: fixed;
+      left: 50%;
+      transform: translateX(-20px);
+      width: 40px;
+      bottom: calc(8px + constant(safe-area-inset-bottom));
+      bottom: calc(8px + env(safe-area-inset-bottom));
       /* 更换为向下按钮 */
       & a::before {
         mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNjY2NjY2MiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJtNiA5bDYgNmw2LTYiLz48L3N2Zz4=");