Merge pull request #7169 from jdfreder/pager-style

Make the new pager look better

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

@@ -8,7 +8,7 b' div#pager {'
     bottom: 0px;
     width: 100%;
     max-height: 50%;
-    padding-top: 7px;
+    padding-top: 8px;
 
     /* Display over codemirror */
     z-index: 100;
@@ -25,7 +25,7 b' div#pager {'
 
     #pager-button-area {
         position: absolute;
-        top: 7px;
+        top: 8px;
         right: 20px; 
     }
 
@@ -44,8 +44,29 b' div#pager {'
 
     .ui-resizable-handle {
         top: 0px;
-        height: 7px;
-        background: @light_border_color;
-        border-bottom: 1px solid @border_color;
+        height: 8px;
+        background: @cell_background;
+        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 {
+            content: '';
+            
+            top: 2px;
+            left: 50%;
+            height: 3px;
+            width: 30px;
+            margin-left: -15px;
+            position: absolute;
+
+            border-top: 1px solid @light_border_color;
+        }
     }
 }

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

@@ -10130,7 +10130,7 b' div#pager {'
   bottom: 0px;
   width: 100%;
   max-height: 50%;
-  padding-top: 7px;
+  padding-top: 8px;
   /* Display over codemirror */
   z-index: 100;
   /* Hack which prevents jquery ui resizable from changing top. */
@@ -10144,7 +10144,7 b' div#pager pre {'
 }
 div#pager #pager-button-area {
   position: absolute;
-  top: 7px;
+  top: 8px;
   right: 20px;
 }
 div#pager #pager-contents {
@@ -10162,9 +10162,27 b' div#pager #pager-contents #pager-container {'
 }
 div#pager .ui-resizable-handle {
   top: 0px;
-  height: 7px;
-  background: #cfcfcf;
-  border-bottom: 1px solid #ababab;
+  height: 8px;
+  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. */
+}
+div#pager .ui-resizable-handle::after {
+  content: '';
+  top: 2px;
+  left: 50%;
+  height: 3px;
+  width: 30px;
+  margin-left: -15px;
+  position: absolute;
+  border-top: 1px solid #cfcfcf;
 }
 .quickhelp {
   /* Old browsers */