ENH: Standardize scrollbar behavior

docs/conf.py

@@ -53,7 +53,7 @@
 
 myst_enable_extensions = [
     "dollarmath",
-    # "amsmath",
+    "amsmath",
     "deflist",
     # "html_admonition",
     # "html_image",

src/sphinx_book_theme/assets/styles/abstracts/_mixins.scss

@@ -1,38 +1,32 @@
 /*********************************************
 * SASS Mixins
 *********************************************/
-// Scrollbar styles to be re-used in a few spots
+/**
+* Scrollbars should be thinner and slightly rounded, with a grey background
+*/
 @mixin scrollbar-style() {
   &::-webkit-scrollbar {
-    width: 0.5em;
-    height: 0.5em;
-  }
-
-  &::-webkit-scrollbar {
-    background: #f1f1f1;
+    width: 0.3rem;
+    height: 0.3rem;
   }
 
   &::-webkit-scrollbar-thumb {
     background: #c1c1c1;
-    border-radius: 1em;
+    border-radius: 0.25rem;
 
     &:hover {
       background: #a0a0a0;
     }
   }
+}
 
-  // Hide the scrollbar until hover on wide screens
-  @media (min-width: $breakpoint-lg) {
-    &:not(:hover) {
-      -ms-overflow-style: none;
-
-      &::-webkit-scrollbar {
-        background: #ffffff;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background: #ffffff;
-      }
+/**
+* Hide the scrollbar until the element is overed, so keep the page clean
+*/
+@mixin scrollbar-on-hover() {
+  &:not(:hover) {
+    &::-webkit-scrollbar-thumb {
+      visibility: hidden;
     }
   }
 }

src/sphinx_book_theme/assets/styles/content/_code.scss

@@ -8,6 +8,7 @@ code {
 
 pre {
   border-radius: $box-border-radius;
+  @include scrollbar-style();
 }
 
 // Over-ride Sphinx default so that content fills whitespace w/ margin content

src/sphinx_book_theme/assets/styles/content/_margin.scss

@@ -26,11 +26,6 @@ $content-fullwidth-width: percentage(100% / $content-max-width);
   border-left: 1px #a4a6a7 solid;
   font-size: 0.9em;
 
-  pre {
-    // Scrollbars in code blocks should be thinner to not overpower content on margin
-    @include scrollbar-style();
-  }
-
   @media (min-width: $breakpoint-md) {
     border: none;
     width: $content-margin-width;

src/sphinx_book_theme/assets/styles/content/_math.scss

@@ -10,6 +10,7 @@ span.eqno {
 div.math {
   overflow-x: auto;
   position: relative;
+  @include scrollbar-style();
 }
 
 // Compensate for the extra bottom margin of a preceding paragraph

src/sphinx_book_theme/assets/styles/extensions/_myst-nb.scss

@@ -8,8 +8,9 @@ div.cell {
   }
 
   div.cell_input,
-  div.cell_output div.output {
+  div.cell_output pre {
     border-radius: $box-border-radius;
+    border: 1px #ccc solid;
   }
 
   div.cell_output {
@@ -18,6 +19,7 @@ div.cell {
 
   // On screens, we want to scoll, but on print show all
   @mixin cell-scroll {
+    @include scrollbar-style();
     max-height: 24em;
     overflow-y: auto;
     @media print {

src/sphinx_book_theme/assets/styles/index.scss

@@ -25,7 +25,6 @@
 @import "sections/sidebar-primary";
 @import "sections/sidebar-secondary";
 @import "sections/sidebars-toggle";
-@import "sections/header-article";
 
 // Re-usable components across the theme
 @import "components/buttons";
@@ -39,6 +38,7 @@
 @import "content/glossary";
 @import "content/images";
 @import "content/margin";
+@import "content/math";
 @import "content/quotes";
 @import "content/sidebar";
 @import "content/tableofcontents";

src/sphinx_book_theme/assets/styles/sections/_sidebar-primary.scss

@@ -14,6 +14,7 @@
   z-index: 2000 !important;
 
   @include scrollbar-style();
+  @include scrollbar-on-hover();
 
   @media (max-width: $breakpoint-md) {
     position: fixed;

src/sphinx_book_theme/assets/styles/sections/_sidebar-secondary.scss

@@ -43,6 +43,7 @@
     overflow-y: hidden;
     background: white;
     @include scrollbar-style();
+    @include scrollbar-on-hover();
 
     // TOC link color
     a:hover,