From 3969f0ec846429cb03db68687871c810384d2b4f Mon Sep 17 00:00:00 2001 From: Jonathan Frederic <jon.freder@gmail.com> Date: Mon, 15 Dec 2014 16:47:49 -0800 Subject: [PATCH 01/21] Move terminal less into better location --- IPython/html/static/style/style.less | 3 ++- IPython/html/static/{notebook => terminal}/less/terminal.less | 0 2 files changed, 2 insertions(+), 1 deletion(-) rename IPython/html/static/{notebook => terminal}/less/terminal.less (100%) diff --git a/IPython/html/static/style/style.less b/IPython/html/static/style/style.less index b4113bc2d..8dbbda896 100644 --- a/IPython/html/static/style/style.less +++ b/IPython/html/static/style/style.less @@ -29,4 +29,5 @@ // notebook @import "../notebook/less/style.less"; -@import "../notebook/less/terminal.less"; +// terminal +@import "../terminal/less/terminal.less"; diff --git a/IPython/html/static/notebook/less/terminal.less b/IPython/html/static/terminal/less/terminal.less similarity index 100% rename from IPython/html/static/notebook/less/terminal.less rename to IPython/html/static/terminal/less/terminal.less From 79fe99d124ebf91685986225c73f73b245ab1acd Mon Sep 17 00:00:00 2001 From: Jonathan Frederic <jon.freder@gmail.com> Date: Mon, 15 Dec 2014 17:41:45 -0800 Subject: [PATCH 02/21] Make terminal pretty --- IPython/html/static/terminal/js/main.js | 2 +- IPython/html/static/terminal/less/terminal.less | 13 +++++++++++-- IPython/html/static/tree/css/override.css | 2 +- IPython/html/templates/terminal.html | 2 +- 4 files changed, 14 insertions(+), 5 deletions(-) diff --git a/IPython/html/static/terminal/js/main.js b/IPython/html/static/terminal/js/main.js index 12c4e3767..382dada71 100644 --- a/IPython/html/static/terminal/js/main.js +++ b/IPython/html/static/terminal/js/main.js @@ -29,7 +29,7 @@ require([ var header = $("#header")[0] function calculate_size() { height = window.innerHeight - header.offsetHeight; - width = window.innerWidth; + width = $('#terminado-container').width(); var rows = Math.min(1000, Math.max(20, Math.floor(height/termRowHeight())-1)); var cols = Math.min(1000, Math.max(40, Math.floor(width/termColWidth())-1)); console.log("resize to :", rows , 'rows by ', cols, 'columns'); diff --git a/IPython/html/static/terminal/less/terminal.less b/IPython/html/static/terminal/less/terminal.less index f20cefa9e..78cf8d119 100644 --- a/IPython/html/static/terminal/less/terminal.less +++ b/IPython/html/static/terminal/less/terminal.less @@ -1,10 +1,19 @@ .terminal { float: left; border: black solid 5px; - font-family: "DejaVu Sans Mono", "Liberation Mono", monospace; + font-family: monospace; font-size: 11px; color: white; background: black; + border-radius: 2px; + box-shadow: 0px 4px 11px 0px gray; + border: 0px; + padding: @code_padding; + + &, dummy-screen { + line-height: @code_line_height; + font-size: @notebook_font_size; + } } .terminal-cursor { @@ -13,5 +22,5 @@ } #terminado-container { - margin: 8px; + padding-top: 20px; } diff --git a/IPython/html/static/tree/css/override.css b/IPython/html/static/tree/css/override.css index 38d46bca0..924fc482e 100644 --- a/IPython/html/static/tree/css/override.css +++ b/IPython/html/static/tree/css/override.css @@ -3,5 +3,5 @@ This is only required when different pages style the same element differently. T a hack to deal with our current css styles and no new styling should be added in this file.*/ #ipython-main-app { - margin: 28px auto 0px auto; + margin: 20px auto 0px auto; } diff --git a/IPython/html/templates/terminal.html b/IPython/html/templates/terminal.html index aa32d0479..c004d3465 100644 --- a/IPython/html/templates/terminal.html +++ b/IPython/html/templates/terminal.html @@ -12,7 +12,7 @@ data-ws-path="{{ws_path}}" {% block site %} -<div id="terminado-container"></div> +<div id="terminado-container" class="container"></div> {% endblock %} From 4d62ad0df608e06b013a9cd6357596ad2c5651fe Mon Sep 17 00:00:00 2001 From: Jonathan Frederic <jon.freder@gmail.com> Date: Mon, 15 Dec 2014 17:42:09 -0800 Subject: [PATCH 03/21] invoke css --- IPython/html/static/style/style.min.css | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css index 1a9c872db..78c3e05f7 100644 --- a/IPython/html/static/style/style.min.css +++ b/IPython/html/static/style/style.min.css @@ -10411,16 +10411,25 @@ span.autosave_status { .terminal { float: left; border: black solid 5px; - font-family: "DejaVu Sans Mono", "Liberation Mono", monospace; + font-family: monospace; font-size: 11px; color: white; background: black; + border-radius: 2px; + box-shadow: 0px 4px 11px 0px gray; + border: 0px; + padding: 0.4em; +} +.terminal, +.terminal dummy-screen { + line-height: 1.21429em; + font-size: 14px; } .terminal-cursor { color: black; background: white; } #terminado-container { - margin: 8px; + padding-top: 20px; } /*# sourceMappingURL=style.min.css.map */ \ No newline at end of file From 6e9ef7abebe6cd81794030c1df49100d974862fc Mon Sep 17 00:00:00 2001 From: Matthias Bussonnier <bussonniermatthias@gmail.com> Date: Tue, 16 Dec 2014 11:32:37 +0100 Subject: [PATCH 04/21] Style notebook as a document --- IPython/html/static/notebook/less/notebook.less | 10 ++++++++++ IPython/html/static/notebook/less/variables.less | 1 + IPython/html/static/style/style.min.css | 8 ++++++++ 3 files changed, 19 insertions(+) diff --git a/IPython/html/static/notebook/less/notebook.less b/IPython/html/static/notebook/less/notebook.less index 86b5cb70a..dd9aaae40 100644 --- a/IPython/html/static/notebook/less/notebook.less +++ b/IPython/html/static/notebook/less/notebook.less @@ -31,6 +31,16 @@ div#notebook { margin: 0px; outline: none; .border-box-sizing(); + + background-color : @notebook_dark_background; +} + +#notebook-container{ + padding-right:80px; + padding-top:10px; + border-color: @body-bg; + background-color : @body-bg; + box-shadow: 0px 0px 12px 1px rgba(87,87,87,0.2); } div.ui-widget-content { diff --git a/IPython/html/static/notebook/less/variables.less b/IPython/html/static/notebook/less/variables.less index 466cb090f..69c16b6b6 100644 --- a/IPython/html/static/notebook/less/variables.less +++ b/IPython/html/static/notebook/less/variables.less @@ -7,6 +7,7 @@ @light_border_color: darken(@cell_selected_background, 17%); @border_width: 1px; @notebook_font_size: 14px; +@notebook_dark_background: #EEE; @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/style.min.css b/IPython/html/static/style/style.min.css index 78c3e05f7..2387b71d8 100644 --- a/IPython/html/static/style/style.min.css +++ b/IPython/html/static/style/style.min.css @@ -9492,6 +9492,14 @@ div#notebook { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; + background-color: #eeeeee; +} +#notebook-container { + padding-right: 80px; + padding-top: 10px; + border-color: #ffffff; + background-color: #ffffff; + box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2); } div.ui-widget-content { border: 1px solid #ababab; From 2b0147c21a03cefa7c01828666d0fafdec8328e4 Mon Sep 17 00:00:00 2001 From: Bussonnier Matthias <bussonniermatthias@gmail.com> Date: Tue, 16 Dec 2014 17:40:36 +0100 Subject: [PATCH 05/21] no shadow on print media Also hide celltoolbars --- .../static/notebook/less/celltoolbar.less | 4 ++++ .../html/static/notebook/less/notebook.less | 12 +++++++----- IPython/html/static/style/style.min.css | 19 +++++++++++++------ 3 files changed, 24 insertions(+), 11 deletions(-) diff --git a/IPython/html/static/notebook/less/celltoolbar.less b/IPython/html/static/notebook/less/celltoolbar.less index 295aaf124..c930f54a6 100644 --- a/IPython/html/static/notebook/less/celltoolbar.less +++ b/IPython/html/static/notebook/less/celltoolbar.less @@ -12,8 +12,12 @@ padding-right: 4px; .hbox(); .end(); + @media print{ + display: none; + } } + .ctb_hideshow { display:none; vertical-align:bottom; diff --git a/IPython/html/static/notebook/less/notebook.less b/IPython/html/static/notebook/less/notebook.less index dd9aaae40..35ed290db 100644 --- a/IPython/html/static/notebook/less/notebook.less +++ b/IPython/html/static/notebook/less/notebook.less @@ -36,11 +36,13 @@ div#notebook { } #notebook-container{ - padding-right:80px; - padding-top:10px; - border-color: @body-bg; - background-color : @body-bg; - box-shadow: 0px 0px 12px 1px rgba(87,87,87,0.2); + @media not print{ + padding-right:80px; + padding-top:10px; + border-color: @body-bg; + background-color : @body-bg; + box-shadow: 0px 0px 12px 1px rgba(87,87,87,0.2); + } } div.ui-widget-content { diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css index 2387b71d8..92aa5d313 100644 --- a/IPython/html/static/style/style.min.css +++ b/IPython/html/static/style/style.min.css @@ -9494,12 +9494,14 @@ div#notebook { -webkit-box-sizing: border-box; background-color: #eeeeee; } -#notebook-container { - padding-right: 80px; - padding-top: 10px; - border-color: #ffffff; - background-color: #ffffff; - box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2); +@media not print { + #notebook-container { + padding-right: 80px; + padding-top: 10px; + border-color: #ffffff; + background-color: #ffffff; + box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2); + } } div.ui-widget-content { border: 1px solid #ababab; @@ -9573,6 +9575,11 @@ p { /* Modern browsers */ justify-content: flex-end; } +@media print { + .celltoolbar { + display: none; + } +} .ctb_hideshow { display: none; vertical-align: bottom; From 726c95cbff7c21dc2ef38c70ceb73e77cf4082a8 Mon Sep 17 00:00:00 2001 From: Jonathan Frederic <jon.freder@gmail.com> Date: Tue, 16 Dec 2014 11:50:18 -0800 Subject: [PATCH 06/21] Address review comments --- IPython/html/static/base/less/variables.less | 1 + IPython/html/static/terminal/less/terminal.less | 7 ++----- IPython/html/static/tree/less/tree.less | 2 +- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/IPython/html/static/base/less/variables.less b/IPython/html/static/base/less/variables.less index e28dbf1a6..0eeb9bba0 100644 --- a/IPython/html/static/base/less/variables.less +++ b/IPython/html/static/base/less/variables.less @@ -10,6 +10,7 @@ @modal-inner-padding: 15px; @grid-float-breakpoint: 540px; @logo_height: 28px; +@border-radius-base: 2px; // Disable modal slide-in from top animation. .modal { diff --git a/IPython/html/static/terminal/less/terminal.less b/IPython/html/static/terminal/less/terminal.less index 78cf8d119..69ae1be56 100644 --- a/IPython/html/static/terminal/less/terminal.less +++ b/IPython/html/static/terminal/less/terminal.less @@ -1,17 +1,14 @@ .terminal { float: left; - border: black solid 5px; font-family: monospace; - font-size: 11px; color: white; background: black; - border-radius: 2px; + border-radius: @border-radius-base; box-shadow: 0px 4px 11px 0px gray; - border: 0px; padding: @code_padding; &, dummy-screen { - line-height: @code_line_height; + line-height: 1em; font-size: @notebook_font_size; } } diff --git a/IPython/html/static/tree/less/tree.less b/IPython/html/static/tree/less/tree.less index 8ed509a0c..7cd827ac9 100644 --- a/IPython/html/static/tree/less/tree.less +++ b/IPython/html/static/tree/less/tree.less @@ -57,7 +57,7 @@ ul.breadcrumb { margin-top: @dashboard_tb_pad; margin-bottom: 5*@dashboard_tb_pad; border: 1px solid @border_color; - border-radius: 4px; + border-radius: @border-radius-base; } .list_container > div { From 4e7832cf64245b131b8f2e3495afd571a4e57011 Mon Sep 17 00:00:00 2001 From: Jonathan Frederic <jon.freder@gmail.com> Date: Tue, 16 Dec 2014 11:50:34 -0800 Subject: [PATCH 07/21] invoke css --- IPython/html/static/style/ipython.min.css | 22 ++-- IPython/html/static/style/style.min.css | 143 +++++++++++----------- 2 files changed, 81 insertions(+), 84 deletions(-) diff --git a/IPython/html/static/style/ipython.min.css b/IPython/html/static/style/ipython.min.css index b0e529c4a..2d021336e 100644 --- a/IPython/html/static/style/ipython.min.css +++ b/IPython/html/static/style/ipython.min.css @@ -24,7 +24,7 @@ label { -webkit-box-sizing: border-box; } .corner-all { - border-radius: 4px; + border-radius: 2px; } .no-padding { padding: 0px; @@ -349,7 +349,7 @@ div.cell { display: flex; flex-direction: column; align-items: stretch; - border-radius: 4px; + border-radius: 2px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -420,7 +420,7 @@ div.inner_cell { /* input_area and input_prompt must match in top border and margin for alignment */ div.input_area { border: 1px solid #cfcfcf; - border-radius: 4px; + border-radius: 2px; background: #f7f7f7; line-height: 1.21429em; } @@ -449,7 +449,7 @@ div.unrecognized_cell { align-items: stretch; } div.unrecognized_cell .inner_cell { - border-radius: 4px; + border-radius: 2px; padding: 5px; font-weight: bold; color: red; @@ -563,8 +563,8 @@ div.input_area > div.highlight > pre { padding: 0 8px 0 4px; } .CodeMirror-gutters { - border-bottom-left-radius: 4px; - border-top-left-radius: 4px; + border-bottom-left-radius: 2px; + border-top-left-radius: 2px; } .CodeMirror pre { /* In CM3 this went to 4px from 0 in CM2. We need the 0 value because of how we size */ @@ -750,7 +750,7 @@ div.output_scroll { /* FF needs this *and the wrapper* to specify full width, or it will shrinkwrap */ width: 100%; overflow: auto; - border-radius: 4px; + border-radius: 2px; -webkit-box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8); box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8); display: block; @@ -778,7 +778,7 @@ div.out_prompt_overlay { height: 100%; padding: 0px 0.4em; position: absolute; - border-radius: 4px; + border-radius: 2px; } div.out_prompt_overlay:hover { /* use inner shadow to get border that is computed the same on WebKit/FF */ @@ -1269,7 +1269,7 @@ h6:hover .anchor-link { /* Slider Track */ border: 1px solid #CCCCCC; background: #FFFFFF; - border-radius: 4px; + border-radius: 2px; /* Round the corners of the slide track */ } .widget-hslider { @@ -1307,7 +1307,7 @@ h6:hover .anchor-link { /* Slider Track */ border: 1px solid #CCCCCC; background: #FFFFFF; - border-radius: 4px; + border-radius: 2px; /* Round the corners of the slide track */ /* Make the div a flex box (makes FF behave correctly). */ /* Old browsers */ @@ -1374,7 +1374,7 @@ h6:hover .anchor-link { /* Slider Track */ border: 1px solid #CCCCCC; background: #FFFFFF; - border-radius: 4px; + border-radius: 2px; /* Round the corners of the slide track */ /* Make the div a flex box (makes FF behave correctly). */ /* Old browsers */ diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css index 92aa5d313..0e81106b4 100644 --- a/IPython/html/static/style/style.min.css +++ b/IPython/html/static/style/style.min.css @@ -321,7 +321,7 @@ img { line-height: 1.42857143; background-color: #ffffff; border: 1px solid #dddddd; - border-radius: 4px; + border-radius: 2px; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; display: inline-block; @@ -695,7 +695,7 @@ code { color: #c7254e; background-color: #f9f2f4; white-space: nowrap; - border-radius: 4px; + border-radius: 2px; } kbd { padding: 2px 4px; @@ -716,7 +716,7 @@ pre { color: #333333; background-color: #f5f5f5; border: 1px solid #cccccc; - border-radius: 4px; + border-radius: 2px; } pre code { padding: 0; @@ -1696,7 +1696,7 @@ output { background-color: #ffffff; background-image: none; border: 1px solid #cccccc; - border-radius: 4px; + border-radius: 2px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; @@ -2000,7 +2000,7 @@ select[multiple].input-lg { padding: 6px 12px; font-size: 13px; line-height: 1.42857143; - border-radius: 4px; + border-radius: 2px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -3017,7 +3017,7 @@ input[type="button"].btn-block { background-color: #ffffff; border: 1px solid #cccccc; border: 1px solid rgba(0, 0, 0, 0.15); - border-radius: 4px; + border-radius: 2px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); background-clip: padding-box; @@ -3248,12 +3248,12 @@ input[type="button"].btn-block { border-radius: 0; } .btn-group-vertical > .btn:first-child:not(:last-child) { - border-top-right-radius: 4px; + border-top-right-radius: 2px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .btn-group-vertical > .btn:last-child:not(:first-child) { - border-bottom-left-radius: 4px; + border-bottom-left-radius: 2px; border-top-right-radius: 0; border-top-left-radius: 0; } @@ -3376,7 +3376,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { text-align: center; background-color: #eeeeee; border: 1px solid #cccccc; - border-radius: 4px; + border-radius: 2px; } .input-group-addon.input-sm { padding: 5px 10px; @@ -3497,7 +3497,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { margin-right: 2px; line-height: 1.42857143; border: 1px solid transparent; - border-radius: 4px 4px 0 0; + border-radius: 2px 2px 0 0; } .nav-tabs > li > a:hover { border-color: #eeeeee #eeeeee #dddddd; @@ -3537,7 +3537,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { } .nav-tabs.nav-justified > li > a { margin-right: 0; - border-radius: 4px; + border-radius: 2px; } .nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, @@ -3547,7 +3547,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { @media (min-width: 768px) { .nav-tabs.nav-justified > li > a { border-bottom: 1px solid #dddddd; - border-radius: 4px 4px 0 0; + border-radius: 2px 2px 0 0; } .nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, @@ -3559,7 +3559,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { float: left; } .nav-pills > li > a { - border-radius: 4px; + border-radius: 2px; } .nav-pills > li + li { margin-left: 2px; @@ -3605,7 +3605,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { } .nav-tabs-justified > li > a { margin-right: 0; - border-radius: 4px; + border-radius: 2px; } .nav-tabs-justified > .active > a, .nav-tabs-justified > .active > a:hover, @@ -3615,7 +3615,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { @media (min-width: 768px) { .nav-tabs-justified > li > a { border-bottom: 1px solid #dddddd; - border-radius: 4px 4px 0 0; + border-radius: 2px 2px 0 0; } .nav-tabs-justified > .active > a, .nav-tabs-justified > .active > a:hover, @@ -3642,7 +3642,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { } @media (min-width: 540px) { .navbar { - border-radius: 4px; + border-radius: 2px; } } @media (min-width: 540px) { @@ -3758,7 +3758,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { background-color: transparent; background-image: none; border: 1px solid transparent; - border-radius: 4px; + border-radius: 2px; } .navbar-toggle:focus { outline: none; @@ -4111,7 +4111,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { margin-bottom: 18px; list-style: none; background-color: #f5f5f5; - border-radius: 4px; + border-radius: 2px; } .breadcrumb > li { display: inline-block; @@ -4128,7 +4128,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { display: inline-block; padding-left: 0; margin: 18px 0; - border-radius: 4px; + border-radius: 2px; } .pagination > li { display: inline; @@ -4148,13 +4148,13 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .pagination > li:first-child > a, .pagination > li:first-child > span { margin-left: 0; - border-bottom-left-radius: 4px; - border-top-left-radius: 4px; + border-bottom-left-radius: 2px; + border-top-left-radius: 2px; } .pagination > li:last-child > a, .pagination > li:last-child > span { - border-bottom-right-radius: 4px; - border-top-right-radius: 4px; + border-bottom-right-radius: 2px; + border-top-right-radius: 2px; } .pagination > li > a:hover, .pagination > li > span:hover, @@ -4403,7 +4403,7 @@ a.list-group-item.active > .badge, line-height: 1.42857143; background-color: #ffffff; border: 1px solid #dddddd; - border-radius: 4px; + border-radius: 2px; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } @@ -4425,7 +4425,7 @@ a.thumbnail.active { padding: 15px; margin-bottom: 18px; border: 1px solid transparent; - border-radius: 4px; + border-radius: 2px; } .alert h4 { margin-top: 0; @@ -4515,7 +4515,7 @@ a.thumbnail.active { height: 18px; margin-bottom: 18px; background-color: #f5f5f5; - border-radius: 4px; + border-radius: 2px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } @@ -4611,13 +4611,13 @@ a.thumbnail.active { border: 1px solid #dddddd; } .list-group-item:first-child { - border-top-right-radius: 4px; - border-top-left-radius: 4px; + border-top-right-radius: 2px; + border-top-left-radius: 2px; } .list-group-item:last-child { margin-bottom: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; + border-bottom-right-radius: 2px; + border-bottom-left-radius: 2px; } .list-group-item > .badge { float: right; @@ -4754,7 +4754,7 @@ a.list-group-item-danger.active:focus { margin-bottom: 18px; background-color: #ffffff; border: 1px solid transparent; - border-radius: 4px; + border-radius: 2px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); } @@ -4764,8 +4764,8 @@ a.list-group-item-danger.active:focus { .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + border-top-right-radius: 1px; + border-top-left-radius: 1px; } .panel-heading > .dropdown .dropdown-toggle { color: inherit; @@ -4783,8 +4783,8 @@ a.list-group-item-danger.active:focus { padding: 10px 15px; background-color: #f5f5f5; border-top: 1px solid #dddddd; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; + border-bottom-right-radius: 1px; + border-bottom-left-radius: 1px; } .panel > .list-group { margin-bottom: 0; @@ -4795,13 +4795,13 @@ a.list-group-item-danger.active:focus { } .panel > .list-group:first-child .list-group-item:first-child { border-top: 0; - border-top-right-radius: 3px; - border-top-left-radius: 3px; + border-top-right-radius: 1px; + border-top-left-radius: 1px; } .panel > .list-group:last-child .list-group-item:last-child { border-bottom: 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; + border-bottom-right-radius: 1px; + border-bottom-left-radius: 1px; } .panel-heading + .list-group .list-group-item:first-child { border-top-width: 0; @@ -4812,8 +4812,8 @@ a.list-group-item-danger.active:focus { } .panel > .table:first-child, .panel > .table-responsive:first-child > .table:first-child { - border-top-right-radius: 3px; - border-top-left-radius: 3px; + border-top-right-radius: 1px; + border-top-left-radius: 1px; } .panel > .table:first-child > thead:first-child > tr:first-child td:first-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child, @@ -4823,7 +4823,7 @@ a.list-group-item-danger.active:focus { .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child, .panel > .table:first-child > tbody:first-child > tr:first-child th:first-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child { - border-top-left-radius: 3px; + border-top-left-radius: 1px; } .panel > .table:first-child > thead:first-child > tr:first-child td:last-child, .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child, @@ -4833,12 +4833,12 @@ a.list-group-item-danger.active:focus { .panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child, .panel > .table:first-child > tbody:first-child > tr:first-child th:last-child, .panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child { - border-top-right-radius: 3px; + border-top-right-radius: 1px; } .panel > .table:last-child, .panel > .table-responsive:last-child > .table:last-child { - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; + border-bottom-right-radius: 1px; + border-bottom-left-radius: 1px; } .panel > .table:last-child > tbody:last-child > tr:last-child td:first-child, .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child, @@ -4848,7 +4848,7 @@ a.list-group-item-danger.active:focus { .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child, .panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child, .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child { - border-bottom-left-radius: 3px; + border-bottom-left-radius: 1px; } .panel > .table:last-child > tbody:last-child > tr:last-child td:last-child, .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child, @@ -4858,7 +4858,7 @@ a.list-group-item-danger.active:focus { .panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child, .panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child, .panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child { - border-bottom-right-radius: 3px; + border-bottom-right-radius: 1px; } .panel > .panel-body + .table, .panel > .panel-body + .table-responsive { @@ -4929,7 +4929,7 @@ a.list-group-item-danger.active:focus { } .panel-group .panel { margin-bottom: 0; - border-radius: 4px; + border-radius: 2px; overflow: hidden; } .panel-group .panel + .panel { @@ -5037,7 +5037,7 @@ a.list-group-item-danger.active:focus { margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #e3e3e3; - border-radius: 4px; + border-radius: 2px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); } @@ -5228,7 +5228,7 @@ button.close { text-align: center; text-decoration: none; background-color: #000000; - border-radius: 4px; + border-radius: 2px; } .tooltip-arrow { position: absolute; @@ -7482,7 +7482,7 @@ label { -webkit-box-sizing: border-box; } .corner-all { - border-radius: 4px; + border-radius: 2px; } .no-padding { padding: 0px; @@ -7990,7 +7990,7 @@ ul.breadcrumb span { margin-top: 4px; margin-bottom: 20px; border: 1px solid #ababab; - border-radius: 4px; + border-radius: 2px; } .list_container > div { border-bottom: 1px solid #ababab; @@ -8219,7 +8219,7 @@ div.cell { display: flex; flex-direction: column; align-items: stretch; - border-radius: 4px; + border-radius: 2px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -8290,7 +8290,7 @@ div.inner_cell { /* input_area and input_prompt must match in top border and margin for alignment */ div.input_area { border: 1px solid #cfcfcf; - border-radius: 4px; + border-radius: 2px; background: #f7f7f7; line-height: 1.21429em; } @@ -8319,7 +8319,7 @@ div.unrecognized_cell { align-items: stretch; } div.unrecognized_cell .inner_cell { - border-radius: 4px; + border-radius: 2px; padding: 5px; font-weight: bold; color: red; @@ -8433,8 +8433,8 @@ div.input_area > div.highlight > pre { padding: 0 8px 0 4px; } .CodeMirror-gutters { - border-bottom-left-radius: 4px; - border-top-left-radius: 4px; + border-bottom-left-radius: 2px; + border-top-left-radius: 2px; } .CodeMirror pre { /* In CM3 this went to 4px from 0 in CM2. We need the 0 value because of how we size */ @@ -8620,7 +8620,7 @@ div.output_scroll { /* FF needs this *and the wrapper* to specify full width, or it will shrinkwrap */ width: 100%; overflow: auto; - border-radius: 4px; + border-radius: 2px; -webkit-box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8); box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8); display: block; @@ -8648,7 +8648,7 @@ div.out_prompt_overlay { height: 100%; padding: 0px 0.4em; position: absolute; - border-radius: 4px; + border-radius: 2px; } div.out_prompt_overlay:hover { /* use inner shadow to get border that is computed the same on WebKit/FF */ @@ -9139,7 +9139,7 @@ h6:hover .anchor-link { /* Slider Track */ border: 1px solid #CCCCCC; background: #FFFFFF; - border-radius: 4px; + border-radius: 2px; /* Round the corners of the slide track */ } .widget-hslider { @@ -9177,7 +9177,7 @@ h6:hover .anchor-link { /* Slider Track */ border: 1px solid #CCCCCC; background: #FFFFFF; - border-radius: 4px; + border-radius: 2px; /* Round the corners of the slide track */ /* Make the div a flex box (makes FF behave correctly). */ /* Old browsers */ @@ -9244,7 +9244,7 @@ h6:hover .anchor-link { /* Slider Track */ border: 1px solid #CCCCCC; background: #FFFFFF; - border-radius: 4px; + border-radius: 2px; /* Round the corners of the slide track */ /* Make the div a flex box (makes FF behave correctly). */ /* Old browsers */ @@ -9510,7 +9510,7 @@ div.ui-widget-content { pre.dialog { background-color: #f7f7f7; border: 1px solid #ddd; - border-radius: 4px; + border-radius: 2px; padding: 0.4em; padding-left: 2em; } @@ -9550,7 +9550,7 @@ p { border: thin solid #CFCFCF; border-bottom: none; background: #EEE; - border-radius: 4px 4px 0px 0px; + border-radius: 2px 2px 0px 0px; width: 100%; height: 29px; padding-right: 4px; @@ -9610,7 +9610,7 @@ p { background-color: #ffffff; background-image: none; border: 1px solid #cccccc; - border-radius: 4px; + border-radius: 2px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; @@ -9668,7 +9668,7 @@ select[multiple].celltoolbar select { z-index: 10; overflow: hidden; border: 1px solid #ababab; - border-radius: 4px; + border-radius: 2px; -webkit-box-shadow: 0px 6px 10px -1px #adadad; box-shadow: 0px 6px 10px -1px #adadad; } @@ -9706,7 +9706,7 @@ select[multiple].celltoolbar select { } #menubar .navbar { border-top: 1px; - border-radius: 0px 0px 4px 4px; + border-radius: 0px 0px 2px 2px; margin-bottom: 6px; } #menubar .navbar-toggle { @@ -10210,7 +10210,7 @@ span.save_widget span.filename { padding: 3px; border: none; font-size: 146.5%; - border-radius: 4px; + border-radius: 2px; } span.save_widget span.filename:hover { background-color: #e6e6e6; @@ -10386,7 +10386,7 @@ span.autosave_status { -moz-box-shadow: 0px 6px 10px -1px #adadad; -webkit-box-shadow: 0px 6px 10px -1px #adadad; box-shadow: 0px 6px 10px -1px #adadad; - border-radius: 4px; + border-radius: 2px; position: absolute; z-index: 1000; } @@ -10425,19 +10425,16 @@ span.autosave_status { } .terminal { float: left; - border: black solid 5px; font-family: monospace; - font-size: 11px; color: white; background: black; border-radius: 2px; box-shadow: 0px 4px 11px 0px gray; - border: 0px; padding: 0.4em; } .terminal, .terminal dummy-screen { - line-height: 1.21429em; + line-height: 1em; font-size: 14px; } .terminal-cursor { From fbc2adf2d5a326032a4c6800b88cb3e8298db23f Mon Sep 17 00:00:00 2001 From: Jonathan Frederic <jon.freder@gmail.com> Date: Tue, 16 Dec 2014 14:19:13 -0800 Subject: [PATCH 08/21] Make things consistent --- IPython/html/static/base/js/page.js | 5 +++- IPython/html/static/base/less/page.less | 1 - IPython/html/static/base/less/variables.less | 4 +++ IPython/html/static/notebook/css/override.css | 2 +- .../html/static/notebook/less/notebook.less | 26 +++++++++---------- IPython/html/static/notebook/less/pager.less | 7 ++--- .../html/static/notebook/less/toolbar.less | 2 +- .../html/static/notebook/less/variables.less | 1 - .../html/static/terminal/less/terminal.less | 2 +- IPython/html/static/tree/css/override.css | 4 --- IPython/html/static/tree/less/tree.less | 6 ++++- 11 files changed, 30 insertions(+), 30 deletions(-) diff --git a/IPython/html/static/base/js/page.js b/IPython/html/static/base/js/page.js index 52e89b7e6..355f71e61 100644 --- a/IPython/html/static/base/js/page.js +++ b/IPython/html/static/base/js/page.js @@ -10,7 +10,10 @@ define([ var Page = function () { this.bind_events(); - this._resize_header(); + + // When the page is ready, resize the header. + var that = this; + $(function() { that._resize_header(); }); }; Page.prototype.bind_events = function () { diff --git a/IPython/html/static/base/less/page.less b/IPython/html/static/base/less/page.less index 37607a913..a383a3cc0 100644 --- a/IPython/html/static/base/less/page.less +++ b/IPython/html/static/base/less/page.less @@ -26,7 +26,6 @@ div#header { z-index: 100; #header-container { - padding-left: 30px; padding-bottom: 5px; padding-top: 5px; .border-box-sizing(); diff --git a/IPython/html/static/base/less/variables.less b/IPython/html/static/base/less/variables.less index 0eeb9bba0..195d10f44 100644 --- a/IPython/html/static/base/less/variables.less +++ b/IPython/html/static/base/less/variables.less @@ -11,6 +11,8 @@ @grid-float-breakpoint: 540px; @logo_height: 28px; @border-radius-base: 2px; +@border-radius-small: 2px; +@grid-gutter-width: 0px; // Disable modal slide-in from top animation. .modal { @@ -38,4 +40,6 @@ label { } // Our own global variables for all pages go here +@global-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2); +@page-header-padding: 20px; diff --git a/IPython/html/static/notebook/css/override.css b/IPython/html/static/notebook/css/override.css index 170f1f740..117fb7cf5 100644 --- a/IPython/html/static/notebook/css/override.css +++ b/IPython/html/static/notebook/css/override.css @@ -4,4 +4,4 @@ a hack to deal with our current css styles and no new styling should be added in #ipython-main-app { position: relative; -} \ No newline at end of file +} diff --git a/IPython/html/static/notebook/less/notebook.less b/IPython/html/static/notebook/less/notebook.less index 35ed290db..91e96fb8d 100644 --- a/IPython/html/static/notebook/less/notebook.less +++ b/IPython/html/static/notebook/less/notebook.less @@ -1,8 +1,3 @@ - -body { - background-color: @body-bg; -} - @media (max-width: 767px) { // remove bootstrap-responsive's body padding on small screens body.notebook_app { @@ -16,9 +11,12 @@ body { } div#notebook_panel { - margin: 0px 0px 0px 0px; + margin: 0px; padding: 0px; .border-box-sizing(); + background-color: @notebook_dark_background; + /* Make the page background atleast 100% the height of the view port */ + min-height: 100vh; } div#notebook { font-size: @notebook_font_size; @@ -26,22 +24,22 @@ div#notebook { overflow-y: hidden; overflow-x: auto; width: 100%; - /* This spaces the cell away from the edge of the notebook area */ - padding: 2em 0 2em 0; + /* This spaces the page away from the edge of the notebook area */ + padding-top: @page-header-padding; + padding-bottom: @page-header-padding; margin: 0px; outline: none; .border-box-sizing(); - - background-color : @notebook_dark_background; } #notebook-container{ @media not print{ - padding-right:80px; - padding-top:10px; + padding: 15px; border-color: @body-bg; background-color : @body-bg; - box-shadow: 0px 0px 12px 1px rgba(87,87,87,0.2); + /* Make the page itself atleast 70% the height of the view port */ + min-height: 70vh; + .box-shadow(@global-shadow); } } @@ -87,5 +85,5 @@ p { } .notebook_app #header { - .box-shadow(@notebook-shadow); + .box-shadow(@global-shadow); } diff --git a/IPython/html/static/notebook/less/pager.less b/IPython/html/static/notebook/less/pager.less index 434fc5e62..c36b00307 100644 --- a/IPython/html/static/notebook/less/pager.less +++ b/IPython/html/static/notebook/less/pager.less @@ -10,6 +10,8 @@ div#pager { max-height: 50%; padding-top: 8px; + .box-shadow(@global-shadow); + /* Display over codemirror */ z-index: 100; @@ -49,11 +51,6 @@ div#pager { 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 { diff --git a/IPython/html/static/notebook/less/toolbar.less b/IPython/html/static/notebook/less/toolbar.less index 059902146..d811c44f3 100644 --- a/IPython/html/static/notebook/less/toolbar.less +++ b/IPython/html/static/notebook/less/toolbar.less @@ -33,7 +33,7 @@ margin-top: -8px; border: 0px; min-height: 27px; - margin-left: 32px; + margin-left: 0px; padding-top: 11px; padding-bottom: 3px; diff --git a/IPython/html/static/notebook/less/variables.less b/IPython/html/static/notebook/less/variables.less index 69c16b6b6..67a0e7ea2 100644 --- a/IPython/html/static/notebook/less/variables.less +++ b/IPython/html/static/notebook/less/variables.less @@ -11,7 +11,6 @@ @notebook_line_height: 20px; @code_line_height: 1.21429em; // changed from 1.231 to get 17px even @code_padding: 0.4em; // 5.6 px -@notebook-shadow: 1px 4px 9px -6px rgba(0,0,0,.25); @rendered_html_border_color: black; @input_prompt_color: navy; @output_prompt_color: darkred; diff --git a/IPython/html/static/terminal/less/terminal.less b/IPython/html/static/terminal/less/terminal.less index 69ae1be56..452fc49cc 100644 --- a/IPython/html/static/terminal/less/terminal.less +++ b/IPython/html/static/terminal/less/terminal.less @@ -19,5 +19,5 @@ } #terminado-container { - padding-top: 20px; + padding-top: @page-header-padding; } diff --git a/IPython/html/static/tree/css/override.css b/IPython/html/static/tree/css/override.css index 924fc482e..3ad31e27e 100644 --- a/IPython/html/static/tree/css/override.css +++ b/IPython/html/static/tree/css/override.css @@ -1,7 +1,3 @@ /*This file contains any manual css for this page that needs to override the global styles. This is only required when different pages style the same element differently. This is just a hack to deal with our current css styles and no new styling should be added in this file.*/ - -#ipython-main-app { - margin: 20px auto 0px auto; -} diff --git a/IPython/html/static/tree/less/tree.less b/IPython/html/static/tree/less/tree.less index 7cd827ac9..673d13c70 100644 --- a/IPython/html/static/tree/less/tree.less +++ b/IPython/html/static/tree/less/tree.less @@ -172,5 +172,9 @@ ul#new-notebook-menu { } .kernel-menu-icon-current:before { - content: @fa-var-check; + content: @fa-var-check; +} + +#tab_content { + padding-top: @page-header-padding; } From 94a893d9755b1602ac06516e747fe53a8d09adc2 Mon Sep 17 00:00:00 2001 From: Jonathan Frederic <jon.freder@gmail.com> Date: Tue, 16 Dec 2014 14:27:34 -0800 Subject: [PATCH 09/21] Prevent terminal from scrolling --- IPython/html/static/base/less/variables.less | 1 + IPython/html/static/terminal/css/override.css | 7 +++++++ IPython/html/static/terminal/less/terminal.less | 2 +- IPython/html/templates/terminal.html | 5 +++++ 4 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 IPython/html/static/terminal/css/override.css diff --git a/IPython/html/static/base/less/variables.less b/IPython/html/static/base/less/variables.less index 195d10f44..d5a8f7785 100644 --- a/IPython/html/static/base/less/variables.less +++ b/IPython/html/static/base/less/variables.less @@ -41,5 +41,6 @@ label { // Our own global variables for all pages go here @global-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2); +@global-shadow-dark: 0px 0px 12px 1px rgba(87, 87, 87, 0.4); @page-header-padding: 20px; diff --git a/IPython/html/static/terminal/css/override.css b/IPython/html/static/terminal/css/override.css new file mode 100644 index 000000000..6d74111f7 --- /dev/null +++ b/IPython/html/static/terminal/css/override.css @@ -0,0 +1,7 @@ +/*This file contains any manual css for this page that needs to override the global styles. +This is only required when different pages style the same element differently. This is just +a hack to deal with our current css styles and no new styling should be added in this file.*/ + +body { + overflow: hidden; +} diff --git a/IPython/html/static/terminal/less/terminal.less b/IPython/html/static/terminal/less/terminal.less index 452fc49cc..0674b807a 100644 --- a/IPython/html/static/terminal/less/terminal.less +++ b/IPython/html/static/terminal/less/terminal.less @@ -4,7 +4,7 @@ color: white; background: black; border-radius: @border-radius-base; - box-shadow: 0px 4px 11px 0px gray; + .box-shadow(@global-shadow-dark); padding: @code_padding; &, dummy-screen { diff --git a/IPython/html/templates/terminal.html b/IPython/html/templates/terminal.html index c004d3465..2b77acb20 100644 --- a/IPython/html/templates/terminal.html +++ b/IPython/html/templates/terminal.html @@ -9,6 +9,11 @@ data-ws-path="{{ws_path}}" {% endblock %} +{% block stylesheet %} +{{super()}} + +<link rel="stylesheet" href="{{ static_url("terminal/css/override.css") }}" type="text/css" /> +{% endblock %} {% block site %} From 461b2e74b68e4ac5be1f549bfbb1787473290e9b Mon Sep 17 00:00:00 2001 From: Jonathan Frederic <jon.freder@gmail.com> Date: Tue, 16 Dec 2014 14:27:49 -0800 Subject: [PATCH 10/21] invoke css --- IPython/html/static/style/style.min.css | 123 ++++++++++++------------ 1 file changed, 62 insertions(+), 61 deletions(-) diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css index 0e81106b4..4d1354ac0 100644 --- a/IPython/html/static/style/style.min.css +++ b/IPython/html/static/style/style.min.css @@ -702,7 +702,7 @@ kbd { font-size: 90%; color: #ffffff; background-color: #333333; - border-radius: 3px; + border-radius: 2px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); } pre { @@ -733,39 +733,39 @@ pre code { .container { margin-right: auto; margin-left: auto; - padding-left: 15px; - padding-right: 15px; + padding-left: 0px; + padding-right: 0px; } @media (min-width: 768px) { .container { - width: 750px; + width: 720px; } } @media (min-width: 992px) { .container { - width: 970px; + width: 940px; } } @media (min-width: 1200px) { .container { - width: 1170px; + width: 1140px; } } .container-fluid { margin-right: auto; margin-left: auto; - padding-left: 15px; - padding-right: 15px; + padding-left: 0px; + padding-right: 0px; } .row { - margin-left: -15px; - margin-right: -15px; + margin-left: 0px; + margin-right: 0px; } .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; - padding-left: 15px; - padding-right: 15px; + padding-left: 0px; + padding-right: 0px; } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: left; @@ -1795,7 +1795,7 @@ fieldset[disabled] .checkbox-inline { padding: 5px 10px; font-size: 12px; line-height: 1.5; - border-radius: 3px; + border-radius: 2px; } select.input-sm { height: 30px; @@ -1972,8 +1972,8 @@ select[multiple].input-lg { min-height: 25px; } .form-horizontal .form-group { - margin-left: -15px; - margin-right: -15px; + margin-left: 0px; + margin-right: 0px; } .form-horizontal .form-control-static { padding-top: 7px; @@ -1985,7 +1985,7 @@ select[multiple].input-lg { } .form-horizontal .has-feedback .form-control-feedback { top: 0; - right: 15px; + right: 0px; } .btn { display: inline-block; @@ -2326,14 +2326,14 @@ fieldset[disabled] .btn-link:focus { padding: 5px 10px; font-size: 12px; line-height: 1.5; - border-radius: 3px; + border-radius: 2px; } .btn-xs, .btn-group-xs > .btn { padding: 1px 5px; font-size: 12px; line-height: 1.5; - border-radius: 3px; + border-radius: 2px; } .btn-block { display: block; @@ -3335,7 +3335,7 @@ select[multiple].input-group-lg > .input-group-btn > .btn { padding: 5px 10px; font-size: 12px; line-height: 1.5; - border-radius: 3px; + border-radius: 2px; } select.input-group-sm > .form-control, select.input-group-sm > .input-group-addon, @@ -3381,7 +3381,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .input-group-addon.input-sm { padding: 5px 10px; font-size: 12px; - border-radius: 3px; + border-radius: 2px; } .input-group-addon.input-lg { padding: 10px 16px; @@ -3653,8 +3653,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .navbar-collapse { max-height: 340px; overflow-x: visible; - padding-right: 15px; - padding-left: 15px; + padding-right: 0px; + padding-left: 0px; border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); -webkit-overflow-scrolling: touch; @@ -3688,8 +3688,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse { - margin-right: -15px; - margin-left: -15px; + margin-right: 0px; + margin-left: 0px; } @media (min-width: 540px) { .container > .navbar-header, @@ -3733,7 +3733,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { } .navbar-brand { float: left; - padding: 6px 15px; + padding: 6px 0px; font-size: 17px; line-height: 18px; height: 30px; @@ -3745,13 +3745,13 @@ select[multiple].input-group-sm > .input-group-btn > .btn { @media (min-width: 540px) { .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { - margin-left: -15px; + margin-left: 0px; } } .navbar-toggle { position: relative; float: right; - margin-right: 15px; + margin-right: 0px; padding: 9px 10px; margin-top: -2px; margin-bottom: -2px; @@ -3778,7 +3778,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { } } .navbar-nav { - margin: 3px -15px; + margin: 3px 0px; } .navbar-nav > li > a { padding-top: 10px; @@ -3820,7 +3820,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { padding-bottom: 6px; } .navbar-nav.navbar-right:last-child { - margin-right: -15px; + margin-right: 0px; } } @media (min-width: 540px) { @@ -3834,9 +3834,9 @@ select[multiple].input-group-sm > .input-group-btn > .btn { } } .navbar-form { - margin-left: -15px; - margin-right: -15px; - padding: 10px 15px; + margin-left: 0px; + margin-right: 0px; + padding: 10px 0px; border-top: 1px solid transparent; border-bottom: 1px solid transparent; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1); @@ -3896,7 +3896,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn { box-shadow: none; } .navbar-form.navbar-right:last-child { - margin-right: -15px; + margin-right: 0px; } } .navbar-nav > li > .dropdown-menu { @@ -3927,8 +3927,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn { @media (min-width: 540px) { .navbar-text { float: left; - margin-left: 15px; - margin-right: 15px; + margin-left: 0px; + margin-right: 0px; } .navbar-text.navbar-right:last-child { margin-right: 0; @@ -4209,13 +4209,13 @@ select[multiple].input-group-sm > .input-group-btn > .btn { } .pagination-sm > li:first-child > a, .pagination-sm > li:first-child > span { - border-bottom-left-radius: 3px; - border-top-left-radius: 3px; + border-bottom-left-radius: 2px; + border-top-left-radius: 2px; } .pagination-sm > li:last-child > a, .pagination-sm > li:last-child > span { - border-bottom-right-radius: 3px; - border-top-right-radius: 3px; + border-bottom-right-radius: 2px; + border-top-right-radius: 2px; } .pager { padding-left: 0; @@ -5051,7 +5051,7 @@ a.list-group-item-danger.active:focus { } .well-sm { padding: 9px; - border-radius: 3px; + border-radius: 2px; } .close { float: right; @@ -7756,7 +7756,6 @@ div#header { z-index: 100; } div#header #header-container { - padding-left: 30px; padding-bottom: 5px; padding-top: 5px; box-sizing: border-box; @@ -8121,6 +8120,9 @@ ul#new-notebook-menu { .kernel-menu-icon-current:before { content: "\f00c"; } +#tab_content { + padding-top: 20px; +} /*! * * IPython text editor webapp @@ -9458,9 +9460,6 @@ h6:hover .anchor-link { * IPython notebook webapp * */ -body { - background-color: #ffffff; -} @media (max-width: 767px) { body.notebook_app { padding-left: 0px; @@ -9473,11 +9472,14 @@ body { -webkit-box-sizing: border-box; } div#notebook_panel { - margin: 0px 0px 0px 0px; + margin: 0px; padding: 0px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; + background-color: #eeeeee; + /* Make the page background atleast 100% the height of the view port */ + min-height: 100vh; } div#notebook { font-size: 14px; @@ -9485,21 +9487,23 @@ div#notebook { overflow-y: hidden; overflow-x: auto; width: 100%; - /* This spaces the cell away from the edge of the notebook area */ - padding: 2em 0 2em 0; + /* This spaces the page away from the edge of the notebook area */ + padding-top: 20px; + padding-bottom: 20px; margin: 0px; outline: none; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; - background-color: #eeeeee; } @media not print { #notebook-container { - padding-right: 80px; - padding-top: 10px; + padding: 15px; border-color: #ffffff; background-color: #ffffff; + /* Make the page itself atleast 70% the height of the view port */ + min-height: 70vh; + -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2); box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2); } } @@ -9542,8 +9546,8 @@ p { margin-bottom: -1px; } .notebook_app #header { - -webkit-box-shadow: 1px 4px 9px -6px rgba(0, 0, 0, 0.25); - box-shadow: 1px 4px 9px -6px rgba(0, 0, 0, 0.25); + -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2); + box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2); } /* CSS for the cell toolbar */ .celltoolbar { @@ -9610,7 +9614,6 @@ p { background-color: #ffffff; background-image: none; border: 1px solid #cccccc; - border-radius: 2px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; @@ -9619,7 +9622,7 @@ p { padding: 5px 10px; font-size: 12px; line-height: 1.5; - border-radius: 3px; + border-radius: 2px; width: inherit; font-size: 87%; height: 22px; @@ -10117,6 +10120,8 @@ div#pager { width: 100%; max-height: 50%; padding-top: 8px; + -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2); + box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2); /* Display over codemirror */ z-index: 100; /* Hack which prevents jquery ui resizable from changing top. */ @@ -10152,11 +10157,6 @@ div#pager .ui-resizable-handle { 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. */ } @@ -10270,7 +10270,7 @@ span.autosave_status { margin-top: -8px; border: 0px; min-height: 27px; - margin-left: 32px; + margin-left: 0px; padding-top: 11px; padding-bottom: 3px; } @@ -10429,7 +10429,8 @@ span.autosave_status { color: white; background: black; border-radius: 2px; - box-shadow: 0px 4px 11px 0px gray; + -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.4); + box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.4); padding: 0.4em; } .terminal, From 972065ad22096720f7bb4716469a551797d362b1 Mon Sep 17 00:00:00 2001 From: Jonathan Frederic <jon.freder@gmail.com> Date: Tue, 16 Dec 2014 15:46:26 -0800 Subject: [PATCH 11/21] Additional aesthetic clean-up --- IPython/html/static/notebook/less/savewidget.less | 1 + IPython/html/static/terminal/less/terminal.less | 7 ++++--- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/IPython/html/static/notebook/less/savewidget.less b/IPython/html/static/notebook/less/savewidget.less index 28954a135..79deddf04 100644 --- a/IPython/html/static/notebook/less/savewidget.less +++ b/IPython/html/static/notebook/less/savewidget.less @@ -5,6 +5,7 @@ span.save_widget { height: 1em; line-height: 1em; padding: 3px; + margin-left: @padding-large-horizontal; border: none; font-size: 146.5%; &:hover{ diff --git a/IPython/html/static/terminal/less/terminal.less b/IPython/html/static/terminal/less/terminal.less index 0674b807a..2a35fde30 100644 --- a/IPython/html/static/terminal/less/terminal.less +++ b/IPython/html/static/terminal/less/terminal.less @@ -3,8 +3,6 @@ font-family: monospace; color: white; background: black; - border-radius: @border-radius-base; - .box-shadow(@global-shadow-dark); padding: @code_padding; &, dummy-screen { @@ -19,5 +17,8 @@ } #terminado-container { - padding-top: @page-header-padding; + margin-top: @page-header-padding; + background: black; + border-radius: @border-radius-base; + .box-shadow(@global-shadow-dark); } From b81a9f6bc6a0e61eedef7b9f7591c8f62071974d Mon Sep 17 00:00:00 2001 From: Jonathan Frederic <jon.freder@gmail.com> Date: Tue, 16 Dec 2014 15:46:46 -0800 Subject: [PATCH 12/21] invoke css --- IPython/html/static/style/style.min.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css index 4d1354ac0..910729b63 100644 --- a/IPython/html/static/style/style.min.css +++ b/IPython/html/static/style/style.min.css @@ -10208,6 +10208,7 @@ span.save_widget span.filename { height: 1em; line-height: 1em; padding: 3px; + margin-left: 16px; border: none; font-size: 146.5%; border-radius: 2px; @@ -10428,9 +10429,6 @@ span.autosave_status { font-family: monospace; color: white; background: black; - border-radius: 2px; - -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.4); - box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.4); padding: 0.4em; } .terminal, @@ -10443,6 +10441,10 @@ span.autosave_status { background: white; } #terminado-container { - padding-top: 20px; + margin-top: 20px; + background: black; + border-radius: 2px; + -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.4); + box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.4); } /*# sourceMappingURL=style.min.css.map */ \ No newline at end of file From cda53215bace9bc546a6a1be755dcea29f765980 Mon Sep 17 00:00:00 2001 From: Jonathan Frederic <jon.freder@gmail.com> Date: Wed, 17 Dec 2014 14:00:28 -0800 Subject: [PATCH 13/21] Improve edit app --- IPython/html/static/base/less/page.less | 2 +- IPython/html/static/base/less/variables.less | 8 ++++- IPython/html/static/edit/less/edit.less | 31 +++++++++++++++++-- IPython/html/static/edit/less/menubar.less | 18 ++++++++++- .../html/static/notebook/less/notebook.less | 15 +++++---- .../html/static/notebook/less/variables.less | 1 - IPython/html/templates/edit.html | 6 +++- IPython/html/templates/page.html | 1 + 8 files changed, 66 insertions(+), 16 deletions(-) diff --git a/IPython/html/static/base/less/page.less b/IPython/html/static/base/less/page.less index a383a3cc0..f5b1b1b6d 100644 --- a/IPython/html/static/base/less/page.less +++ b/IPython/html/static/base/less/page.less @@ -6,7 +6,7 @@ body { - background-color: white; + background-color: @body-bg; /* This makes sure that the body covers the entire window and needs to be in a different element than the display: box in wrapper below */ position: absolute; diff --git a/IPython/html/static/base/less/variables.less b/IPython/html/static/base/less/variables.less index d5a8f7785..578a10afb 100644 --- a/IPython/html/static/base/less/variables.less +++ b/IPython/html/static/base/less/variables.less @@ -43,4 +43,10 @@ label { @global-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2); @global-shadow-dark: 0px 0px 12px 1px rgba(87, 87, 87, 0.4); @page-header-padding: 20px; - +/* Make the page background atleast 100% the height of the view port */ +@page-backdrop-height: 100vh; +/* Make the page itself atleast 70% the height of the view port */ +@page-min-height: 70vh; +@page-backdrop-color: #EEE; +@page-color: @body-bg; +@page-padding: 15px; \ No newline at end of file diff --git a/IPython/html/static/edit/less/edit.less b/IPython/html/static/edit/less/edit.less index 072ffd5d4..73f56e102 100644 --- a/IPython/html/static/edit/less/edit.less +++ b/IPython/html/static/edit/less/edit.less @@ -1,9 +1,34 @@ -#texteditor-container { - border-bottom: 1px solid #ccc; -} #filename { font-size: 16pt; display: table; padding: 0px 5px; } + +#texteditor-backdrop { + padding-top: @page-header-padding; + padding-bottom: @page-header-padding; + + @media not print{ + min-height: @page-backdrop-height; + background-color: @page-backdrop-color; + } + + #texteditor-container { + .CodeMirror-gutter { + @media print { + background-color: @body-bg; + } + @media not print { + background-color: @page-color; + } + } + + @media not print{ + padding: @page-padding; + background-color : @page-color; + min-height: @page-min-height; + .box-shadow(@global-shadow); + } + } +} diff --git a/IPython/html/static/edit/less/menubar.less b/IPython/html/static/edit/less/menubar.less index f709333c5..ae21c34d4 100644 --- a/IPython/html/static/edit/less/menubar.less +++ b/IPython/html/static/edit/less/menubar.less @@ -11,4 +11,20 @@ // truncate mode-menu, so it doesn't get longer than the screen overflow: auto; max-height: 20em; -} \ No newline at end of file +} + +#current-mode { + margin-right: @padding-large-horizontal; +} + +.edit_app { + #header { + .box-shadow(@global-shadow); + } + + #menubar .navbar { + /* Use a negative 1 bottom margin, so the border overlaps the border of the + header */ + margin-bottom: -1px; + } +} diff --git a/IPython/html/static/notebook/less/notebook.less b/IPython/html/static/notebook/less/notebook.less index 91e96fb8d..c18710813 100644 --- a/IPython/html/static/notebook/less/notebook.less +++ b/IPython/html/static/notebook/less/notebook.less @@ -14,9 +14,10 @@ div#notebook_panel { margin: 0px; padding: 0px; .border-box-sizing(); - background-color: @notebook_dark_background; - /* Make the page background atleast 100% the height of the view port */ - min-height: 100vh; + @media not print { + background-color: @page-backdrop-color; + min-height: @page-backdrop-height; + } } div#notebook { font-size: @notebook_font_size; @@ -34,11 +35,9 @@ div#notebook { #notebook-container{ @media not print{ - padding: 15px; - border-color: @body-bg; - background-color : @body-bg; - /* Make the page itself atleast 70% the height of the view port */ - min-height: 70vh; + padding: @page-padding; + background-color : @page-color; + min-height: @page-min-height; .box-shadow(@global-shadow); } } diff --git a/IPython/html/static/notebook/less/variables.less b/IPython/html/static/notebook/less/variables.less index 67a0e7ea2..76d56398f 100644 --- a/IPython/html/static/notebook/less/variables.less +++ b/IPython/html/static/notebook/less/variables.less @@ -7,7 +7,6 @@ @light_border_color: darken(@cell_selected_background, 17%); @border_width: 1px; @notebook_font_size: 14px; -@notebook_dark_background: #EEE; @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/templates/edit.html b/IPython/html/templates/edit.html index fdf30ca0f..b4fbf31eb 100644 --- a/IPython/html/templates/edit.html +++ b/IPython/html/templates/edit.html @@ -10,6 +10,7 @@ {% block params %} +class="edit_app" data-base-url="{{base_url}}" data-file-path="{{file_path}}" @@ -75,12 +76,15 @@ data-file-path="{{file_path}}" </div> </div> +<div class="lower-header-bar"></div> + {% endblock %} {% block site %} - +<div id="texteditor-backdrop"> <div id="texteditor-container" class="container"></div> +</div> {% endblock %} diff --git a/IPython/html/templates/page.html b/IPython/html/templates/page.html index 8e2ee8b09..53932cae7 100644 --- a/IPython/html/templates/page.html +++ b/IPython/html/templates/page.html @@ -105,6 +105,7 @@ {% block header %} {% endblock %} </div> + <div id="header-spacer"></div> <div id="site"> From 7daba81475a1c9e9af9ad4baa222407b28caf23f Mon Sep 17 00:00:00 2001 From: Jonathan Frederic <jon.freder@gmail.com> Date: Wed, 17 Dec 2014 14:00:42 -0800 Subject: [PATCH 14/21] invoke css --- IPython/html/static/style/ipython.min.css | 2 + IPython/html/static/style/style.min.css | 57 +++++++++++++++++++---- 2 files changed, 51 insertions(+), 8 deletions(-) diff --git a/IPython/html/static/style/ipython.min.css b/IPython/html/static/style/ipython.min.css index 2d021336e..4b013ac39 100644 --- a/IPython/html/static/style/ipython.min.css +++ b/IPython/html/static/style/ipython.min.css @@ -18,6 +18,8 @@ pre { label { font-weight: normal; } +/* Make the page background atleast 100% the height of the view port */ +/* Make the page itself atleast 70% the height of the view port */ .border-box-sizing { box-sizing: border-box; -moz-box-sizing: border-box; diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css index 910729b63..5dbae6d4f 100644 --- a/IPython/html/static/style/style.min.css +++ b/IPython/html/static/style/style.min.css @@ -7476,6 +7476,8 @@ pre { label { font-weight: normal; } +/* Make the page background atleast 100% the height of the view port */ +/* Make the page itself atleast 70% the height of the view port */ .border-box-sizing { box-sizing: border-box; -moz-box-sizing: border-box; @@ -7738,7 +7740,7 @@ div.traceback-wrapper { * Author: IPython Development Team */ body { - background-color: white; + background-color: #ffffff; /* This makes sure that the body covers the entire window and needs to be in a different element than the display: box in wrapper below */ position: absolute; @@ -8138,14 +8140,52 @@ ul#new-notebook-menu { overflow: auto; max-height: 20em; } -#texteditor-container { - border-bottom: 1px solid #ccc; +#current-mode { + margin-right: 16px; +} +.edit_app #header { + -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2); + box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2); +} +.edit_app #menubar .navbar { + /* Use a negative 1 bottom margin, so the border overlaps the border of the + header */ + margin-bottom: -1px; } #filename { font-size: 16pt; display: table; padding: 0px 5px; } +#texteditor-backdrop { + padding-top: 20px; + padding-bottom: 20px; +} +@media not print { + #texteditor-backdrop { + min-height: 100vh; + background-color: #eeeeee; + } +} +@media print { + #texteditor-backdrop #texteditor-container .CodeMirror-gutter { + background-color: #ffffff; + } +} +@media not print { + #texteditor-backdrop #texteditor-container .CodeMirror-gutter { + background-color: #ffffff; + } +} +@media not print { + #texteditor-backdrop #texteditor-container { + padding: 15px; + background-color: #ffffff; + min-height: 70vh; + -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2); + box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2); + } +} /*! * * IPython notebook @@ -9477,9 +9517,12 @@ div#notebook_panel { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; - background-color: #eeeeee; - /* Make the page background atleast 100% the height of the view port */ - min-height: 100vh; +} +@media not print { + div#notebook_panel { + background-color: #eeeeee; + min-height: 100vh; + } } div#notebook { font-size: 14px; @@ -9499,9 +9542,7 @@ div#notebook { @media not print { #notebook-container { padding: 15px; - border-color: #ffffff; background-color: #ffffff; - /* Make the page itself atleast 70% the height of the view port */ min-height: 70vh; -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2); box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2); From 096b1638bf0ae41dd45dce659017fbc4a35883d6 Mon Sep 17 00:00:00 2001 From: Jonathan Frederic <jon.freder@gmail.com> Date: Wed, 17 Dec 2014 14:47:51 -0800 Subject: [PATCH 15/21] Remove padding on editor --- IPython/html/static/edit/less/edit.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/IPython/html/static/edit/less/edit.less b/IPython/html/static/edit/less/edit.less index 73f56e102..758ce0115 100644 --- a/IPython/html/static/edit/less/edit.less +++ b/IPython/html/static/edit/less/edit.less @@ -25,7 +25,7 @@ } @media not print{ - padding: @page-padding; + padding: 0px; background-color : @page-color; min-height: @page-min-height; .box-shadow(@global-shadow); From 359bc2e1bc7bd4560ce23251ac9c5d01369d9d5d Mon Sep 17 00:00:00 2001 From: Jonathan Frederic <jon.freder@gmail.com> Date: Wed, 17 Dec 2014 14:48:10 -0800 Subject: [PATCH 16/21] invoke css --- IPython/html/static/style/style.min.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css index 5dbae6d4f..841d8af09 100644 --- a/IPython/html/static/style/style.min.css +++ b/IPython/html/static/style/style.min.css @@ -8179,7 +8179,7 @@ ul#new-notebook-menu { } @media not print { #texteditor-backdrop #texteditor-container { - padding: 15px; + padding: 0px; background-color: #ffffff; min-height: 70vh; -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.2); From 2c714357c4cc150e1d6adeec0f67ae0f0a0ed7b9 Mon Sep 17 00:00:00 2001 From: Jonathan Frederic <jon.freder@gmail.com> Date: Wed, 17 Dec 2014 14:55:45 -0800 Subject: [PATCH 17/21] Review comments --- IPython/html/static/edit/less/edit.less | 2 +- IPython/html/static/notebook/less/codemirror.less | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/IPython/html/static/edit/less/edit.less b/IPython/html/static/edit/less/edit.less index 758ce0115..99d07884f 100644 --- a/IPython/html/static/edit/less/edit.less +++ b/IPython/html/static/edit/less/edit.less @@ -15,7 +15,7 @@ } #texteditor-container { - .CodeMirror-gutter { + .CodeMirror-gutter, .CodeMirror-gutters { @media print { background-color: @body-bg; } diff --git a/IPython/html/static/notebook/less/codemirror.less b/IPython/html/static/notebook/less/codemirror.less index 79fe102ed..058c55fc4 100644 --- a/IPython/html/static/notebook/less/codemirror.less +++ b/IPython/html/static/notebook/less/codemirror.less @@ -11,6 +11,7 @@ .CodeMirror { line-height: @code_line_height; /* Changed from 1em to our global default */ + font-size: @notebook_font_size; height: auto; /* Changed to auto to autogrow */ background: none; /* Changed from white to allow our bg to show through */ } From fd5659427dd0624b431f412443f6eea1ba448043 Mon Sep 17 00:00:00 2001 From: Jonathan Frederic <jon.freder@gmail.com> Date: Wed, 17 Dec 2014 14:55:55 -0800 Subject: [PATCH 18/21] invoke css --- IPython/html/static/style/ipython.min.css | 1 + IPython/html/static/style/style.min.css | 7 +++++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/IPython/html/static/style/ipython.min.css b/IPython/html/static/style/ipython.min.css index 4b013ac39..edd2c3581 100644 --- a/IPython/html/static/style/ipython.min.css +++ b/IPython/html/static/style/ipython.min.css @@ -545,6 +545,7 @@ div.input_area > div.highlight > pre { .CodeMirror { line-height: 1.21429em; /* Changed from 1em to our global default */ + font-size: 14px; height: auto; /* Changed to auto to autogrow */ background: none; diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css index 841d8af09..ac76cb808 100644 --- a/IPython/html/static/style/style.min.css +++ b/IPython/html/static/style/style.min.css @@ -8168,12 +8168,14 @@ ul#new-notebook-menu { } } @media print { - #texteditor-backdrop #texteditor-container .CodeMirror-gutter { + #texteditor-backdrop #texteditor-container .CodeMirror-gutter, + #texteditor-backdrop #texteditor-container .CodeMirror-gutters { background-color: #ffffff; } } @media not print { - #texteditor-backdrop #texteditor-container .CodeMirror-gutter { + #texteditor-backdrop #texteditor-container .CodeMirror-gutter, + #texteditor-backdrop #texteditor-container .CodeMirror-gutters { background-color: #ffffff; } } @@ -8455,6 +8457,7 @@ div.input_area > div.highlight > pre { .CodeMirror { line-height: 1.21429em; /* Changed from 1em to our global default */ + font-size: 14px; height: auto; /* Changed to auto to autogrow */ background: none; From 028b79b385cdd72bec3ffc9e3a0e2d313787cc1b Mon Sep 17 00:00:00 2001 From: Jonathan Frederic <jdfreder@calpoly.edu> Date: Thu, 18 Dec 2014 15:37:22 -0800 Subject: [PATCH 19/21] Move kernel logo to right margin. --- IPython/html/static/notebook/less/kernelselector.less | 1 - 1 file changed, 1 deletion(-) diff --git a/IPython/html/static/notebook/less/kernelselector.less b/IPython/html/static/notebook/less/kernelselector.less index 97d92ae62..33c68a34c 100644 --- a/IPython/html/static/notebook/less/kernelselector.less +++ b/IPython/html/static/notebook/less/kernelselector.less @@ -1,5 +1,4 @@ #kernel_logo_widget { - margin-right: 1em; .pull-right(); .current_kernel_logo { From 8d2e57e3ef67e3bd6fc753066a4a591775874276 Mon Sep 17 00:00:00 2001 From: Jonathan Frederic <jdfreder@calpoly.edu> Date: Thu, 18 Dec 2014 15:37:41 -0800 Subject: [PATCH 20/21] invoke css --- IPython/html/static/style/style.min.css | 1 - 1 file changed, 1 deletion(-) diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css index ac76cb808..6cb3576bc 100644 --- a/IPython/html/static/style/style.min.css +++ b/IPython/html/static/style/style.min.css @@ -9735,7 +9735,6 @@ select[multiple].celltoolbar select { color: #3071a9; } #kernel_logo_widget { - margin-right: 1em; float: right !important; float: right; } From 7926c36b0d5bb7bcf35ed93ae1b4373b8b385e50 Mon Sep 17 00:00:00 2001 From: Jonathan Frederic <jdfreder@calpoly.edu> Date: Thu, 18 Dec 2014 16:28:59 -0800 Subject: [PATCH 21/21] Remove right margin from the terminal --- IPython/html/static/style/style.min.css | 7 +++---- IPython/html/static/terminal/less/terminal.less | 5 ++--- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/IPython/html/static/style/style.min.css b/IPython/html/static/style/style.min.css index 6cb3576bc..c4938c6c3 100644 --- a/IPython/html/static/style/style.min.css +++ b/IPython/html/static/style/style.min.css @@ -10473,6 +10473,9 @@ span.autosave_status { color: white; background: black; padding: 0.4em; + border-radius: 2px; + -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.4); + box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.4); } .terminal, .terminal dummy-screen { @@ -10485,9 +10488,5 @@ span.autosave_status { } #terminado-container { margin-top: 20px; - background: black; - border-radius: 2px; - -webkit-box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.4); - box-shadow: 0px 0px 12px 1px rgba(87, 87, 87, 0.4); } /*# sourceMappingURL=style.min.css.map */ \ No newline at end of file diff --git a/IPython/html/static/terminal/less/terminal.less b/IPython/html/static/terminal/less/terminal.less index 2a35fde30..e6b2a24fb 100644 --- a/IPython/html/static/terminal/less/terminal.less +++ b/IPython/html/static/terminal/less/terminal.less @@ -4,6 +4,8 @@ color: white; background: black; padding: @code_padding; + border-radius: @border-radius-base; + .box-shadow(@global-shadow-dark); &, dummy-screen { line-height: 1em; @@ -18,7 +20,4 @@ #terminado-container { margin-top: @page-header-padding; - background: black; - border-radius: @border-radius-base; - .box-shadow(@global-shadow-dark); }