use less for tooltip

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

@@ -3,110 +3,133 b''
  *
  * 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;
@@ -115,19 +138,22 b''
   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

@@ -3,6 +3,7 b''
 @cell_selected_background: darken(@notebook_background, 2%);
 @cell_background: darken(@notebook_background, 3.2%);
 @border_color: darken(@cell_selected_background, 10%);
+@borderwidth : 1px;
 
 
 

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

@@ -174,7 +174,7 b' data-notebook-id={{notebook_id}}'
     </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 %}