diff --git a/IPython/frontend/html/notebook/static/css/notebook.less b/IPython/frontend/html/notebook/static/css/notebook.less index 7ace220..595d66e 100644 --- a/IPython/frontend/html/notebook/static/css/notebook.less +++ b/IPython/frontend/html/notebook/static/css/notebook.less @@ -4,6 +4,8 @@ * Author: IPython Development Team */ +@import "variables.less"; + body { overflow: hidden; @@ -125,7 +127,7 @@ div#notebook { /* This spaces the cell away from the edge of the notebook area */ padding: 5px 5px 15px 5px; margin: 0px; - background-color: white; + background-color: @notebook_background; } div#pager_splitter { @@ -143,12 +145,18 @@ div#pager { } div.ui-widget-content { - border: 1px solid #aaa; + border: 1px solid @border_color; outline: none; } .cell { border: 1px solid transparent; + + &.selected { + border-radius: @corner_radius; + background-color:@cell_selected_background; + border : thin @border_color solid; + } } div.cell { @@ -160,7 +168,6 @@ div.cell { } div.code_cell { - background-color: white; } /* any special styling for code cells that are currently running goes here */ @@ -186,9 +193,9 @@ div.input { /* input_area and input_prompt must match in top border and margin for alignment */ div.input_area { color: black; - border: 1px solid #ddd; - border-radius: 3px; - background: #f7f7f7; + border: 1px solid @border_color; + border-radius: @corner_radius; + background: @cell_background; } div.input_prompt { @@ -214,7 +221,7 @@ div.output_scroll { width: 100%; overflow: auto; - border-radius: 3px; + border-radius: @corner_radius; box-shadow: inset 0 2px 8px rgba(0, 0, 0, .8); } @@ -227,7 +234,7 @@ div.out_prompt_overlay { height: 100%; padding: 0px; position: absolute; - border-radius: 3px; + border-radius: @corner_radius; } div.out_prompt_overlay:hover { @@ -307,15 +314,14 @@ div.output_jpeg { } div.text_cell { - background-color: white; padding: 5px 5px 5px 5px; } div.text_cell_input { color: black; - border: 1px solid #ddd; - border-radius: 3px; - background: #f7f7f7; + border: 1px solid @border_color; + border-radius: @corner_radius; + background: @cell_background; } div.text_cell_render { @@ -368,7 +374,7 @@ div.text_cell_render { position: absolute; z-index: 10; overflow: hidden; - border: 1px solid grey; + border: 1px solid @border_color; } .completions select { @@ -403,9 +409,9 @@ option.introspection { } pre.dialog { - background-color: #f7f7f7; + background-color: @cell_background; border: 1px solid #ddd; - border-radius: 3px; + border-radius: @corner_radius; padding: 0.4em; padding-left: 2em; } diff --git a/IPython/frontend/html/notebook/static/css/variables.less b/IPython/frontend/html/notebook/static/css/variables.less new file mode 100644 index 0000000..b043c46 --- /dev/null +++ b/IPython/frontend/html/notebook/static/css/variables.less @@ -0,0 +1,5 @@ +@corner_radius: 3px; +@notebook_background : white; +@cell_selected_background: darken(@notebook_background, 2%); +@cell_background: darken(@notebook_background, 3.2%); +@border_color: darken(@cell_selected_background, 10%); diff --git a/IPython/frontend/html/notebook/static/js/cell.js b/IPython/frontend/html/notebook/static/js/cell.js index 6f87ff7..d49e456 100644 --- a/IPython/frontend/html/notebook/static/js/cell.js +++ b/IPython/frontend/html/notebook/static/js/cell.js @@ -91,7 +91,7 @@ var IPython = (function (IPython) { * @method select */ Cell.prototype.select = function () { - this.element.addClass('ui-widget-content ui-corner-all'); + this.element.addClass('selected'); this.selected = true; }; @@ -101,7 +101,7 @@ var IPython = (function (IPython) { * @method unselect */ Cell.prototype.unselect = function () { - this.element.removeClass('ui-widget-content ui-corner-all'); + this.element.removeClass('selected'); this.selected = false; };