use less for tooltip

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

@@ -1,133 +1,159 b''
 /**
  * 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:1s) {
+    -webkit-transition-property: height;
+    -webkit-transition-duration: 1s;
+    -moz-transition-property: height;
+    -moz-transition-duration: 1s;
+    transition-property: height;
+    transition-duration: 1s;
+}
+
 @-moz-keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
+    from {opacity:1;}
+    to {opacity:0;}
 }
+
 @-webkit-keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
+    from {opacity:1;}
+    to {opacity:0;}
 }
+
+//@keyframes fadeOut {
+//    from {opacity:1;}
+//    to {opacity:0;}
+//}
+
 @-moz-keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+    from {opacity:0;}
+    to {opacity:1;}
 }
+
 @-webkit-keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-.ipython_tooltip a {
-  float: right;
+    from {opacity:0;}
+    to {opacity:1;}
 }
+
+//@keyframes fadeIn {
+//    from {opacity:0;}
+//    to {opacity:1;}
+//}
+
 /*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;
+    overflow: auto;
+    height: 200px;
+    .smoothheight();
 }
+
 /*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;
+.smalltooltip{
+    .smoothheight();
+    text-overflow: ellipsis;
+    overflow: hidden;
+    height:80px;
 }
-.tooltipbuttons {
-  position: absolute;
-  padding-right: 15px;
-  top: 0px;
-  right: 0px;
+
+.tooltipbuttons
+{
+    position: absolute;
+    padding-right : 15px;
+    top : 0px;
+    right:0px;
 }
-.tooltiptext {
-  /*avoid the button to overlap on some docstring*/
 
