Merge pull request #939 from ellisonbg/css-notebook

Split the notebook CSS into multiple files...

examples/notebook/index.css

@@ -1,8 +1,9 @@
 /*-----------------------------------------------------------------------------
-| Copyright (c) 2014-2016, Jupyter Development Team.
-|
+| Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
+
+
 body {
   background: white;
   margin: 0;
@@ -18,6 +19,7 @@ body {
   bottom: 4px;
 }
 
+
 .jp-Notebook-panel {
   border-bottom: 1px solid #E0E0E0;
 }

src/notebook/cells/index.css

@@ -0,0 +1,79 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+
+/*-----------------------------------------------------------------------------
+| Cell
+|----------------------------------------------------------------------------*/
+
+
+.jp-Cell {
+  padding: 5px;
+  margin: 0px;
+  border: var(--jp-border-width) solid transparent;
+  outline: none;
+  background: transparent;
+}
+
+
+/*-----------------------------------------------------------------------------
+| CodeCell
+|----------------------------------------------------------------------------*/
+
+
+
+/*-----------------------------------------------------------------------------
+| MarkdownCell
+|----------------------------------------------------------------------------*/
+
+
+.jp-MarkdownCell-renderer {
+  padding: 0.5em 0.5em 0.5em 0.4em;
+}
+
+
+.jp-MarkdownCell-content {
+  padding: 0.5em;
+}
+
+
+/*-----------------------------------------------------------------------------
+| InputArea
+|----------------------------------------------------------------------------*/
+
+
+.jp-InputArea {
+  display: flex;
+  flex-direction: row;
+}
+
+
+.jp-InputArea-prompt {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: 90px;
+  color: #303F9F;
+  font-family: monospace;
+  padding: 0.4em;
+  text-align: right;
+  line-height: 1.2em;
+  font-size: 14px;
+}
+
+
+.jp-InputArea-editor {
+  flex-grow: 1;
+  flex-shrink: 1;
+  height: auto;
+  min-height: 2em;
+}
+
+
+.jp-CellEditor {
+  border: var(--jp-border-width) solid #cfcfcf;
+  border-radius: 2px;
+  background: #f7f7f7;
+  line-height: 1.2em;
+}

src/notebook/codemirror/highlight.css

@@ -0,0 +1,113 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+
+/*
+
+Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
+Adapted from GitHub theme
+
+*/
+
+.cm-s-ipython span.cm-variable {
+  color: black;
+}
+
+
+.cm-s-ipython span.cm-variable-2 {
+  color: #1a1a1a;
+}
+.cm-s-ipython span.cm-variable-3 {
+  color: #333;
+}
+
+
+.cm-s-ipython span.cm-punctuation {
+  color: #05a;
+}
+
+
+.cm-s-ipython span.cm-property {
+  color: #05a;
+}
+
+
+.cm-s-ipython span.cm-operator {
+  color: #AA22FF;
+  font-weight: bold;
+}
+
+
+.cm-s-ipython span.cm-comment {
+  color: #408080;
+  font-style: italic;
+}
+
+
+.cm-s-ipython span.cm-string {
+  color: #BA2121;
+}
+
+
+.cm-s-ipython span.cm-string-2 {
+  color: #05a;
+}
+
+
+.cm-s-ipython span.cm-meta {
+  color: #AA22FF;
+}
+
+
+.cm-s-ipython span.cm-qualifier {
+  color: #555;
+}
+
+
+.cm-s-ipython span.cm-builtin {
+  color: #008000;
+}
+
+
+.cm-s-ipython span.cm-bracket {
+  color: #997;
+}
+
+
+.cm-s-ipython span.cm-tag {
+  color: #170;
+}
+
+
+.cm-s-ipython span.cm-attribute {
+  color: #00c;
+}
+
+
+.cm-s-ipython span.cm-header {
+  color: blue;
+}
+
+
+.cm-s-ipython span.cm-quote {
+  color: #090;
+}
+
+
+.cm-s-ipython span.cm-link {
+  text-decoration: underline;
+}
+
+
+.cm-s-ipython span.cm-error {
+  color: #f00;
+}
+
+
+.cm-s-ipython span.cm-tab {
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);
+  background-position: right;
+  background-repeat: no-repeat;
+}

src/notebook/codemirror/index.css

