diff --git a/IPython/html/static/notebook/less/pager.less b/IPython/html/static/notebook/less/pager.less
index 6fe021b..434fc5e 100644
--- a/IPython/html/static/notebook/less/pager.less
+++ b/IPython/html/static/notebook/less/pager.less
@@ -8,7 +8,7 @@ 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 @@ div#pager {
#pager-button-area {
position: absolute;
- top: 7px;
+ top: 8px;
right: 20px;
}
@@ -44,8 +44,29 @@ 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;
+ }
}
}
diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css
index 06a2e1f..efc0f95 100644
--- a/IPython/html/static/style/style.min.css
+++ b/IPython/html/static/style/style.min.css
@@ -10130,7 +10130,7 @@ 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 @@ div#pager pre {
}
div#pager #pager-button-area {
position: absolute;
- top: 7px;
+ top: 8px;
right: 20px;
}
div#pager #pager-contents {
@@ -10162,9 +10162,27 @@ 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 */