Scrollbar width, height, border radius and colors added as variables.

executablebooks · Oct 5, 2022 · 9e1f195 · 9e1f195
1 parent ef128bc
commit 9e1f195
Showing 1 changed file with 15 additions and 10 deletions.
diff --git a/myst_nb/static/mystnb.css b/myst_nb/static/mystnb.css
@@ -12,6 +12,11 @@
   --mystnb-hide-prompt-opacity: 70%;
   --mystnb-source-border-radius: .4em;
   --mystnb-source-border-width: 1px;
+  --mystnb-scrollbar-width: 0.3rem;
+  --mystnb-scrollbar-height: 0.3rem;
+  --mystnb-scrollbar-thumb-color: #c1c1c1;
+  --mystnb-scrollbar-thumb-hover-color: #a0a0a0;
+  --mystnb-scrollbar-thumb-border-radius: 0.25rem;
 }
 
 /* Whole cell */
@@ -232,17 +237,17 @@ div.cell.tag_output_scroll div.cell_output, div.cell.tag_scroll-output div.cell_
 }
 
 div.cell.tag_output_scroll div.cell_output::-webkit-scrollbar, div.cell.tag_scroll-output div.cell_output::-webkit-scrollbar {
-	 width: 0.3rem;
-	 height: 0.3rem;
+	 width: var(--mystnb-scrollbar-width);
+	 height: var(--mystnb-scrollbar-height);
 }
 
 div.cell.tag_output_scroll div.cell_output::-webkit-scrollbar-thumb, div.cell.tag_scroll-output div.cell_output::-webkit-scrollbar-thumb {
-	 background: #c1c1c1;
-	 border-radius: 0.25rem;
+	 background: var(--mystnb-scrollbar-thumb-color);
+	 border-radius: var(--mystnb-scrollbar-thumb-border-radius);
 }
 
 div.cell.tag_output_scroll div.cell_output::-webkit-scrollbar-thumb:hover, div.cell.tag_scroll-output div.cell_output::-webkit-scrollbar-thumb:hover {
-	 background: #a0a0a0;
+	 background: var(--mystnb-scrollbar-thumb-hover-color);
 }
 
 @media print {
@@ -262,17 +267,17 @@ div.cell.tag_scroll-input div.cell_input {
 }
 
 div.cell.tag_scroll-input div.cell_input::-webkit-scrollbar {
-	 width: 0.3rem;
-	 height: 0.3rem;
+	 width: var(--mystnb-scrollbar-width);
+	 height: var(--mystnb-scrollbar-height);
 }
 
 div.cell.tag_scroll-input div.cell_input::-webkit-scrollbar-thumb {
-	 background: #c1c1c1;
-	 border-radius: 0.25rem;
+	 background: var(--mystnb-scrollbar-thumb-color);
+	 border-radius: var(--mystnb-scrollbar-thumb-border-radius);
 }
 
 div.cell.tag_scroll-input div.cell_input::-webkit-scrollbar-thumb:hover {
-	 background: #a0a0a0;
+	 background: var(--mystnb-scrollbar-thumb-hover-color);
 }
 
 @media print {