tooltip.css
139 lines
| 3.2 KiB
| text/css
|
CssLexer
Matthias BUSSONNIER
|
r7148 | /** | ||
* Primary styles | ||||
* | ||||
* Author: IPython Development Team | ||||
Matthias BUSSONNIER
|
r7169 | * | ||
Matthias BUSSONNIER
|
r7158 | * We'll try to get something prety, so we | ||
* 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 | ||||
*/ | ||||
Matthias BUSSONNIER
|
r7148 | @-moz-keyframes fadeOut { | ||
from { | ||||
opacity: 1; | ||||
} | ||||
to { | ||||
opacity: 0; | ||||
} | ||||
} | ||||
@-webkit-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; | ||||
} | ||||
} | ||||
.tooltip a { | ||||
float: right; | ||||
} | ||||
/*properties of tooltip after "expand"*/ | ||||
.bigtooltip { | ||||
Matthias Bussonnier
|
r7150 | overflow: auto; | ||
height: 200px; | ||||
Matthias BUSSONNIER
|
r7156 | -webkit-transition-property: height; | ||
-webkit-transition-duration: 1s; | ||||
-moz-transition-property: height; | ||||
-moz-transition-duration: 1s; | ||||
transition-property: height; | ||||
transition-duration: 1s; | ||||
Matthias BUSSONNIER
|
r7148 | } | ||
/*properties of tooltip before "expand"*/ | ||||
.smalltooltip { | ||||
Matthias BUSSONNIER
|
r7156 | -webkit-transition-property: height; | ||
-webkit-transition-duration: 1s; | ||||
-moz-transition-property: height; | ||||
-moz-transition-duration: 1s; | ||||
transition-property: height; | ||||
transition-duration: 1s; | ||||
Matthias BUSSONNIER
|
r7148 | 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; | ||||
} | ||||
Matthias BUSSONNIER
|
r7158 | .tooltiptext { | ||
/*avoid the button to overlap on some docstring*/ | ||||
padding-right: 30px; | ||||
} | ||||
Matthias BUSSONNIER
|
r7148 | .tooltip { | ||
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; | ||
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; | ||||
Matthias BUSSONNIER
|
r7155 | border: #bbbbbb 1px solid; | ||
Matthias BUSSONNIER
|
r7148 | outline: none; | ||
padding: 3px; | ||||
margin: 0px; | ||||
padding-left: 7px; | ||||
font-family: monospace; | ||||
min-height: 50px; | ||||
position: absolute; | ||||
} | ||||
.pretooltiparrow { | ||||
left: 0px; | ||||
Matthias BUSSONNIER
|
r7155 | margin: 0px; | ||
Matthias BUSSONNIER
|
r7148 | top: -16px; | ||
Matthias BUSSONNIER
|
r7155 | width: 40px; | ||
Matthias BUSSONNIER
|
r7148 | height: 16px; | ||
overflow: hidden; | ||||
position: absolute; | ||||
} | ||||
.pretooltiparrow:before { | ||||
background-color: #f7f7f7; | ||||
Matthias BUSSONNIER
|
r7155 | border: 1px #bbbbbb solid; | ||
Matthias BUSSONNIER
|
r7154 | z-index: 11; | ||
Matthias BUSSONNIER
|
r7148 | content: ""; | ||
position: absolute; | ||||
Matthias BUSSONNIER
|
r7154 | left: 15px; | ||
Matthias BUSSONNIER
|
r7148 | top: 10px; | ||
width: 25px; | ||||
height: 25px; | ||||
-webkit-transform: rotate(45deg); | ||||
-moz-transform: rotate(45deg); | ||||
-ms-transform: rotate(45deg); | ||||
-o-transform: rotate(45deg); | ||||
} | ||||
.tooltip.hide { | ||||
Matthias Bussonnier
|
r7152 | -webkit-animation: fadeOut 800ms; | ||
-moz-animation: fadeOut 800ms; | ||||
animation: fadeOut 800ms; | ||||
Matthias BUSSONNIER
|
r7148 | opacity: 0; | ||
} | ||||