nki/phanpy
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Preliminary steps to support safe areas

Browse source
This commit is contained in:
Lim Chee Aun 2022-12-18 21:07:40 +08:00
parent a029c7ccae
commit 8ba0d15484
1 changed files with 11 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/app.css
View file

@ -456,13 +456,18 @@ a.mention span {
.carousel-top-controls {
top: 0;
top: env(safe-area-inset-top, 0);
}
.carousel-controls {
bottom: 0;
bottom: env(safe-area-inset-bottom, 0);
}
:is(.carousel-top-controls, .carousel-controls) {
position: fixed;
width: 100%;
left: 0;
left: env(safe-area-inset-left, 0);
right: 0;
right: env(safe-area-inset-right, 0);
padding: 16px;
display: flex;
gap: 8px;
@ -535,7 +540,9 @@ button.carousel-dot[disabled].active {
#compose-button {
position: fixed;
bottom: 16px;
bottom: max(16px, env(safe-area-inset-bottom));
right: 16px;
right: max(16px, env(safe-area-inset-right));
padding: 16px;
box-shadow: 0 0 32px var(--bg-color);
z-index: 1;
@ -566,6 +573,9 @@ button.carousel-dot[disabled].active {
max-width: calc(40em - 50px - 16px);
border-radius: 16px 16px 0 0;
padding: 16px;
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
padding-bottom: max(16px, env(safe-area-inset-bottom));
box-shadow: 0 -1px 32px var(--divider-color);
animation: slide-up 0.2s ease-out;
border: 1px solid var(--outline-color);