Skip to content

Instantly share code, notes, and snippets.

@pradyunsg
Created September 21, 2020 15:59
Show Gist options
  • Save pradyunsg/5e5080b53d9fbd20a06b6e239354d668 to your computer and use it in GitHub Desktop.
Save pradyunsg/5e5080b53d9fbd20a06b6e239354d668 to your computer and use it in GitHub Desktop.
Limited height Repository Files listing, on GitHub
[aria-labelledby="files"] {
overflow-y: auto;
max-height: 46vh;
/* Add a shadow to the edges with scroll-hidden content */
background:
/* Shadow covers */
linear-gradient(white 30%, rgba(255, 255, 255, 0)),
linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
/* Shadows */
radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)),
radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
background:
/* Shadow covers */
linear-gradient(white 30%, rgba(255, 255, 255, 0)),
linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
/* Shadows */
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-color: white;
background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
background-attachment: local, local, scroll, scroll;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment