Merge pull request #7242 from jdfreder/terminal-fixes

Some UI design changes for the Notebook and associates

IPython/html/static/terminal/css/override.css

@@ -0,0 +1,7
+/*This file contains any manual css for this page that needs to override the global styles.
+This is only required when different pages style the same element differently. This is just
+a hack to deal with our current css styles and no new styling should be added in this file.*/
+
+body {
+    overflow: hidden;
+}

IPython/html/static/base/js/page.js

@@ -10,7 +10,10 define([
 
     var Page = function () {
         this.bind_events();
-        this._resize_header();
+
+        // When the page is ready, resize the header.
+        var that = this;
+        $(function() { that._resize_header(); });
     };
 
     Page.prototype.bind_events = function () {

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;
@@ -26,7 +26,6 div#header {
     z-index: 100;
 
     #header-container {
-        padding-left: 30px;
         padding-bottom: 5px;
         padding-top: 5px;
         .border-box-sizing();

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

@@ -10,6 +10,9
 @modal-inner-padding: 15px;
 @grid-float-breakpoint: 540px;
 @logo_height: 28px;
+@border-radius-base: 2px;
+@border-radius-small: 2px;
+@grid-gutter-width: 0px;
 
 // Disable modal slide-in from top animation.
 .modal {
@@ -37,4 +40,13 label {
 }
 
 // Our own global variables for all pages go here
-
+@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;
  No newline at end of file

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, .CodeMirror-gutters {
+            @media print {
+                background-color: @body-bg;
+            }
+            @media not print {
+                background-color: @page-color;
+            }
+        }
+
+        @media not print{
+            padding: 0px;
+            background-color :  @page-color;
+            min-height: @page-min-height;
+            .box-shadow(@global-shadow);
+        }
+    }
+}

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

@@ -12,3 +12,19
   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/celltoolbar.less

@@ -12,8 +12,12
     padding-right: 4px;
     .hbox();
     .end();
+    @media print{
+        display: none;
+    }
 }
 
+
 .ctb_hideshow {
     display:none;
     vertical-align:bottom;

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

@@ -11,6 +11,7
 
 .CodeMirror {
     line-height: @code_line_height;  /* Changed from 1em to our global default */
+    font-size: @notebook_font_size;
     height: auto;     /* Changed to auto to autogrow */
     background: none;  /* Changed from white to allow our bg to show through */
 }

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

@@ -1,5 +1,4
 #kernel_logo_widget {
-    margin-right: 1em;
     .pull-right();
     
     .current_kernel_logo {

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

@@ -1,8 +1,3
-
-body {
-    background-color:   @body-bg;
-}
-
 @media (max-width: 767px) {
     // remove bootstrap-responsive's body padding on small screens
     body.notebook_app {
@@ -16,9 +11,13 body {
 }
 
 div#notebook_panel {
-    margin: 0px 0px 0px 0px;
+    margin: 0px;
     padding: 0px;
     .border-box-sizing();
+    @media not print {
+        background-color: @page-backdrop-color;
+        min-height: @page-backdrop-height;
+    }
 }
 div#notebook {
     font-size: @notebook_font_size;
@@ -26,13 +25,23 div#notebook {
     overflow-y: hidden;
     overflow-x: auto;
     width: 100%;
-    /* This spaces the cell away from the edge of the notebook area */
-    padding: 2em 0 2em 0;
+    /* This spaces the page away from the edge of the notebook area */
+    padding-top: @page-header-padding;
+    padding-bottom: @page-header-padding;
     margin: 0px;
     outline: none;
     .border-box-sizing();
 }
 
+#notebook-container{
+    @media not print{
+        padding: @page-padding;
+        background-color :  @page-color;
+        min-height: @page-min-height;
+        .box-shadow(@global-shadow);
+    }
+}
+
 div.ui-widget-content {
     border: 1px solid @border_color;
     outline: none;
@@ -75,5 +84,5 p {
 }
 
 .notebook_app #header {
-    .box-shadow(@notebook-shadow);
+    .box-shadow(@global-shadow);
 }

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

@@ -10,6 +10,8 div#pager {
     max-height: 50%;
     padding-top: 8px;
 
+    .box-shadow(@global-shadow);
+
     /* Display over codemirror */
     z-index: 100;
 
@@ -49,11 +51,6 div#pager {
         border-top: 1px solid @light_border_color;
         border-bottom: 1px solid @light_border_color;
 
-        /* Similar to the notebook header's shadow, but not
-        exactly the same.  The settings had to be adjusted
-        to get the shadow to show. */
-        .box-shadow(1px 4px 9px -3px rgba(0, 0, 0, 0.15));
-
         /* This injects handle bars (a short, wide = symbol) for 
         the resize handle. */
         &::after {

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

@@ -5,6 +5,7 span.save_widget {
         height: 1em;
         line-height: 1em;
         padding: 3px;
+        margin-left: @padding-large-horizontal;
         border: none;
         font-size: 146.5%;
         &:hover{

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

@@ -33,7 +33,7
   margin-top: -8px;
   border: 0px;
   min-height: 27px;
-  margin-left: 32px;
+  margin-left: 0px;
   padding-top: 11px;
   padding-bottom: 3px;
 

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

@@ -10,7 +10,6
 @notebook_line_height:          20px;
 @code_line_height:              1.21429em;  // changed from 1.231 to get 17px even
 @code_padding:                  0.4em;  // 5.6 px
-@notebook-shadow:               1px 4px 9px -6px rgba(0,0,0,.25);
 @rendered_html_border_color:    black;
 @input_prompt_color:            navy;
 @output_prompt_color:           darkred;

IPython/html/static/style/ipython.min.css

@@ -18,13 +18,15 pre {
 label {
   font-weight: normal;
 }
+/* Make the page background atleast 100% the height of the view port */
+/* Make the page itself atleast 70% the height of the view port */
 .border-box-sizing {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
 .corner-all {
-  border-radius: 4px;
+  border-radius: 2px;
 }
 .no-padding {
   padding: 0px;
@@ -349,7 +351,7 div.cell {
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  border-radius: 4px;
+  border-radius: 2px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -420,7 +422,7 div.inner_cell {
 /* input_area and input_prompt must match in top border and margin for alignment */
 div.input_area {
   border: 1px solid #cfcfcf;
-  border-radius: 4px;
+  border-radius: 2px;
   background: #f7f7f7;
   line-height: 1.21429em;
 }
@@ -449,7 +451,7 div.unrecognized_cell {
   align-items: stretch;
 }
 div.unrecognized_cell .inner_cell {
-  border-radius: 4px;
+  border-radius: 2px;
   padding: 5px;
   font-weight: bold;
   color: red;
@@ -543,6 +545,7 div.input_area > div.highlight > pre {
 .CodeMirror {
   line-height: 1.21429em;
   /* Changed from 1em to our global default */
+  font-size: 14px;
   height: auto;
   /* Changed to auto to autogrow */
   background: none;
@@ -563,8 +566,8 div.input_area > div.highlight > pre {
   padding: 0 8px 0 4px;
 }
 .CodeMirror-gutters {
-  border-bottom-left-radius: 4px;
-  border-top-left-radius: 4px;
+  border-bottom-left-radius: 2px;
+  border-top-left-radius: 2px;
 }
 .CodeMirror pre {
   /* In CM3 this went to 4px from 0 in CM2. We need the 0 value because of how we size */
@@ -750,7 +753,7 div.output_scroll {
   /* FF needs this *and the wrapper* to specify full width, or it will shrinkwrap */
   width: 100%;
   overflow: auto;
-  border-radius: 4px;
+  border-radius: 2px;
   -webkit-box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
   box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
   display: block;
@@ -778,7 +781,7 div.out_prompt_overlay {
   height: 100%;
   padding: 0px 0.4em;
   position: absolute;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 div.out_prompt_overlay:hover {
   /* use inner shadow to get border that is computed the same on WebKit/FF */
@@ -1269,7 +1272,7 h6:hover .anchor-link {
   /* Slider Track */
   border: 1px solid #CCCCCC;
   background: #FFFFFF;
-  border-radius: 4px;
+  border-radius: 2px;
   /* Round the corners of the slide track */
 }
 .widget-hslider {
@@ -1307,7 +1310,7 h6:hover .anchor-link {
   /* Slider Track */
   border: 1px solid #CCCCCC;
   background: #FFFFFF;
-  border-radius: 4px;
+  border-radius: 2px;
   /* Round the corners of the slide track */
   /* Make the div a flex box (makes FF behave correctly). */
   /* Old browsers */
@@ -1374,7 +1377,7 h6:hover .anchor-link {
   /* Slider Track */
   border: 1px solid #CCCCCC;
   background: #FFFFFF;
-  border-radius: 4px;
+  border-radius: 2px;
   /* Round the corners of the slide track */
   /* Make the div a flex box (makes FF behave correctly). */
   /* Old browsers */

IPython/html/static/style/style.less

@@ -29,4 +29,5
 // notebook
 @import "../notebook/less/style.less";
 
-@import "../notebook/less/terminal.less";
+// terminal
+@import "../terminal/less/terminal.less";

IPython/html/static/style/style.min.css

@@ -321,7 +321,7 img {
   line-height: 1.42857143;
   background-color: #ffffff;
   border: 1px solid #dddddd;
-  border-radius: 4px;
+  border-radius: 2px;
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
   display: inline-block;
@@ -695,14 +695,14 code {
   color: #c7254e;
   background-color: #f9f2f4;
   white-space: nowrap;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 kbd {
   padding: 2px 4px;
   font-size: 90%;
   color: #ffffff;
   background-color: #333333;
-  border-radius: 3px;
+  border-radius: 2px;
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
 }
 pre {
@@ -716,7 +716,7 pre {
   color: #333333;
   background-color: #f5f5f5;
   border: 1px solid #cccccc;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 pre code {
   padding: 0;
@@ -733,39 +733,39 pre code {
 .container {
   margin-right: auto;
   margin-left: auto;
-  padding-left: 15px;
-  padding-right: 15px;
+  padding-left: 0px;
+  padding-right: 0px;
 }
 @media (min-width: 768px) {
   .container {
-    width: 750px;
+    width: 720px;
   }
 }
 @media (min-width: 992px) {
   .container {
-    width: 970px;
+    width: 940px;
   }
 }
 @media (min-width: 1200px) {
   .container {
-    width: 1170px;
+    width: 1140px;
   }
 }
 .container-fluid {
   margin-right: auto;
   margin-left: auto;
-  padding-left: 15px;
-  padding-right: 15px;
+  padding-left: 0px;
+  padding-right: 0px;
 }
 .row {
-  margin-left: -15px;
-  margin-right: -15px;
+  margin-left: 0px;
+  margin-right: 0px;
 }
 .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
   position: relative;
   min-height: 1px;
-  padding-left: 15px;
-  padding-right: 15px;
+  padding-left: 0px;
+  padding-right: 0px;
 }
 .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
   float: left;
@@ -1696,7 +1696,7 output {
   background-color: #ffffff;
   background-image: none;
   border: 1px solid #cccccc;
-  border-radius: 4px;
+  border-radius: 2px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
@@ -1795,7 +1795,7 fieldset[disabled] .checkbox-inline {
   padding: 5px 10px;
   font-size: 12px;
   line-height: 1.5;
-  border-radius: 3px;
+  border-radius: 2px;
 }
 select.input-sm {
   height: 30px;
@@ -1972,8 +1972,8 select[multiple].input-lg {
   min-height: 25px;
 }
 .form-horizontal .form-group {
-  margin-left: -15px;
-  margin-right: -15px;
+  margin-left: 0px;
+  margin-right: 0px;
 }
 .form-horizontal .form-control-static {
   padding-top: 7px;
@@ -1985,7 +1985,7 select[multiple].input-lg {
 }
 .form-horizontal .has-feedback .form-control-feedback {
   top: 0;
-  right: 15px;
+  right: 0px;
 }
 .btn {
   display: inline-block;
@@ -2000,7 +2000,7 select[multiple].input-lg {
   padding: 6px 12px;
   font-size: 13px;
   line-height: 1.42857143;
-  border-radius: 4px;
+  border-radius: 2px;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -2326,14 +2326,14 fieldset[disabled] .btn-link:focus {
   padding: 5px 10px;
   font-size: 12px;
   line-height: 1.5;
-  border-radius: 3px;
+  border-radius: 2px;
 }
 .btn-xs,
 .btn-group-xs > .btn {
   padding: 1px 5px;
   font-size: 12px;
   line-height: 1.5;
-  border-radius: 3px;
+  border-radius: 2px;
 }
 .btn-block {
   display: block;
@@ -3017,7 +3017,7 input[type="button"].btn-block {
   background-color: #ffffff;
   border: 1px solid #cccccc;
   border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 4px;
+  border-radius: 2px;
   -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
   background-clip: padding-box;
@@ -3248,12 +3248,12 input[type="button"].btn-block {
   border-radius: 0;
 }
 .btn-group-vertical > .btn:first-child:not(:last-child) {
-  border-top-right-radius: 4px;
+  border-top-right-radius: 2px;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 .btn-group-vertical > .btn:last-child:not(:first-child) {
-  border-bottom-left-radius: 4px;
+  border-bottom-left-radius: 2px;
   border-top-right-radius: 0;
   border-top-left-radius: 0;
 }
@@ -3335,7 +3335,7 select[multiple].input-group-lg > .input-group-btn > .btn {
   padding: 5px 10px;
   font-size: 12px;
   line-height: 1.5;
-  border-radius: 3px;
+  border-radius: 2px;
 }
 select.input-group-sm > .form-control,
 select.input-group-sm > .input-group-addon,
@@ -3376,12 +3376,12 select[multiple].input-group-sm > .input-group-btn > .btn {
   text-align: center;
   background-color: #eeeeee;
   border: 1px solid #cccccc;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 .input-group-addon.input-sm {
   padding: 5px 10px;
   font-size: 12px;
-  border-radius: 3px;
+  border-radius: 2px;
 }
 .input-group-addon.input-lg {
   padding: 10px 16px;
@@ -3497,7 +3497,7 select[multiple].input-group-sm > .input-group-btn > .btn {
   margin-right: 2px;
   line-height: 1.42857143;
   border: 1px solid transparent;
-  border-radius: 4px 4px 0 0;
+  border-radius: 2px 2px 0 0;
 }
 .nav-tabs > li > a:hover {
   border-color: #eeeeee #eeeeee #dddddd;
@@ -3537,7 +3537,7 select[multiple].input-group-sm > .input-group-btn > .btn {
 }
 .nav-tabs.nav-justified > li > a {
   margin-right: 0;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 .nav-tabs.nav-justified > .active > a,
 .nav-tabs.nav-justified > .active > a:hover,
@@ -3547,7 +3547,7 select[multiple].input-group-sm > .input-group-btn > .btn {
 @media (min-width: 768px) {
   .nav-tabs.nav-justified > li > a {
     border-bottom: 1px solid #dddddd;
-    border-radius: 4px 4px 0 0;
+    border-radius: 2px 2px 0 0;
   }
   .nav-tabs.nav-justified > .active > a,
   .nav-tabs.nav-justified > .active > a:hover,
@@ -3559,7 +3559,7 select[multiple].input-group-sm > .input-group-btn > .btn {
   float: left;
 }
 .nav-pills > li > a {
-  border-radius: 4px;
+  border-radius: 2px;
 }
 .nav-pills > li + li {
   margin-left: 2px;
@@ -3605,7 +3605,7 select[multiple].input-group-sm > .input-group-btn > .btn {
 }
 .nav-tabs-justified > li > a {
   margin-right: 0;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 .nav-tabs-justified > .active > a,
 .nav-tabs-justified > .active > a:hover,
@@ -3615,7 +3615,7 select[multiple].input-group-sm > .input-group-btn > .btn {
 @media (min-width: 768px) {
   .nav-tabs-justified > li > a {
     border-bottom: 1px solid #dddddd;
-    border-radius: 4px 4px 0 0;
+    border-radius: 2px 2px 0 0;
   }
   .nav-tabs-justified > .active > a,
   .nav-tabs-justified > .active > a:hover,
@@ -3642,7 +3642,7 select[multiple].input-group-sm > .input-group-btn > .btn {
 }
 @media (min-width: 540px) {
   .navbar {
-    border-radius: 4px;
+    border-radius: 2px;
   }
 }
 @media (min-width: 540px) {
@@ -3653,8 +3653,8 select[multiple].input-group-sm > .input-group-btn > .btn {
 .navbar-collapse {
   max-height: 340px;
   overflow-x: visible;
-  padding-right: 15px;
-  padding-left: 15px;
+  padding-right: 0px;
+  padding-left: 0px;
   border-top: 1px solid transparent;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
   -webkit-overflow-scrolling: touch;
@@ -3688,8 +3688,8 select[multiple].input-group-sm > .input-group-btn > .btn {
 .container-fluid > .navbar-header,
 .container > .navbar-collapse,
 .container-fluid > .navbar-collapse {
-  margin-right: -15px;
-  margin-left: -15px;
+  margin-right: 0px;
+  margin-left: 0px;
 }
 @media (min-width: 540px) {
   .container > .navbar-header,
@@ -3733,7 +3733,7 select[multiple].input-group-sm > .input-group-btn > .btn {
 }
 .navbar-brand {
   float: left;
-  padding: 6px 15px;
+  padding: 6px 0px;
   font-size: 17px;
   line-height: 18px;
   height: 30px;
@@ -3745,20 +3745,20 select[multiple].input-group-sm > .input-group-btn > .btn {
 @media (min-width: 540px) {
   .navbar > .container .navbar-brand,
   .navbar > .container-fluid .navbar-brand {
-    margin-left: -15px;
+    margin-left: 0px;
   }
 }
 .navbar-toggle {
   position: relative;
   float: right;
-  margin-right: 15px;
+  margin-right: 0px;
   padding: 9px 10px;
   margin-top: -2px;
   margin-bottom: -2px;
   background-color: transparent;
   background-image: none;
   border: 1px solid transparent;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 .navbar-toggle:focus {
   outline: none;
@@ -3778,7 +3778,7 select[multiple].input-group-sm > .input-group-btn > .btn {
   }
 }
 .navbar-nav {
-  margin: 3px -15px;
+  margin: 3px 0px;
 }
 .navbar-nav > li > a {
   padding-top: 10px;
@@ -3820,7 +3820,7 select[multiple].input-group-sm > .input-group-btn > .btn {
     padding-bottom: 6px;
   }
   .navbar-nav.navbar-right:last-child {
-    margin-right: -15px;
+    margin-right: 0px;
   }
 }
 @media (min-width: 540px) {
@@ -3834,9 +3834,9 select[multiple].input-group-sm > .input-group-btn > .btn {
   }
 }
 .navbar-form {
-  margin-left: -15px;
-  margin-right: -15px;
-  padding: 10px 15px;
+  margin-left: 0px;
+  margin-right: 0px;
+  padding: 10px 0px;
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
@@ -3896,7 +3896,7 select[multiple].input-group-sm > .input-group-btn > .btn {
     box-shadow: none;
   }
   .navbar-form.navbar-right:last-child {
-    margin-right: -15px;
+    margin-right: 0px;
   }
 }
 .navbar-nav > li > .dropdown-menu {
@@ -3927,8 +3927,8 select[multiple].input-group-sm > .input-group-btn > .btn {
 @media (min-width: 540px) {
   .navbar-text {
     float: left;
-    margin-left: 15px;
-    margin-right: 15px;
+    margin-left: 0px;
+    margin-right: 0px;
   }
   .navbar-text.navbar-right:last-child {
     margin-right: 0;
@@ -4111,7 +4111,7 select[multiple].input-group-sm > .input-group-btn > .btn {
   margin-bottom: 18px;
   list-style: none;
   background-color: #f5f5f5;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 .breadcrumb > li {
   display: inline-block;
@@ -4128,7 +4128,7 select[multiple].input-group-sm > .input-group-btn > .btn {
   display: inline-block;
   padding-left: 0;
   margin: 18px 0;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 .pagination > li {
   display: inline;
@@ -4148,13 +4148,13 select[multiple].input-group-sm > .input-group-btn > .btn {
 .pagination > li:first-child > a,
 .pagination > li:first-child > span {
   margin-left: 0;
-  border-bottom-left-radius: 4px;
-  border-top-left-radius: 4px;
+  border-bottom-left-radius: 2px;
+  border-top-left-radius: 2px;
 }
 .pagination > li:last-child > a,
 .pagination > li:last-child > span {
-  border-bottom-right-radius: 4px;
-  border-top-right-radius: 4px;
+  border-bottom-right-radius: 2px;
+  border-top-right-radius: 2px;
 }
 .pagination > li > a:hover,
 .pagination > li > span:hover,
@@ -4209,13 +4209,13 select[multiple].input-group-sm > .input-group-btn > .btn {
 }
 .pagination-sm > li:first-child > a,
 .pagination-sm > li:first-child > span {
-  border-bottom-left-radius: 3px;
-  border-top-left-radius: 3px;
+  border-bottom-left-radius: 2px;
+  border-top-left-radius: 2px;
 }
 .pagination-sm > li:last-child > a,
 .pagination-sm > li:last-child > span {
-  border-bottom-right-radius: 3px;
-  border-top-right-radius: 3px;
+  border-bottom-right-radius: 2px;
+  border-top-right-radius: 2px;
 }
 .pager {
   padding-left: 0;
@@ -4403,7 +4403,7 a.list-group-item.active > .badge,
   line-height: 1.42857143;
   background-color: #ffffff;
   border: 1px solid #dddddd;
-  border-radius: 4px;
+  border-radius: 2px;
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
 }
@@ -4425,7 +4425,7 a.thumbnail.active {
   padding: 15px;
   margin-bottom: 18px;
   border: 1px solid transparent;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 .alert h4 {
   margin-top: 0;
@@ -4515,7 +4515,7 a.thumbnail.active {
   height: 18px;
   margin-bottom: 18px;
   background-color: #f5f5f5;
-  border-radius: 4px;
+  border-radius: 2px;
   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
@@ -4611,13 +4611,13 a.thumbnail.active {
   border: 1px solid #dddddd;
 }
 .list-group-item:first-child {
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
+  border-top-right-radius: 2px;
+  border-top-left-radius: 2px;
 }
 .list-group-item:last-child {
   margin-bottom: 0;
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: 2px;
 }
 .list-group-item > .badge {
   float: right;
@@ -4754,7 +4754,7 a.list-group-item-danger.active:focus {
   margin-bottom: 18px;
   background-color: #ffffff;
   border: 1px solid transparent;
-  border-radius: 4px;
+  border-radius: 2px;
   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
 }
@@ -4764,8 +4764,8 a.list-group-item-danger.active:focus {
 .panel-heading {
   padding: 10px 15px;
   border-bottom: 1px solid transparent;
-  border-top-right-radius: 3px;
-  border-top-left-radius: 3px;
+  border-top-right-radius: 1px;
+  border-top-left-radius: 1px;
 }
 .panel-heading > .dropdown .dropdown-toggle {
   color: inherit;
@@ -4783,8 +4783,8 a.list-group-item-danger.active:focus {
   padding: 10px 15px;
   background-color: #f5f5f5;
   border-top: 1px solid #dddddd;
-  border-bottom-right-radius: 3px;
-  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 1px;
+  border-bottom-left-radius: 1px;
 }
 .panel > .list-group {
   margin-bottom: 0;
@@ -4795,13 +4795,13 a.list-group-item-danger.active:focus {
 }
 .panel > .list-group:first-child .list-group-item:first-child {
   border-top: 0;
-  border-top-right-radius: 3px;
-  border-top-left-radius: 3px;
+  border-top-right-radius: 1px;
+  border-top-left-radius: 1px;
 }
 .panel > .list-group:last-child .list-group-item:last-child {
   border-bottom: 0;
-  border-bottom-right-radius: 3px;
-  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 1px;
+  border-bottom-left-radius: 1px;
 }
 .panel-heading + .list-group .list-group-item:first-child {
   border-top-width: 0;
@@ -4812,8 +4812,8 a.list-group-item-danger.active:focus {
 }
 .panel > .table:first-child,
 .panel > .table-responsive:first-child > .table:first-child {
-  border-top-right-radius: 3px;
-  border-top-left-radius: 3px;
+  border-top-right-radius: 1px;
+  border-top-left-radius: 1px;
 }
 .panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
 .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
@@ -4823,7 +4823,7 a.list-group-item-danger.active:focus {
 .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
 .panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
 .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
-  border-top-left-radius: 3px;
+  border-top-left-radius: 1px;
 }
 .panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
 .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
@@ -4833,12 +4833,12 a.list-group-item-danger.active:focus {
 .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
 .panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
 .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
-  border-top-right-radius: 3px;
+  border-top-right-radius: 1px;
 }
 .panel > .table:last-child,
 .panel > .table-responsive:last-child > .table:last-child {
-  border-bottom-right-radius: 3px;
-  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 1px;
+  border-bottom-left-radius: 1px;
 }
 .panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
 .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
@@ -4848,7 +4848,7 a.list-group-item-danger.active:focus {
 .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
 .panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
 .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
-  border-bottom-left-radius: 3px;
+  border-bottom-left-radius: 1px;
 }
 .panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
 .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
@@ -4858,7 +4858,7 a.list-group-item-danger.active:focus {
 .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
 .panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
 .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
-  border-bottom-right-radius: 3px;
+  border-bottom-right-radius: 1px;
 }
 .panel > .panel-body + .table,
 .panel > .panel-body + .table-responsive {
@@ -4929,7 +4929,7 a.list-group-item-danger.active:focus {
 }
 .panel-group .panel {
   margin-bottom: 0;
-  border-radius: 4px;
+  border-radius: 2px;
   overflow: hidden;
 }
 .panel-group .panel + .panel {
@@ -5037,7 +5037,7 a.list-group-item-danger.active:focus {
   margin-bottom: 20px;
   background-color: #f5f5f5;
   border: 1px solid #e3e3e3;
-  border-radius: 4px;
+  border-radius: 2px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
 }
@@ -5051,7 +5051,7 a.list-group-item-danger.active:focus {
 }
 .well-sm {
   padding: 9px;
-  border-radius: 3px;
+  border-radius: 2px;
 }
 .close {
   float: right;
@@ -5228,7 +5228,7 button.close {
   text-align: center;
   text-decoration: none;
   background-color: #000000;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 .tooltip-arrow {
   position: absolute;
@@ -7479,13 +7479,15 pre {
 label {
   font-weight: normal;
 }
+/* Make the page background atleast 100% the height of the view port */
+/* Make the page itself atleast 70% the height of the view port */
 .border-box-sizing {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
 .corner-all {
-  border-radius: 4px;
+  border-radius: 2px;
 }
 .no-padding {
   padding: 0px;
@@ -7741,7 +7743,7 div.traceback-wrapper {
  * Author: IPython Development Team
  */
 body {
-  background-color: white;
+  background-color: #ffffff;
   /* 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;
@@ -7759,7 +7761,6 div#header {
   z-index: 100;
 }
 div#header #header-container {
-  padding-left: 30px;
   padding-bottom: 5px;
   padding-top: 5px;
   box-sizing: border-box;
@@ -7993,7 +7994,7 ul.breadcrumb span {
   margin-top: 4px;
   margin-bottom: 20px;
   border: 1px solid #ababab;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 .list_container > div {
   border-bottom: 1px solid #ababab;
@@ -8134,6 +8135,9 ul#new-menu {
 .kernel-menu-icon-current:before {
   content: "\f00c";
 }
+#tab_content {
+  padding-top: 20px;
+}
 /*!
 *
 * IPython text editor webapp
@@ -8149,14 +8153,54 ul#new-menu {
   overflow: auto;
   max-height: 20em;
 }
-#texteditor-container {
-  border-bottom: 1px solid #ccc;
+#current-mode {
+  margin-right: 16px;
+}
+.edit_app #header {
+  -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
+  box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
+}
+.edit_app #menubar .navbar {
+  /* Use a negative 1 bottom margin, so the border overlaps the border of the
+    header */
+  margin-bottom: -1px;
 }
 #filename {
   font-size: 16pt;
   display: table;
   padding: 0px 5px;
 }
+#texteditor-backdrop {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+@media not print {
+  #texteditor-backdrop {
+    min-height: 100vh;
+    background-color: #eeeeee;
+  }
+}
+@media print {
+  #texteditor-backdrop #texteditor-container .CodeMirror-gutter,
+  #texteditor-backdrop #texteditor-container .CodeMirror-gutters {
+    background-color: #ffffff;
+  }
+}
+@media not print {
+  #texteditor-backdrop #texteditor-container .CodeMirror-gutter,
+  #texteditor-backdrop #texteditor-container .CodeMirror-gutters {
+    background-color: #ffffff;
+  }
+}
+@media not print {
+  #texteditor-backdrop #texteditor-container {
+    padding: 0px;
+    background-color: #ffffff;
+    min-height: 70vh;
+    -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
+    box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
+  }
+}
 /*!
 *
 * IPython notebook
@@ -8232,7 +8276,7 div.cell {
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  border-radius: 4px;
+  border-radius: 2px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -8303,7 +8347,7 div.inner_cell {
 /* input_area and input_prompt must match in top border and margin for alignment */
 div.input_area {
   border: 1px solid #cfcfcf;
-  border-radius: 4px;
+  border-radius: 2px;
   background: #f7f7f7;
   line-height: 1.21429em;
 }
@@ -8332,7 +8376,7 div.unrecognized_cell {
   align-items: stretch;
 }
 div.unrecognized_cell .inner_cell {
-  border-radius: 4px;
+  border-radius: 2px;
   padding: 5px;
   font-weight: bold;
   color: red;
@@ -8426,6 +8470,7 div.input_area > div.highlight > pre {
 .CodeMirror {
   line-height: 1.21429em;
   /* Changed from 1em to our global default */
+  font-size: 14px;
   height: auto;
   /* Changed to auto to autogrow */
   background: none;
@@ -8446,8 +8491,8 div.input_area > div.highlight > pre {
   padding: 0 8px 0 4px;
 }
 .CodeMirror-gutters {
-  border-bottom-left-radius: 4px;
-  border-top-left-radius: 4px;
+  border-bottom-left-radius: 2px;
+  border-top-left-radius: 2px;
 }
 .CodeMirror pre {
   /* In CM3 this went to 4px from 0 in CM2. We need the 0 value because of how we size */
@@ -8633,7 +8678,7 div.output_scroll {
   /* FF needs this *and the wrapper* to specify full width, or it will shrinkwrap */
   width: 100%;
   overflow: auto;
-  border-radius: 4px;
+  border-radius: 2px;
   -webkit-box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
   box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
   display: block;
@@ -8661,7 +8706,7 div.out_prompt_overlay {
   height: 100%;
   padding: 0px 0.4em;
   position: absolute;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 div.out_prompt_overlay:hover {
   /* use inner shadow to get border that is computed the same on WebKit/FF */
@@ -9152,7 +9197,7 h6:hover .anchor-link {
   /* Slider Track */
   border: 1px solid #CCCCCC;
   background: #FFFFFF;
-  border-radius: 4px;
+  border-radius: 2px;
   /* Round the corners of the slide track */
 }
 .widget-hslider {
@@ -9190,7 +9235,7 h6:hover .anchor-link {
   /* Slider Track */
   border: 1px solid #CCCCCC;
   background: #FFFFFF;
-  border-radius: 4px;
+  border-radius: 2px;
   /* Round the corners of the slide track */
   /* Make the div a flex box (makes FF behave correctly). */
   /* Old browsers */
@@ -9257,7 +9302,7 h6:hover .anchor-link {
   /* Slider Track */
   border: 1px solid #CCCCCC;
   background: #FFFFFF;
-  border-radius: 4px;
+  border-radius: 2px;
   /* Round the corners of the slide track */
   /* Make the div a flex box (makes FF behave correctly). */
   /* Old browsers */
@@ -9471,9 +9516,6 h6:hover .anchor-link {
 * IPython notebook webapp
 *
 */
-body {
-  background-color: #ffffff;
-}
 @media (max-width: 767px) {
   body.notebook_app {
     padding-left: 0px;
@@ -9486,26 +9528,42 body {
   -webkit-box-sizing: border-box;
 }
 div#notebook_panel {
-  margin: 0px 0px 0px 0px;
+  margin: 0px;
   padding: 0px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
+@media not print {
+  div#notebook_panel {
+    background-color: #eeeeee;
+    min-height: 100vh;
+  }
+}
 div#notebook {
   font-size: 14px;
   line-height: 20px;
   overflow-y: hidden;
   overflow-x: auto;
   width: 100%;
-  /* This spaces the cell away from the edge of the notebook area */
-  padding: 2em 0 2em 0;
+  /* This spaces the page away from the edge of the notebook area */
+  padding-top: 20px;
+  padding-bottom: 20px;
   margin: 0px;
   outline: none;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
 }
+@media not print {
+  #notebook-container {
+    padding: 15px;
+    background-color: #ffffff;
+    min-height: 70vh;
+    -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
+    box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
+  }
+}
 div.ui-widget-content {
   border: 1px solid #ababab;
   outline: none;
@@ -9513,7 +9571,7 div.ui-widget-content {
 pre.dialog {
   background-color: #f7f7f7;
   border: 1px solid #ddd;
-  border-radius: 4px;
+  border-radius: 2px;
   padding: 0.4em;
   padding-left: 2em;
 }
@@ -9545,15 +9603,15 p {
   margin-bottom: -1px;
 }
 .notebook_app #header {
-  -webkit-box-shadow: 1px 4px 9px -6px rgba(0, 0, 0, 0.25);
-  box-shadow: 1px 4px 9px -6px rgba(0, 0, 0, 0.25);
+  -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
+  box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
 }
 /* CSS for the cell toolbar */
 .celltoolbar {
   border: thin solid #CFCFCF;
   border-bottom: none;
   background: #EEE;
-  border-radius: 4px 4px 0px 0px;
+  border-radius: 2px 2px 0px 0px;
   width: 100%;
   height: 29px;
   padding-right: 4px;
@@ -9578,6 +9636,11 p {
   /* Modern browsers */
   justify-content: flex-end;
 }
+@media print {
+  .celltoolbar {
+    display: none;
+  }
+}
 .ctb_hideshow {
   display: none;
   vertical-align: bottom;
@@ -9608,7 +9671,6 p {
   background-color: #ffffff;
   background-image: none;
   border: 1px solid #cccccc;
-  border-radius: 4px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
@@ -9617,7 +9679,7 p {
   padding: 5px 10px;
   font-size: 12px;
   line-height: 1.5;
-  border-radius: 3px;
+  border-radius: 2px;
   width: inherit;
   font-size: 87%;
   height: 22px;
@@ -9666,7 +9728,7 select[multiple].celltoolbar select {
   z-index: 10;
   overflow: hidden;
   border: 1px solid #ababab;
-  border-radius: 4px;
+  border-radius: 2px;
   -webkit-box-shadow: 0px 6px 10px -1px #adadad;
   box-shadow: 0px 6px 10px -1px #adadad;
 }
@@ -9686,7 +9748,6 select[multiple].celltoolbar select {
   color: #3071a9;
 }
 #kernel_logo_widget {
-  margin-right: 1em;
   float: right !important;
   float: right;
 }
@@ -9704,7 +9765,7 select[multiple].celltoolbar select {
 }
 #menubar .navbar {
   border-top: 1px;
-  border-radius: 0px 0px 4px 4px;
+  border-radius: 0px 0px 2px 2px;
   margin-bottom: 6px;
 }
 #menubar .navbar-toggle {
@@ -10115,6 +10176,8 div#pager {
   width: 100%;
   max-height: 50%;
   padding-top: 8px;
+  -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
+  box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2);
   /* Display over codemirror */
   z-index: 100;
   /* Hack which prevents jquery ui resizable from changing top. */
@@ -10150,11 +10213,6 div#pager .ui-resizable-handle {
   background: #f7f7f7;
   border-top: 1px solid #cfcfcf;
   border-bottom: 1px solid #cfcfcf;
-  /* Similar to the notebook header's shadow, but not
-        exactly the same.  The settings had to be adjusted
-        to get the shadow to show. */
-  -webkit-box-shadow: 1px 4px 9px -3px rgba(0, 0, 0, 0.15);
-  box-shadow: 1px 4px 9px -3px rgba(0, 0, 0, 0.15);
   /* This injects handle bars (a short, wide = symbol) for 
         the resize handle. */
 }
@@ -10206,9 +10264,10 span.save_widget span.filename {
   height: 1em;
   line-height: 1em;
   padding: 3px;
+  margin-left: 16px;
   border: none;
   font-size: 146.5%;
-  border-radius: 4px;
+  border-radius: 2px;
 }
 span.save_widget span.filename:hover {
   background-color: #e6e6e6;
@@ -10268,7 +10327,7 span.autosave_status {
   margin-top: -8px;
   border: 0px;
   min-height: 27px;
-  margin-left: 32px;
+  margin-left: 0px;
   padding-top: 11px;
   padding-bottom: 3px;
 }
@@ -10384,7 +10443,7 span.autosave_status {
   -moz-box-shadow: 0px 6px 10px -1px #adadad;
   -webkit-box-shadow: 0px 6px 10px -1px #adadad;
   box-shadow: 0px 6px 10px -1px #adadad;
-  border-radius: 4px;
+  border-radius: 2px;
   position: absolute;
   z-index: 1000;
 }
@@ -10423,17 +10482,24 span.autosave_status {
 }
 .terminal {
   float: left;
-  border: black solid 5px;
-  font-family: "DejaVu Sans Mono", "Liberation Mono", monospace;
-  font-size: 11px;
+  font-family: monospace;
   color: white;
   background: black;
+  padding: 0.4em;
+  border-radius: 2px;
+  -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.4);
+  box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.4);
+}
+.terminal,
+.terminal dummy-screen {
+  line-height: 1em;
+  font-size: 14px;
 }
 .terminal-cursor {
   color: black;
   background: white;
 }
 #terminado-container {
-  margin: 8px;
+  margin-top: 20px;
 }
 /*# sourceMappingURL=style.min.css.map */

  No newline at end of file

IPython/html/static/terminal/js/main.js

@@ -29,7 +29,7 require([
     var header = $("#header")[0]
     function calculate_size() {
         height = window.innerHeight - header.offsetHeight;
-        width = window.innerWidth;
+        width = $('#terminado-container').width();
         var rows = Math.min(1000, Math.max(20, Math.floor(height/termRowHeight())-1));
         var cols = Math.min(1000, Math.max(40, Math.floor(width/termColWidth())-1));
         console.log("resize to :", rows , 'rows by ', cols, 'columns');

IPython/html/static/terminal/less/terminal.less

@@ -1,10 +1,16
 .terminal {
   float: left;
-  border: black solid 5px;
-  font-family: "DejaVu Sans Mono", "Liberation Mono", monospace;
-  font-size: 11px;
+  font-family: monospace;
   color: white;
   background: black;
+  padding: @code_padding;
+  border-radius: @border-radius-base;
+  .box-shadow(@global-shadow-dark);
+
+  &, dummy-screen {
+    line-height: 1em;
+    font-size: @notebook_font_size;
+  }
 }
 
 .terminal-cursor {
@@ -13,5 +19,5
 }
 
 #terminado-container {
-    margin: 8px;
+  margin-top: @page-header-padding;
 }

IPython/html/static/tree/css/override.css

@@ -1,7 +1,3
 /*This file contains any manual css for this page that needs to override the global styles.
 This is only required when different pages style the same element differently. This is just
 a hack to deal with our current css styles and no new styling should be added in this file.*/
-
-#ipython-main-app {
-    margin: 28px auto 0px auto;
-}

IPython/html/static/tree/less/tree.less

@@ -57,7 +57,7 ul.breadcrumb {
   margin-top: @dashboard_tb_pad;
   margin-bottom: 5*@dashboard_tb_pad;
   border: 1px solid @border_color;
-  border-radius: 4px;
+  border-radius: @border-radius-base;
 }
 
 .list_container > div {
@@ -175,3 +175,7 ul#new-menu {
 .kernel-menu-icon-current:before {
   content: @fa-var-check;
 }
+
+#tab_content {
+    padding-top: @page-header-padding;
+}

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">

IPython/html/templates/terminal.html

@@ -9,10 +9,15 data-ws-path="{{ws_path}}"
 
 {% endblock %}
 
+{% block stylesheet %}
+{{super()}}
+
+<link rel="stylesheet" href="{{ static_url("terminal/css/override.css") }}" type="text/css" />
+{% endblock %}
 
 {% block site %}
 
-<div id="terminado-container"></div>
+<div id="terminado-container" class="container"></div>
 
 {% endblock %}