Skip to content

Instantly share code, notes, and snippets.

@tonyfast

tonyfast/__style__.ipynb

Last active August 6, 2020 14:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tonyfast/e2e574e6fa3dcc4a4557f486d8bf0d70 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tonyfast/e2e574e6fa3dcc4a4557f486d8bf0d70 to your computer and use it in GitHub Desktop.
Download ZIP
Display the source blob
Display the rendered blob
Raw
__style__.ipynb
{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# A Bespoke Presentation Style Modification for JupyterLab"
]
},
{
"cell_type": "code",
"execution_count": 1,
"metadata": {},
"outputs": [],
"source": [
" from IPython.display import display, HTML"
]
},
{
"cell_type": "code",
"execution_count": 2,
"metadata": {},
"outputs": [],
"source": [
" style = HTML(\"\"\"<style>\n",
" .jp-mod-presentationMode {\n",
" --jp-notebook-padding: 0;\n",
" }\n",
" .jp-RenderedHTMLCommon pre code {\n",
" opacity: 0.25;\n",
" }\n",
" .jp-Placeholder-content .jp-MoreHorizIcon {\n",
" background-size: 32px;\n",
" }\n",
" </style>\"\"\")"
]
},
{
"cell_type": "code",
"execution_count": 3,
"metadata": {},
"outputs": [],
"source": [
" style.data += \"\"\"<style>\n",
" .jp-mod-presentationMode .jp-SideBar,\n",
" .jp-mod-presentationMode #jp-top-panel {\n",
" opacity: 0.0;\n",
" transition: all 0.2s;\n",
" }\n",
" .jp-mod-presentationMode .jp-SideBar:hover,\n",
" .jp-mod-presentationMode #jp-top-panel:hover {\n",
" opacity: 0.9;\n",
" transition: all 0.2s;\n",
" }</style>\"\"\""
]
},
{
"cell_type": "code",
"execution_count": 4,
"metadata": {},
"outputs": [],
"source": [
" style.data+=\"\"\"<style>\n",
" .jp-mod-presentationMode.jp-ApplicationShell,\n",
" .jp-mod-presentationMode .p-TabBar-content{\n",
" background-color: var(--jp-layout-color0);\n",
" }\n",
" </style>\"\"\""
]
},
{
"cell_type": "code",
"execution_count": 5,
"metadata": {},
"outputs": [],
"source": [
" style.data += \"\"\"<style>\n",
" .jp-mod-presentationMode .p-DockPanel-widget,\n",
" .jp-mod-presentationMode #jp-left-stack, \n",
" .jp-mod-presentationMode #jp-bottom-panel{\n",
" border-color: transparent;\n",
" }\n",
" .jp-mod-presentationMode .jp-Toolbar-item,\n",
" .jp-mod-presentationMode .jp-Toolbar, \n",
" .jp-mod-presentationMode #jp-bottom-panel {\n",
" opacity: 0.1;\n",
" transition: all 0.2s;\n",
" }\n",
" .jp-mod-presentationMode .jp-Toolbar-item:hover,\n",
" .jp-mod-presentationMode .jp-Toolbar:hover, \n",
" .jp-mod-presentationMode #jp-bottom-panel:hover {\n",
" opacity: 0.9;\n",
" transition: all 0.2s;\n",
" }\n",
" \n",
" .jp-mod-presentationMode .jp-InputArea {\n",
" flex-direction: column;\n",
" }\n",
"\n",
" </style>\"\"\""
]
},
{
"cell_type": "code",
"execution_count": 6,
"metadata": {},
"outputs": [],
"source": [
" style.data += \"\"\"<style>\n",
" .jp-mod-presentationMode .jp-Notebook .jp-Cell .jp-InputPrompt, \n",
" .jp-mod-presentationMode .jp-Notebook .jp-Cell .jp-OutputPrompt {\n",
" flex: 0 0 2rem !important;\n",
" opacity: 0;\n",
" }\n",
" .jp-mod-presentationMode .jp-Notebook .jp-Cell.jp-mod-active .jp-OutputPrompt,\n",
" .jp-mod-presentationMode .jp-Notebook .jp-Cell.jp-mod-active .jp-OutputPrompt {\n",
" opacity: 0.5;\n",
" }\n",
" .jp-mod-presentationMode .jp-Notebook .jp-Cell .jp-InputPrompt, \n",
" .jp-mod-presentationMode .jp-Notebook .jp-Cell .jp-OutputPrompt\n",
" \n",
" .jp-mod-presentationMode hr {\n",
" opacity: 0.1;\n",
" }\n",
" </style>\"\"\""
]
},
{
"cell_type": "code",
"execution_count": 7,
"metadata": {},
"outputs": [],
"source": [
"style.data += \"\"\"\n",
" <style>\n",
" .jp-TableOfContents-content h1, \n",
" .jp-TableOfContents-content h2 {\n",
" margin-bottom: var(--jp-ui-font-size0);\n",
" }\n",
" </style>\n",
" \"\"\""
]
},
{
"cell_type": "code",
"execution_count": 8,
"metadata": {},
"outputs": [],
"source": [
"style.data += \"\"\"\n",
" <style>\n",
" .jp-mod-presentationMode {\n",
" --jp-content-heading-line-height: 1.25 !important;\n",
" }\n",
" </style>\n",
" \"\"\""
]
},
{
"cell_type": "code",
"execution_count": 9,
"metadata": {},
"outputs": [],
"source": [
" style.data += \"\"\"\n",
" <style>\n",
" .jp-mod-presentationMode #jp-main-status-bar {\n",
" opacity: 0.06;\n",
" transition: all 0.2s;\n",
" }\n",
" .jp-mod-presentationMode #jp-main-status-bar:hover {\n",
" opacity: 0.8;\n",
" transition: all 0.2s;\n",
" }\n",
" </style>\n",
" \"\"\""
]
},
{
"cell_type": "code",
"execution_count": 10,
"metadata": {},
"outputs": [],
"source": [
" style.data += \"\"\"\n",
" <style>\n",
" .jp-mod-presentationMode .jp-CodeCell {\n",
" display: flex;\n",
" flex-direction: column-reverse;\n",
" }\n",
" .jp-mod-presentationMode .jp-Cell-inputWrapper {\n",
" position: sticky;\n",
" bottom: 0em;\n",
" } </style>\n",
" \"\"\""
]
},
{
"cell_type": "code",
"execution_count": 14,
"metadata": {},
"outputs": [],
"source": [
" _ipython_display_ = lambda : display(style)"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.7.3"
}
},
"nbformat": 4,
"nbformat_minor": 4
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment