diff --git a/src/main/mobile/components/app.css b/src/main/mobile/components/app.css index 5aab6b9b09..08dd9837c6 100644 --- a/src/main/mobile/components/app.css +++ b/src/main/mobile/components/app.css @@ -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; }