##// END OF EJS Templates
Lots of CSS tweaks to get nbconvert output looking right.
Brian E. Granger -
Show More
@@ -7,4 +7,3 b''
7
7
8 // Our own global variables for all pages go here
8 // Our own global variables for all pages go here
9
9
10 @code_line_height: 1.231em;
@@ -4,5 +4,4 b' a hack to deal with our current css styles and no new styling should be added in'
4
4
5 #ipython-main-app {
5 #ipython-main-app {
6 position: relative;
6 position: relative;
7 font-size: 110%;
8 } No newline at end of file
7 }
@@ -16,3 +16,25 b' div.input_prompt {'
16 border-top: 1px solid transparent;
16 border-top: 1px solid transparent;
17 }
17 }
18
18
19
20 // The styles related to div.highlight are for nbconvert HTML output only. This works
21 // because the .highlight div isn't present in the live notebook. We could put this into
22 // nbconvert, but it easily falls out of sync, can't use our less variables and doesn't
23 // help the basic template when paired with our CSS.
24
25 div.input_area > div.highlight {
26 margin: @code_padding;
27 border: none;
28 padding: 0px;
29 background-color: transparent;
30 }
31
32 div.input_area > div.highlight > pre {
33 margin: 0px;
34 border: 0px;
35 padding: 0px;
36 background-color: transparent;
37 font-size: @notebook_font_size;
38 line-height: @code_line_height;
39 }
40
@@ -21,6 +21,8 b' div#notebook_panel {'
21 .box-shadow(0 -1px 10px rgba(0,0,0,.1));
21 .box-shadow(0 -1px 10px rgba(0,0,0,.1));
22 }
22 }
23 div#notebook {
23 div#notebook {
24 font-size: @notebook_font_size;
25 line-height: @notebook_line_height;
24 overflow-y: scroll;
26 overflow-y: scroll;
25 overflow-x: auto;
27 overflow-x: auto;
26 width: 100%;
28 width: 100%;
@@ -8,6 +8,8 b' div#pager_splitter {'
8 }
8 }
9
9
10 div#pager {
10 div#pager {
11 font-size: @notebook_font_size;
12 line-height: @notebook_line_height;
11 overflow: auto;
13 overflow: auto;
12 display: none;
14 display: none;
13
15
@@ -6,5 +6,8 b''
6 @border_color: darken(@cell_selected_background, 31%);
6 @border_color: darken(@cell_selected_background, 31%);
7 @light_border_color: darken(@cell_selected_background, 17%);
7 @light_border_color: darken(@cell_selected_background, 17%);
8 @border_width: 1px;
8 @border_width: 1px;
9 @code_padding: 0.4em;
9 @notebook_font_size: 14px;
10 @notebook_line_height: 20px;
11 @code_line_height: 1.21429em; // changed from 1.231 to get 17px even
12 @code_padding: 0.4em; // 5.6 px
10
13
@@ -71,13 +71,15 b' input.engine_num_input{width:60px}'
71 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}
71 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}
72 div.cell.edit_mode{border-radius:4px;border:thin #008000 solid}
72 div.cell.edit_mode{border-radius:4px;border:thin #008000 solid}
73 div.cell{width:100%;padding:5px 5px 5px 0;margin:0;outline:none}
73 div.cell{width:100%;padding:5px 5px 5px 0;margin:0;outline:none}
74 div.prompt{min-width:11ex;padding:.4em;margin:0;font-family:monospace;text-align:right;line-height:1.231em}
74 div.prompt{min-width:11ex;padding:.4em;margin:0;font-family:monospace;text-align:right;line-height:1.21429em}
75 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}
75 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}
76 div.input_area{border:1px solid #cfcfcf;border-radius:4px;background:#f7f7f7}
76 div.input_area{border:1px solid #cfcfcf;border-radius:4px;background:#f7f7f7}
77 div.prompt:empty{padding-top:0;padding-bottom:0}
77 div.prompt:empty{padding-top:0;padding-bottom:0}
78 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}
78 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}
79 div.input_prompt{color:#000080;border-top:1px solid transparent}
79 div.input_prompt{color:#000080;border-top:1px solid transparent}
80 .CodeMirror{line-height:1.231em;height:auto;background:none;}
80 div.input_area>div.highlight{margin:.4em;border:none;padding:0;background-color:transparent}
81 div.input_area>div.highlight>pre{margin:0;border:0;padding:0;background-color:transparent;font-size:14px;line-height:1.21429em}
82 .CodeMirror{line-height:1.21429em;height:auto;background:none;}
81 .CodeMirror-scroll{overflow-y:hidden;overflow-x:auto}
83 .CodeMirror-scroll{overflow-y:hidden;overflow-x:auto}
82 @-moz-document url-prefix(){.CodeMirror-scroll{overflow-x:hidden}}.CodeMirror-lines{padding:.4em}
84 @-moz-document url-prefix(){.CodeMirror-scroll{overflow-x:hidden}}.CodeMirror-lines{padding:.4em}
83 .CodeMirror-linenumber{padding:0 8px 0 4px}
85 .CodeMirror-linenumber{padding:0 8px 0 4px}
@@ -116,7 +118,7 b' div.output_area .rendered_html img{margin-left:0;margin-right:0}'
116 .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}
118 .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}
117 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}
119 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}
118 div.output_subarea{padding:.4em .4em 0 .4em;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1}
120 div.output_subarea{padding:.4em .4em 0 .4em;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1}
119 div.output_text{text-align:left;color:#000;font-family:monospace;line-height:1.231em}
121 div.output_text{text-align:left;color:#000;font-family:monospace;line-height:1.21429em}
120 div.output_stderr{background:#fdd;}
122 div.output_stderr{background:#fdd;}
121 div.output_latex{text-align:left}
123 div.output_latex{text-align:left}
122 div.output_javascript:empty{padding:0}
124 div.output_javascript:empty{padding:0}
@@ -1348,13 +1348,15 b' input.engine_num_input{width:60px}'
1348 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}
1348 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}
1349 div.cell.edit_mode{border-radius:4px;border:thin #008000 solid}
1349 div.cell.edit_mode{border-radius:4px;border:thin #008000 solid}
1350 div.cell{width:100%;padding:5px 5px 5px 0;margin:0;outline:none}
1350 div.cell{width:100%;padding:5px 5px 5px 0;margin:0;outline:none}
1351 div.prompt{min-width:11ex;padding:.4em;margin:0;font-family:monospace;text-align:right;line-height:1.231em}
1351 div.prompt{min-width:11ex;padding:.4em;margin:0;font-family:monospace;text-align:right;line-height:1.21429em}
1352 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}
1352 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}
1353 div.input_area{border:1px solid #cfcfcf;border-radius:4px;background:#f7f7f7}
1353 div.input_area{border:1px solid #cfcfcf;border-radius:4px;background:#f7f7f7}
1354 div.prompt:empty{padding-top:0;padding-bottom:0}
1354 div.prompt:empty{padding-top:0;padding-bottom:0}
1355 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}
1355 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}
1356 div.input_prompt{color:#000080;border-top:1px solid transparent}
1356 div.input_prompt{color:#000080;border-top:1px solid transparent}
1357 .CodeMirror{line-height:1.231em;height:auto;background:none;}
1357 div.input_area>div.highlight{margin:.4em;border:none;padding:0;background-color:transparent}
1358 div.input_area>div.highlight>pre{margin:0;border:0;padding:0;background-color:transparent;font-size:14px;line-height:1.21429em}
1359 .CodeMirror{line-height:1.21429em;height:auto;background:none;}
1358 .CodeMirror-scroll{overflow-y:hidden;overflow-x:auto}
1360 .CodeMirror-scroll{overflow-y:hidden;overflow-x:auto}
1359 @-moz-document url-prefix(){.CodeMirror-scroll{overflow-x:hidden}}.CodeMirror-lines{padding:.4em}
1361 @-moz-document url-prefix(){.CodeMirror-scroll{overflow-x:hidden}}.CodeMirror-lines{padding:.4em}
1360 .CodeMirror-linenumber{padding:0 8px 0 4px}
1362 .CodeMirror-linenumber{padding:0 8px 0 4px}
@@ -1393,7 +1395,7 b' div.output_area .rendered_html img{margin-left:0;margin-right:0}'
1393 .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}
1395 .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}
1394 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}
1396 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}
1395 div.output_subarea{padding:.4em .4em 0 .4em;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1}
1397 div.output_subarea{padding:.4em .4em 0 .4em;-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;flex:1}
1396 div.output_text{text-align:left;color:#000;font-family:monospace;line-height:1.231em}
1398 div.output_text{text-align:left;color:#000;font-family:monospace;line-height:1.21429em}
1397 div.output_stderr{background:#fdd;}
1399 div.output_stderr{background:#fdd;}
1398 div.output_latex{text-align:left}
1400 div.output_latex{text-align:left}
1399 div.output_javascript:empty{padding:0}
1401 div.output_javascript:empty{padding:0}
@@ -1474,7 +1476,7 b' body{background-color:#fff}'
1474 body.notebook_app{overflow:hidden}
1476 body.notebook_app{overflow:hidden}
1475 span#notebook_name{height:1em;line-height:1em;padding:3px;border:none;font-size:146.5%}
1477 span#notebook_name{height:1em;line-height:1em;padding:3px;border:none;font-size:146.5%}
1476 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)}
1478 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)}
1477 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}
1479 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}
1478 div.ui-widget-content{border:1px solid #ababab;outline:none}
1480 div.ui-widget-content{border:1px solid #ababab;outline:none}
1479 pre.dialog{background-color:#f7f7f7;border:1px solid #ddd;border-radius:4px;padding:.4em;padding-left:2em}
1481 pre.dialog{background-color:#f7f7f7;border:1px solid #ddd;border-radius:4px;padding:.4em;padding-left:2em}
1480 p.dialog{padding:.2em}
1482 p.dialog{padding:.2em}
@@ -1507,7 +1509,7 b' ul#help_menu li a{overflow:hidden;padding-right:2.2em}ul#help_menu li a i{margin'
1507 .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}
1509 .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}
1508 div#pager_splitter{height:8px}
1510 div#pager_splitter{height:8px}
1509 #pager-container{position:relative;padding:15px 0}
1511 #pager-container{position:relative;padding:15px 0}
1510 div#pager{overflow:auto;display:none}div#pager pre{font-size:13px;line-height:1.231em;color:#000;background-color:#f7f7f7;padding:.4em}
1512 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}
1511 .shortcut_key{display:inline-block;width:15ex;text-align:right;font-family:monospace}
1513 .shortcut_key{display:inline-block;width:15ex;text-align:right;font-family:monospace}
1512 .shortcut_descr{display:inline-block}
1514 .shortcut_descr{display:inline-block}
1513 span#save_widget{padding:0 5px;margin-top:12px}
1515 span#save_widget{padding:0 5px;margin-top:12px}
@@ -25,16 +25,6 b' body {'
25 overflow: visible;
25 overflow: visible;
26 padding: 8px;
26 padding: 8px;
27 }
27 }
28 .input_area {
29 padding: 0.2em;
30 }
31
32 pre {
33 padding: 0.2em;
34 border: none;
35 margin: 0px;
36 font-size: 13px;
37 }
38
28
39 div#notebook {
29 div#notebook {
40 overflow: visible;
30 overflow: visible;
General Comments 0
You need to be logged in to leave comments. Login now