Merge pull request #991 from ellisonbg/design20

Design20

src/console/index.css

@@ -59,27 +59,12 @@
 }
 
 
-/*
-TODO: Right now we have to copy this style that is applied in the notebook
-using the selecetor `.jp-Notebook .jp-Output pre`, but we need to style
-output in a manner that works everywhere, not just in the notebook
-*/
-.jp-ConsoleContent .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-ConsoleContent-content .jp-InputArea-editor.jp-CellEditor {
   background: transparent;
   border-color: transparent;
 }
 
+
 /* TODO: we should be able to use notebook styles for this */
 .jp-ConsoleContent-input .jp-ConsoleContent-prompt.jp-Cell {
   background: linear-gradient(to right, #66BB6A -40px, #66BB6A 5px, transparent 5px, transparent 100%);

src/default-theme/variables.css

@@ -74,7 +74,8 @@ all of MD as it is not optimized for dense, information rich UIs.
   Content font variables are used for typography of user generated content.
   */
   
-  --jp-content-font-size: 14px;
+  --jp-content-font-size: 13px;
+  --jp-content-line-height: 1.5;
   --jp-content-font-color0: black;
   --jp-content-font-color1: black;
   --jp-content-font-color2: var(--md-grey-700);
@@ -88,7 +89,7 @@ all of MD as it is not optimized for dense, information rich UIs.
 
   --jp-code-font-size: 13px;
   --jp-code-line-height: 17px;
-  --jp-code-padding: 4px;
+  --jp-code-padding: 5px;
 
   /* Layout
   

src/editorwidget/index.css

@@ -5,6 +5,6 @@
 
 
 .jp-EditorWidget {
-    border-top: var(--jp-border-width) solid var(--jp-border-color2);
+    border-top: var(--jp-border-width) solid var(--jp-border-color1);
     margin-top: 4px;
 }

src/filebrowser/index.css

@@ -71,7 +71,7 @@
 
 
 .jp-FileButtons-button {
-  flex: 0 1 var(--jp-private-filebrowser-button-width);
+  flex: 1 1 auto;
   height: var(--jp-private-filebrowser-button-height);
   line-height: var(--jp-private-filebrowser-button-height);
   color: var(--jp-ui-font-color1);

src/notebook/cells/index.css

@@ -21,13 +21,14 @@
 .jp-Cell-prompt {
   flex-grow: 0;
   flex-shrink: 0;
-  flex-basis: 90px;
-  color: #303F9F;
+  flex-basis: var(--jp-private-notebook-cell-prompt-width);
+  color: var(--jp-private-notebook-cell-inprompt-color);
   font-family: monospace;
-  padding: 0.4em;
+  padding: var(--jp-code-padding);
   text-align: right;
-  line-height: 1.2em;
-  font-size: 14px;
+  line-height: var(--jp-code-line-height);
+  font-size: var(--jp-code-font-size);
+  border: var(--jp-border-width) solid transparent;
 }
 
 
@@ -41,13 +42,13 @@
 | MarkdownCell
 |----------------------------------------------------------------------------*/
 
+
 .jp-MarkdownOutput {
   display: flex;
 }
 
 
 .jp-MarkdownOutput-content {
-  padding: 0.5em;
   flex: 1 1 auto;
 }
 
@@ -67,13 +68,11 @@
   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;
+  border: var(--jp-border-width) solid var(--jp-private-notebook-cell-editor-border);
+  border-radius: 0px;
+  background: var(--jp-private-notebook-cell-editor-background);
 }

src/notebook/codemirror/index.css

@@ -6,20 +6,16 @@
 @import './highlight.css';
 
 
-.jp-CellEditor > .CodeMirror {
-  line-height: 1.21429em;
-  /* Changed from 1em to our global default */
-  font-size: 14px;
+.CodeMirror {
+  line-height: var(--jp-code-line-height);
+  font-size: var(--jp-code-font-size);
   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 */
+.CodeMirror pre {
   padding: 0;
   border: 0;
   border-radius: 0;
@@ -27,34 +23,13 @@
 
 
 /* This causes https://github.com/jupyter/jupyterlab/issues/522 */
-.jp-CellEditor .CodeMirror-lines {
-  padding: 0.4em;
+/* May not cause it not because we changed it! */
+.CodeMirror-lines {
+  padding: var(--jp-code-padding);
 }
 
 
-/* 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;
+.CodeMirror-linenumbers {
+  padding: 0 4px 0 4px;
 }
 
-
-.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/index.css

@@ -3,9 +3,28 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
+/*-----------------------------------------------------------------------------
+| Variables
+|----------------------------------------------------------------------------*/
+
+
+:root {
+  --jp-private-notebook-padding: 10px;
+  --jp-private-notebook-cell-editor-background: #f7f7f7;
+  --jp-private-notebook-cell-editor-border: #cfcfcf;
+  --jp-private-notebook-cell-prompt-width: 90px;
+  --jp-private-notebook-cell-inprompt-color: #303F9F;
+  --jp-private-notebook-cell-outprompt-color: #D84315;
+}
+
+
+/*-----------------------------------------------------------------------------
+| Imports
+|----------------------------------------------------------------------------*/
+
+
 @import './cells/index.css';
 @import './codemirror/index.css';
-@import '../completer/index.css';
 @import './notebook/index.css';
 @import './output-area/index.css';
 @import './toolbar.css';

src/notebook/notebook/index.css

@@ -5,14 +5,15 @@
 
 
 .jp-Notebook {
-  padding-left: 4px;
-  padding-right: 4px;
-  padding-bottom: 20px;
-  margin-top: 20px;
+  padding-left: var(--jp-private-notebook-padding);
+  padding-right: var(--jp-private-notebook-padding);
+  padding-top: var(--jp-private-notebook-padding);
+  padding-bottom: calc(4*var(--jp-private-notebook-padding));
   min-width: 50px;
   min-height: 50px;
   outline: none;
   overflow: auto;
+  background: var(--jp-layout-color1);
 }
 
 

src/notebook/output-area/index.css

@@ -3,37 +3,70 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+
+/*-----------------------------------------------------------------------------
+| Main OutputArea
+| OutputArea has a list of Outputs
+|----------------------------------------------------------------------------*/
+
 
 .jp-OutputArea {
   background: none;
+  max-height: 1000px;
+  overflow-y: auto;
 }
 
 
-.jp-Output {
-  display: flex;
-  flex-direction: row;
+/*-----------------------------------------------------------------------------
+| Individual Output(s) and their prompts
+| Output[
+|   Output-prompt, Output-result
+| ]
+|----------------------------------------------------------------------------*/
+
+
+.jp-Output-stdinPrompt {
+  padding-right: 8px;
 }
 
 
-.jp-Output-executeResult {
-  margin-left: 0px;
-  flex: 1 1 auto;
+.jp-Output-prompt {
+  color: var(--jp-private-notebook-cell-outprompt-color);
+  font-family: monospace;
+  text-align: right;
+  vertical-align: middle;
+  padding: var(--jp-code-padding);
+  font-size: var(--jp-code-font-size);
+  line-height: var(--jp-code-line-height);
+  border: var(--jp-border-width) solid transparent;
+  flex: 0 0 var(--jp-private-notebook-cell-prompt-width);
+  box-sizing: border-box;
 }
 
 
-.jp-Output-executeResult img {
-  max-width: 100%;
-  height: auto;
+.jp-Output-prompt:hover {
+  background: var(--md-grey-100);
 }
 
 
-img.jp-mod-unconfined {
-  max-width: none;
+.jp-Output:first-child {
+  margin-top: 5px;
+}
+
+
+.jp-Output {
+  display: flex;
+  flex-direction: row;
 }
 
 
+
 .jp-Output-result {
-  padding: 0.4em;
   user-select: text;
   -moz-user-select: text;
   -webkit-user-select: text;
@@ -56,9 +89,28 @@ img.jp-mod-unconfined {
 }
 
 
-.jp-Notebook .jp-Output pre {
+/*-----------------------------------------------------------------------------
+| Output-executeResult is added to any Output-result for the display of the object
+| returned by a cell
+|----------------------------------------------------------------------------*/
+
+
+.jp-Output-executeResult {
+  margin-left: 0px;
+  flex: 1 1 auto;
+}
+
+
+/*-----------------------------------------------------------------------------
+| Specific output formats
+|----------------------------------------------------------------------------*/
+
+/* text */
+
+.jp-Output-result pre {
   border: none;
-  margin: 1px 0 0 5px;
+  margin: 0px;
+  padding: 0px;
   overflow-x: auto;
   overflow-y: auto;
   word-break: break-all;
@@ -67,25 +119,46 @@ img.jp-mod-unconfined {
 }
 
 
-.jp-Output-stderr {
+.jp-Output-executeResult.jp-RenderedText {
+  padding-top: var(--jp-code-padding);
+}
+
+
+.jp-Output-result.jp-RenderedText {
+  padding-left: var(--jp-code-padding);
+  font-size: var(--jp-code-font-size);
+  line-height: var(--jp-code-line-height);
+}
+
+
+.jp-Output-result.jp-Output-stderr {
   background: #fdd;
 }
 
-.jp-Output-stdinPrompt {
-  padding-right: 8px;
+
+/* images */
+
+img.jp-mod-unconfined {
+  max-width: none;
 }
 
-.jp-Output-prompt:hover {
-  background: var(--md-grey-100);
+
+.jp-Output-result img {
+  max-width: 100%;
+  height: auto;
 }
 
-.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;
+
+/* html */
+
+.jp-Output-executeResult.jp-RenderedHTMLCommon {
+  padding-top: 0px;
 }
+
+/* tables */
+
+.jp-Output-result.jp-RenderedHTMLCommon table {
+  margin-left: 0;
+  margin-right: 0;
+}
+

src/notebook/toolbar.css

@@ -3,6 +3,29 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
+/*-----------------------------------------------------------------------------
+| Variables
+|----------------------------------------------------------------------------*/
+
+
+:root {
+  --jp-private-notebook-toolbar-height: 24px;
+}
+
+
+/*-----------------------------------------------------------------------------
+| Styles
+|----------------------------------------------------------------------------*/
+
+
+.jp-Notebook-panel .jp-Toolbar {
+  height: calc(var(--jp-private-notebook-toolbar-height) + var(--jp-border-width));
+  border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
+}
+
+.jp-Notebook-panel .jp-Toolbar .jp-Toolbar-item {
+  line-height: 24px;
+}
 
 .jp-Toolbar-item.jp-Kernel-toolbarKernelIndicator {
   font-family: FontAwesome;
@@ -12,7 +35,7 @@
 
 
 .jp-Notebook-toolbarCellType select {
-  background: #FFFFFF;
+  background: var(--jp-layout-color1);
 }
 
 
@@ -21,8 +44,10 @@
   border-radius: 0;
   outline: none;
   width: 100%;
-  font-size: 14px;
-  line-height: 23px;
+  font-size: var(--jp-ui-font-size1);
+  height: 20px;
+  margin-top: 2px;
+  margin-bottom: 2px;
 }
 
 
@@ -30,6 +55,7 @@
   text-align: right;
   flex-grow: 1;
   flex-shrink: 1;
+  font-size: var(--jp-ui-font-size1);
 }
 
 

src/renderers/index.css

@@ -4,14 +4,20 @@
 |----------------------------------------------------------------------------*/
 
 
-.jp-RenderedHTMLCommon {
+.jp-RenderedLatex {
+  color: var(--jp-content-font-color1);
+  font-size: var(--jp-content-font-size);
+  line-height: var(--jp-content-line-height);
+}
 
-  color: black;
-  font-size: 14px;
-  line-height: 20px;
 
+.jp-RenderedHTMLCommon {
+  color: var(--jp-content-font-color1);
+  font-size: var(--jp-content-font-size);
+  line-height: var(--jp-content-line-height);
 }
 
+
 .jp-RenderedHTMLCommon .MathJax_Display {
   margin: 0;
 }
@@ -21,18 +27,22 @@
   font-style: italic;
 }
 
+
 .jp-RenderedHTMLCommon strong {
   font-weight: bold;
 }
 
+
 .jp-RenderedHTMLCommon u {
   text-decoration: underline;
 }
 
+
 .jp-RenderedHTMLCommon:link {
   text-decoration: underline;
 }
 
+
 .jp-RenderedHTMLCommon:visited {
   text-decoration: underline;
 }
@@ -179,8 +189,8 @@ margin-top = 14, 14, 14, 14, 8, 8
 
 
 .jp-RenderedHTMLCommon hr {
-  color: black;
-  background-color: black;
+  color: var(--jp-border-color1);
+  background-color: var(--jp-border-color1);
   margin-top: 1em;
   margin-bottom: 1em;
 }
@@ -194,8 +204,8 @@ margin-top = 14, 14, 14, 14, 8, 8
 .jp-RenderedHTMLCommon pre,
 .jp-RenderedHTMLCommon code {
   border: 0;
-  background-color: white;
-  color: black;
+  background-color: var(--jp-layout-color1);
+  color: var(--jp-content-font-color1);
   font-size: 100%;
   padding: 0px;
 }