tooltip.css
158 lines
| 3.5 KiB
| text/css
|
CssLexer
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 | ||||
*/ | ||||
@-moz-keyframes fadeOut { | ||||
from { | ||||
opacity: 1; | ||||
} | ||||
to { | ||||
opacity: 0; | ||||
} | ||||
} | ||||
@-webkit-keyframes fadeOut { | ||||
from { | ||||
opacity: 1; | ||||
} | ||||
to { | ||||
opacity: 0; | ||||
} | ||||
} | ||||
@keyframes fadeOut { | ||||
from { | ||||
opacity: 1; | ||||
} | ||||
to { | ||||
opacity: 0; | ||||
} | ||||
} | ||||
@-moz-keyframes fadeIn { | ||||
from { | ||||
opacity: 0; | ||||
} | ||||
to { | ||||
opacity: 1; | ||||
} | ||||
} | ||||
@-webkit-keyframes fadeIn { | ||||
from { | ||||
opacity: 0; | ||||
} | ||||
to { | ||||
opacity: 1; | ||||
} | ||||
} | ||||
@keyframes fadeIn { | ||||
from { | ||||
opacity: 0; | ||||
} | ||||
to { | ||||
opacity: 1; | ||||
} | ||||
} | ||||
.tooltip a { | ||||
float: right; | ||||
} | ||||
/*properties of tooltip after "expand"*/ | ||||
.bigtooltip { | ||||
height: 30%; | ||||
} | ||||
/*properties of tooltip before "expand"*/ | ||||
.smalltooltip { | ||||
text-overflow: ellipsis; | ||||
overflow: hidden; | ||||
height: 20px; | ||||
} | ||||
.tooltipbuttons { | ||||
position: absolute; | ||||
top: 0px; | ||||
right: 0px; | ||||
} | ||||
.tooltiptext { | ||||
height: 200px; | ||||
overflow: auto; | ||||
padding-right: -10px; | ||||
} | ||||
.tooltip { | ||||
-webkit-transition: all 0.2s ease; | ||||
-moz-transition: all 0.2s ease; | ||||
-ms-transition: all 0.2s ease; | ||||
-o-transition: all 0.2s ease; | ||||
/*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*/ | ||||
-webkit-animation: fadeOut 200ms; | ||||
-moz-animation: fadeOut 200ms; | ||||
animation: fadeOut 200ms; | ||||
-webkit-animation: fadeIn 200ms; | ||||
-moz-animation: fadeIn 200ms; | ||||
animation: fadeIn 200ms; | ||||
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-color: #bbbbbb; | ||||
outline: none; | ||||
padding: 3px; | ||||
margin: 0px; | ||||
padding-left: 7px; | ||||
font-family: monospace; | ||||
min-height: 50px; | ||||
max-height: 70%; | ||||
position: absolute; | ||||
} | ||||
.pretooltiparrow { | ||||
left: 0px; | ||||
margin-left: -25px; | ||||
top: -16px; | ||||
width: 70px; | ||||
height: 16px; | ||||
overflow: hidden; | ||||
position: absolute; | ||||
} | ||||
.pretooltiparrow:before { | ||||
background-color: #f7f7f7; | ||||
border: thin silver solid ; | ||||
z-index: 10; | ||||
content: ""; | ||||
position: absolute; | ||||
left: 40px; | ||||
top: 10px; | ||||
width: 25px; | ||||
height: 25px; | ||||
-webkit-transform: rotate(45deg); | ||||
-moz-transform: rotate(45deg); | ||||
-ms-transform: rotate(45deg); | ||||
-o-transform: rotate(45deg); | ||||
} | ||||
.tooltip.hide { | ||||
-webkit-animation: fadeOut 200ms; | ||||
-moz-animation: fadeOut 200ms; | ||||
animation: fadeOut 200ms; | ||||
opacity: 0; | ||||
} | ||||