Merge pull request #165 from afshin/style-update

Minor style tweaks to notebook and style updates to example

example/index.css

@@ -11,17 +11,22 @@ body {
 
 #main {
   position: absolute;
-  top: 10px;
-  left: 10px;
-  right: 10px;
-  bottom: 10px;
-  padding: 8px;
+  top: 4px;
+  left: 4px;
+  right: 4px;
+  bottom: 4px;
 }
 
+.jp-Notebook-panel {
+  border-bottom: 1px solid #E0E0E0;
+}
 
 .p-CommandPalette {
-  background: #F5F5F5;
-  border: 1px solid #CCCCCC;
+  min-width: 325px;
+  background: #F8F8F8;
+  border: 1px solid #E0E0E0;
+  color: #757575;
+  font-family: "Helvetica Neue", Helvetica;
 }
 
 
@@ -103,3 +108,8 @@ body {
   font-size: 11px;
   font-weight: 400;
 }
+
+
+.p-CommandPalette-commandShortcut {
+  color: #bbbaaa;
+}

example/src/index.ts

@@ -96,8 +96,9 @@ function main(): void {
   let panel = new SplitPanel();
   panel.id = 'main';
   panel.orientation = SplitPanel.Horizontal;
-  SplitPanel.setStretch(palette, 1);
-  SplitPanel.setStretch(nbWidget, 2);
+  panel.spacing = 0;
+  SplitPanel.setStretch(palette, 0);
+  SplitPanel.setStretch(nbWidget, 1);
   panel.attach(document.body);
   panel.addChild(palette);
   panel.addChild(nbWidget);

src/notebook/theme.css

@@ -4,14 +4,15 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 /* Increased specificity in case phosphor css is loaded later. */
-.p-Widget.jp-Notebook {  
+.p-Widget.jp-Notebook {
+  margin-top: 20px;
   min-width: 50px;
   min-height: 50px;
   outline: none;
 }
 
 
-.p-Widget.jp-Notebook-container {  
+.p-Widget.jp-Notebook-container {
   overflow-y: auto;
   padding-left: 10px;
   padding-right: 10px;
@@ -125,7 +126,7 @@
 .jp-Notebook.jp-mod-editMode .jp-Notebook-cell.jp-mod-active {
   border-color: #66BB6A;
   border-left-width: 1px;
-  background: linear-gradient(to right, #66BB6A -40px, #66BB6A 5px, transparent 5px, transparent 100%);  
+  background: linear-gradient(to right, #66BB6A -40px, #66BB6A 5px, transparent 5px, transparent 100%);
 }
 
 
@@ -152,8 +153,6 @@
     background-color: #F8F8F8;
     border-top: 1px solid #E0E0E0;
     border-bottom: 1px solid #E0E0E0;
-    margin-top: 4px;
-    margin-bottom: 20px;
 }