From d82f591ac15c717b80c2162ccb0b18e0db2a8b1a Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Thu, 9 Sep 2021 14:03:39 +0300
Subject: [PATCH] Shadow over sidebar scrollable content

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/hotbar/hotbar-menu.scss |  1 +
 src/renderer/components/layout/sidebar.scss     | 10 ++++++++++
 2 files changed, 11 insertions(+)

diff --git a/src/renderer/components/hotbar/hotbar-menu.scss b/src/renderer/components/hotbar/hotbar-menu.scss
index 270d8b6bb1..8dbc60853a 100644
--- a/src/renderer/components/hotbar/hotbar-menu.scss
+++ b/src/renderer/components/hotbar/hotbar-menu.scss
@@ -27,6 +27,7 @@
   background: $clusterMenuBackground;
   padding-top: 1px;
   width: var(--hotbar-width);
+  overflow: hidden;
 
   .HotbarItems {
     --cellWidth: 40px;
diff --git a/src/renderer/components/layout/sidebar.scss b/src/renderer/components/layout/sidebar.scss
index fac73debdd..407d2f5f93 100644
--- a/src/renderer/components/layout/sidebar.scss
+++ b/src/renderer/components/layout/sidebar.scss
@@ -28,6 +28,16 @@
     padding-bottom: calc(var(--padding) * 3);
     overflow: auto;
 
+    /* Shadow above scrolling content from https://gist.github.com/distinctgrey/7548778 */
+    background:
+      linear-gradient(var(--sidebarBackground) 30%, rgba(255,255,255,0)),
+      linear-gradient(rgba(255,255,255,0), var(--sidebarBackground) 70%) 0 100%,
+      radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
+      radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
+    background-repeat: no-repeat;
+    background-size: 100% 40px, 100% 40px, 100% 12px, 100% 12px;
+    background-attachment: local, local, scroll, scroll;
+
     .Icon {
       --size: #{$iconSize};