From 5cdb7ea9263bc74db9d74deae2f5312d158ddd53 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Wed, 20 Oct 2021 11:00:27 -0500 Subject: [PATCH 1/2] Placeholder: fix gradients in iOS --- app/styles/placeholder.scss | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/app/styles/placeholder.scss b/app/styles/placeholder.scss index 79f8e48d7f..d3a8eb49cb 100644 --- a/app/styles/placeholder.scss +++ b/app/styles/placeholder.scss @@ -14,11 +14,11 @@ height: 100%; background-image: linear-gradient( 90deg, - transparent 0%, - transparent 25%, + hsla(var(--foreground-color_hsl), 0) 0%, + hsla(var(--foreground-color_hsl), 0) 25%, var(--foreground-color) 50%, - transparent 70%, - transparent 100% + hsla(var(--foreground-color_hsl), 0) 70%, + hsla(var(--foreground-color_hsl), 0) 100% ); background-size: 200%; animation: placeholder-pulse 2s infinite; @@ -74,7 +74,12 @@ width: 100%; height: 100%; z-index: 1; - background-image: linear-gradient(0deg, var(--background-color) 0%, transparent 50%, transparent 100%); + background-image: linear-gradient( + 0deg, + var(--background-color) 0%, + hsla(var(--foreground-color_hsl), 0) 50%, + hsla(var(--foreground-color_hsl), 0) 100% + ); top: 0; left: 0; right: 0; From c738c261c09d44cc60cc96a6384512aef3512ea8 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Wed, 20 Oct 2021 11:24:03 -0500 Subject: [PATCH 2/2] Placeholder: use a better gradient fade on mobile --- app/styles/placeholder.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/app/styles/placeholder.scss b/app/styles/placeholder.scss index d3a8eb49cb..3b5a3a4aab 100644 --- a/app/styles/placeholder.scss +++ b/app/styles/placeholder.scss @@ -74,9 +74,11 @@ width: 100%; height: 100%; z-index: 1; + // 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% ); @@ -84,6 +86,16 @@ left: 0; right: 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% + ); + } } } }