@jupyterlab/nbconvert-css 3.3.0-alpha.13 → 3.3.0-alpha.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyterlab/nbconvert-css",
-  "version": "3.3.0-alpha.13",
+  "version": "3.3.0-alpha.17",
   "description": "CSS bundle for the JupyterLab nbconvert template",
   "homepage": "https://github.com/jupyterlab/jupyterlab",
   "bugs": {
@@ -31,13 +31,13 @@
     "watch": "webpack --watch"
   },
   "dependencies": {
-    "@jupyterlab/application": "^3.3.0-alpha.13",
-    "@jupyterlab/apputils": "^3.3.0-alpha.13",
-    "@jupyterlab/cells": "^3.3.0-alpha.13",
-    "@jupyterlab/codemirror": "^3.3.0-alpha.13",
-    "@jupyterlab/notebook": "^3.3.0-alpha.13",
-    "@jupyterlab/outputarea": "^3.3.0-alpha.13",
-    "@jupyterlab/rendermime": "^3.3.0-alpha.13"
+    "@jupyterlab/application": "^3.3.0-alpha.17",
+    "@jupyterlab/apputils": "^3.3.0-alpha.17",
+    "@jupyterlab/cells": "^3.3.0-alpha.17",
+    "@jupyterlab/codemirror": "^3.3.0-alpha.17",
+    "@jupyterlab/notebook": "^3.3.0-alpha.17",
+    "@jupyterlab/outputarea": "^3.3.0-alpha.17",
+    "@jupyterlab/rendermime": "^3.3.0-alpha.17"
   },
   "devDependencies": {
     "css-loader": "^5.0.1",
@@ -46,8 +46,8 @@
     "null-loader": "^4.0.0",
     "rimraf": "~3.0.0",
     "url-loader": "~4.1.0",
-    "webpack": "^5.55.1",
-    "webpack-cli": "^4.8.0"
+    "webpack": "^5.41.1",
+    "webpack-cli": "^4.1.0"
   },
   "publishConfig": {
     "access": "public"

package/style/index.css

@@ -228,13 +228,6 @@
   display: none !important;
 }
 