@@ -0,0 +1,60 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+@import './highlight.css';
+
+
+.jp-CellEditor > .CodeMirror {
+  line-height: 1.21429em;
+  /* Changed from 1em to our global default */
+  font-size: 14px;
+  height: auto;
+  /* Changed to auto to autogrow */
+  background: none;
+  /* Changed from white to allow our bg to show through */
+}
+
+
+.jp-CellEditor > .CodeMirror pre {
+  /* In CM3 this went to 4px from 0 in CM2. We need the 0 value because of how we size */
+  /* .CodeMirror-lines */
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+}
+
+
+/* This causes https://github.com/jupyter/jupyterlab/issues/522 */
+.jp-CellEditor .CodeMirror-lines {
+  padding: 0.4em;
+}
+
+
+/* The following selectors never apply since .CodeMirror is the only child of .jp-CellEditor */
+
+.jp-CellEditor > .CodeMirror-scroll {
+  /*  The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/
+  /*  We have found that if it is visible, vertical scrollbars appear with font size changes.*/
+  overflow-y: hidden;
+  overflow-x: auto;
+}
+
+
+.jp-CellEditor > .CodeMirror-lines {
+  /* In CM2, this used to be 0.4em, but in CM3 it went to 4px. We need the em value because */
+  /* we have set a different line-height and want this to scale with that. */
+  padding: 0.4em;
+}
+
+
+.jp-CellEditor > .CodeMirror-linenumber {
+  padding: 0 8px 0 4px;
+}
+
+
+.jp-CellEditor > .CodeMirror-gutters {
+  border-bottom-left-radius: 2px;
+  border-top-left-radius: 2px;
+}

src/notebook/highlight.css

@@ -1,115 +0,0 @@
-/*
-
-Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
-Adapted from GitHub theme
-
-*/
-
-// We import this CSS file as a LESS file to use some of its definitions
-// in the theme below, but not export its content.
-@import (less, reference) "codemirror/lib/codemirror.css";
-
-
-@highlight-base: #000;
-
-.highlight-base {
-  color: @highlight-base;
-}
-
-.highlight-variable {
-  .highlight-base();
-}
-
-.highlight-variable-2 {
-  color: lighten(@highlight-base, 10%);
-}
-
-.highlight-variable-3 {
-  color: lighten(@highlight-base, 20%);
-}
-
-.highlight-string {
-  color: #BA2121;
-}
-
-.highlight-comment {
-  color: #408080;
-  font-style: italic;
-}
-
-.highlight-number {
-  color: #080;
-}
-
-.highlight-atom {
-  color: #88F;
-}
-
-.highlight-keyword {
-  color: #008000;
-  font-weight: bold;
-}
-
-.highlight-builtin {
-  color: #008000;
-}
-
-.highlight-error {
-  color: #f00;
-}
-
-.highlight-operator {
-  color: #AA22FF;
-  font-weight: bold;
-}
-
-.highlight-meta {
-  color: #AA22FF;
-}
-
-/* previously not defined, copying from default codemirror */
-.highlight-def { .cm-s-default.cm-def() }
-.highlight-punctuation { .cm-s-default.cm-punctuation() }
-.highlight-property { .cm-s-default.cm-property() }
-.highlight-string-2 { .cm-s-default.cm-string-2() }
-.highlight-qualifier { .cm-s-default.cm-qualifier() }
-.highlight-bracket { .cm-s-default.cm-bracket() }
-.highlight-tag { .cm-s-default.cm-tag() }
-.highlight-attribute { .cm-s-default.cm-attribute() }
-.highlight-header { .cm-s-default.cm-header() }
-.highlight-quote { .cm-s-default.cm-quote() }
-.highlight-link { .cm-s-default.cm-link() }
-
-
-/* apply the same style to codemirror */
-.cm-s-ipython span {
-  &.cm-keyword      { .highlight-keyword() }
-  &.cm-atom         { .highlight-atom() }
-  &.cm-number       { .highlight-number() }
-  &.cm-def          { .highlight-def() }
-  &.cm-variable     { .highlight-variable() }
-  &.cm-punctuation  { .highlight-punctuation() }
-  &.cm-property     { .highlight-property() }
-  &.cm-operator     { .highlight-operator() }
-  &.cm-variable-2   { .highlight-variable-2() }
-  &.cm-variable-3   { .highlight-variable-3() }
-  &.cm-comment      { .highlight-comment() }
-  &.cm-string       { .highlight-string() }
-  &.cm-string-2     { .highlight-string-2() }
-  &.cm-meta         { .highlight-meta() }
-  &.cm-qualifier    { .highlight-qualifier() }
-  &.cm-builtin      { .highlight-builtin() }
-  &.cm-bracket      { .highlight-bracket() }
-  &.cm-tag          { .highlight-tag() }
-  &.cm-attribute    { .highlight-attribute() }
-  &.cm-header       { .highlight-header() }
-  &.cm-quote        { .highlight-quote() }
-  &.cm-link         { .highlight-link() }
-  &.cm-error        { .highlight-error() }
-
-  &.cm-tab {
-    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);
-    background-position: right;
-    background-repeat: no-repeat;
-  }
-}

