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