Improve edit app

IPython/html/static/base/less/page.less

@@ -6,7 +6,7 @@
 
 
 body {
-    background-color: white;
+    background-color: @body-bg;
     /* This makes sure that the body covers the entire window and needs to
        be in a different element than the display: box in wrapper below */
     position: absolute;

IPython/html/static/base/less/variables.less

@@ -43,4 +43,10 @@ label {
 @global-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
 @global-shadow-dark: 0px 0px 12px 1px rgba(87, 87, 87, 0.4);
 @page-header-padding: 20px;
-
+/* Make the page background atleast 100% the height of the view port */
+@page-backdrop-height: 100vh;
+/* Make the page itself atleast 70% the height of the view port */
+@page-min-height: 70vh;
+@page-backdrop-color: #EEE;
+@page-color: @body-bg;
+@page-padding: 15px;

IPython/html/static/edit/less/edit.less

@@ -1,9 +1,34 @@
-#texteditor-container {
-    border-bottom: 1px solid #ccc;
-}
 
 #filename {
     font-size: 16pt;
     display: table;
     padding: 0px 5px;
 }
+
+#texteditor-backdrop {
+    padding-top: @page-header-padding;
+    padding-bottom: @page-header-padding;
+    
+    @media not print{
+        min-height: @page-backdrop-height;
+        background-color: @page-backdrop-color;
+    }
+
+    #texteditor-container {
+        .CodeMirror-gutter {
+            @media print {
+                background-color: @body-bg;
+            }
+            @media not print {
+                background-color: @page-color;
+            }
+        }
+
+        @media not print{
+            padding: @page-padding;
+            background-color :  @page-color;
+            min-height: @page-min-height;
+            .box-shadow(@global-shadow);
+        }
+    }
+}

IPython/html/static/edit/less/menubar.less

@@ -11,4 +11,20 @@
   // truncate mode-menu, so it doesn't get longer than the screen
   overflow: auto;
   max-height: 20em;
-}
+}
+
+#current-mode {
+    margin-right: @padding-large-horizontal;
+}
+
+.edit_app {
+  #header {
+    .box-shadow(@global-shadow);
+  }
+
+  #menubar .navbar {
+    /* Use a negative 1 bottom margin, so the border overlaps the border of the
+    header */
+    margin-bottom: -1px;
+  }
+}

IPython/html/static/notebook/less/notebook.less

@@ -14,9 +14,10 @@ div#notebook_panel {
     margin: 0px;
     padding: 0px;
     .border-box-sizing();
-    background-color: @notebook_dark_background;
+    @media not print {
-    /* Make the page background atleast 100% the height of the view port */
+        background-color: @page-backdrop-color;
-    min-height: 100vh;
+        min-height: @page-backdrop-height;
+    }
 }
 div#notebook {
     font-size: @notebook_font_size;
@@ -34,11 +35,9 @@ div#notebook {
 
 #notebook-container{
     @media not print{
-        padding: 15px;
+        padding: @page-padding;
-        border-color:  @body-bg;
+        background-color :  @page-color;
-        background-color :  @body-bg;
+        min-height: @page-min-height;
-        /* Make the page itself atleast 70% the height of the view port */
-        min-height: 70vh;
         .box-shadow(@global-shadow);
     }
 }

IPython/html/static/notebook/less/variables.less

@@ -7,7 +7,6 @@
 @light_border_color:            darken(@cell_selected_background, 17%);
 @border_width:                  1px;
 @notebook_font_size:            14px;
-@notebook_dark_background:      #EEE;
 @notebook_line_height:          20px;
 @code_line_height:              1.21429em;  // changed from 1.231 to get 17px even
 @code_padding:                  0.4em;  // 5.6 px

IPython/html/templates/edit.html

@@ -10,6 +10,7 @@
 
 {% block params %}
 
+class="edit_app"
 data-base-url="{{base_url}}"
 data-file-path="{{file_path}}"
 
@@ -75,12 +76,15 @@ data-file-path="{{file_path}}"
   </div>
 </div>
 
+<div class="lower-header-bar"></div>
+
 {% endblock %}
 
 {% block site %}
 
-
+<div id="texteditor-backdrop">
 <div id="texteditor-container" class="container"></div>
+</div>
 
 {% endblock %}
 

IPython/html/templates/page.html

@@ -105,6 +105,7 @@
   {% block header %}
   {% endblock %}
 </div>
+
 <div id="header-spacer"></div>
 
 <div id="site">