__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
}