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

Embrace more scroll-driven styles

Browse source
This commit is contained in:
Lim Chee Aun 2024-09-16 13:17:53 +08:00
parent 7d5d8814b9
commit 3392c169c9
1 changed files with 23 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/app.css
View file

@ -1634,6 +1634,7 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
/* SHEET */ /* SHEET */
.sheet { .sheet {
timeline-scope: --sheet-scroll;
align-self: flex-end; align-self: flex-end;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -1708,6 +1709,27 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
padding-right: max(16px, env(safe-area-inset-right)); padding-right: max(16px, env(safe-area-inset-right));
user-select: none; user-select: none;
} }
@keyframes header-border {
0% {
box-shadow: none;
}
100% {
box-shadow: 0 0 0 1px var(--outline-color),
0 8px 16px -8px var(--drop-shadow-color);
}
}
@supports (animation-timeline: scroll()) {
.sheet header {
animation: header-border 1s linear both;
animation-timeline: --sheet-scroll;
animation-range: 0 8px;
position: relative;
z-index: 1;
}
.sheet header + main {
mask-image: none !important;
}
}
.sheet .sheet-close:not(.outer) + header { .sheet .sheet-close:not(.outer) + header {
padding-right: max(44px, env(safe-area-inset-right)); padding-right: max(44px, env(safe-area-inset-right));
@ -1726,6 +1748,7 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
align-items: center; align-items: center;
} }
.sheet main { .sheet main {
scroll-timeline: --sheet-scroll;
overflow: auto; overflow: auto;
overflow-x: hidden; overflow-x: hidden;
overscroll-behavior: contain; overscroll-behavior: contain;