More notebook styling

src/default-theme/variables.css

@@ -88,7 +88,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/notebook/cells/index.css

@@ -24,10 +24,11 @@
   flex-basis: 90px;
   color: #303F9F;
   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

@@ -7,19 +7,15 @@
 
 
 .jp-CellEditor > .CodeMirror {
-  line-height: 1.21429em;
-  /* Changed from 1em to our global default */
-  font-size: 14px;
+  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 */
   padding: 0;
   border: 0;
   border-radius: 0;
@@ -27,34 +23,13 @@
 
 
 /* This causes https://github.com/jupyter/jupyterlab/issues/522 */
+/* May not cause it not because we changed it! */
 .jp-CellEditor .CodeMirror-lines {
-  padding: 0.4em;
+  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;
+.jp-CellEditor .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

@@ -10,6 +10,8 @@
 
 :root {
   --jp-private-notebook-padding: 10px;
+  --jp-private-notebook-cell-editor-background: #f7f7f7;
+  --jp-private-notebook-cell-editor-border: #cfcfcf;
 }
 
 

src/notebook/notebook/index.css

@@ -13,6 +13,7 @@
   min-height: 50px;
   outline: none;
   overflow: auto;
+  background: var(--jp-layout-color1);
 }