Merge pull request #2708 from Carreau/less-css

Less css

IPython/frontend/html/notebook/fabfile.py

@@ -0,0 +1,26 @@
+""" fabfile to prepare the notebook """
+
+from fabric.api import local,lcd
+from fabric.utils import abort
+import os
+
+static_dir = 'static'
+components_dir = os.path.join(static_dir,'components')
+
+def test_component(name):
+    if not os.path.exists(os.path.join(components_dir,name)):
+        abort('cannot continue without component {}.'.format(name))
+
+
+def css(minify=True):
+    """generate the css from less files"""
+    test_component('bootstrap')
+    test_component('less.js')
+    if minify not in ['True','False',True,False]:
+        abort('need to get Boolean')
+    minify = (minify in ['True',True])
+
+    min_flag= '-x' if minify is True else ''
+    with lcd(static_dir):
+        local('lessc {min_flag} less/style.less css/style.min.css'.format(min_flag=min_flag))
+

IPython/frontend/html/notebook/handlers.py

@@ -184,6 +184,11 @@ class AuthenticatedHandler(RequestHandler):
         """
         return self.application.read_only
 
+    @property
+    def use_less(self):
+        """Use less instead of css in templates"""
+        return self.application.use_less
+
     @property
     def ws_url(self):
         """websocket url matching the current request
@@ -213,11 +218,14 @@ class ProjectDashboardHandler(AuthenticatedHandler):
         nbm = self.application.notebook_manager
         project = nbm.notebook_dir        
         template = self.application.jinja2_env.get_template('projectdashboard.html')
