bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'placeholder-ios' into 'develop'

Browse source 
Placeholder gradient fixes

See merge request soapbox-pub/soapbox-fe!807
This commit is contained in:
Alex Gleason 2021-10-20 16:38:38 +00:00
commit 244525ae3c
1 changed files with 22 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
app/styles/placeholder.scss
View file

@ -14,11 +14,11 @@
height: 100%; height: 100%;
background-image: linear-gradient( background-image: linear-gradient(
90deg, 90deg,
transparent 0%, hsla(var(--foreground-color_hsl), 0) 0%,
transparent 25%, hsla(var(--foreground-color_hsl), 0) 25%,
var(--foreground-color) 50%, var(--foreground-color) 50%,
transparent 70%, hsla(var(--foreground-color_hsl), 0) 70%,
transparent 100% hsla(var(--foreground-color_hsl), 0) 100%
); );
background-size: 200%; background-size: 200%;
animation: placeholder-pulse 2s infinite; animation: placeholder-pulse 2s infinite;
@ -74,11 +74,28 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 1; z-index: 1;
background-image: linear-gradient(0deg, var(--background-color) 0%, transparent 50%, transparent 100%); // On mobile, extend the gradient up to the ThumbNavigation height
background-image: linear-gradient(
0deg,
var(--background-color) 0%,
var(--background-color) var(--thumb-navigation-height),
hsla(var(--foreground-color_hsl), 0) 50%,
hsla(var(--foreground-color_hsl), 0) 100%
);
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
@media (min-width: 895px) {
// On desktop, fade into the bottom of the page
background-image: linear-gradient(
0deg,
var(--background-color) 0%,
hsla(var(--foreground-color_hsl), 0) 50%,
hsla(var(--foreground-color_hsl), 0) 100%
);
}
} }
} }
} }