From 67701c01c0be0e8e7f91f857523dc4981dc766c9 2014-03-07 00:36:39 From: Brian E. Granger Date: 2014-03-07 00:36:39 Subject: [PATCH] Lots of CSS tweaks to get nbconvert output looking right. --- diff --git a/IPython/html/static/base/less/variables.less b/IPython/html/static/base/less/variables.less index 87f9e66..42d9f61 100644 --- a/IPython/html/static/base/less/variables.less +++ b/IPython/html/static/base/less/variables.less @@ -7,4 +7,3 @@ // Our own global variables for all pages go here -@code_line_height: 1.231em; diff --git a/IPython/html/static/notebook/css/override.css b/IPython/html/static/notebook/css/override.css index 6c0fb75..170f1f7 100644 --- a/IPython/html/static/notebook/css/override.css +++ b/IPython/html/static/notebook/css/override.css @@ -4,5 +4,4 @@ a hack to deal with our current css styles and no new styling should be added in #ipython-main-app { position: relative; - font-size: 110%; } \ No newline at end of file diff --git a/IPython/html/static/notebook/less/codecell.less b/IPython/html/static/notebook/less/codecell.less index c8d570f..777f185 100644 --- a/IPython/html/static/notebook/less/codecell.less +++ b/IPython/html/static/notebook/less/codecell.less @@ -16,3 +16,25 @@ div.input_prompt { border-top: 1px solid transparent; } + +// The styles related to div.highlight are for nbconvert HTML output only. This works +// because the .highlight div isn't present in the live notebook. We could put this into +// nbconvert, but it easily falls out of sync, can't use our less variables and doesn't +// help the basic template when paired with our CSS. + +div.input_area > div.highlight { + margin: @code_padding; + border: none; + padding: 0px; + background-color: transparent; +} + +div.input_area > div.highlight > pre { + margin: 0px; + border: 0px; + padding: 0px; + background-color: transparent; + font-size: @notebook_font_size; + line-height: @code_line_height; +} + diff --git a/IPython/html/static/notebook/less/notebook.less b/IPython/html/static/notebook/less/notebook.less index b89a643..8c6589e 100644 --- a/IPython/html/static/notebook/less/notebook.less +++ b/IPython/html/static/notebook/less/notebook.less @@ -21,6 +21,8 @@ div#notebook_panel { .box-shadow(0 -1px 10px rgba(0,0,0,.1)); } div#notebook { + font-size: @notebook_font_size; + line-height: @notebook_line_height; overflow-y: scroll; overflow-x: auto; width: 100%; diff --git a/IPython/html/static/notebook/less/pager.less b/IPython/html/static/notebook/less/pager.less index 3ba80e4..961550a 100644 --- a/IPython/html/static/notebook/less/pager.less +++ b/IPython/html/static/notebook/less/pager.less @@ -8,6 +8,8 @@ div#pager_splitter { } div#pager { + font-size: @notebook_font_size; + line-height: @notebook_line_height; overflow: auto; display: none; diff --git a/IPython/html/static/notebook/less/variables.less b/IPython/html/static/notebook/less/variables.less index 0d5540c..4a07a22 100644 --- a/IPython/html/static/notebook/less/variables.less +++ b/IPython/html/static/notebook/less/variables.less @@ -6,5 +6,8 @@ @border_color: darken(@cell_selected_background, 31%); @light_border_color: darken(@cell_selected_background, 17%); @border_width: 1px; -@code_padding: 0.4em; +@notebook_font_size: 14px; +@notebook_line_height: 20px; +@code_line_height: 1.21429em; // changed from 1.231 to get 17px even +@code_padding: 0.4em; // 5.6 px diff --git a/IPython/html/static/style/ipython.min.css b/IPython/html/static/style/ipython.min.css index d940f33..8d4fade 100644 --- a/IPython/html/static/style/ipython.min.css +++ b/IPython/html/static/style/ipython.min.css @@ -71,13 +71,15 @@ input.engine_num_input{width:60px} div.cell{border:1px solid transparent;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%;display:flex;flex-direction:column;align-items:stretch}div.cell.selected{border-radius:4px;border:thin #ababab solid} div.cell.edit_mode{border-radius:4px;border:thin #008000 solid} div.cell{width:100%;padding:5px 5px 5px 0;margin:0;outline:none} -div.prompt{min-width:11ex;padding:.4em;margin:0;font-family:monospace;text-align:right;line-height:1.231em} +div.prompt{min-width:11ex;padding:.4em;margin:0;font-family:monospace;text-align:right;line-height:1.21429em} div.inner_cell{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%;display:flex;flex-direction:column;align-items:stretch;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1} div.input_area{border:1px solid #cfcfcf;border-radius:4px;background:#f7f7f7} div.prompt:empty{padding-top:0;padding-bottom:0} div.input{page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;display:flex;flex-direction:row;align-items:stretch} div.input_prompt{color:#000080;border-top:1px solid transparent} -.CodeMirror{line-height:1.231em;height:auto;background:none;} +div.input_area>div.highlight{margin:.4em;border:none;padding:0;background-color:transparent} +div.input_area>div.highlight>pre{margin:0;border:0;padding:0;background-color:transparent;font-size:14px;line-height:1.21429em} +.CodeMirror{line-height:1.21429em;height:auto;background:none;} .CodeMirror-scroll{overflow-y:hidden;overflow-x:auto} @-moz-document url-prefix(){.CodeMirror-scroll{overflow-x:hidden}}.CodeMirror-lines{padding:.4em} .CodeMirror-linenumber{padding:0 8px 0 4px} @@ -116,7 +118,7 @@ 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%;display:flex;flex-direction:column;align-items:stretch} div.output_area pre{font-family:monospace;margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;color:#000;background-color:transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;line-height:inherit} div.output_subarea{padding:.4em .4em 0 .4em;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1} -div.output_text{text-align:left;color:#000;font-family:monospace;line-height:1.231em} +div.output_text{text-align:left;color:#000;font-family:monospace;line-height:1.21429em} div.output_stderr{background:#fdd;} div.output_latex{text-align:left} div.output_javascript:empty{padding:0} diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css index c78ebe6..e36a823 100644 --- a/IPython/html/static/style/style.min.css +++ b/IPython/html/static/style/style.min.css @@ -1348,13 +1348,15 @@ input.engine_num_input{width:60px} div.cell{border:1px solid transparent;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%;display:flex;flex-direction:column;align-items:stretch}div.cell.selected{border-radius:4px;border:thin #ababab solid} div.cell.edit_mode{border-radius:4px;border:thin #008000 solid} div.cell{width:100%;padding:5px 5px 5px 0;margin:0;outline:none} -div.prompt{min-width:11ex;padding:.4em;margin:0;font-family:monospace;text-align:right;line-height:1.231em} +div.prompt{min-width:11ex;padding:.4em;margin:0;font-family:monospace;text-align:right;line-height:1.21429em} div.inner_cell{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%;display:flex;flex-direction:column;align-items:stretch;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1} div.input_area{border:1px solid #cfcfcf;border-radius:4px;background:#f7f7f7} div.prompt:empty{padding-top:0;padding-bottom:0} div.input{page-break-inside:avoid;display:-webkit-box;-webkit-box-orient:horizontal;-webkit-box-align:stretch;display:-moz-box;-moz-box-orient:horizontal;-moz-box-align:stretch;display:box;box-orient:horizontal;box-align:stretch;display:flex;flex-direction:row;align-items:stretch} div.input_prompt{color:#000080;border-top:1px solid transparent} -.CodeMirror{line-height:1.231em;height:auto;background:none;} +div.input_area>div.highlight{margin:.4em;border:none;padding:0;background-color:transparent} +div.input_area>div.highlight>pre{margin:0;border:0;padding:0;background-color:transparent;font-size:14px;line-height:1.21429em} +.CodeMirror{line-height:1.21429em;height:auto;background:none;} .CodeMirror-scroll{overflow-y:hidden;overflow-x:auto} @-moz-document url-prefix(){.CodeMirror-scroll{overflow-x:hidden}}.CodeMirror-lines{padding:.4em} .CodeMirror-linenumber{padding:0 8px 0 4px} @@ -1393,7 +1395,7 @@ 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%;display:flex;flex-direction:column;align-items:stretch} div.output_area pre{font-family:monospace;margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;color:#000;background-color:transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;line-height:inherit} div.output_subarea{padding:.4em .4em 0 .4em;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1} -div.output_text{text-align:left;color:#000;font-family:monospace;line-height:1.231em} +div.output_text{text-align:left;color:#000;font-family:monospace;line-height:1.21429em} div.output_stderr{background:#fdd;} div.output_latex{text-align:left} div.output_javascript:empty{padding:0} @@ -1474,7 +1476,7 @@ body{background-color:#fff} body.notebook_app{overflow:hidden} span#notebook_name{height:1em;line-height:1em;padding:3px;border:none;font-size:146.5%} div#notebook_panel{margin:0 0 0 0;padding:0;-webkit-box-shadow:0 -1px 10px rgba(0,0,0,0.1);-moz-box-shadow:0 -1px 10px rgba(0,0,0,0.1);box-shadow:0 -1px 10px rgba(0,0,0,0.1)} -div#notebook{overflow-y:scroll;overflow-x:auto;width:100%;padding:1em 0 1em 0;margin:0;border-top:1px solid #ababab;outline:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box} +div#notebook{font-size:14px;line-height:20px;overflow-y:scroll;overflow-x:auto;width:100%;padding:1em 0 1em 0;margin:0;border-top:1px solid #ababab;outline:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box} div.ui-widget-content{border:1px solid #ababab;outline:none} pre.dialog{background-color:#f7f7f7;border:1px solid #ddd;border-radius:4px;padding:.4em;padding-left:2em} p.dialog{padding:.2em} @@ -1507,7 +1509,7 @@ ul#help_menu li a{overflow:hidden;padding-right:2.2em}ul#help_menu li a i{margin .notification_widget{color:#777;padding:1px 12px;margin:2px 4px;z-index:10;border:1px solid #ccc;border-radius:4px;background:rgba(240,240,240,0.5)}.notification_widget.span{padding-right:2px} div#pager_splitter{height:8px} #pager-container{position:relative;padding:15px 0} -div#pager{overflow:auto;display:none}div#pager pre{font-size:13px;line-height:1.231em;color:#000;background-color:#f7f7f7;padding:.4em} +div#pager{font-size:14px;line-height:20px;overflow:auto;display:none}div#pager pre{font-size:13px;line-height:1.21429em;color:#000;background-color:#f7f7f7;padding:.4em} .shortcut_key{display:inline-block;width:15ex;text-align:right;font-family:monospace} .shortcut_descr{display:inline-block} span#save_widget{padding:0 5px;margin-top:12px} diff --git a/IPython/nbconvert/templates/html/full.tpl b/IPython/nbconvert/templates/html/full.tpl index 7b8c2d0..c89258d 100644 --- a/IPython/nbconvert/templates/html/full.tpl +++ b/IPython/nbconvert/templates/html/full.tpl @@ -25,16 +25,6 @@ body { overflow: visible; padding: 8px; } -.input_area { - padding: 0.2em; -} - -pre { - padding: 0.2em; - border: none; - margin: 0px; - font-size: 13px; -} div#notebook { overflow: visible;