-        self.write( template.render(project=project,
+        self.write( template.render(
+            project=project,
+            project_component=project.split('/'),
             base_project_url=self.application.ipython_app.base_project_url,
             base_kernel_url=self.application.ipython_app.base_kernel_url,
             read_only=self.read_only,
             logged_in=self.logged_in,
+            use_less=self.use_less,
             login_available=self.login_available))
 
 
@@ -288,7 +296,8 @@ class NamedNotebookHandler(AuthenticatedHandler):
         if not nbm.notebook_exists(notebook_id):
             raise web.HTTPError(404, u'Notebook does not exist: %s' % notebook_id)       
         template = self.application.jinja2_env.get_template('notebook.html')
-        self.write( template.render(project=project,
+        self.write( template.render(
+            project=project,
             notebook_id=notebook_id,
             base_project_url=self.application.ipython_app.base_project_url,
             base_kernel_url=self.application.ipython_app.base_kernel_url,
@@ -296,7 +305,10 @@ class NamedNotebookHandler(AuthenticatedHandler):
             read_only=self.read_only,
             logged_in=self.logged_in,
             login_available=self.login_available,
-            mathjax_url=self.application.ipython_app.mathjax_url,))
+            mathjax_url=self.application.ipython_app.mathjax_url,
+            use_less=self.use_less
+            )
+        )
 
 
 class PrintNotebookHandler(AuthenticatedHandler):

IPython/frontend/html/notebook/notebookapp.py

@@ -123,7 +123,7 @@ def random_ports(port, n):
 
 class NotebookWebApplication(web.Application):
 
-    def __init__(self, ipython_app, kernel_manager, notebook_manager, 
+    def __init__(self, ipython_app, kernel_manager, notebook_manager,
                  cluster_manager, log,
                  base_project_url, settings_overrides):
         handlers = [
@@ -186,6 +186,7 @@ class NotebookWebApplication(web.Application):
         self.ipython_app = ipython_app
         self.read_only = self.ipython_app.read_only
         self.config = self.ipython_app.config
+        self.use_less = self.ipython_app.use_less
         self.log = log
         self.jinja2_env = Environment(loader=FileSystemLoader(os.path.join(os.path.dirname(__file__), "templates")))
 
@@ -343,7 +344,19 @@ class NotebookApp(BaseIPythonApplication):
     read_only = Bool(False, config=True,
         help="Whether to prevent editing/execution of notebooks."
     )
-    
+
+    use_less = Bool(False, config=True,
+                       help="""Wether to use Browser Side less-css parsing
+                       instead of compiled css version in templates that allows
+                       it. This is mainly convenient when working on the less
+                       file to avoid a build step, or if user want to overwrite
+                       some of the less variables without having to recompile
+                       everything.
+                       
+                       You will need to install the less.js component in the static directory
+                       either in the source tree or in your profile folder.
+                       """)
+
     webapp_settings = Dict(config=True,
             help="Supply overrides for the tornado.web.Application that the "
                  "IPython notebook uses.")

IPython/frontend/html/notebook/static/css/celltoolbar.css

@@ -2,14 +2,23 @@
 
 
 .celltoolbar {
-    border: thin solid #DDD;
+    border: thin solid #CFCFCF;
     margin-left: 0px;
     border-bottom: none;
+        margin:0;
+    padding:0;
     background : #EEE;
     border-top-right-radius: 3px;
     border-top-left-radius: 3px;
 }
 
+.celltoolbar div{
+    line-height: 0;
+    margin:0;
+    padding:0;
+  }
+
+
 .no_input_radius {
     border-top-right-radius: 0px;
     border-top-left-radius: 0px;
@@ -27,6 +36,13 @@
     display: none;
 }
 
+.ctb_area {
+    margin:0;
+    padding:0;
+
+}
+
+
 /*ctb_show is added to either body or the ctb_hideshow div to show
 all or one cell's toolbars.
 */
@@ -34,7 +50,7 @@ all or one cell's toolbars.
     display: block;
 }
 
-.ctb_show .ctb_hideshow + div > div.input_area,  
+.ctb_show .ctb_hideshow + div > div.input_area,
 .ctb_show .ctb_hideshow + div.text_cell_input {
     border-top-right-radius: 0px;
     border-top-left-radius: 0px;
@@ -47,6 +63,7 @@ all or one cell's toolbars.
 
 .button_container {
     float: right;
+    padding-bottom: 1px;
 }
 
 .button_container .ui-state-default, .button_container .ui-state-hover, .button_container .ui-state-hover span{
@@ -58,17 +75,28 @@ all or one cell's toolbars.
     margin: 10px;
     margin-top: 0px;
     margin-bottom: 0px;
-    font-size: 77%;
+    font-size: 87%;
+    height:18px;
+    display:inline;
+    width:auto;
+}
+
+.celltoolbar label{
+    display:inline;
+    line-height:13px;
 }
 
 .celltoolbar label span {
-    font-size: 77%;
+    font-size: 85%;
 }
 
 .celltoolbar input[type=checkbox] {
-    margin-bottom: 1px;
+    margin: 0px;
+    margin-left: 4px;
+    margin-right: 4px;
 }
 
+
 .celltoolbar ui-button {
     border: none;
 }

IPython/frontend/html/notebook/static/css/login.css

@@ -1,5 +1,5 @@
 
-#main_app {
+#ipython-main-app {
     height: 100px;
     width: 350px;
     margin: 50px auto;

IPython/frontend/html/notebook/static/css/logout.css

@@ -1,5 +1,5 @@
 
-#main_app {
+#ipython-main-app {
     height: 100px;
     width: 200px;
     margin: 50px auto;

IPython/frontend/html/notebook/static/css/projectdashboard.css

@@ -5,7 +5,7 @@
  * Author: IPython Development Team
  */
 
-#main_app {
+#ipython-main-app {
     width: 920px;
     margin: 30px auto 0px auto;
 }
@@ -82,3 +82,16 @@
 .ui-tabs .ui-tabs-nav li a {
     padding: .3em .5em;
 }
+
+#project_name > .breadcrumb {
+ padding : 0;
+ background-color: transparent;
+}
+
+input.engine_num_input {
+    height: 20px;
+    margin-bottom:2px;
+    padding-top:0;
+    padding-bottom:0;
+    width: 90px;
+}

IPython/frontend/html/notebook/static/css/renderedhtml.css

@@ -1,64 +0,0 @@
-.rendered_html {color: black;}
-.rendered_html em {font-style: italic;}
-.rendered_html strong {font-weight: bold;}
-.rendered_html u {text-decoration: underline;}
-.rendered_html :link { text-decoration: underline }
-.rendered_html :visited { text-decoration: underline }
-.rendered_html h1 {font-size: 197%; margin: .65em 0; font-weight: bold;}
-.rendered_html h2 {font-size: 153.9%; margin: .75em 0; font-weight: bold;}
-.rendered_html h3 {font-size: 123.1%; margin: .85em 0; font-weight: bold;}
-.rendered_html h4 {font-size: 100% margin: 0.95em 0; font-weight: bold;}
-.rendered_html h5 {font-size: 85%; margin: 1.5em 0; font-weight: bold;}
-.rendered_html h6 {font-size: 77%; margin: 1.65em 0; font-weight: bold;}
-.rendered_html ul {list-style:disc; margin: 1em 2em;}
-.rendered_html ul ul {list-style:square; margin: 0em 2em;}
-.rendered_html ul ul ul {list-style:circle; margin-left: 0em 2em;}
-.rendered_html ol {list-style:decimal; margin: 1em 2em;}
-.rendered_html ol ol {list-style:upper-alpha; margin: 0em 2em;}
-.rendered_html ol ol ol {list-style:lower-alpha; margin: 0em 2em;}
-.rendered_html ol ol ol ol {list-style:lower-roman; margin: 0em 2em;}
-/* any extras will just be numbers: */
-.rendered_html ol ol ol ol ol {list-style:decimal; margin: 0em 2em;}
-
-.rendered_html hr {
-    color: black;
-    background-color: black;
-}
-
-.rendered_html pre {
-    margin: 1em 2em;
-}
-
-.rendered_html blockquote {
-    margin: 1em 2em;
-}
-
-.rendered_html table {
-    border: 1px solid black;
-    border-collapse: collapse;
-    margin: 1em 2em;
-}
-
-.rendered_html td {
-    border: 1px solid black;
-    text-align: left;
-    vertical-align: middle;
-    padding: 4px;
-}
-
-.rendered_html th {
-    border: 1px solid black;
-    text-align: left;
-    vertical-align: middle;
-    padding: 4px;
-    font-weight: bold;
-}
-
-.rendered_html tr {
-    border: 1px solid black;
-}    
-
-.rendered_html p + p {
-    margin-top: 1em;
-}
-

IPython/frontend/html/notebook/static/css/tooltip.css

@@ -1,133 +0,0 @@
-/**
- * Primary styles
- *
- * Author: IPython Development Team
- */
-/** WARNING IF YOU ARE EDITTING THIS FILE, if this is a .css file, It has a lot
- * of chance of beeing generated from the ../less/[samename].less file, you can
- * try to get back the less file by reverting somme commit in history
- **/
-/*
- * We'll try to get something pretty, so we
- * have some strange css to have the scroll bar on
- * the left with fix button on the top right of the tooltip
- */
-@-moz-keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@-webkit-keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@-moz-keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@-webkit-keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-.ipython_tooltip a {
-  float: right;
-}
-/*properties of tooltip after "expand"*/
-.bigtooltip {
-  overflow: auto;
-  height: 200px;
-  -webkit-transition-property: height;
-  -webkit-transition-duration: 1s;
-  -moz-transition-property: height;
-  -moz-transition-duration: 1s;
-  transition-property: height;
-  transition-duration: 1s;
-}
-/*properties of tooltip before "expand"*/
-.smalltooltip {
-  -webkit-transition-property: height;
-  -webkit-transition-duration: 1s;
-  -moz-transition-property: height;
-  -moz-transition-duration: 1s;
-  transition-property: height;
-  transition-duration: 1s;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  height: 80px;
-}
-.tooltipbuttons {
-  position: absolute;
-  padding-right: 15px;
-  top: 0px;
-  right: 0px;
-}
-.tooltiptext {
-  /*avoid the button to overlap on some docstring*/
-
-  padding-right: 30px;
-}
-.ipython_tooltip {
-  max-width: 700px;
-  border-radius: 4px;
-  -moz-box-shadow: 0px 6px 10px -1px #adadad;
-  -webkit-box-shadow: 0px 6px 10px -1px #adadad;
-  box-shadow: 0px 6px 10px -1px #adadad;
-  /*fade-in animation when inserted*/
-
-  -webkit-animation: fadeOut 800ms;
-  -moz-animation: fadeOut 800ms;
-  animation: fadeOut 800ms;
-  -webkit-animation: fadeIn 800ms;
-  -moz-animation: fadeIn 800ms;
-  animation: fadeIn 800ms;
-  vertical-align: middle;
-  background-color: #f7f7f7;
-  overflow: visible;
-  border: #bbbbbb 1px solid;
-  outline: none;
-  padding: 3px;
-  margin: 0px;
-  padding-left: 7px;
-  font-family: monospace;
-  min-height: 50px;
-  position: absolute;
-}
-.pretooltiparrow {
-  left: 0px;
-  margin: 0px;
-  top: -16px;
-  width: 40px;
-  height: 16px;
-  overflow: hidden;
-  position: absolute;
-}
-.pretooltiparrow:before {
-  background-color: #f7f7f7;
-  border: 1px #bbbbbb solid;
-  z-index: 11;
-  content: "";
-  position: absolute;
-  left: 15px;
-  top: 10px;
-  width: 25px;
-  height: 25px;
-  -webkit-transform: rotate(45deg);
-  -moz-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  -o-transform: rotate(45deg);
-}

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;
     };
 

IPython/frontend/html/notebook/static/js/clusterlist.js

@@ -103,8 +103,11 @@ var IPython = (function (IPython) {
         var profile_col = $('<span/>').addClass('profile_col').text(this.data.profile);
         var status_col = $('<span/>').addClass('status_col').html('stopped');
         var engines_col = $('<span/>').addClass('engines_col');
-        var input = $('<input/>').attr('type','text').
-                attr('size',3).addClass('engine_num_input');
+        var input = $('<input/>').attr('type','number')
+                .attr('min',1)
+                .attr('value',2)
+                .attr('size',3)
+                .addClass('engine_num_input');
         engines_col.append(input);
         var action_col = $('<span/>').addClass('action_col');
         var start_button = $('<button>Start</button>').button();

IPython/frontend/html/notebook/static/js/loginmain.js

@@ -14,7 +14,7 @@ $(document).ready(function () {
 
     IPython.page = new IPython.Page();
     $('input#login_submit').button();
-    $('div#main_app').addClass('border-box-sizing ui-widget');
+    $('#ipython-main-app').addClass('border-box-sizing ui-widget');
     IPython.page.show();
     $('input#password_input').focus();
 

IPython/frontend/html/notebook/static/js/logoutmain.js

@@ -13,7 +13,7 @@
 $(document).ready(function () {
 
     IPython.page = new IPython.Page();
-    $('div#main_app').addClass('border-box-sizing ui-widget');
+    $('#ipython-main-app').addClass('border-box-sizing ui-widget');
     IPython.page.show();
 
 });

IPython/frontend/html/notebook/static/js/notebook.js

@@ -273,7 +273,7 @@ var IPython = (function (IPython) {
         });
 
         var collapse_time = function(time){
-            var app_height = $('div#main_app').height(); // content height
+            var app_height = $('#ipython-main-app').height(); // content height
             var splitter_height = $('div#pager_splitter').outerHeight(true);
             var new_height = app_height - splitter_height;
             that.element.animate({height : new_height + 'px'}, time);
@@ -285,7 +285,7 @@ var IPython = (function (IPython) {
         });
 
         var expand_time = function(time) {
-            var app_height = $('div#main_app').height(); // content height
+            var app_height = $('#ipython-main-app').height(); // content height
             var splitter_height = $('div#pager_splitter').outerHeight(true);
             var pager_height = $('div#pager').outerHeight(true);
             var new_height = app_height - pager_height - splitter_height;

IPython/frontend/html/notebook/static/js/notebookmain.js

@@ -34,8 +34,8 @@ $(document).ready(function () {
     IPython.mathjaxutils.init();
 
     IPython.read_only = $('body').data('readOnly') === 'True';
-    $('div#main_app').addClass('border-box-sizing ui-widget');
-    $('div#notebook_panel').addClass('border-box-sizing ui-widget');
+    $('#ipython-main-app').addClass('border-box-sizing');
+    $('div#notebook_panel').addClass('border-box-sizing');
     // The header's bottom border is provided by the menu bar so we remove it.
     $('div#header').css('border-bottom-style','none');
 

IPython/frontend/html/notebook/static/js/page.js

@@ -18,7 +18,7 @@ var IPython = (function (IPython) {
 
     Page.prototype.style = function () {
         $('div#header').addClass('border-box-sizing').
-            addClass('ui-widget ui-widget-content').
+            addClass('ui-widget-content').
             css('border-top-style','none').
             css('border-left-style','none').
             css('border-right-style','none');

IPython/frontend/html/notebook/static/js/projectdashboardmain.js

@@ -19,7 +19,7 @@ $(document).ready(function () {
         var new_url = $('body').data('baseProjectUrl') + '#' + ui.panel.id;
         window.history.replaceState({}, '', new_url);
     });
-    $('div#main_app').addClass('border-box-sizing ui-widget');
+    $('#ipython-main-app').addClass('border-box-sizing ui-widget');
     $('div#notebooks_toolbar').addClass('ui-widget ui-helper-clearfix');    
     $('#new_notebook').button().click(function (e) {
         window.open($('body').data('baseProjectUrl')+'new');

IPython/frontend/html/notebook/static/js/savewidget.js

@@ -25,8 +25,8 @@ var IPython = (function (IPython) {
 
     SaveWidget.prototype.style = function () {
         this.element.find('span#save_widget').addClass('ui-widget');
-        this.element.find('span#notebook_name').addClass('ui-widget ui-widget-content');
-        this.element.find('span#save_status').addClass('ui-widget ui-widget-content')
+        this.element.find('span#notebook_name').addClass('ui-widget');
+        this.element.find('span#save_status').addClass('ui-widget')
             .css({border: 'none', 'margin-left': '20px'});
     };
 

IPython/frontend/html/notebook/static/js/toolbar.js

@@ -86,7 +86,7 @@ var IPython = (function (IPython) {
 
     ToolBar.prototype.style = function () {
         this.element.addClass('border-box-sizing').
-            addClass('ui-widget ui-widget-content toolbar').
+            addClass('toolbar').
             css('border-top-style','none').
             css('border-left-style','none').
             css('border-right-style','none');

IPython/frontend/html/notebook/static/less/flexible-box-model.less

@@ -0,0 +1,97 @@
+
+/* Flexible box model classes */
+/* Taken from Alex Russell http://infrequently.org/2009/08/css-3-progress/ */
+
+.hbox {
+	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;
+}
+
+.hbox > * {
+	-webkit-box-flex: 0;
+	-moz-box-flex: 0;
+	box-flex: 0;
+}
+
+.vbox {
+	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;
+}
+
+.vbox > * {
+	-webkit-box-flex: 0;
+	-moz-box-flex: 0;
+	box-flex: 0;
+}
+
+.reverse {
+	-webkit-box-direction: reverse;
+	-moz-box-direction: reverse;
+	box-direction: reverse;
+}
+
+.box-flex0 {
+	-webkit-box-flex: 0;
+	-moz-box-flex: 0;
+	box-flex: 0;
+}
+
+.box-flex1, .box-flex {
+	-webkit-box-flex: 1;
+	-moz-box-flex: 1;
+	box-flex: 1;
+}
+
+.box-flex2 {
+	-webkit-box-flex: 2;
+	-moz-box-flex: 2;
+	box-flex: 2;
+}
+
+.box-group1 {
+	-webkit-box-flex-group: 1;
+	-moz-box-flex-group: 1;
+	box-flex-group: 1;
+}
+
+.box-group2 {
+	-webkit-box-flex-group: 2;
+	-moz-box-flex-group: 2;
+	box-flex-group: 2;
+}
+
+.start {
+	-webkit-box-pack: start;
+	-moz-box-pack: start;
+	box-pack: start;
+}
+
+.end {
+	-webkit-box-pack: end;
+	-moz-box-pack: end;
+	box-pack: end;
+}
+
+.center {
+	-webkit-box-pack: center;
+	-moz-box-pack: center;
+	box-pack: center;
+}

IPython/frontend/html/notebook/static/less/notebook.less

@@ -4,8 +4,14 @@
  * Author: IPython Development Team
  */
 
+@import "variables.less";
+
 
 body {
+    background-color:@notebook_background;
+}
+    
+body.notebook_app {
     overflow: hidden;
 }
 
@@ -79,19 +85,35 @@ span#notebook_name {
 
 .toolbar {
     padding: 3px 15px;
+    border-bottom: @borderwidth @border_color solid;
+
+    button {
+        margin-top:2px;
+        margin-bottom:2px;
+    }
+
+
+    select, label {
+        height : 19px;
+        vertical-align:middle;
+        margin-right:2px;
+        margin-bottom:0;
+        display: inline;
+        font-size: 92%;
+        margin-left:0.3em;
+        margin-right:0.3em;
+    }
 }
 
-#maintoolbar > select, #maintoolbar label {
-    font-size: 85%;
-    margin-left:0.3em;
-    margin-right:0.3em;
-
+.toolbar select{
+    width:auto;
 }
 
 
-div#main_app {
+#ipython-main-app {
     width: 100%;
     position: relative;
+    font-size: 110%;
 }
 
 span#quick_help_area {
@@ -125,7 +147,6 @@ div#notebook {
     /* This spaces the cell away from the edge of the notebook area */
     padding: 5px 5px 15px 5px;
     margin: 0px;
-    background-color: white;
 }
 
 div#pager_splitter {
@@ -143,12 +164,17 @@ div#pager {
 }
 
 div.ui-widget-content {
-    border: 1px solid #aaa;
+    border: 1px solid @border_color;
     outline: none;
 }
 
 .cell {
     border: 1px solid transparent;
+
+    &.selected {
+        .corner-all;
+        border : thin @border_color solid;
+    }
 }
 
 div.cell {
@@ -160,7 +186,6 @@ div.cell {
 }
 
 div.code_cell {
-    background-color: white;
 }
 
 /* any special styling for code cells that are currently running goes here */
@@ -185,10 +210,10 @@ 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;
+    /*color: @fontBaseColor;*/
+    border: 1px solid @light_border_color;
+    .corner-all;
+    background: @cell_background;
 }
 
 div.input_prompt {
@@ -212,9 +237,9 @@ div.output_scroll {
   height: 24em;
   /* FF needs this *and the wrapper* to specify full width, or it will shrinkwrap */
   width: 100%;
-  
+
   overflow: auto;
-  border-radius: 3px;
+  .corner-all;
   box-shadow: inset 0 2px 8px rgba(0, 0, 0, .8);
 }
 
@@ -227,7 +252,7 @@ div.out_prompt_overlay {
   height: 100%;
   padding: 0px;
   position: absolute;
-  border-radius: 3px;
+  .corner-all;
 }
 
 div.out_prompt_overlay:hover {
@@ -260,7 +285,6 @@ div.output_area pre {
     font: inherit;
     vertical-align: baseline;
     color: black;
-    background-color: white;
 }
 
 /* This class is for the output subarea inside the output_area and after
@@ -275,7 +299,7 @@ div.output_subarea {
 /* all text output has this class: */
 div.output_text {
     text-align: left;
-    color: black;
+    color: @fontBaseColor;
     font-family: monospace;
     /* This has to match that of the the CodeMirror class line-height below */	
     line-height: 1.231;
@@ -294,7 +318,6 @@ div.output_stderr {
 
 div.output_latex {
     text-align: left;
-    color: black;
 }
 
 div.output_html {
@@ -307,31 +330,30 @@ 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;
+    color: @fontBaseColor;
+    border: 1px solid @light_border_color;
+    .corner-all;
+    background: @cell_background;
 }
 
 div.text_cell_render {
-    font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
+    /*font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;*/
     outline: none;
     resize: none;
     width:  inherit;
     border-style: none;
     padding: 5px;
-    color: black;
+    color: @fontBaseColor;
 }
 
 /* The following gets added to the <head> if it is detected that the user has a
  * monospace font with inconsistent normal/bold/italic height.  See
  * notebookmain.js.  Such fonts will have keywords vertically offset with
- * respect to the rest of the text.  The user should select a better font. 
+ * respect to the rest of the text.  The user should select a better font.
  * See: https://github.com/ipython/ipython/issues/1503
  *
  * .CodeMirror span {
@@ -354,7 +376,7 @@ div.text_cell_render {
 /* CSS font colors for translated ANSI colors. */
 
 
-.ansiblack {color: black;}
+.ansiblack {color: @fontBaseColor;}
 .ansired {color: darkred;}
 .ansigreen {color: darkgreen;}
 .ansiyellow {color: brown;}
@@ -368,7 +390,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 +425,9 @@ option.introspection {
 }
 
 pre.dialog {
-    background-color: #f7f7f7;
+    background-color: @cell_background;
     border: 1px solid #ddd;
-    border-radius: 3px;
+    .corner-all;
     padding: 0.4em;
     padding-left: 2em;
 }
@@ -436,3 +458,13 @@ pre, code, kbd, samp { white-space: pre-wrap; }
 .js-error {
     color: darkred;
 }
+
+a {
+  text-decoration: underline;
+}
+
+p {
+
+margin-bottom:0;
+
+}

IPython/frontend/html/notebook/static/less/renderedhtml.less

@@ -0,0 +1,61 @@
+.rendered_html{
+
+    color: black;
+    em {font-style: italic;}
+    strong {font-weight: bold;}
+    u {text-decoration: underline;}
+    :link { text-decoration: underline }
+    :visited { text-decoration: underline }
+    h1 {font-size: 197%; margin: .65em 0; font-weight: bold;}
+    h2 {font-size: 153.9%; margin: .75em 0; font-weight: bold;}
+    h3 {font-size: 123.1%; margin: .85em 0; font-weight: bold;}
+    h4 {font-size: 100% margin: 0.95em 0; font-weight: bold;}
+    h5 {font-size: 85%; margin: 1.5em 0; font-weight: bold;}
+    h6 {font-size: 77%; margin: 1.65em 0; font-weight: bold;}
+    ul {list-style:disc; margin: 1em 2em;}
+    ul ul {list-style:square; margin: 0em 2em;}
+    ul ul ul {list-style:circle; margin-left: 0em 2em;}
+    ol {list-style:decimal; margin: 1em 2em;}
+    ol ol {list-style:upper-alpha; margin: 0em 2em;}
+    ol ol ol {list-style:lower-alpha; margin: 0em 2em;}
+    ol ol ol ol {list-style:lower-roman; margin: 0em 2em;}
+    /* any extras will just be numbers: */
+    ol ol ol ol ol {list-style:decimal; margin: 0em 2em;}
+
+    hr {
+        color: black;
+        background-color: black;
+    }
+
+    pre {
+        margin: 1em 2em;
+    }
+
+    blockquote {
+        margin: 1em 2em;
+    }
+
+    table, tr, th, td {
+        border: 1px solid black;
+        border-collapse: collapse;
+        margin: 1em 2em;
+    }
+
+    td,th {
+        text-align: left;
+        vertical-align: middle;
+        padding: 4px;
+    }
+
+    th {
+        font-weight: bold;
+    }
+
+    p {
+        text-align: justify;
+    }
+
+    p + p {
+        margin-top: 1em;
+    }
+}

IPython/frontend/html/notebook/static/less/style.less

@@ -0,0 +1,7 @@
+@import "bootstrap-custom.less";
+@import "variables.less";
+@import "flexible-box-model.less";
+@import "notebook.less";
+@import "printnotebook.less";
+@import "renderedhtml.less";
+@import "tooltip.less";

IPython/frontend/html/notebook/static/less/tooltip.less

@@ -0,0 +1,159 @@
+/**
+ * Primary styles
+ *
+ * Author: IPython Development Team
+ */
+
+/** WARNING IF YOU ARE EDITTING THIS FILE, if this is a .css file, It has a lot
+ * of chance of beeing generated from the ../less/[samename].less file, you can
+ * try to get back the less file by reverting somme commit in history
+ **/
+
+/*
+ * We'll try to get something pretty, so we
+ * have some strange css to have the scroll bar on
+ * the left with fix button on the top right of the tooltip
+ */
+
+// double slash comment are remove by less compilation
+// **
+// * Less mixins
+// **/
+
+// Four color of the background
+@import "variables" ;
+
+.dropshadow(){
+ -moz-box-shadow:    0px 6px 10px -1px #adadad;
+  -webkit-box-shadow: 0px 6px 10px -1px #adadad;
+  box-shadow:         0px 6px 10px -1px #adadad;
+}
+
+// smoth height adaptation
+.smoothheight(@t:500ms) {
+    -webkit-transition-property: height;
+    -webkit-transition-duration: @t;
+    -moz-transition-property: height;
+    -moz-transition-duration: @t;
+    transition-property: height;
+    transition-duration: @t;
+}
+
+@-moz-keyframes fadeOut {
+    from {opacity:1;}
+    to {opacity:0;}
+}
+
+@-webkit-keyframes fadeOut {
+    from {opacity:1;}
+    to {opacity:0;}
+}
+
+//@keyframes fadeOut {
+//    from {opacity:1;}
+//    to {opacity:0;}
+//}
+
+@-moz-keyframes fadeIn {
+    from {opacity:0;}
+    to {opacity:1;}
+}
+
+@-webkit-keyframes fadeIn {
+    from {opacity:0;}
+    to {opacity:1;}
+}
+
+//@keyframes fadeIn {
+//    from {opacity:0;}
+//    to {opacity:1;}
+//}
+
+/*properties of tooltip after "expand"*/
+.bigtooltip {
+    overflow: auto;
+    height: 200px;
+    .smoothheight();
+}
+
+/*properties of tooltip before "expand"*/
+.smalltooltip{
+    .smoothheight();
+    text-overflow: ellipsis;
+    overflow: hidden;
+    height:80px;
+}
+
+.tooltipbuttons
+{
+    position: absolute;
+    padding-right : 15px;
+    top : 0px;
+    right:0px;
+}
+
+.tooltiptext
+{
+    /*avoid the button to overlap on some docstring*/
+    padding-right:30px
+}
+
+.ipython_tooltip {
+    max-width:700px;
+    /*fade-in animation when inserted*/
+    -webkit-animation: fadeOut 400ms;
+    -moz-animation: fadeOut 400ms;
+    animation: fadeOut 400ms;
+    -webkit-animation: fadeIn 400ms;
+    -moz-animation: fadeIn 400ms;
+    animation: fadeIn 400ms;
+    vertical-align: middle;
+    background-color: @cell_background;
+
+    overflow : visible;
+    border: @border_color @borderwidth solid;
+    outline: none;
+    padding: 3px;
+    margin: 0px;
+    padding-left:7px;
+    font-family: monospace;
+    min-height:50px;
+
+    .dropshadow;
+    .corner-all;
+
+    a {
+        float:right;
+    };
+    position: absolute;
+
+}
+
+
+.pretooltiparrow {
+  left: 0px;
+  margin: 0px;
+  top: -16px;
+  width: 40px;
+  height: 16px;
+  overflow: hidden;
+  position: absolute;
+
+}
+
+.pretooltiparrow:before {
+  background-color : @cell_background;
+  border : @borderwidth @border_color solid;
+  z-index:11;
+  content: "";
+  position: absolute;
+  left: 15px;
+  top: 10px;
+  width: 25px;
+  height: 25px;
+  @theta : 45deg;
+  -webkit-transform: rotate(@theta);
+  -moz-transform:    rotate(@theta);
+  -ms-transform:     rotate(@theta);
+  -o-transform:      rotate(@theta);
+}

IPython/frontend/html/notebook/static/less/variables.less

@@ -0,0 +1,18 @@
+@corner_radius: 4px;
+@notebook_background : white;
+@cell_selected_background: darken(@notebook_background, 2%);
+@cell_background: darken(@notebook_background, 3.2%);
+@border_color: darken(@cell_selected_background, 31%);
+@light_border_color: darken(@cell_selected_background, 17%);
+@borderwidth : 1px;
+@fontBaseColor : black;
+
+
+
+
+
+// utilities mixins
+
+.corner-all {
+    border-radius:@corner_radius;
+}

IPython/frontend/html/notebook/templates/login.html

@@ -13,7 +13,7 @@
 
 {% block site %}
 
-<div id="main_app">
+<div id="ipython-main-app">
 
     {% if login_available %}
     <form action="{{base_project_url}}login?next={{next}}" method="post">

IPython/frontend/html/notebook/templates/logout.html

@@ -12,7 +12,7 @@
 
 {% block site %}
 
-<div id="main_app">
+<div id="ipython-main-app">
 
     {% if message %}
       {% for key in message %}

IPython/frontend/html/notebook/templates/notebook.html

@@ -16,12 +16,10 @@ window.mathjax_url = "{{mathjax_url}}";
 
 <link rel="stylesheet" href="{{ static_url("prettify/prettify.css") }}"/>
 
-<link rel="stylesheet" href="{{ static_url("css/notebook.css") }}" type="text/css" />
 <link rel="stylesheet" href="{{ static_url("css/celltoolbar.css") }}" type="text/css" />
-<link rel="stylesheet" href="{{ static_url("css/tooltip.css") }}" type="text/css" />
-<link rel="stylesheet" href="{{ static_url("css/renderedhtml.css") }}" type="text/css" />
 
-<link rel="stylesheet" href="{{ static_url("css/printnotebook.css") }}" type="text/css" media="print"/>
+{{super()}}
+
 {% endblock %}
 
 {% block params %}
@@ -31,6 +29,7 @@ data-base-project-url={{base_project_url}}
 data-base-kernel-url={{base_kernel_url}}
 data-read-only={{read_only and not logged_in}}
 data-notebook-id={{notebook_id}}
+class="notebook_app"
 
 {% endblock %}
 
@@ -65,8 +64,8 @@ data-notebook-id={{notebook_id}}
                         <li id="download_py"><a href="#">Python (.py)</a></li>
                     </ul>
                 </li>
-                <hr/>
-                <li id="print_notebook"><a href="/{{notebook_id}}/print" target="_blank">Print View</a></li>
+                <!--<hr/>
+                <li id="print_notebook"><a href="/{{notebook_id}}/print" target="_blank">Print View</a></li>-->
                 <hr/>
                 <li id="kill_and_exit"><a href="#" >Close and halt</a></li>
             </ul>
@@ -161,7 +160,7 @@ data-notebook-id={{notebook_id}}
 
 <div id="maintoolbar"></div>
 
-<div id="main_app">
+<div id="ipython-main-app">
 
     <div id="notebook_panel">
         <div id="notebook"></div>
@@ -174,7 +173,7 @@ data-notebook-id={{notebook_id}}
     </div>
 
 </div>
-<div id='tooltip' class='ipython_tooltip ui-corner-all' style='display:none'></div>
+<div id='tooltip' class='ipython_tooltip' style='display:none'></div>
 
 
 {% endblock %}
@@ -182,6 +181,8 @@ data-notebook-id={{notebook_id}}
 
 {% block script %}
 
+{{super()}}
+
 <script src="{{ static_url("codemirror/lib/codemirror.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/lib/util/loadmode.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/lib/util/multiplex.js") }}" charset="utf-8"></script>

IPython/frontend/html/notebook/templates/page.html

@@ -13,9 +13,15 @@
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
     <link rel="stylesheet" href="{{static_url("jquery/css/themes/base/jquery-ui.min.css") }}" type="text/css" />
     <link rel="stylesheet" href="{{static_url("css/boilerplate.css") }}" type="text/css" />
-    <link rel="stylesheet" href="{{static_url("css/fbm.css") }}" type="text/css" />
     <link rel="stylesheet" href="{{static_url("css/page.css") }}" type="text/css"/>
     {% block stylesheet %}
+    {% block lesscss %}
+        {% if use_less %}
+            <link rel="stylesheet/less" href="{{ static_url("less/style.less") }}" type="text/css" />
+        {% else %}
+            <link rel="stylesheet" href="{{ static_url("css/style.min.css") }}" type="text/css"/>
+        {% endif %}
+    {% endblock lesscss%}
     {% endblock %}
     <link rel="stylesheet" href="{{ static_url("css/custom.css") }}" type="text/css" />
 
@@ -58,6 +64,9 @@
 <script src="{{static_url("js/loginwidget.js") }}" type="text/javascript" charset="utf-8"></script>
 
 {% block script %}
+    {% if use_less %}
+        <script src="{{ static_url("components/less.js/dist/less-1.3.3.min.js") }}" charset="utf-8"></script>
+    {% endif %}
 {% endblock %}
 
 <script src="{{static_url("js/custom.js") }}" type="text/javascript" charset="utf-8"></script>

IPython/frontend/html/notebook/templates/projectdashboard.html

@@ -3,8 +3,10 @@
 {% block title %}IPython Dashboard{% endblock %}
 
 {% block stylesheet %}
+    {{super()}}
+    <link rel="stylesheet" href="{{static_url("css/alternateuploadform.css") }}" type="text/css" />
+    <link rel="stylesheet" href="{{static_url("css/style.min.css") }}" type="text/css" />
     <link rel="stylesheet" href="{{static_url("css/projectdashboard.css") }}" type="text/css" />
-	<link rel="stylesheet" href="{{static_url("css/alternateuploadform.css") }}" type="text/css" />
 {% endblock %}
 
 
@@ -20,7 +22,7 @@ data-read-only={{read_only}}
 
 {% block site %}
 
-<div id="main_app">
+<div id="ipython-main-app">
 
 <div id="tabs">
     <ul>
@@ -45,7 +47,13 @@ data-read-only={{read_only}}
         {% endif %}
 
         <div id="notebook_list">
-            <div id="project_name"><h2>{{project}}</h2></div>
+            <div id="project_name">
+                <ul class="breadcrumb">
+                    {% for component in project_component %}
+                        <li>{{component}} <span>/</span></li>
+                    {% endfor %}
+                </ul>
+            </div>
         </div>
     </div>
     <div id="tab2">
@@ -75,6 +83,7 @@ data-read-only={{read_only}}
 {% endblock %}
 
 {% block script %}
+    {{super()}}
     <script src="{{static_url("js/notebooklist.js") }}" type="text/javascript" charset="utf-8"></script>
     <script src="{{static_url("js/clusterlist.js") }}" type="text/javascript" charset="utf-8"></script>
     <script src="{{static_url("js/projectdashboardmain.js") }}" type="text/javascript" charset="utf-8"></script>