fix less css

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

@@ -16,6 +16,11 @@
  * have some strange ccs to have the scroll bar on
  * the left of the left with fix button on the top right of the tooltip
  */
+.dropshadow {
+  -moz-box-shadow: 0px 6px 10px -1px #adadad;
+  -webkit-box-shadow: 0px 6px 10px -1px #adadad;
+  box-shadow: 0px 6px 10px -1px #adadad;
+}
 @-moz-keyframes fadeOut {
   from {
     opacity: 1;
@@ -87,8 +92,10 @@
 }
 .tooltip {
   max-width: 700px;
-  border-radius: 10px 10px 10px 10px;
-  box-shadow: 3px 3px 5px #999;
+  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;
@@ -99,12 +106,6 @@
   animation: fadeIn 800ms;
   vertical-align: middle;
   background-color: #f7f7f7;
-  background-image: -webkit-linear-gradient(center bottom, #d7d7d7 13%, #d2d2d2 39%, #e3e3e3 56%, #f7f7f7 91%);
-  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(13%, #d7d7d7), color-stop(39%, #d2d2d2), color-stop(56%, #e3e3e3), color-stop(91%, #f7f7f7));
-  background-image: -moz-linear-gradient(center bottom, #d7d7d7 13%, #d2d2d2 39%, #e3e3e3 56%, #f7f7f7 91%);
-  background-image: -ms-linear-gradient(center bottom, #d7d7d7 13%, #d2d2d2 39%, #e3e3e3 56%, #f7f7f7 91%);
-  background-image: -o-linear-gradient(center bottom, #d7d7d7 13%, #d2d2d2 39%, #e3e3e3 56%, #f7f7f7 91%);
-  background-image: linear-gradient(center bottom, #d7d7d7 13%, #d2d2d2 39%, #e3e3e3 56%, #f7f7f7 91%);
   overflow: visible;
   color: #000000;
   border: #bbbbbb 1px solid;

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

@@ -32,6 +32,12 @@
 @borderwidth : 1px;
 @textColor : #000;
 
+.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;
@@ -72,25 +78,6 @@
 //    to {opacity:1;}
 //}
 
-.linearGradient(@stop1:0, @color1:#ccc, @stop2:33%, @color2:#ddd, @stop3:66%, @color3:#ccc, @stop4:100%, @color4:#ddd){ 
-  background-color:@color4;
-  background-image: -webkit-linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
-  background-image: -webkit-gradient(
-      linear,
-      left bottom,
-      left top,
-      color-stop(@stop1, @color1),
-      color-stop(@stop2, @color2),
-      color-stop(@stop3, @color3),
-      color-stop(@stop4, @color4)
-  );
-  background-image:-moz-linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
-  background-image:-ms-linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
-  background-image:-o-linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
-  background-image:linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4); 
-
-}
-
 .tooltip a {
     float:right;
 }
@@ -124,8 +111,8 @@
 
 .tooltip {
     max-width:700px;
-    border-radius: 10px 10px 10px 10px;
-    box-shadow: 3px 3px 5px #999;
+    border-radius: 4px;
+    .dropshadow;
     /*fade-in animation when inserted*/
     -webkit-animation: fadeOut 800ms;
     -moz-animation: fadeOut 800ms;
@@ -134,8 +121,8 @@
     -moz-animation: fadeIn 800ms;
     animation: fadeIn 800ms;
     vertical-align: middle;
+    background-color: @c4;
     
-    .linearGradient(13%,@c1, 39%, @c2 , 56%,@c3, 91% , @c4) ;
     overflow : visible;
     color: @textColor;
     border: @bordercolor @borderwidth solid;