ENH: Adding scroll bars with proper cell tags (#454)

* Adding support to tags 'output_scroll', 'scroll-output' and 'scroll-input'

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

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

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Brigitta Sipőcz <bsipocz@gmail.com>

Author: 3 people

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 */
@@ -217,6 +222,73 @@ tbody span.pasted-inline img {
   max-height: none;
 }
 
+
+/* Adding scroll bars if tags: output_scroll, scroll-output, and scroll-input
+ * On screens, we want to scroll, but on print show all
+ *
+ * It was before in https://github.com/executablebooks/sphinx-book-theme/blob/eb1b6baf098b27605e8f2b7b2979b17ebf1b9540/src/sphinx_book_theme/assets/styles/extensions/_myst-nb.scss
+*/
+
+div.cell.tag_output_scroll div.cell_output, div.cell.tag_scroll-output div.cell_output {
+	 max-height: 24em;
+	 overflow-y: auto;
+	 max-width: 100%;
+	 overflow-x: auto;
+}
+
+div.cell.tag_output_scroll div.cell_output::-webkit-scrollbar, div.cell.tag_scroll-output div.cell_output::-webkit-scrollbar {
+	 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: 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: var(--mystnb-scrollbar-thumb-hover-color);
+}
+
+@media print {
+	 div.cell.tag_output_scroll div.cell_output, div.cell.tag_scroll-output div.cell_output {
+		 max-height: unset;
+		 overflow-y: visible;
+		 max-width: unset;
+		 overflow-x: visible;
+	}
+}
+
+div.cell.tag_scroll-input div.cell_input {
+	 max-height: 24em;
+	 overflow-y: auto;
+	 max-width: 100%;
+	 overflow-x: auto;
+}
+
+div.cell.tag_scroll-input div.cell_input::-webkit-scrollbar {
+	 width: var(--mystnb-scrollbar-width);
+	 height: var(--mystnb-scrollbar-height);
+}
+
+div.cell.tag_scroll-input div.cell_input::-webkit-scrollbar-thumb {
+	 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: var(--mystnb-scrollbar-thumb-hover-color);
+}
+
+@media print {
+	 div.cell.tag_scroll-input div.cell_input {
+		 max-height: unset;
+		 overflow-y: visible;
+		 max-width: unset;
+		 overflow-x: visible;
+	}
+}
+
 /* Font colors for translated ANSI escape sequences
 Color values are copied from Jupyter Notebook
 https://github.com/jupyter/notebook/blob/52581f8eda9b319eb0390ac77fe5903c38f81e3e/notebook/static/notebook/less/ansicolors.less#L14-L21