From 4da2fd05bba9316d149a07ab197d12f056506d00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Sat, 31 Dec 2022 06:45:34 +0800
Subject: [PATCH] feat(ui): transparent status bar

---
 components/main/MainContent.vue | 7 ++++---
 composables/setups.ts           | 3 +++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
index d47c3e2b..4a1501b0 100644
--- a/components/main/MainContent.vue
+++ b/components/main/MainContent.vue
@@ -8,10 +8,11 @@ defineProps<{
 </script>
 
 <template>
-  <div relative>
+  <div>
     <div
-      sticky top-0 z10
-      border="b base" bg="[rgba(var(--c-bg-base-rgb),0.7)]" backdrop-blur
+      sticky top-0 z10 backdrop-blur
+      pt="[env(safe-area-inset-top,0)]"
+      border="b base" bg="[rgba(var(--c-bg-base-rgb),0.7)]"
     >
       <div flex justify-between px5 py4>
         <div flex gap-3 items-center overflow-hidden>
diff --git a/composables/setups.ts b/composables/setups.ts
index 1adbd554..b2ec9122 100644
--- a/composables/setups.ts
+++ b/composables/setups.ts
@@ -44,5 +44,8 @@ export function setupPageHeader() {
     },
     titleTemplate: title => `${title ? `${title} | ` : ''}${APP_NAME}${isDev ? ' (dev)' : isPreview ? ' (preview)' : ''}`,
     link,
+    meta: [
+      { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
+    ],
   })
 }