From ef128bceb0d9c350ba90c214fee1ea002cd7b427 Mon Sep 17 00:00:00 2001 From: Diego Prada Date: Mon, 3 Oct 2022 14:51:04 -0500 Subject: [PATCH 1/3] Adding support to tags 'output_scroll', 'scroll-output' and 'scroll-input' --- myst_nb/static/mystnb.css | 67 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) diff --git a/myst_nb/static/mystnb.css b/myst_nb/static/mystnb.css index 33566310..748a7712 100644 --- a/myst_nb/static/mystnb.css +++ b/myst_nb/static/mystnb.css @@ -217,6 +217,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: 0.3rem; + height: 0.3rem; +} + +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; +} + +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; +} + +@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: 0.3rem; + height: 0.3rem; +} + +div.cell.tag_scroll-input div.cell_input::-webkit-scrollbar-thumb { + background: #c1c1c1; + border-radius: 0.25rem; +} + +div.cell.tag_scroll-input div.cell_input::-webkit-scrollbar-thumb:hover { + background: #a0a0a0; +} + +@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 From 2e7e10c6c094fc22056bcea995db99d3a86c008f Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Mon, 3 Oct 2022 19:58:24 +0000 Subject: [PATCH 2/3] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- myst_nb/static/mystnb.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/myst_nb/static/mystnb.css b/myst_nb/static/mystnb.css index 748a7712..836a0257 100644 --- a/myst_nb/static/mystnb.css +++ b/myst_nb/static/mystnb.css @@ -222,7 +222,7 @@ tbody span.pasted-inline img { * 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; From 9e1f1956e71f128cd6ab142f35e518c1b8154b77 Mon Sep 17 00:00:00 2001 From: Diego Prada Date: Wed, 5 Oct 2022 11:44:42 -0500 Subject: [PATCH 3/3] Scrollbar width, height, border radius and colors added as variables. --- myst_nb/static/mystnb.css | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/myst_nb/static/mystnb.css b/myst_nb/static/mystnb.css index 748a7712..5b63f09e 100644 --- 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 {