diff --git a/IPython/frontend/html/notebook/static/css/tooltip.css b/IPython/frontend/html/notebook/static/css/tooltip.css index 2ec102b..f84d816 100644 --- a/IPython/frontend/html/notebook/static/css/tooltip.css +++ b/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; diff --git a/IPython/frontend/html/notebook/static/less/tooltip.less b/IPython/frontend/html/notebook/static/less/tooltip.less index c9b3ec0..8d9ee95 100644 --- a/IPython/frontend/html/notebook/static/less/tooltip.less +++ b/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;