tooltip.less
177 lines
| 4.0 KiB
| text/x-less
|
LessCssLexer
Matthias BUSSONNIER
|
r7148 | /** | ||
* 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 | ||||
* ../css/[samename].less file, it might not stay a less file forever, | ||||
* but as until now it is convenient to developp using less | ||||
* | ||||
* it it's a less file, don't forget to recompile it | ||||
*/ | ||||
// ** | ||||
// * Less mixins | ||||
// **/ | ||||
// Four color of the background | ||||
@c1 : rgb(215,215,215); | ||||
@c2 : rgb(210,210,210); | ||||
@c3 : rgb(227,227,227); | ||||
@c4 : rgb(247,247,247); | ||||
@bordercolor : #BBB; | ||||
@textColor : #000; | ||||
@-moz-keyframes fadeOut { | ||||
from {opacity:1;} | ||||
to {opacity:0;} | ||||
} | ||||
@-webkit-keyframes fadeOut { | ||||
from {opacity:1;} | ||||
to {opacity:0;} | ||||
} | ||||
Matthias Bussonnier
|
r7150 | //@keyframes fadeOut { | ||
// from {opacity:1;} | ||||
// to {opacity:0;} | ||||
//} | ||||
Matthias BUSSONNIER
|
r7148 | |||
@-moz-keyframes fadeIn { | ||||
from {opacity:0;} | ||||
to {opacity:1;} | ||||
} | ||||
@-webkit-keyframes fadeIn { | ||||
from {opacity:0;} | ||||
to {opacity:1;} | ||||
} | ||||
Matthias Bussonnier
|
r7150 | //@keyframes fadeIn { | ||
// from {opacity:0;} | ||||
// to {opacity:1;} | ||||
//} | ||||
Matthias BUSSONNIER
|
r7148 | |||
.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; | ||||
} | ||||
/*properties of tooltip after "expand"*/ | ||||
.bigtooltip { | ||||
Matthias Bussonnier
|
r7150 | overflow: auto; | ||
height: 200px; | ||||
Matthias BUSSONNIER
|
r7148 | } | ||
/*properties of tooltip before "expand"*/ | ||||
.smalltooltip{ | ||||
text-overflow: ellipsis; | ||||
overflow: hidden; | ||||
Matthias Bussonnier
|
r7150 | height:80px; | ||
Matthias BUSSONNIER
|
r7148 | } | ||
.tooltipbuttons | ||||
{ | ||||
position: absolute; | ||||
Matthias Bussonnier
|
r7150 | padding-right : 15px; | ||
Matthias BUSSONNIER
|
r7148 | top : 0px; | ||
right:0px; | ||||
} | ||||
.tooltiptext | ||||
{ | ||||
} | ||||
.tooltip { | ||||
Matthias Bussonnier
|
r7152 | -webkit-transition: all 0.8s ease; | ||
-moz-transition: all 0.8s ease; | ||||
-ms-transition: all 0.8s ease; | ||||
-o-transition: all 0.8s ease; | ||||
Matthias BUSSONNIER
|
r7148 | /*transition when "expand"ing tooltip */ | ||
-webkit-transition-property: height; | ||||
-webkit-transition-duration: 1s; | ||||
-moz-transition-property: height; | ||||
-moz-transition-duration: 1s; | ||||
transition-property: height; | ||||
transition-duration: 1s; | ||||
max-width:700px; | ||||
border-radius: 10px 10px 10px 10px; | ||||
box-shadow: 3px 3px 5px #999; | ||||
/*fade-in animation when inserted*/ | ||||
Matthias Bussonnier
|
r7152 | -webkit-animation: fadeOut 800ms; | ||
-moz-animation: fadeOut 800ms; | ||||
animation: fadeOut 800ms; | ||||
-webkit-animation: fadeIn 800ms; | ||||
-moz-animation: fadeIn 800ms; | ||||
animation: fadeIn 800ms; | ||||
Matthias BUSSONNIER
|
r7148 | vertical-align: middle; | ||
.linearGradient(13%,@c1, 39%, @c2 , 56%,@c3, 91% , @c4) ; | ||||
overflow : visible; | ||||
color: @textColor; | ||||
border-color: @bordercolor; | ||||
outline: none; | ||||
padding: 3px; | ||||
margin: 0px; | ||||
padding-left:7px; | ||||
font-family: monospace; | ||||
min-height:50px; | ||||
position: absolute; | ||||
} | ||||
.pretooltiparrow { | ||||
left: 0px; | ||||
margin-left: -25px; | ||||
top: -16px; | ||||
width: 70px; | ||||
height: 16px; | ||||
overflow: hidden; | ||||
position: absolute; | ||||
} | ||||
.pretooltiparrow:before { | ||||
background-color : @c4; | ||||
border : thin silver solid ; | ||||
z-index:10; | ||||
content: ""; | ||||
position: absolute; | ||||
left: 40px; | ||||
top: 10px; | ||||
width: 25px; | ||||
height: 25px; | ||||
@theta : 45deg; | ||||
-webkit-transform: rotate(@theta); | ||||
-moz-transform: rotate(@theta); | ||||
-ms-transform: rotate(@theta); | ||||
-o-transform: rotate(@theta); | ||||
} | ||||
.tooltip.hide | ||||
{ | ||||
Matthias Bussonnier
|
r7152 | -webkit-animation: fadeOut 800ms; | ||
-moz-animation: fadeOut 800ms; | ||||
animation: fadeOut 800ms; | ||||
Matthias BUSSONNIER
|
r7148 | opacity : 0; | ||
} | ||||