diff --git a/myst_nb/static/mystnb.css b/myst_nb/static/mystnb.css index 33566310..05cf663b 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 */ @@ -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