Use page backdrop with the terminal

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

@@ -1,23 +1,36 b''
-.terminal {
-  float: left;
-  font-family: monospace;
-  color: white;
-  background: black;
-  padding: @code_padding;
-  border-radius: @border-radius-base;
-  .box-shadow(@global-shadow-dark);
+body.terminal-app {
+  background: @page-backdrop-color;
 
-  &, dummy-screen {
-    line-height: 1em;
-    font-size: @notebook_font_size;
+  #header {
+    background: @body-bg;
+    .box-shadow(@global-shadow);
+
+    .header-bar {
+      margin-bottom: -1px;
+    }
   }
-}
 
-.terminal-cursor {
-  color: black;
-  background: white;
-}
+  .terminal {
+    float: left;
+    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 {
+    color: black;
+    background: white;
+  }
 
-#terminado-container {
-  margin-top: @page-header-padding;
+  #terminado-container {
+    margin-top: @page-header-padding;
+  }
 }

IPython/html/templates/terminal.html

@@ -1,62 +1,63 b''
 {% extends "page.html" %}
 
 {% block title %}{{page_title}}{% endblock %}
 
 {% block params %}
 
 data-base-url="{{base_url}}"
 data-ws-path="{{ws_path}}"
+class="terminal-app"
 
 {% endblock %}
 
 {% block stylesheet %}
 {{super()}}
 
 <link rel="stylesheet" href="{{ static_url("terminal/css/override.css") }}" type="text/css" />
 {% endblock %}
 
 {% block site %}
 
 <div id="terminado-container" class="container"></div>
 
 {% endblock %}
 
 {% block script %}
 
 <!-- Hack: this needs to be outside the display:none block, so we can measure
      its size in JS in setting up the page. It is still invisible. Putting in
      the script block gets it outside the initially undisplayed region. -->
 <!-- test size: 25x80 -->
 <div style='position:absolute; left:-1000em'>
 <pre id="dummy-screen" style="border: solid 5px white;" class="terminal">0
 1
 2
 3
 4
 5
 6
 7
 8
 9
 0
 1
 2
 3
 4
 5
 6
 7
 8
 9
 0
 1
 2
 3
 <span id="dummy-screen-rows" style="">01234567890123456789012345678901234567890123456789012345678901234567890123456789</span>
 </pre>
 </div>
 
     {{super()}}
 
 <script src="{{ static_url("terminal/js/main.js") }}" type="text/javascript" charset="utf-8"></script>
 {% endblock %}