From 1996faf8f08646d47a4e4423e7925dc0e24ae370 Mon Sep 17 00:00:00 2001 From: "John P. rouillard" Date: Mon, 20 Feb 2023 13:07:58 -0500 Subject: [PATCH] Add scroll shadows to indicate more items available On android the scroll bar is narrow and difficult to see. Add scroll shadows to the command list to indicate that there are more items available. CSS generated with: https://css-scroll-shadows.vercel.app Ref: https://lea.verou.me/2012/04/background-attachment-local/ https://css-tricks.com/books/greatest-css-tricks/scroll-shadows/ --- src/CommandList.svelte | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/CommandList.svelte b/src/CommandList.svelte index 3271415..fdb0466 100644 --- a/src/CommandList.svelte +++ b/src/CommandList.svelte @@ -71,6 +71,19 @@ font-family: monospace; } .items-list { + /* indicata ability to scroll with edge scroll shadow. + https://css-scroll-shadows.vercel.app */ + background: + linear-gradient(#373737 33%, rgba(55,55,55, 0)), + linear-gradient(rgba(55,55,55, 0), #373737 66%) 0 100%, + radial-gradient(farthest-side at 50% 0, rgba(255,255,255, 0.5), + rgba(0,0,0,0)), + radial-gradient(farthest-side at 50% 100%, rgba(255,255,255, 0.5), + rgba(0,0,0,0)) 0 100%; + background-color: #373737; + background-repeat: no-repeat; + background-attachment: local, local, scroll, scroll; + background-size: 100% 72px, 100% 72px, 100% 24px, 100% 24px; overflow-y: auto; max-height: min(360px, 50vh); max-height: min(360px, 80dvh);