A Bespoke Presentation Style Modification for JupyterLabΒΆ

[1]:

    from IPython.display import display, HTML

[2]:

    style = HTML("""<style>
    .jp-mod-presentationMode {
        --jp-notebook-padding: 0;
    }
    .jp-RenderedHTMLCommon pre code {
        opacity: 0.25;
    }
    .jp-Placeholder-content .jp-MoreHorizIcon {
        background-size: 32px;
    }
    </style>""")

[3]:

    style.data += """<style>
    .jp-mod-presentationMode .jp-SideBar,
    .jp-mod-presentationMode #jp-top-panel {
        opacity: 0.0;
        transition: all 0.2s;
    }
    .jp-mod-presentationMode .jp-SideBar:hover,
    .jp-mod-presentationMode #jp-top-panel:hover {
        opacity: 0.9;
        transition: all 0.2s;
    }</style>"""

[4]:

    style.data+="""<style>
    .jp-mod-presentationMode.jp-ApplicationShell,
    .jp-mod-presentationMode .p-TabBar-content{
        background-color: var(--jp-layout-color0);
    }
    </style>"""

[5]:

    style.data += """<style>
    .jp-mod-presentationMode .p-DockPanel-widget,
    .jp-mod-presentationMode #jp-left-stack,
    .jp-mod-presentationMode #jp-bottom-panel{
        border-color: transparent;
    }
    .jp-mod-presentationMode .jp-Toolbar-item,
    .jp-mod-presentationMode .jp-Toolbar,
    .jp-mod-presentationMode #jp-bottom-panel {
        opacity: 0.1;
        transition: all 0.2s;
    }
    .jp-mod-presentationMode .jp-Toolbar-item:hover,
    .jp-mod-presentationMode .jp-Toolbar:hover,
    .jp-mod-presentationMode #jp-bottom-panel:hover {
        opacity: 0.9;
        transition: all 0.2s;
    }

    .jp-mod-presentationMode .jp-InputArea {
        flex-direction: column;
    }

    </style>"""

[6]:

    style.data += """<style>
    .jp-mod-presentationMode .jp-Notebook .jp-Cell .jp-InputPrompt,
    .jp-mod-presentationMode .jp-Notebook .jp-Cell .jp-OutputPrompt {
        flex: 0 0 2rem !important;
        opacity: 0;
    }
    .jp-mod-presentationMode .jp-Notebook .jp-Cell.jp-mod-active .jp-OutputPrompt,
    .jp-mod-presentationMode .jp-Notebook .jp-Cell.jp-mod-active .jp-OutputPrompt {
        opacity: 0.5;
    }
    .jp-mod-presentationMode .jp-Notebook .jp-Cell .jp-InputPrompt,
    .jp-mod-presentationMode .jp-Notebook .jp-Cell .jp-OutputPrompt

    .jp-mod-presentationMode hr {
        opacity: 0.1;
    }
    </style>"""

[7]:

style.data += """
    <style>
    .jp-TableOfContents-content h1,
    .jp-TableOfContents-content h2 {
        margin-bottom: var(--jp-ui-font-size0);
    }
    </style>
    """

[8]:

style.data += """
    <style>
    .jp-mod-presentationMode {
        --jp-content-heading-line-height: 1.25 !important;
    }
    </style>
    """

[9]:

    style.data += """
    <style>
    .jp-mod-presentationMode #jp-main-status-bar {
        opacity: 0.06;
        transition: all 0.2s;
    }
    .jp-mod-presentationMode #jp-main-status-bar:hover {
        opacity: 0.8;
        transition: all 0.2s;
    }
    </style>
    """

[10]:

    style.data += """
    <style>
    .jp-mod-presentationMode .jp-CodeCell {
        display: flex;
        flex-direction: column-reverse;
    }
    .jp-mod-presentationMode .jp-Cell-inputWrapper {
        position: sticky;
        bottom: 0em;
    }    </style>
    """

[14]:

    _ipython_display_ = lambda : display(style)