-.lm-AccordionPanel[data-orientation="horizontal"] > .lm-AccordionPanel-title {
-  /* Title is rotated for horizontal accordion panel using CSS */
-  display: block;
-  transform-origin: top left;
-  transform: rotate(-90deg) translate(-100%);
-}
-
 /*-----------------------------------------------------------------------------
 | Copyright (c) Jupyter Development Team.
 | Copyright (c) 2014-2017, PhosphorJS Contributors
@@ -9299,37 +9292,6 @@ span.bp3-popover-target{
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-.jp-Collapse {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  border-top: 1px solid var(--jp-border-color2);
-  border-bottom: 1px solid var(--jp-border-color2);
-}
-
-.jp-Collapse-header {
-  padding: 1px 12px;
-  color: var(--jp-ui-font-color1);
-  background-color: var(--jp-layout-color1);
-  font-size: var(--jp-ui-font-size2);
-}
-
-.jp-Collapse-header:hover {
-  background-color: var(--jp-layout-color2);
-}
-
-.jp-Collapse-contents {
-  padding: 0px 12px 0px 12px;
-  background-color: var(--jp-layout-color1);
-  color: var(--jp-ui-font-color1);
-  overflow: auto;
-}
-
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
 /* This file was auto-generated by ensureUiComponents() in @jupyterlab/buildutils */
 
 /**
@@ -10225,210 +10187,6 @@ span.bp3-popover-target{
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-.jp-IFrame {
-  width: 100%;
-  height: 100%;
-}
-
-.jp-IFrame > iframe {
-  border: none;
-}
-
-/*
-When drag events occur, `p-mod-override-cursor` is added to the body.
-Because iframes steal all cursor events, the following two rules are necessary
-to suppress pointer events while resize drags are occurring. There may be a
-better solution to this problem.
-*/
-body.lm-mod-override-cursor .jp-IFrame {
-  position: relative;
-}
-
-body.lm-mod-override-cursor .jp-IFrame:before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: transparent;
-}
-
-/*-----------------------------------------------------------------------------
-| Copyright (c) 2017, Jupyter Development Team.
-|
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
-.jp-Spinner {
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 10;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background: var(--jp-layout-color0);
-  outline: none;
-}
-
-.jp-SpinnerContent {
-  font-size: 10px;
-  margin: 50px auto;
-  text-indent: -9999em;
-  width: 3em;
-  height: 3em;
-  border-radius: 50%;
-  background: var(--jp-brand-color3);
-  background: linear-gradient(
-    to right,
-    #f37626 10%,
-    rgba(255, 255, 255, 0) 42%
-  );
-  position: relative;
-  animation: load3 1s infinite linear, fadeIn 1s;
-}
-
-.jp-SpinnerContent:before {
-  width: 50%;
-  height: 50%;
-  background: #f37626;
-  border-radius: 100% 0 0 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  content: '';
-}
-
-.jp-SpinnerContent:after {
-  background: var(--jp-layout-color0);
-  width: 75%;
-  height: 75%;
-  border-radius: 50%;
-  content: '';
-  margin: auto;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes load3 {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-/*-----------------------------------------------------------------------------
-| Copyright (c) 2014-2017, Jupyter Development Team.
-|
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
-button.jp-mod-styled {
-  font-size: var(--jp-ui-font-size1);
-  color: var(--jp-ui-font-color0);
-  border: none;
-  box-sizing: border-box;
-  text-align: center;
-  line-height: 32px;
-  height: 32px;
-  padding: 0px 12px;
-  letter-spacing: 0.8px;
-  outline: none;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-}
-
-input.jp-mod-styled {
-  background: var(--jp-input-background);
-  height: 28px;
-  box-sizing: border-box;
-  border: var(--jp-border-width) solid var(--jp-border-color1);
-  padding-left: 7px;
-  padding-right: 7px;
-  font-size: var(--jp-ui-font-size2);
-  color: var(--jp-ui-font-color0);
-  outline: none;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-}
-
-input[type='checkbox'].jp-mod-styled {
-  appearance: checkbox;
-  -webkit-appearance: checkbox;
-  -moz-appearance: checkbox;
-  height: auto;
-}
-
-input.jp-mod-styled:focus {
-  border: var(--jp-border-width) solid var(--md-blue-500);
-  box-shadow: inset 0 0 4px var(--md-blue-300);
-}
-
-.jp-select-wrapper {
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  padding: 1px;
-  background-color: var(--jp-layout-color1);
-  height: 28px;
-  box-sizing: border-box;
-  margin-bottom: 12px;
-}
-
-.jp-select-wrapper.jp-mod-focused select.jp-mod-styled {
-  border: var(--jp-border-width) solid var(--jp-input-active-border-color);
-  box-shadow: var(--jp-input-box-shadow);
-  background-color: var(--jp-input-active-background);
-}
-
-select.jp-mod-styled:hover {
-  background-color: var(--jp-layout-color1);
-  cursor: pointer;
-  color: var(--jp-ui-font-color0);
-  background-color: var(--jp-input-hover-background);
-  box-shadow: inset 0 0px 1px rgba(0, 0, 0, 0.5);
-}
-
-select.jp-mod-styled {
-  flex: 1 1 auto;
-  height: 32px;
-  width: 100%;
-  font-size: var(--jp-ui-font-size2);
-  background: var(--jp-input-background);
-  color: var(--jp-ui-font-color0);
-  padding: 0 25px 0 8px;
-  border: var(--jp-border-width) solid var(--jp-input-border-color);
-  border-radius: 0px;
-  outline: none;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-}
-
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
 .jp-switch {
   display: flex;
   align-items: center;
@@ -10483,131 +10241,15 @@ select.jp-mod-styled {
 }
 
 /*-----------------------------------------------------------------------------
-| Copyright (c) 2014-2016, Jupyter Development Team.
-|
+| Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-:root {
-  --jp-private-toolbar-height: calc(
-    28px + var(--jp-border-width)
-  ); /* leave 28px for content */
-}
-
-.jp-Toolbar {
-  color: var(--jp-ui-font-color1);
-  flex: 0 0 auto;
-  display: flex;
-  flex-direction: row;
-  border-bottom: var(--jp-border-width) solid var(--jp-toolbar-border-color);
-  box-shadow: var(--jp-toolbar-box-shadow);
-  background: var(--jp-toolbar-background);
-  min-height: var(--jp-toolbar-micro-height);
-  padding: 2px;
-  z-index: 1;
-  overflow-x: hidden;
-}
-
-/* Toolbar items */
-
-.jp-Toolbar > .jp-Toolbar-item.jp-Toolbar-spacer {
-  flex-grow: 1;
-  flex-shrink: 1;
-}
-
-.jp-Toolbar-item.jp-Toolbar-kernelStatus {
-  display: inline-block;
-  width: 32px;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 16px;
-}
-
-.jp-Toolbar > .jp-Toolbar-item {
-  flex: 0 0 auto;
-  display: flex;
-  padding-left: 1px;
-  padding-right: 1px;
-  font-size: var(--jp-ui-font-size1);
-  line-height: var(--jp-private-toolbar-height);
-  height: 100%;
-}
-
-/* Toolbar buttons */
-
-/* This is the div we use to wrap the react component into a Widget */
-div.jp-ToolbarButton {
-  color: transparent;
-  border: none;
-  box-sizing: border-box;
-  outline: none;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  padding: 0px;
-  margin: 0px;
-}
-
-button.jp-ToolbarButtonComponent {
-  background: var(--jp-layout-color1);
-  border: none;
-  box-sizing: border-box;
-  outline: none;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  padding: 0px 6px;
-  margin: 0px;
-  height: 24px;
-  border-radius: var(--jp-border-radius);
-  display: flex;
-  align-items: center;
-  text-align: center;
-  font-size: 14px;
-  min-width: unset;
-  min-height: unset;
-}
-
-button.jp-ToolbarButtonComponent:disabled {
-  opacity: 0.4;
-}
-
-button.jp-ToolbarButtonComponent span {
-  padding: 0px;
-  flex: 0 0 auto;
-}
-
-button.jp-ToolbarButtonComponent .jp-ToolbarButtonComponent-label {
-  font-size: var(--jp-ui-font-size1);
-  line-height: 100%;
-  padding-left: 2px;
-  color: var(--jp-ui-font-color1);
-}
-
-#jp-main-dock-panel[data-mode='single-document']
-  .jp-MainAreaWidget
-  > .jp-Toolbar.jp-Toolbar-micro {
-  padding: 0;
-  min-height: 0;
-}
-
-#jp-main-dock-panel[data-mode='single-document']
-  .jp-MainAreaWidget
-  > .jp-Toolbar {
-  border: none;
-  box-shadow: none;
-}
-
-/*-----------------------------------------------------------------------------
-| Copyright (c) Jupyter Development Team.
-| Distributed under the terms of the Modified BSD License.
-|----------------------------------------------------------------------------*/
-
-/* Sibling imports */
-
-/* Override Blueprint's _reset.scss styles */
-html {
-  box-sizing: unset;
+/* Sibling imports */
+
+/* Override Blueprint's _reset.scss styles */
+html {
+  box-sizing: unset;
 }
 
 *,
@@ -10735,6 +10377,37 @@ select {
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
+.jp-Collapse {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  border-top: 1px solid var(--jp-border-color2);
+  border-bottom: 1px solid var(--jp-border-color2);
+}
+
+.jp-Collapse-header {
+  padding: 1px 12px;
+  color: var(--jp-ui-font-color1);
+  background-color: var(--jp-layout-color1);
+  font-size: var(--jp-ui-font-size2);
+}
+
+.jp-Collapse-header:hover {
+  background-color: var(--jp-layout-color2);
+}
+
+.jp-Collapse-contents {
+  padding: 0px 12px 0px 12px;
+  background-color: var(--jp-layout-color1);
+  color: var(--jp-ui-font-color1);
+  overflow: auto;
+}
+
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
 /*-----------------------------------------------------------------------------
 | Variables
 |----------------------------------------------------------------------------*/
@@ -11009,8 +10682,7 @@ select {
   margin-left: auto;
   margin-right: auto;
   background: var(--jp-layout-color1);
-  padding: 24px;
-  padding-bottom: 12px;
+  padding: 24px 24px 12px 24px;
   min-width: 300px;
   min-height: 150px;
   max-width: 1000px;
@@ -11026,6 +10698,10 @@ select {
   resize: both;
 }
 
+.jp-Dialog-content.jp-Dialog-content-small {
+  max-width: 500px;
+}
+
 .jp-Dialog-button {
   overflow: visible;
 }
@@ -11040,6 +10716,25 @@ button.jp-Dialog-button:focus::-moz-focus-inner {
   border: 0;
 }
 
+button.jp-Dialog-button.jp-mod-styled.jp-mod-accept:focus,
+button.jp-Dialog-button.jp-mod-styled.jp-mod-warn:focus,
+button.jp-Dialog-button.jp-mod-styled.jp-mod-reject:focus {
+  outline-offset: 4px;
+  -moz-outline-radius: 0px;
+}
+
+button.jp-Dialog-button.jp-mod-styled.jp-mod-accept:focus {
+  outline: 1px solid var(--md-blue-700);
+}
+
+button.jp-Dialog-button.jp-mod-styled.jp-mod-warn:focus {
+  outline: 1px solid var(--md-red-600);
+}
+
+button.jp-Dialog-button.jp-mod-styled.jp-mod-reject:focus {
+  outline: 1px solid var(--md-grey-700);
+}
+
 button.jp-Dialog-close-button {
   padding: 0;
   height: 100%;
@@ -11113,6 +10808,40 @@ button.jp-Dialog-close-button {
   display: none;
 }
 
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+.jp-IFrame {
+  width: 100%;
+  height: 100%;
+}
+
+.jp-IFrame > iframe {
+  border: none;
+}
+
+/*
+When drag events occur, `p-mod-override-cursor` is added to the body.
+Because iframes steal all cursor events, the following two rules are necessary
+to suppress pointer events while resize drags are occurring. There may be a
+better solution to this problem.
+*/
+body.lm-mod-override-cursor .jp-IFrame {
+  position: relative;
+}
+
+body.lm-mod-override-cursor .jp-IFrame:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: transparent;
+}
+
 .jp-Input-Boolean-Dialog {
   flex-direction: row-reverse;
   align-items: end;
@@ -11428,6 +11157,304 @@ button.jp-Dialog-close-button {
   --md-blue-grey-900: #263238;
 }
 
+/*-----------------------------------------------------------------------------
+| Copyright (c) 2017, Jupyter Development Team.
+|
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+.jp-Spinner {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--jp-layout-color0);
+  outline: none;
+}
+
+.jp-SpinnerContent {
+  font-size: 10px;
+  margin: 50px auto;
+  text-indent: -9999em;
+  width: 3em;
+  height: 3em;
+  border-radius: 50%;
+  background: var(--jp-brand-color3);
+  background: linear-gradient(
+    to right,
+    #f37626 10%,
+    rgba(255, 255, 255, 0) 42%
+  );
+  position: relative;
+  animation: load3 1s infinite linear, fadeIn 1s;
+}
+
+.jp-SpinnerContent:before {
+  width: 50%;
+  height: 50%;
+  background: #f37626;
+  border-radius: 100% 0 0 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: '';
+}
+
+.jp-SpinnerContent:after {
+  background: var(--jp-layout-color0);
+  width: 75%;
+  height: 75%;
+  border-radius: 50%;
+  content: '';
+  margin: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes load3 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/*-----------------------------------------------------------------------------
+| Copyright (c) 2014-2017, Jupyter Development Team.
+|
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+button.jp-mod-styled {
+  font-size: var(--jp-ui-font-size1);
+  color: var(--jp-ui-font-color0);
+  border: none;
+  box-sizing: border-box;
+  text-align: center;
+  line-height: 32px;
+  height: 32px;
+  padding: 0px 12px;
+  letter-spacing: 0.8px;
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+input.jp-mod-styled {
+  background: var(--jp-input-background);
+  height: 28px;
+  box-sizing: border-box;
+  border: var(--jp-border-width) solid var(--jp-border-color1);
+  padding-left: 7px;
+  padding-right: 7px;
+  font-size: var(--jp-ui-font-size2);
+  color: var(--jp-ui-font-color0);
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+input[type='checkbox'].jp-mod-styled {
+  appearance: checkbox;
+  -webkit-appearance: checkbox;
+  -moz-appearance: checkbox;
+  height: auto;
+}
+
+input.jp-mod-styled:focus {
+  border: var(--jp-border-width) solid var(--md-blue-500);
+  box-shadow: inset 0 0 4px var(--md-blue-300);
+}
+
+.jp-FileDialog-Checkbox {
+  margin-top: 35px;
+  display: flex;
+  flex-direction: row;
+  align-items: end;
+  width: 100%;
+}
+
+.jp-FileDialog-Checkbox > label {
+  flex: 1 1 auto;
+}
+
+.jp-select-wrapper {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  padding: 1px;
+  background-color: var(--jp-layout-color1);
+  height: 28px;
+  box-sizing: border-box;
+  margin-bottom: 12px;
+}
+
+.jp-select-wrapper.jp-mod-focused select.jp-mod-styled {
+  border: var(--jp-border-width) solid var(--jp-input-active-border-color);
+  box-shadow: var(--jp-input-box-shadow);
+  background-color: var(--jp-input-active-background);
+}
+
+select.jp-mod-styled:hover {
+  background-color: var(--jp-layout-color1);
+  cursor: pointer;
+  color: var(--jp-ui-font-color0);
+  background-color: var(--jp-input-hover-background);
+  box-shadow: inset 0 0px 1px rgba(0, 0, 0, 0.5);
+}
+
+select.jp-mod-styled {
+  flex: 1 1 auto;
+  height: 32px;
+  width: 100%;
+  font-size: var(--jp-ui-font-size2);
+  background: var(--jp-input-background);
+  color: var(--jp-ui-font-color0);
+  padding: 0 25px 0 8px;
+  border: var(--jp-border-width) solid var(--jp-input-border-color);
+  border-radius: 0px;
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+/*-----------------------------------------------------------------------------
+| Copyright (c) 2014-2016, Jupyter Development Team.
+|
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+:root {
+  --jp-private-toolbar-height: calc(
+    28px + var(--jp-border-width)
+  ); /* leave 28px for content */
+}
+
+.jp-Toolbar {
+  color: var(--jp-ui-font-color1);
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: row;
+  border-bottom: var(--jp-border-width) solid var(--jp-toolbar-border-color);
+  box-shadow: var(--jp-toolbar-box-shadow);
+  background: var(--jp-toolbar-background);
+  min-height: var(--jp-toolbar-micro-height);
+  padding: 2px;
+  z-index: 1;
+  overflow-x: hidden;
+}
+
+/* Toolbar items */
+
+.jp-Toolbar > .jp-Toolbar-item.jp-Toolbar-spacer {
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.jp-Toolbar-item.jp-Toolbar-kernelStatus {
+  display: inline-block;
+  width: 32px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 16px;
+}
+
+.jp-Toolbar > .jp-Toolbar-item {
+  flex: 0 0 auto;
+  display: flex;
+  padding-left: 1px;
+  padding-right: 1px;
+  font-size: var(--jp-ui-font-size1);
+  line-height: var(--jp-private-toolbar-height);
+  height: 100%;
+}
+
+/* Toolbar buttons */
+
+/* This is the div we use to wrap the react component into a Widget */
+div.jp-ToolbarButton {
+  color: transparent;
+  border: none;
+  box-sizing: border-box;
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  padding: 0px;
+  margin: 0px;
+}
+
+button.jp-ToolbarButtonComponent {
+  background: var(--jp-layout-color1);
+  border: none;
+  box-sizing: border-box;
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  padding: 0px 6px;
+  margin: 0px;
+  height: 24px;
+  border-radius: var(--jp-border-radius);
+  display: flex;
+  align-items: center;
+  text-align: center;
+  font-size: 14px;
+  min-width: unset;
+  min-height: unset;
+}
+
+button.jp-ToolbarButtonComponent:disabled {
+  opacity: 0.4;
+}
+
+button.jp-ToolbarButtonComponent span {
+  padding: 0px;
+  flex: 0 0 auto;
+}
+
+button.jp-ToolbarButtonComponent .jp-ToolbarButtonComponent-label {
+  font-size: var(--jp-ui-font-size1);
+  line-height: 100%;
+  padding-left: 2px;
+  color: var(--jp-ui-font-color1);
+}
+
+#jp-main-dock-panel[data-mode='single-document']
+  .jp-MainAreaWidget
+  > .jp-Toolbar.jp-Toolbar-micro {
+  padding: 0;
+  min-height: 0;
+}
+
+#jp-main-dock-panel[data-mode='single-document']
+  .jp-MainAreaWidget
+  > .jp-Toolbar {
+  border: none;
+  box-shadow: none;
+}
+
 /*-----------------------------------------------------------------------------
 | Copyright (c) 2014-2017, Jupyter Development Team.
 |
@@ -13539,11 +13566,28 @@ body[data-format='mobile'] .jp-InputPrompt {
 
 .jp-CodeCell.jp-mod-outputsScrolled .jp-Cell-outputArea {
   overflow-y: auto;
-  max-height: 200px;
-  box-shadow: inset 0 0 6px 2px rgba(0, 0, 0, 0.3);
+  max-height: 24em;
   margin-left: var(--jp-private-cell-scrolling-output-offset);
 }
 
+.jp-CodeCell.jp-mod-outputsScrolled .jp-Cell-outputArea::after {
+  content: ' ';
+  box-shadow: inset 0 0 6px 2px rgb(0 0 0 / 30%);
+  width: 100%;
+  height: 100%;
+  position: sticky;
+  bottom: 0;
+  top: 0;
+  margin-top: -50%;
+  float: left;
+  display: block;
+  pointer-events: none;
+}
+
+.jp-CodeCell.jp-mod-outputsScrolled .jp-OutputArea-child {
+  padding-top: 6px;
+}
+
 .jp-CodeCell.jp-mod-outputsScrolled .jp-OutputArea-prompt {
   flex: 0 0
     calc(
@@ -13964,6 +14008,13 @@ body[data-format='mobile'] .jp-InputPrompt {
   --jp-side-by-side-resized-cell: var(--jp-side-by-side-output-size);
 }
 
+.jp-mod-sideBySide.jp-Notebook .jp-Notebook-cell {
+  margin-top: 3em;
+  margin-bottom: 3em;
+  margin-left: 5%;
+  margin-right: 5%;
+}
+
 .jp-mod-sideBySide.jp-Notebook .jp-CodeCell {
   display: grid;
   grid-template-columns: minmax(0, 1fr) min-content minmax(