Updates to cell/notebook style...

packages/cells/style/index.css

@@ -10,14 +10,6 @@
 
 
 :root {
-  --jp-private-padding: 10px;
-  --jp-private-cell-editor-background: #f7f7f7;
-  --jp-private-cell-editor-border: #cfcfcf;
-  --jp-private-cell-prompt-width: 90px;
-  --jp-private-cell-inprompt-color: #303F9F;
-  --jp-private-cell-outprompt-color: #D84315;
-  --jp-private-cell-font-family: var(--jp-ui-font-family);
-  --jp-private-cell-prompt-letter-spacing: 2px;
 }
 
 
@@ -28,9 +20,9 @@
 
 
 .jp-Cell {
-  padding: 5px;
+  padding: var(--jp-cell-padding);
   margin: 0px;
-  border: var(--jp-border-width) solid transparent;
+  border: none;
   outline: none;
   background: transparent;
 }
@@ -89,19 +81,20 @@
 
 
 .jp-InputArea-editor {
-  border: var(--jp-border-width) solid var(--jp-private-cell-editor-border);
+  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
   border-radius: 0px;
-  background: var(--jp-private-cell-editor-background);
+  background: var(--jp-cell-editor-background);
 }
 
 
 .jp-InputPrompt {
-  flex: 0 0 var(--jp-private-cell-prompt-width);
-  color: var(--jp-private-cell-inprompt-color);
-  font-family: var(--jp-private-cell-font-family);
+  flex: 0 0 var(--jp-cell-prompt-width);
+  color: var(--jp-cell-inprompt-font-color);
+  font-family: var(--jp-cell-prompt-font-family);
   padding: var(--jp-code-padding);
   text-align: right;
-  letter-spacing: var(--jp-private-cell-prompt-letter-spacing);
+  letter-spacing: var(--jp-cell-prompt-letter-spacing);
+  opacity: var(--jp-cell-prompt-opacity);
   line-height: var(--jp-code-line-height);
   font-size: var(--jp-code-font-size);
   border: var(--jp-border-width) solid transparent;

packages/default-theme/style/variables.css

@@ -25,6 +25,12 @@ all of MD as it is not optimized for dense, information rich UIs.
 */
 
 
+/*
+ * Optional monospace font for input/output prompt.
+ */
+@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
+
+
 :root {
 
   /* Borders
@@ -139,15 +145,36 @@ all of MD as it is not optimized for dense, information rich UIs.
   --jp-info-color2: var(--md-cyan-300);
   --jp-info-color3: var(--md-cyan-100);
 
-  /* Notebook specific styles */
+  /* Cell specific styles */
+ 
+  --jp-cell-editor-background: #f7f7f7;
+  --jp-cell-editor-border-color: #cfcfcf;
+  --jp-cell-editor-background-edit: var(--jp-ui-layout-color1);
+  --jp-cell-editor-border-color-edit: var(--jp-brand-color1);
+  --jp-cell-prompt-width: 90px;
+  --jp-cell-prompt-font-family: 'Roboto Mono', monospace;
+  --jp-cell-prompt-letter-spacing: 0px;
+  --jp-cell-prompt-opacity: 0.7;
+  --jp-cell-prompt-opacity-active: 1.0;
+  --jp-cell-inprompt-font-color: var(--md-grey-700);
+  --jp-cell-inprompt-font-color-active: var(--md-grey-700);
+  --jp-cell-outprompt-font-color: var(--md-grey-700);
+  --jp-cell-outprompt-font-color-active: var(--md-grey-700);
+  --jp-cell-padding: 5px;
 
+  /* Notebook specific styles */
+  
+  --jp-notebook-padding: 10px;
+  --jp-notebook-cell-border-color: transparent;
   --jp-notebook-scroll-padding: 100px;
 
 
   /* The caret used for select dropdown styling. */
+
   --jp-ui-select-caret: url('./images/down_caret.svg');
 
   /* Icons used in the application. */
+  
   --jp-icon-book-running: url('./icons/md/book_running.svg');
   --jp-icon-book-selected: url('./icons/md/book_selected.svg');
   --jp-icon-directory-selected: url('./icons/md/directory_selected.svg');

packages/notebook/style/index.css

@@ -9,23 +9,21 @@
 
 
 :root {
-  --jp-private-notebook-padding: 10px;
-  --jp-private-notebook-dragImage-width: 90px;
+  --jp-private-notebook-dragImage-width: var(--jp-cell-prompt-width);
   --jp-private-notebook-dragImage-height: 39px;
   --jp-private-notebook-dragImage-circleRadius: 20px;
   --jp-private-notebook-selected-color: var(--md-blue-400);
   --jp-private-notebook-multiselected-color: var(--md-blue-50);
-  --jp-private-notebook-active-color: var(--md-green-400);
-  --jp-private-notebook-cell-border-color: #ABABAB;
   --jp-private-notebook-left-border-width: 5px;
+  --jp-private-notebook-active-color: var(--md-green-400);
 }
 
 /*-----------------------------------------------------------------------------
 | Imports
 |----------------------------------------------------------------------------*/
 
-@import './toolbar.css';
 
+@import './toolbar.css';
 
 
 /*-----------------------------------------------------------------------------
@@ -34,7 +32,10 @@
 
 
 .jp-Notebook {
-  padding: var(--jp-private-notebook-padding);
+  padding-left: var(--jp-notebook-padding);
+  padding-right: var(--jp-notebook-padding);
+  padding-top: var(--jp-notebook-padding);
+  padding-bottom: calc( 4 * var(--jp-notebook-padding) );
   min-width: 50px;
   min-height: 50px;
   outline: none;
@@ -63,11 +64,33 @@
 
 
 .jp-Notebook.jp-mod-commandMode .jp-Notebook-cell.jp-mod-active.jp-mod-selected {
-  border-color: var(--jp-private-notebook-cell-border-color);
+  border-color: var(--jp-notebook-cell-border-color);
+}
+
+
+.jp-Notebook.jp-mod-editMode .jp-Cell.jp-mod-active .jp-CellEditor {
+  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color-edit);
+  background: var(--jp-cell-editor-background-edit);
+}
+
+
+.jp-Notebook .jp-Cell.jp-mod-active .jp-Cell-prompt {
+  color: var(--jp-cell-inprompt-font-color-active);
+  opacity: var(--jp-cell-prompt-opacity-active);
 }
 
 
-.jp-Notebook.jp-mod-commandMode .jp-Notebook-cell.jp-mod-active.jp-mod-selected:before {
+.jp-Notebook .jp-Cell.jp-mod-active .jp-OutputAreaWidget-gutter {
+  color: var(--jp-cell-inprompt-font-color-active);
+  opacity: var(--jp-cell-prompt-opacity-active);
+}
+
+
+.jp-Notebook .jp-Cell.jp-mod-active .jp-Cell-cursor {
+  background: var(--jp-brand-color1);
+}
+
+/*.jp-Notebook.jp-mod-commandMode .jp-Notebook-cell.jp-mod-active.jp-mod-selected:before {
   position: absolute;
   display: block;
   top: calc( -1 * var(--jp-border-width) );
@@ -76,7 +99,7 @@
   height: calc( 100% + 2 * var(--jp-border-width) );
   content: '';
   background: var(--jp-private-notebook-selected-color);
-}
+}*/
 
 
 .jp-Notebook.jp-mod-commandMode .jp-Notebook-cell.jp-mod-selected {
@@ -91,11 +114,11 @@
 
 
 .jp-Notebook.jp-mod-editMode .jp-Notebook-cell.jp-mod-active {
-  border-color: var(--jp-private-notebook-active-color);
+  border-color: transparent;
 }
 
 
-.jp-Notebook.jp-mod-editMode .jp-Notebook-cell.jp-mod-active:before {
+/*.jp-Notebook.jp-mod-editMode .jp-Notebook-cell.jp-mod-active:before {
   position: absolute;
   display: block;
   top: calc( -1 * var(--jp-border-width) );
@@ -104,7 +127,7 @@
   height: calc( 100% + 2 * var(--jp-border-width) );
   content: '';
   background: var(--jp-private-notebook-active-color);
-}
+}*/
 
 
 .jp-Notebook {
@@ -137,13 +160,13 @@
   position: absolute;
   width: var(--jp-private-notebook-dragImage-width);
   height: var(--jp-private-notebook-dragImage-height);
-  border: var(--jp-border-width) solid var(--jp-private-notebook-cell-border-color);
+  border: var(--jp-border-width) solid var(--jp-notebook-cell-border-color);
   background: var(--jp-layout-color1);
   overflow: visible;
 }
 
 
-.jp-dragImage:before {
+/*.jp-dragImage:before {
   position: absolute;
   display: block;
   top: calc( -1 * var(--jp-border-width) );
@@ -152,7 +175,7 @@
   height: calc( 100% + 2 * var(--jp-border-width) );
   content: '';
   background: var(--jp-private-notebook-selected-color);
-}
+}*/
 
 
 .jp-dragImage .jp-filledCircle {

packages/outputarea/style/index.css

@@ -32,17 +32,16 @@
 
 
 .jp-OutputPrompt {
-  flex-grow: 0;
-  flex-shrink: 0;
-  flex-basis: var(--jp-private-cell-prompt-width);
-  color: var(--jp-private-outputarea-prompt-color);
-  font-family: var(--jp-private-cell-font-family);
+  flex: 0 0 var(--jp-private-cell-prompt-width);
+  color: var(--jp-cell-outprompt-font-color);
+  font-family: var(--jp-cell-prompt-font-family);
   padding: var(--jp-code-padding);
   text-align: right;
-  letter-spacing: var(--jp-private-cell-prompt-letter-spacing);
+  letter-spacing: var(--jp-cell-prompt-letter-spacing);
   line-height: var(--jp-code-line-height);
   font-size: var(--jp-code-font-size);
   border: var(--jp-border-width) solid transparent;
+  opacity: var(--jp-cell-prompt-opacity);
 }