feat(ui): experimental status bar style change for ios pwa app

this might break things. just an experiment. :)
This commit is contained in:
sct
2021-03-22 01:22:24 +09:00
parent 8ebc829250
commit 958cdf98fd
11 changed files with 110 additions and 66 deletions

View File

@@ -3,10 +3,43 @@
@tailwind utilities;
@tailwind screens;
html {
min-height: calc(100% + env(safe-area-inset-top));
padding: env(safe-area-inset-top) env(safe-area-inset-right)
env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body {
@apply bg-gray-900;
}
.searchbar {
padding-top: env(safe-area-inset-top);
height: calc(4rem + env(safe-area-inset-top));
}
.sidebar {
padding-top: env(safe-area-inset-top);
padding-left: env(safe-area-inset-left);
}
.slideover {
padding-top: calc(1.5rem + env(safe-area-inset-top));
padding-bottom: 1.5rem;
}
.sidebar-close-button {
top: env(safe-area-inset-top);
}
.absolute-top-shift {
top: calc(-4rem - env(safe-area-inset-top));
}
.min-h-screen-shift {
min-height: calc(100vh + env(safe-area-inset-top));
}
.plex-button {
@apply flex justify-center w-full px-4 py-2 text-sm font-medium text-center text-white transition duration-150 ease-in-out bg-indigo-600 border border-transparent rounded-md disabled:opacity-50;
background-color: #cc7b19;
@@ -42,7 +75,9 @@ a.slider-title {
}
.media-page {
@apply relative px-4 pt-16 -mx-4 -mt-16 bg-center bg-cover;
@apply relative px-4 -mx-4 bg-center bg-cover;
margin-top: calc(-4rem - env(safe-area-inset-top));
padding-top: calc(4rem + env(safe-area-inset-top));
}
.media-page-bg-image {