enhance(mobile): env safe area for ios

This commit is contained in:
charlie
2025-09-05 18:39:15 +08:00
parent 397e0d6038
commit 39bfdbbee7

View File

@@ -7,7 +7,7 @@
--ls-page-title-size: 26px;
--silk-topbar-inner-height: 32px;
--silk-tabbar-bottom-paddding: 12px;
--silk-100-lvh-dvh-pct: max(100%,100vh);
--silk-100-lvh-dvh-pct: max(100%, 100vh);
--safe-area-inset-top: 40px;
--safe-area-inset-bottom: 16px;
}
@@ -25,6 +25,14 @@ html.is-native-android {
--silk-tabbar-bottom-paddding: 28px;
.app-silk-index-container {
padding-top: calc(var(--safe-area-inset-top) + var(--silk-topbar-inner-height) + 22px);
}
.app-silk-topbar {
padding-top: calc(var(--safe-area-inset-top) + var(--silk-topbar-inner-padding-top));
}
.app-silk-search-page {
> .hd {
padding-top: calc(var(--safe-area-inset-top) + 14px);
@@ -164,7 +172,8 @@ ul {
}
}
.app-silk-depth-sheet-content {}
.app-silk-depth-sheet-content {
}
.app-silk-scroll-content {
@apply min-h-screen;
@@ -220,7 +229,7 @@ ul {
&:last-child {
@apply -mb-4;
padding-bottom: calc(var(--safe-area-inset-bottom) + 6px);
padding-bottom: calc(env(safe-area-inset-bottom) + 6px);
}
}
}
@@ -363,7 +372,7 @@ html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
--silk-topbar-inner-height: 2px;
}
padding-top: calc(var(--safe-area-inset-top, 0px) + var(--silk-topbar-inner-height) + 22px);
padding-top: calc(env(safe-area-inset-top) + var(--silk-topbar-inner-height) + 22px);
padding-bottom: 120px;
#journals {
@@ -374,6 +383,12 @@ html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
.app-silk-topbar {
@apply fixed top-0 left-0 w-full flex justify-between items-center overflow-hidden bg-gray-01;
padding-top: calc(env(safe-area-inset-top) + var(--silk-topbar-inner-padding-top, 2px));
height: var(--silk-topbar-inner-height, 32px);
padding-bottom: var(--silk-topbar-inner-padding-bottom, 8px);
box-sizing: content-box;
&[data-center-title] {
@apply grid grid-cols-8 gap-4;
@@ -382,12 +397,6 @@ html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
}
}
padding-top: calc(var(--safe-area-inset-top, 0px) + var(--silk-topbar-inner-padding-top, 2px));
height: var(--silk-topbar-inner-height, 32px);
padding-bottom: var(--silk-topbar-inner-padding-bottom, 8px);
box-sizing: content-box;
&.search {
@apply hidden;
}
@@ -415,7 +424,7 @@ html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
bg-gray-02 absolute left-0 -bottom-0 w-full z-[1] dark:bg-gray-01;
padding-top: 6px;
padding-bottom: calc(var(--safe-area-inset-bottom) + var(--silk-tabbar-bottom-paddding));
padding-bottom: calc(env(safe-area-inset-bottom) + var(--silk-tabbar-bottom-paddding));
> .as-item {
@apply flex flex-1 flex-col items-center pb-1 transition-opacity;
@@ -439,7 +448,7 @@ html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
> .hd {
@apply fixed top-0 left-0 px-4 py-2.5 w-full bg-gray-01;
padding-top: calc(var(--safe-area-inset-top, 0px) + 4px);
padding-top: calc(env(safe-area-inset-top, 0px) + 4px);
z-index: 1;
transition: padding 0.1s ease-in-out;
@@ -540,14 +549,14 @@ html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
}
.Sidebar-hidden {
@apply bg-transparent dark:bg-transparent;
box-shadow: none;
@apply bg-transparent dark:bg-transparent;
box-shadow: none;
}
#app-main-content {
padding-bottom: 200px;
padding-bottom: 200px;
}
.menu-link, .cp__repos-quick-actions .ui__button {
@apply text-base;
@apply text-base;
}