-  padding-right: 30px;
+.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;
+    max-width:700px;
+    /*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: @cell_background;
+    
+    overflow : visible;
+    border: @border_color @borderwidth solid;
+    outline: none;
+    padding: 3px;
+    margin: 0px;
+    padding-left:7px;
+    font-family: monospace;
+    min-height:50px;
+    position: absolute;
+
+    .dropshadow;
+    .corner-all;
+
+    a {
+        float:right;
+    }
+
 }
+
+
 .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;
+  background-color : @cell_background;
+  border : @borderwidth @border_color 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);
+  @theta : 45deg;
+  -webkit-transform: rotate(@theta);
+  -moz-transform:    rotate(@theta);
+  -ms-transform:     rotate(@theta);
+  -o-transform:      rotate(@theta);
 }

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

@@ -1,15 +1,16 b''
 @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%);
+@borderwidth : 1px;
 
 
 
 
 
 // utilities mixins 
 
 .corner-all {
     border-radius:@corner_radius;
 }

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

@@ -1,231 +1,231 b''
 {% extends "page.html" %}
 
 {% block stylesheet %}
 
 {% if mathjax_url %}
 <script type="text/javascript" src="{{mathjax_url}}?config=TeX-AMS_HTML-full&delayStartupUntil=configured" charset="utf-8"></script>
 {% endif %}
 <script type="text/javascript">
 // MathJax disabled, set as null to distingish from *missing* MathJax,
 // where it will be undefined, and should prompt a dialog later.
 window.mathjax_url = "{{mathjax_url}}";
 </script>
 
 <link rel="stylesheet" href="{{ static_url("codemirror/lib/codemirror.css") }}">
 <link rel="stylesheet" href="{{ static_url("codemirror/theme/ipython.css") }}">
 
 <link rel="stylesheet" href="{{ static_url("prettify/prettify.css") }}"/>
 
 <link rel="stylesheet" href="{{ static_url("css/celltoolbar.css") }}" type="text/css" />
 <link rel="stylesheet/less" href="{{ static_url("css/notebook.less") }}" type="text/css" />
 <link rel="stylesheet/less" href="{{ static_url("css/tooltip.less") }}" type="text/css" />
 <link rel="stylesheet/less" href="{{ static_url("css/renderedhtml.less") }}" type="text/css" />
 
 <link rel="stylesheet/less" href="{{ static_url("css/printnotebook.less") }}" type="text/css" media="print"/>
 {% endblock %}
 
 {% block params %}
 
 data-project={{project}}
 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}}
 
 {% endblock %}
 
 
 {% block header %}
 
 <span id="save_widget">
     <span id="notebook_name"></span>
     <span id="save_status"></span>
 </span>
 
 {% endblock %}
 
 
 {% block site %}
 
 <div id="menubar_container">
 <div id="menubar">
     <ul id="menus">
         <li><a href="#">File</a>
             <ul>
                 <li id="new_notebook"><a href="#">New</a></li>
                 <li id="open_notebook"><a href="#">Open...</a></li>
                 <hr/>
                 <li id="copy_notebook"><a href="#">Make a Copy...</a></li>
                 <li id="rename_notebook"><a href="#">Rename...</a></li>
                 <li id="save_notebook"><a href="#">Save</a></li>
                 <hr/>
                 <li><a href="#">Download as</a>
                     <ul>
                         <li id="download_ipynb"><a href="#">IPython (.ipynb)</a></li>
                         <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="kill_and_exit"><a href="#" >Close and halt</a></li>
             </ul>
         </li>
         <li><a href="#">Edit</a>
             <ul>
                 <li id="cut_cell"><a href="#">Cut Cell</a></li>
                 <li id="copy_cell"><a href="#">Copy Cell</a></li>
                 <li id="paste_cell_above" class="ui-state-disabled"><a href="#">Paste Cell Above</a></li>
                 <li id="paste_cell_below" class="ui-state-disabled"><a href="#">Paste Cell Below</a></li>
                 <li id="paste_cell_replace" class="ui-state-disabled"><a href="#">Paste Cell &amp; Replace</a></li>
                 <li id="delete_cell"><a href="#">Delete</a></li>
                 <hr/>
                 <li id="split_cell"><a href="#">Split Cell</a></li>
                 <li id="merge_cell_above"><a href="#">Merge Cell Above</a></li>
                 <li id="merge_cell_below"><a href="#">Merge Cell Below</a></li>
                 <hr/>
                 <li id="move_cell_up"><a href="#">Move Cell Up</a></li>
                 <li id="move_cell_down"><a href="#">Move Cell Down</a></li>
                 <hr/>
                 <li id="select_previous"><a href="#">Select Previous Cell</a></li>
                 <li id="select_next"><a href="#">Select Next Cell</a></li>
             </ul>
         </li>
         <li><a href="#">View</a>
             <ul>
                 <li id="toggle_header"><a href="#">Toggle Header</a></li>
                 <li id="toggle_toolbar"><a href="#">Toggle Toolbar</a></li>
             </ul>
         </li>
         <li><a href="#">Insert</a>
             <ul>
                 <li id="insert_cell_above"><a href="#">Insert Cell Above</a></li>
                 <li id="insert_cell_below"><a href="#">Insert Cell Below</a></li>
             </ul>
         </li>
         <li><a href="#">Cell</a>
             <ul>
                 <li id="run_cell"><a href="#">Run</a></li>
                 <li id="run_cell_in_place"><a href="#">Run in Place</a></li>
                 <li id="run_all_cells"><a href="#">Run All</a></li>
                 <li id="run_all_cells_above"><a href="#">Run All Above</a></li>
                 <li id="run_all_cells_below"><a href="#">Run All Below</a></li>
                 <hr/>
                 <li id="to_code"><a href="#">Code</a></li>
                 <li id="to_markdown"><a href="#">Markdown </a></li>
                 <li id="to_raw"><a href="#">Raw Text</a></li>
                 <li id="to_heading1"><a href="#">Heading 1</a></li>
                 <li id="to_heading2"><a href="#">Heading 2</a></li>
                 <li id="to_heading3"><a href="#">Heading 3</a></li>
                 <li id="to_heading4"><a href="#">Heading 4</a></li>
                 <li id="to_heading5"><a href="#">Heading 5</a></li>
                 <li id="to_heading6"><a href="#">Heading 6</a></li>
                 <hr/>
                 <li id="toggle_output"><a href="#">Toggle Current Output</a></li>
                 <li id="all_outputs"><a href="#">All Output</a>
                     <ul>
                         <li id="expand_all_output"><a href="#">Expand</a></li>
                         <li id="scroll_all_output"><a href="#">Scroll Long</a></li>
                         <li id="collapse_all_output"><a href="#">Collapse</a></li>
                         <li id="clear_all_output"><a href="#">Clear</a></li>
                     </ul>
                 </li>
             </ul>
         </li>
         <li><a href="#">Kernel</a>
             <ul>
                 <li id="int_kernel"><a href="#">Interrupt</a></li>
                 <li id="restart_kernel"><a href="#">Restart</a></li>
             </ul>
         </li>
         <li><a href="#">Help</a>
             <ul>
                 <li><a href="http://ipython.org/documentation.html" target="_blank">IPython Help</a></li>
                 <li><a href="http://ipython.org/ipython-doc/stable/interactive/htmlnotebook.html" target="_blank">Notebook Help</a></li>
                 <li id="keyboard_shortcuts"><a href="#">Keyboard Shortcuts</a></li>
                 <hr/>
                 <li><a href="http://docs.python.org" target="_blank">Python</a></li>
                 <li><a href="http://docs.scipy.org/doc/numpy/reference/" target="_blank">NumPy</a></li>
                 <li><a href="http://docs.scipy.org/doc/scipy/reference/" target="_blank">SciPy</a></li>
                 <li><a href="http://docs.sympy.org/dev/index.html" target="_blank">SymPy</a></li>
                 <li><a href="http://matplotlib.sourceforge.net/" target="_blank">Matplotlib</a></li>
             </ul>
         </li>
     </ul>
 
 </div>
     <div id="notification_area">
     </div>
 </div>
 
 
 <div id="maintoolbar"></div>
 
 <div id="main_app">
 
     <div id="notebook_panel">
         <div id="notebook"></div>
         <div id="pager_splitter"></div>
         <div id="pager_container">
             <div id='pager_button_area'>
             </div>
             <div id="pager"></div>
         </div>
     </div>
 
 </div>
-<div id='tooltip' class='ipython_tooltip corner-all' style='display:none'></div>
+<div id='tooltip' class='ipython_tooltip' style='display:none'></div>
 
 
 {% endblock %}
 
 
 {% block script %}
 
 <script src="{{ static_url("js/less/less-1.3.1.min.js") }}" charset="utf-8"></script>
 <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>
 <script src="{{ static_url("codemirror/mode/python/python.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/htmlmixed/htmlmixed.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/xml/xml.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/javascript/javascript.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/css/css.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/rst/rst.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("codemirror/mode/markdown/markdown.js") }}" charset="utf-8"></script>
 
 <script src="{{ static_url("pagedown/Markdown.Converter.js") }}" charset="utf-8"></script>
 
 <script src="{{ static_url("prettify/prettify.js") }}" charset="utf-8"></script>
 <script src="{{ static_url("dateformat/date.format.js") }}" charset="utf-8"></script>
 
 <script src="{{ static_url("js/events.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/utils.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/layoutmanager.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/mathjaxutils.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/outputarea.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/cell.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/celltoolbar.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/codecell.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/completer.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/textcell.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/kernel.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/savewidget.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/quickhelp.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/pager.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/menubar.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/toolbar.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/maintoolbar.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/notebook.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/notificationwidget.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/notificationarea.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/tooltip.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/config.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/notebookmain.js") }}" type="text/javascript" charset="utf-8"></script>
 
 <script src="{{ static_url("js/contexthint.js") }}" charset="utf-8"></script>
 
 <script src="{{ static_url("js/celltoolbarpresets/default.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/celltoolbarpresets/slideshow.js") }}" type="text/javascript" charset="utf-8"></script>
 
 {% endblock %}