Add styles for scrollbars in long code blocks. #5467

Co-authored-by: Camila Belo <camilaibs@gmail.com> Co-authored-by: Raghunandan Balachandran <raghunandan@spotify.com> Signed-off-by: Eric Peterson <ericpeterson@spotify.com>
2021-07-08 12:14:38 +02:00
parent 5c99a34c69
commit b5ee8b0a53
1 changed files with 11 additions and 0 deletions
@@ -184,6 +184,17 @@ export const Reader = ({ entityId, onReady }: Props) => {
        }
        `,
      }),
+      injectCss({
+        // Properly style code blocks.
+        css: `
+        .md-typeset pre > code::-webkit-scrollbar-thumb {
+          background-color: hsla(0, 0%, 0%, 0.32);
+        }
+        .md-typeset pre > code::-webkit-scrollbar-thumb:hover {
+          background-color: hsla(0, 0%, 0%, 0.87);
+        }
+        `,
+      }),
      injectCss({
        // Admonitions and others are using SVG masks to define icons. These
        // masks are defined as CSS variables.