src/notebook/index.css

@@ -1,277 +1,11 @@
 /*-----------------------------------------------------------------------------
-| Copyright (c) 2014-2016, Jupyter Development Team.
-|
+| Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-
+@import './cells/index.css';
+@import './codemirror/index.css';
+@import '../completer/index.css';
+@import './notebook/index.css';
+@import './output-area/index.css';
 @import './toolbar.css';
-
-
-.jp-Notebook {
-  padding-left: 4px;
-  padding-right: 4px;
-  padding-bottom: 20px;
-  margin-top: 20px;
-  min-width: 50px;
-  min-height: 50px;
-  outline: none;
-  overflow: auto;
-}
-
-
-.jp-Notebook-panel {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-
-.jp-InputArea {
-  display: flex;
-  flex-direction: row;
-}
-
-
-.jp-InputArea-prompt {
-  flex-grow: 0;
-  flex-shrink: 0;
-  flex-basis: 90px;
-  color: #303F9F;
-  font-family: monospace;
-  padding: 0.4em;
-  text-align: right;
-  line-height: 1.2em;
-  font-size: 14px;
-}
-
-
-.jp-InputArea-editor {
-  flex-grow: 1;
-  flex-shrink: 1;
-  height: auto;
-  min-height: 2em;
-}
-
-
-.jp-CellEditor {
-  border: var(--jp-border-width) solid #cfcfcf;
-  border-radius: 2px;
-  background: #f7f7f7;
-  line-height: 1.2em;
-}
-
-
-.jp-MarkdownCell {
-  outline: 0;
-}
-
-
-.jp-MarkdownCell.jp-mod-rendered {
-  padding-left: 90px;
-}
-
-
-.jp-MarkdownCell-renderer {
-  padding: 0.5em 0.5em 0.5em 0.4em;
-}
-
-
-.jp-MarkdownCell-content {
-  padding: 0.5em;
-}
-
-
-.jp-OutputArea {
-  background: none;
-}
-
-
-.jp-Output {
-  display: flex;
-  flex-direction: row;
-}
-
-
-.jp-Output-executeResult {
-  margin-left: 0px;
-  flex: 1 1 auto;
-}
-
-
-.jp-Output-executeResult img {
-  max-width: 100%;
-  height: auto;
-}
-
-
-img.jp-mod-unconfined {
-  max-width: none;
-}
-
-
-.jp-Output-prompt {
-  color: #D84315;
-  font-family: monospace;
-  text-align: right;
-  vertical-align: middle;
-  padding: 0.4em;
-  font-size: 14px;
-  flex: 0 0 90px;
-  box-sizing: border-box;
-}
-
-
-.jp-Output-result {
-  padding: 0.4em;
-  user-select: text;
-  -moz-user-select: text;
-  -webkit-user-select: text;
-  -ms-user-select: text;
-}
-
-
-.p-Widget.jp-Output-result {
-  overflow: auto;
-}
-
-
-/* If we have two nested output areas (for example, as with output widgets),
-   then the inner output looks weird with a prompt, so we hide it. */
-.jp-Output .jp-Output .jp-Output-prompt {
-  display: none;
-}
-
-
-.jp-Notebook .jp-Output pre {
-  border: none;
-  margin: 1px 0 0 5px;
-  overflow-x: auto;
-  overflow-y: auto;
-  word-break: break-all;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-}
-
-
-.jp-Output-stderr {
-  background: #fdd;
-}
-
-
-.jp-Output-stdinPrompt {
-  padding-right: 8px;
-}
-
-
-.jp-Notebook.jp-mod-commandMode .jp-Notebook-cell.jp-mod-active.jp-mod-selected {
-  border-color: #ABABAB;
-  border-left-width: var(--jp-border-width);
-  background: linear-gradient(to right, #42A5F5 -40px, #42A5F5 5px, transparent 5px, transparent 100%);
-}
-
-
-.jp-Notebook.jp-mod-commandMode .jp-Notebook-cell.jp-mod-multiSelected.jp-mod-active {
-  background: linear-gradient(to right, #42A5F5 -40px, #42A5F5 7px, #E3F2FD 7px, #E3F2FD 100%);
-}
-
-
-.jp-Notebook.jp-mod-commandMode .jp-Notebook-cell.jp-mod-selected {
-  background: #E3F2FD;
-}
-
-
-.jp-Notebook.jp-mod-editMode .jp-Notebook-cell.jp-mod-active {
-  border-color: #66BB6A;
-  border-left-width: var(--jp-border-width);
-  background: linear-gradient(to right, #66BB6A -40px, #66BB6A 5px, transparent 5px, transparent 100%);
-}
-
-
-.jp-NotebookContainer-widget {
-  flex: 0 0 auto;
-}
-
-
-.jp-Notebook {
-  flex: 1 1 auto;
-}
-
-
-
-.jp-Cell {
-  padding-top: 5px;
-  padding-bottom: 5px;
-  padding-left: 5px;
-  padding-right: 5px;
-  border-width: var(--jp-border-width);
-  border-style: solid;
-  border-color: transparent;
-  outline: none;
-}
-
-
-.jp-Cell.jp-CodeCell.jp-mod-collapsed.jp-mod-readOnly {
-  padding-left: 5px;
-  padding-right: 5px;
-  border-width: var(--jp-border-width);
-  border-style: solid;
-  border-color: transparent;
-  outline: none;
-  background: transparent;
-  border-color: transparent;
-}
-
-
-.jp-CellEditor > .CodeMirror {
-  line-height: 1.21429em;
-  /* Changed from 1em to our global default */
-  font-size: 14px;
-  height: auto;
-  /* Changed to auto to autogrow */
-  background: none;
-  /* Changed from white to allow our bg to show through */
-}
-
-
-.jp-CellEditor > .CodeMirror pre {
-  /* In CM3 this went to 4px from 0 in CM2. We need the 0 value because of how we size */
-  /* .CodeMirror-lines */
-  padding: 0;
-  border: 0;
-  border-radius: 0;
-}
-
-
-/* This causes https://github.com/jupyter/jupyterlab/issues/522 */
-.jp-CellEditor .CodeMirror-lines {
-  padding: 0.4em;
-}
-
-
-/* The following selectors never apply since .CodeMirror is the only child of .jp-CellEditor */
-
-.jp-CellEditor > .CodeMirror-scroll {
-  /*  The CodeMirror docs are a bit fuzzy on if overflow-y should be hidden or visible.*/
-  /*  We have found that if it is visible, vertical scrollbars appear with font size changes.*/
-  overflow-y: hidden;
-  overflow-x: auto;
-}
-
-
-.jp-CellEditor > .CodeMirror-lines {
-  /* In CM2, this used to be 0.4em, but in CM3 it went to 4px. We need the em value because */
-  /* we have set a different line-height and want this to scale with that. */
-  padding: 0.4em;
-}
-
-
-.jp-CellEditor > .CodeMirror-linenumber {
-  padding: 0 8px 0 4px;
-}
-
-
-.jp-CellEditor > .CodeMirror-gutters {
-  border-bottom-left-radius: 2px;
-  border-top-left-radius: 2px;
-}

src/notebook/notebook/index.css

@@ -0,0 +1,57 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+
+.jp-Notebook {
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-bottom: 20px;
+  margin-top: 20px;
+  min-width: 50px;
+  min-height: 50px;
+  outline: none;
+  overflow: auto;
+}
+
+
+.jp-Notebook-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+
+.jp-Notebook.jp-mod-commandMode .jp-Notebook-cell.jp-mod-active.jp-mod-selected {
+  border-color: #ABABAB;
+  border-left-width: var(--jp-border-width);
+  background: linear-gradient(to right, #42A5F5 -40px, #42A5F5 5px, transparent 5px, transparent 100%);
+}
+
+
+.jp-Notebook.jp-mod-commandMode .jp-Notebook-cell.jp-mod-multiSelected.jp-mod-active {
+  background: linear-gradient(to right, #42A5F5 -40px, #42A5F5 7px, #E3F2FD 7px, #E3F2FD 100%);
+}
+
+
+.jp-Notebook.jp-mod-commandMode .jp-Notebook-cell.jp-mod-selected {
+  background: #E3F2FD;
+}
+
+
+.jp-Notebook.jp-mod-editMode .jp-Notebook-cell.jp-mod-active {
+  border-color: #66BB6A;
+  border-left-width: var(--jp-border-width);
+  background: linear-gradient(to right, #66BB6A -40px, #66BB6A 5px, transparent 5px, transparent 100%);
+}
+
+
+.jp-NotebookContainer-widget {
+  flex: 0 0 auto;
+}
+
+
+.jp-Notebook {
+  flex: 1 1 auto;
+}

src/notebook/notebook/toolbar.css

@@ -0,0 +1,121 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+
+.jp-NBToolbar {
+  color: var(--jp-ui-font-color1);
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: row;
+  border-bottom: var(--jp-border-width) solid var(--jp-border-color2);
+  height: 24px;
+}
+
+
+.jp-NBToolbar > .jp-NBToolbar-item {
+  flex: 0 0 auto;
+  padding-left: 8px;
+  padding-right: 8px;
+  vertical-align: middle;
+  font-size: 14px;
+  line-height: 23px;
+}
+
+
+.jp-NBToolbar-item.jp-NBToolbar-button,
+.jp-NBToolbar-item.jp-NBToolbar-kernelIndicator {
+  font-family: FontAwesome;
+  text-align: center;
+  display: inline-block;
+}
+
+
+.jp-NBToolbar-item.jp-NBToolbar-cellType select {
+    background: #FFFFFF;
+}
+
+.jp-NBToolbar-cellType .jp-NBToolbar-cellTypeDropdown {
+    border: var(--jp-border-width) solid var(--jp-border-color1);
+    border-radius: 0;
+    outline: none;
+    width: 100%;
+    font-size: 14px;
+    line-height: 23px;
+}
+
+
+.jp-NBToolbar-item.jp-NBToolbar-kernelName {
+    text-align: right;
+    flex-grow: 1;
+    flex-shrink: 1;
+}
+
+
+.jp-NBToolbar-item.jp-NBToolbar-kernelIndicator {
+    border-right: none;
+}
+
+
+.jp-NBToolbar-button.jp-mod-pressed {
+    background-color: #E0E0E0;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
+}
+
+
+.jp-NBToolbar-button:hover {
+    background-color: #EEEEEE;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
+}
+
+
+.jp-NBToolbar-button.jp-NBToolbar-save::before {
+   content: "\f0c7";  /* Save */
+}
+
+
+.jp-NBToolbar-button.jp-NBToolbar-insert::before {
+   content: "\f067";  /* Plus */
+}
+
+
+.jp-NBToolbar-button.jp-NBToolbar-cut::before {
+   content: "\f0c4";  /* Cut */
+}
+
+
+.jp-NBToolbar-button.jp-NBToolbar-copy::before {
+   content: "\f0c5";  /* Copy */
+}
+
+
+.jp-NBToolbar-button.jp-NBToolbar-paste::before {
+   content: "\f0ea";  /* Paste */
+}
+
+
+.jp-NBToolbar-button.jp-NBToolbar-run::before {
+   content: "\f051";  /* Step-forward */
+}
+
+
+.jp-NBToolbar-button.jp-NBToolbar-interrupt::before {
+   content: "\f04d";  /* Stop */
+}
+
+
+.jp-NBToolbar-button.jp-NBToolbar-restart::before {
+   content: "\f01e";  /* Rotate-right */
+}
+
+
+.jp-NBToolbar-item.jp-NBToolbar-kernelIndicator::before {
+    content: "\f10c";  /* Circle-o */
+}
+
+
+.jp-NBToolbar-item.jp-NBToolbar-kernelIndicator.jp-mod-busy::before {
+    content: "\f111";  /* Circle */
+}
+

src/notebook/output-area/index.css

@@ -0,0 +1,85 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+
+.jp-OutputArea {
+  background: none;
+}
+
+
+.jp-Output {
+  display: flex;
+  flex-direction: row;
+}
+
+
+.jp-Output-executeResult {
+  margin-left: 0px;
+  flex: 1 1 auto;
+}
+
+
+.jp-Output-executeResult img {
+  max-width: 100%;
+  height: auto;
+}
+
+
+img.jp-mod-unconfined {
+  max-width: none;
+}
+
+
+.jp-Output-result {
+  padding: 0.4em;
+  user-select: text;
+  -moz-user-select: text;
+  -webkit-user-select: text;
+  -ms-user-select: text;
+}
+
+
+.p-Widget.jp-Output-result {
+  overflow: auto;
+}
+
+
+/* If we have two nested output areas (for example, as with output widgets),
+   then the inner output looks weird with a prompt, so we hide it. */
+.jp-Output .jp-Output .jp-Output-prompt {
+  display: none;
+}
+
+
+.jp-Notebook .jp-Output pre {
+  border: none;
+  margin: 1px 0 0 5px;
+  overflow-x: auto;
+  overflow-y: auto;
+  word-break: break-all;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+
+.jp-Output-stderr {
+  background: #fdd;
+}
+
+
+.jp-Output-stdinPrompt {
+  padding-right: 8px;
+}
+
+.jp-Output-prompt {
+  color: #D84315;
+  font-family: monospace;
+  text-align: right;
+  vertical-align: middle;
+  padding: 0.4em;
+  font-size: 14px;
+  flex: 0 0 90px;
+  box-sizing: border-box;
+}