From 27dea3d2f8e7c0e66b243ae7435dc60a789df29a 2013-11-22 00:38:38
From: Brian E. Granger <ellisonbg@gmail.com>
Date: 2013-11-22 00:38:38
Subject: [PATCH] Adjusting padding of output subareas and adding @code_padding.
---
diff --git a/IPython/html/static/notebook/less/cell.less b/IPython/html/static/notebook/less/cell.less
index 082be48..7d508d8 100644
--- a/IPython/html/static/notebook/less/cell.less
+++ b/IPython/html/static/notebook/less/cell.less
@@ -16,8 +16,8 @@ div.cell {
div.prompt {
/* This needs to be wide enough for 3 digit prompt numbers: In[100]: */
min-width: 11ex;
- /* This 0.4em is tuned to match the padding on the CodeMirror editor. */
- padding: 0.4em;
+ /* This padding is tuned to match the padding on the CodeMirror editor. */
+ padding: @code_padding;
margin: 0px;
font-family: @monoFontFamily;
text-align: right;
diff --git a/IPython/html/static/notebook/less/codemirror.less b/IPython/html/static/notebook/less/codemirror.less
index 542daff..512157b 100644
--- a/IPython/html/static/notebook/less/codemirror.less
+++ b/IPython/html/static/notebook/less/codemirror.less
@@ -33,11 +33,11 @@
.CodeMirror-lines {
/* In CM2, this used to be 0.4em, but in CM3 it went to 4px. We need the em value because */
/* we have set a different line-height and want this to scale with that. */
- padding: 0.4em;
+ padding: @code_padding;
}
.CodeMirror-linenumber {
- // This is needed to fine tune the position of the line numbers because we use the 0.4em
+ // This is needed to fine tune the position of the line numbers because we use the 0.4em in @code_padding
// spacing in various places. Fine tuned to look right.
padding: 0 8px 0 4px;
}
diff --git a/IPython/html/static/notebook/less/outputarea.less b/IPython/html/static/notebook/less/outputarea.less
index c92ccc1..8ccabe0 100644
--- a/IPython/html/static/notebook/less/outputarea.less
+++ b/IPython/html/static/notebook/less/outputarea.less
@@ -1,6 +1,4 @@
div.output_wrapper {
- /* This is a spacer between the input and output of each cell */
- margin-top: 5px;
/* this position must be relative to enable descendents to be absolute within it */
position: relative;
.vbox()
@@ -27,7 +25,7 @@ div.output_collapsed {
div.out_prompt_overlay {
height: 100%;
- padding: 0px 0.4em;
+ padding: 0px @code_padding;
position: absolute;
.corner-all;
}
@@ -89,8 +87,7 @@ div.output_area pre {
/* This class is for the output subarea inside the output_area and after
the prompt div. */
div.output_subarea {
- padding: 0.44em 0.4em 0.4em 1px;
- margin-left: 6px;
+ padding: @code_padding @code_padding 0.0em @code_padding;
.box-flex1();
}
@@ -108,11 +105,11 @@ div.output_text {
/* stdout/stderr are 'text' as well as 'stream', but pyout/pyerr are *not* streams */
div.output_stream {
- padding-top: 0.0em;
- padding-bottom: 0.0em;
}
+
div.output_stdout {
}
+
div.output_stderr {
background: #fdd; /* very light red background for stderr */
}
diff --git a/IPython/html/static/notebook/less/pager.less b/IPython/html/static/notebook/less/pager.less
index 805f8fc..3ba80e4 100644
--- a/IPython/html/static/notebook/less/pager.less
+++ b/IPython/html/static/notebook/less/pager.less
@@ -16,6 +16,6 @@ div#pager {
line-height: @code_line_height;
color: @textColor;
background-color: @cell_background;
- padding: 0.4em;
+ padding: @code_padding;
}
}
diff --git a/IPython/html/static/notebook/less/variables.less b/IPython/html/static/notebook/less/variables.less
index e1f55eb..01d6ab2 100644
--- a/IPython/html/static/notebook/less/variables.less
+++ b/IPython/html/static/notebook/less/variables.less
@@ -6,4 +6,5 @@
@border_color: darken(@cell_selected_background, 31%);
@light_border_color: darken(@cell_selected_background, 17%);
@border_width: 1px;
+@code_padding: 0.4em;
diff --git a/IPython/html/static/style/ipython.min.css b/IPython/html/static/style/ipython.min.css
index 7cdc34e..c01d9f6 100644
--- a/IPython/html/static/style/ipython.min.css
+++ b/IPython/html/static/style/ipython.min.css
@@ -86,8 +86,7 @@ pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .j
.cm-s-ipython span.cm-operator{color:#AA22FF;font-weight:bold;}
.cm-s-ipython span.cm-meta{color:#AA22FF;}
.cm-s-ipython span.cm-tab{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);background-position:right;background-repeat:no-repeat;}
-div.output_wrapper{margin-top:5px;position:relative;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;}
-div.output_wrapper div.output:empty{margin-top:0px;}
+div.output_wrapper{position:relative;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;}
div.output_scroll{height:24em;width:100%;overflow:auto;border-radius:4px;-webkit-box-shadow:inset 0 2px 8px rgba(0, 0, 0, 0.8);-moz-box-shadow:inset 0 2px 8px rgba(0, 0, 0, 0.8);box-shadow:inset 0 2px 8px rgba(0, 0, 0, 0.8);}
div.output_collapsed{margin:0px;padding:0px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;}
div.out_prompt_overlay{height:100%;padding:0px 0.4em;position:absolute;border-radius:4px;}
@@ -98,9 +97,8 @@ div.output_area .rendered_html table{margin-left:0;margin-right:0;}
div.output_area .rendered_html img{margin-left:0;margin-right:0;}
.output{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;}
div.output_area pre{font-family:monospace;margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;color:black;background-color:transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;line-height:inherit;}
-div.output_subarea{padding:0.44em 0.4em 0.4em 1px;margin-left:6px;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}
+div.output_subarea{padding:0.4em 0.4em 0em 0.4em;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}
div.output_text{text-align:left;color:#000000;font-family:monospace;line-height:1.231em;}
-div.output_stream{padding-top:0.0em;padding-bottom:0.0em;}
div.output_stderr{background:#fdd;}
div.output_latex{text-align:left;}
.js-error{color:darkred;}
diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css
index 30968ce..8a4cd95 100644
--- a/IPython/html/static/style/style.min.css
+++ b/IPython/html/static/style/style.min.css
@@ -1467,8 +1467,7 @@ pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .j
.cm-s-ipython span.cm-operator{color:#AA22FF;font-weight:bold;}
.cm-s-ipython span.cm-meta{color:#AA22FF;}
.cm-s-ipython span.cm-tab{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);background-position:right;background-repeat:no-repeat;}
-div.output_wrapper{margin-top:5px;position:relative;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;}
-div.output_wrapper div.output:empty{margin-top:0px;}
+div.output_wrapper{position:relative;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;}
div.output_scroll{height:24em;width:100%;overflow:auto;border-radius:4px;-webkit-box-shadow:inset 0 2px 8px rgba(0, 0, 0, 0.8);-moz-box-shadow:inset 0 2px 8px rgba(0, 0, 0, 0.8);box-shadow:inset 0 2px 8px rgba(0, 0, 0, 0.8);}
div.output_collapsed{margin:0px;padding:0px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;}
div.out_prompt_overlay{height:100%;padding:0px 0.4em;position:absolute;border-radius:4px;}
@@ -1479,9 +1478,8 @@ div.output_area .rendered_html table{margin-left:0;margin-right:0;}
div.output_area .rendered_html img{margin-left:0;margin-right:0;}
.output{display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:vertical;-moz-box-align:stretch;display:box;box-orient:vertical;box-align:stretch;width:100%;}
div.output_area pre{font-family:monospace;margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;color:black;background-color:transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;line-height:inherit;}
-div.output_subarea{padding:0.44em 0.4em 0.4em 1px;margin-left:6px;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}
+div.output_subarea{padding:0.4em 0.4em 0em 0.4em;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}
div.output_text{text-align:left;color:#000000;font-family:monospace;line-height:1.231em;}
-div.output_stream{padding-top:0.0em;padding-bottom:0.0em;}
div.output_stderr{background:#fdd;}
div.output_latex{text-align:left;}
.js-error{color:darkred;}