Make the pager look better

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

@@ -1,51 +1,68 b''
 div#pager {
     background-color:   @body-bg;
     font-size: @notebook_font_size;
     line-height: @notebook_line_height;
     overflow: hidden;
     display: none;
     position: fixed;
     bottom: 0px;
     width: 100%;
     max-height: 50%;
-    padding-top: 7px;
+    padding-top: 10px;
 
     /* Display over codemirror */
     z-index: 100;
 
     /* Hack which prevents jquery ui resizable from changing top. */
     top: inherit !important; 
 
     pre {
         line-height: @code_line_height;
         color: @text-color;
         background-color: @cell_background;
         padding: @code_padding;
     }
 
     #pager-button-area {
         position: absolute;
-        top: 7px;
+        top: 10px;
         right: 20px; 
     }
 
     #pager-contents {
         position: relative;
         overflow: auto;
         width: 100%;
         height: 100%;
 
         #pager-container {
             position: relative;
             padding: 15px 0px;
             .border-box-sizing();
         }
     }
 
     .ui-resizable-handle {
         top: 0px;
-        height: 7px;
-        background: @light_border_color;
-        border-bottom: 1px solid @border_color;
+        height: 10px;
+        background: @cell_background;
+        border-top: 1px solid @light_border_color;
+        border-bottom: 1px solid @light_border_color;
+
+        /* This injects handle bars (a short, wide = symbol) for 
+        the resize handle. */
+        &::after {
+            content: '';
+            
+            top: 2px;
+            left: 50%;
+            height: 3px;
+            width: 20px;
+            margin-left: -10px;
+            position: absolute;
+
+            border-bottom: 1px solid @light_border_color;
+            border-top: 1px solid @light_border_color;
+        }
     }
 }